String contains an invalid character on jquery-ui dialog - javascript

Never happen to me when making a dialog with jquery-ui. I have a div and when I make it a dialog with .dialog I get this error
[Exception... "String contains an invalid character" code: "5" nsresult: "0x80530005 (NS_ERROR_DOM_INVALID_CHARACTER_ERR)" location: "http://localhost/include/jquery-1.5.1.min.js Line: 16"] { constructor=DOMException, code=5, more...}
I have jquery 1.5.1 with UI 1.8.13 custom with all the plugin inside.
This is the code for the dialog in document ready
$("#dialog").dialog({
bgiframe: true,
height: 200,
width: 150,
modal: false,
show: 'blind',
hide: 'blind',
resizable: false,
position: [270,150],
autoOpen: false,
zIndex: 997,
buttons: {
"Reset": function() {
}
}
});
and this is the div
<div id="dialog">some text</div>

I am experiencing the exact same problem only difference is that that in my code the whole options is coming from an JSON encoded server response using $.getJson:
$.getJSON(
'/get-dialog',
function(r){
$('<div>' + r.content + '</div>').dialog(r.options);
}
);
At the moment I added a key called buttons to the r.options object this exact same error appeared.
So the response (r) basicly looks like this:
content
"<form action="/editor">...</form>"
options
resizable false
width 600
modal true
buttons
Ok "function(){alert('test')}"
Removing the buttons from the r.options makes the error message go away. I tried several different key / values for the buttons but none of that seems to matter.
Using jQuery UI version 1.8.16 and jQuery version 1.6.2 .
After reading some further I found out that we are both making the same mistake. If you look at the jQuery UI Dialog documentation it gives the following example:
$( ".selector" ).dialog({ buttons: [
{
text: "Ok",
click: function() { $(this).dialog("close"); }
}
] });
(Source: http://jqueryui.com/demos/dialog/)
So you shouldn't be using key / value pairs but a sub array containing the keys text and click.
Since we both where doing this wrong (and I've found others with the same problem) I'm guessing that this has been changed over some version in jQuery UI. I am not sure when it was changed though.
So in your case the correct code would be:
$("#dialog").dialog({
bgiframe: true,
height: 200,
width: 150,
modal: false,
show: 'blind',
hide: 'blind',
resizable: false,
position: [270,150],
autoOpen: false,
zIndex: 997,
buttons: [
{
text: "Reset",
click: function() { }
}
]
});

Related

How to resue a jquery dialgue in asp.net

I have jquery shown below for a jquery dialogue.Here div idTestForm is used as popup window.I want to reuse it for any number of Div's coming under any pages.If that is the case first step i will do is i will create separate .js file i will add this script.But i don't know how to change code in order to make it for any kind of Div's ie, how to pass div from any pages??etc
<script type="text/javascript">
function showBscDetails() {
$("#idTestForm").dialog({
open: function () {
$(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error");
},
title: 'Leaf Details',
appendTo: "form",
modal: true,
draggable: true,
resizable: true,
show: 'blind',
hide: 'blind',
width: 1100,
height: 600
}).prev(".ui-dialog-titlebar").css("background", "#6A7667");
$("#idTestForm").on('dialogclose', function (event) {
location.reload(true);
});
}
EDIT
As of now i am calling this function from scriptmanager.registerstartupscript from code behind ie c# file

Strange jQuery dialog behaivor in Chrome. Working in IE but not in Chrome

I hava a dialog but it is not working properly in Chrome but it does in IE.
I am working in this beta page:
http://www.parlamentoabierto.mx/
You can see the malfunction if you go to the map and click on it.
The modal background is not fully disappearing.
dialog = $("#modal-mapa");
console.log(dialog);
dialog.dialog({
autoOpen: false,
height: 400,
width: 700,
modal: true,
draggable: false,
resizable: false,
dialogClass: 'ventanaModal',
open: function(event, ui) { console.log(dialog.dialog('option','position')); $('.ui-widget-overlay').bind('click', function () { $(this).siblings('.ui-dialog').find('.ui-dialog-content').dialog('close'); }); }
});
My guess can be that the version of the jQuery is not the best but that wont be easy to correct.

jQuery Dialog Popup showing, but not popping up

I have a Login Control I'd like to popup. The control is rendering, in a UI-dialog box even, but it's rendering on the page itself, not in a dialog popup. This is my first project using jQuery UI dialogs, but I haven't had a problem in other locations.
Because my access check is all code side I have attempted to simply the issue with
autoOpen: true,
Here is the jQuery:
function OpenLoginDialog() {
$("#divLoginOpen").dialog({
autoOpen: true;
appendTo: "#divSurveyMainPage",
modal: true,
dialogClass: "no-close",
width: 650,
height: 400,
title: "Login Please",
show: {
effect: "size",
duration: 800
},
hide: {
effect: "clip",
duration: 800
},
closeOnEscape: false
}).css('z-index', '1005');
return false;
}
My JSfiddle (below) has the HTML included, I've also moved the control HTML into the div where it belongs.
http://jsfiddle.net/p10bcxuq/
Please help! Thanks!
Actual Example: http://www.codelogically.com/Forms/Surveys/Surveys.aspx
I have updated your fiddle here - it had a lot of server side stuff which needed to be removed. You also need an opener.
$( "#opener" ).click(function() {
OpenLoginDialog();
});

jquery dialog too many buttons

here is my code with jquery ui:
jQuery("#nodeliverydate").dialog({
resizable:false,
draggable:false,
modal:false,
buttons:[{text:"Close",click:function(){jQuery(this).dialog("close");}}]
});
It is a very simple code that using jquery dialog as an alert box. I defined one button to close the dialog. However, it runs in a very odd way that the dialog will contain many buttons, and the text on the buttons are all function names such as "each","all","clone","select","size", etc. And after I close it, if the dialog shows again, it will be normal. Does anyone have any idea about why this happens?
jQuery("#nodeliverydate").dialog({
modal: true, title: 'Delete msg', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
Yes: function () {
// $(obj).removeAttr('onclick');
// $(obj).parents('.Parent').remove();
$(this).dialog("close");
},
No: function () {
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
This work pretty well: Yes or No confirm box using jQuery

Need to display & as it is in jQuery dialog title, but it is getting converted to &

I need to display & as it is in Jquery dialog box's title bar but it is getting converted to &. So, the idea is to display the value as it is in dialog box title. it is working fine for everything but when I am using & or &apos; then it is getting converted to & or ' respectively. Below is my code:
var name = '&'
$('#testdialog')
.dialog(
{
title: name,
autoOpen: false,
width: 900,
height: 400,
scrollable: true,
draggable: true,
modal: true,
resizable: false,
open: function (event, ui) {
jQuery.ajaxSetup({ cache: false });
callTest();
},
close: function (event, ui) {
jQuery.ajaxSetup({ cache: false });
$('#testdialog').html('');
},
buttons: {
Ok: function () {
$(this).dialog('close');
}
}
});$('#testdialog').dialog('open');
I want to display the value of name variable as it is. I tried keeping the value in a div and used $("#divID").html() in title attribute but it did not work. Could you please help me on this?
Update your variable to the following and you should be good to go:
var name = '&amp;'
For &apos; use:
var name = '&apos;'

Categories