I am trying to open asp.net mvc view in jquery dialog.
Here is my view from where i am trying to open dialog:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$('#my-dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true
});
$('.modal').click(function () {
$('#my-dialog').load(this.href, function () {
$(this).dialog('open');
});
return false;
});
});
</script>
<div id="my-dialog"></div>
#Html.ActionLink("Add Question", "AddQuestionInPage", new { pageID = #ViewBag.PageID },new { #class = "modal" })
But it shows this error in console:
Uncaught TypeError: undefined is not a function
It show the error on this line:
$(this).dialog('open');
What is going wrong? why dialog is undefined as i have added jquery-ui file.
Plz guide me,
Thanx
This is one of the things you will experience when you got somekind of a mismatch between the path to the jQuery library or the order of ordering the references to the libraries you got.
Take a look at this, im sure it might be helpful: Uncaught TypeError: undefined is not a function on loading jquery-min.js
Finally I managed to open view in dialog by doing following things:
In Layout file I ordered the scripts in this way:
<script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.11.js")"></script>
as Karsten suggested, thanx Karsten your answer really helped!
And i replaced the following line:
$(this).dialog('open');
with this:
$('#my-dialog').dialog();
as ZippyV suggested in comment. Thanx ZippyV it helped!
Thanx. .
Related
I want the cursor to be focused on the textbox when I load the page. I tried by adding autofocus="" but I couldn't find any difference in that.
Any help would be greatly appreciated!
#Html.TextBoxFor(
m => m.UserName,
"#xyz.com",
new { #class = "form-control input-lg", #id = "username"})
If you are ok with jquery, you can try using
<script type="text/javascript">
$(function () {
$("#username").focus();
});
</script>
You could use plain java script like this:
<script type="text/javascript">
document.getElementById("username").focus();
</script>
The autofocus attribute isn't implemented in all browsers. It's a good subset of browsers with most newer browsers having it, but not all. It is likely you were using a browser that does not support the autofocus attribute. Dive into HTML 5 has a good listing of the browser support.
<script type="text/javascript">
$(document).ready(function(){
$("#username").focus();
});
}); </script>
Im trying to insert a simple handlebars, like this, but there's so little support and the guide in the official page is so sad that I couldnt accomplish this.
<head>
<!--HANDLEBAR-->
<script type="text/x-handlebars" data-template-name="say-hello">
Hello, <b>{{name}}</b>
</script>
<!--VIEW-->
<script>
var view = Ember.View.create({
templateName: 'say-hello',
name: "Bob",
});
view.appendTo('#templateHere'); //here I try to append the view
</script>
In firebug I get the error: unable to find the template "say-hello"...........but I dont know why doesnt find it
Finally I accomplished, I write the solutions here because I think that ember need more documentation and it's worth because is very interesting (and powerful):
The problem was that I create an object of my view before defining it. The right code is this:
....
<!--HANDLEBAR-->
<script type="text/x-handlebars" data-template-name="say-hello">
Hello, <b>{{name}}</b>
</script>
<!--VIEW-->
<script>
App = Ember.Application.create();
//DEFINE VIEW
App.Myview = Ember.View.extend({
templateName: 'say-hello',
name: "Bob",
});
//CREATE VIEW>
App.myview=App.Myview.create();
console.log(App.myview.get('name'));//only for debug
//APPEND VIEW
$(function() {
App.myview.append('#templateHere');
});
</script>
</head>
<body>
<div id="templateHere"></div>
</body>
</html>
How can i load the jquery with rails. I have try in the following
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<script>
$(function () {
var $container = $('#container');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.item'
});
});
});
</script>
But i am getting an error. This is included in my html code. Not in the header. Now I come to realize when clicking on it i get the error route not set up. How can i load it the proper way.
See application.js.
By default, jquery is part of rails starting from rails 3. You dont need to include it separately.
I'm trying to build an Ajax Bootstrap Popover to display a page that contains a rating star system.
The javascript here work nice the first time.
Then I have this error:
Uncaught TypeError: Object # has no method 'popover'
I'm not really good in jQuery, but I guess it seems to be due to the ajax call, but I can't find where the problem is.
$(".myRate")
.popover({
offset: 10,
trigger: 'manual',
animate: false,
html: true,
placement: 'top',
template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
});
$('.myRate').mouseenter(popoverDisplay);
popoverDisplay = function() {
var el = $(this);
var _data = el.attr('alt');
$.ajax({
type: 'GET',
url: 'notes.php',
data: _data,
cache: false,
dataType: 'html',
success: function(data) {
el.attr('data-content', data);
el.popover('show');
}
});
}
I don't get what I am doing wrong...
Any idea ?
EDIT:
After searching, it seems that, it's the loaded pages which causes this error.
Exactly this part:
It seems that loading jquery-1.7.2.js make the bug because if I remove it, the error disapear. Problem: I can't delete it because without it jRating doesn't work anymore :/
I had this problem after running the rails twitter bootstrap generator, then switching to bootstrap-sass.
It was caused by a filename collision because boostrap-sass references bootstrap.js instead of twitter/bootstrap, which clashes with the generated file.
Just rename the generated app/assets/javascripts/bootstrap.js.coffee to something else, eg app/assets/javascripts/bootstrap_and_overrides.js.coffee, and you're good to go.
I had this problem because i was trying to use the jQuery from bootstrap while also importing jQuery from googleapis
(like it says in http://railscasts.com/episodes/205-unobtrusive-javascript)
if you're using bootstrap, you'll have jquery
i had the same problem .
you might be loading jquery AFTER loading bootstrap.js . for some reason the sequence is important
</footer>
<script src="<?php echo "http://".$_SERVER['HTTP_HOST']. $_SERVER['REQUEST_URI']."assets/bootstrap/js/jquery-1.7.1.min.js" ;?>"></script>
<script src="<?php echo "http://".$_SERVER['HTTP_HOST']. $_SERVER['REQUEST_URI']."assets/bootstrap/js/bootstrap.js" ;?>"></script>
<script type="text/javascript">
$(document).ready(function(){
create_project_form=$('form#create_project_form');
$('button#create_project_button').popover({title:'New Project',content:create_project_form});
});
</script>
</body>
</html>
loading jquery before bootstrap did the job for me . hope that helps
I had the same problem. I was loading jQuery.js twice... Narf...
You can either use boostrap.js or (bootstrap-popover.js and bootstrap-tooltip.js)
But not both because if you use both. You get Uncaught TypeError: Object # has no method 'popover'
I guess you're using rails, so it might come that assets/vendor/jquery is loaded after assets/vendor/bootstrap, because the load order is alphabetical. So you might rename the bootstrap file to fit the right loading order. I experienced that problem and it did the trick
I have a problem with loading CKEDITOR. I have made everything like described here: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Integration But anyway i'm getting an error (Google Chrome 4.x) Uncaught [CKEDITOR.editor] The instance "html" already exists.
Here is my code:
<script type="text/javascript" src="/engine/jq.js"></script>
<script type="text/javascript" src="/engine/cke/ckeditor.js"></script>
<script type="text/javascript" src="/engine/cke/adapters/jquery.js"></script>
<textarea class="jquery_ckeditor" name="html" id="html" rows="10">text</textarea>
<script type="text/javascript">
if (CKEDITOR.instances['html']) { CKEDITOR.remove(CKEDITOR.instances['html']); // with or without this line of code - rise an error }
CKEDITOR.replace('html');
</script>
check this:
if (CKEDITOR.instances['html']) {
delete CKEDITOR.instances['html']
};
CKEDITOR.replace('html');
using the jquery ckeditor adapter - I was able to reinitialize ckeditor textareas in ajax content using this function.
function initCKEditor() {
$('.wysiwyg').ckeditor(function(e){
delete CKEDITOR.instances[$(e).attr('name')];
},{
toolbar:
[
['Bold','Italic','Underline','Strike','-','NumberedList','BulletedList','-','Paste','PasteFromWord','-','Outdent','Indent','-','Link','-','Maximize','-','Source']
],
skin: 'office2003'
}
);
}
remove class='ckeditor' as it's triggering the automatic replacement system.
Same error, getting it with the jQuery adapter though. Check the class of the textarea. As far as i can tell all text areas with class 'ckeditor' are automatically converted to editors. So either don't bother setting it with javascript or change the class.
http://ckeditor.com/blog/CKEditor_for_jQuery has a fix if you are using jQuery
// remove editor from the page
$('textarea').ckeditor(function(){
this.destroy();
});
Your page has a html container, try renaming your textarea ?
<textarea class="jquery_ckeditor" name="editor" id="editor" rows="10">text</textarea>
<script type="text/javascript">
CKEDITOR.replace('editor');
</script>
The solution that works for me: in an Ajax view, having two controls
#Html.TextAreaFor(model => model.offreJob.profile, new { #class = "input_text_area_nofloat", #style = "width:590px", #id = "ck_profile" })
and
#Html.TextAreaFor(model => model.offreJob.description_job, new { #class = "input_text_area_nofloat", #style = "width:590px", #id = "ck_description" })
I use the following script:
<script>
if (CKEDITOR.instances['ck_profile']) {
delete CKEDITOR.instances['ck_profile'];
}
CKEDITOR.replace('ck_profile');
if (CKEDITOR.instances['ck_description']) {
delete CKEDITOR.instances['ck_description'];
}
CKEDITOR.replace('ck_description');
</script>
Try this, hope it works, it worked for me.
for(html in CKEDITOR.instances['html')
{
CKEDITOR.instances[html ].destroy();
}
http://dev.ckeditor.com/ticket/9862#no1
Try this, it worked for me
var editor = CKEDITOR.instances["your_textarea"];
if (editor) { editor.destroy(true); }