I have a dialog from which one other jquery dialog is called, The issue is when i call the second popup's open function i am getting an error like "Stack overflow at line 0" in IE 8. In other browsers it works fine, I found that its because of event triggering in a lop. is there any solution for this problem
function openPopupNew() {
var popup = jQuery( "#terms_dialog_1" ).dialog({
autoOpen: false,
resizable: false,
height:150,
width:250,
modal: true,
closeOnEscape:true,
show: { effect: 'drop', direction: "up" },
position:['top','center'],
buttons: [
{
text:okButton,
click: function() {
jQuery( this ).dialog( "close" );
}
}]
});
popup.dialog( "open" );
}
openPopupNew();
Related
So I have these two dialog() calls:
$('#dialog').dialog();
$('#dialog').dialog('option', 'width', 500);
Is there a way to consolidate that down into one? I tried this without success:
$('#dialog').dialog({
option: [{ width: 500 }]
});
Here is an example from a project I am working on.
$( "#username_availability_dialog" ).dialog({
closeOnEscape: false,
resizable: false,
height:120,
width: "48%",
modal: true,
buttons: {
"OK": function() {
$( this ).dialog( "close" );
$('#dealName').val('');
$("#dealsForm [name='dealName']").focus();
return false;
},
Cancel: function() {
$( this ).dialog( "close" );
window.location.reload();
}
}
});
You don't need the square brackets or the option method when initializing the dialog widget using an object to store the options.
$('#dialog').dialog({
width: 500
});
The format you were using to set options actually REQUIRES that the widget be initialized beforehand.
jQuery-UI Dialog "width" option
Just a little preface... I am fairly new to jQuery so if something looks wrong or redundant please feel free to offer any helpful suggestions.
Now for the issue. I have 2 modals that are initiated from 2 separate links on the page.
The first modal was fairly problem free. It is a simple form that posts back to the same page. If you are wondering what the items in the "close:" section are, they are form fields that I want to clear the values on when the dialog is closed.
Once I added the second one I have had problems. This modal calls a coldfusion page into a modal to display pictures. The problems occur after opening up the second one. I can not close the second modal from the "close" button. I get the following error.
Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
I have to close it from the "x" in the upper right hand corner of the modal. After I close it, I get an error when trying to open up the first on.
Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'
Here is the code for it.
$(document).ready(function() {
$(".dig").click(function() {
//based on which we click, get the current values
var cItemName = $("#checklistItemName").attr( "title");
var c2id = $("#check2id").attr( "title");
$("#ItemName").html(cItemName);
$("#ItemID").html(c2id);
$("#objCheckItemName").val(cItemName);
$("#objCheck2ID").val(c2id);
console.log(cItemName);
console.log(c2id);
});
$( "#image-form" ).dialog({
autoOpen: false,
height: 450,
width: 650,
modal: true,
buttons: {
"Submit": function() {
$('#mForm').submit();
return true;
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
$('#defaultSectionName')
.val('');
$('#defaultSectionDesc_hidden')
.val('');
$('#Photo')
.val('');
$('#objCheck2ID')
.val('');
$('#Check21')
.val('');
},
zIndex: 500
});
The next piece of code is where I believe the problems are occurring.
$( "#image_trigger" )
.click(function() {
$( "#image-form" ).dialog( "open" );
});
var dlg=$('#register').dialog({
title: 'Case Pictures',
resizable: true,
autoOpen:false,
modal: true,
hide: 'fade',
width:650,
height:450,
buttons: {
close: function() {
$( this ).dialog( "close" );
}
},
zIndex: 500
});
$('#reg_link').click(function(e) {
e.preventDefault();
var linkurl=('assets/includes/modalPictures.cfm' + '?'
+ 'id=' + $("#objCheck2ID").val()
);
dlg.load(linkurl, function(){
dlg.dialog('open');
});
});
jQuery UI: 1.10.1
jQuery: 1.9.1
Server Side: Coldfusion
The HTML is pretty extensive. If you need to see any part of it please let me know. Thanks for your help!
Upper case?
Close: function() {
You have to initialize your jquery dialog before calling the open function.
<script type="text/javascript">
$(document).ready(function () {
initializeDialog();
});
</script>
And change your js file to have the dialog code in initializeDialog() function.
function initializeDialog(){
$("#your-dialog-id").dialog({
autoOpen: false,
buttons: {
"Cancel": function() {
$(this).dialog("close");
}
},
modal: true,
resizable: false,
width: 600px,
height: 400px
});
}
Thanks #bpjoshi
I have written this code but it is not working.
$("#dialog-confirm").text("Do you want to submit the new vendor for approval?");
$( "#dialog-confirm" ).dialog({
resizable: true,
title:"Submit",
height:170,
zIndex:99999,
modal: true,
position: "center",
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
return false;
},
"No": function() {
$( this ).dialog( "close" );
return false;
}
}
});
Please help.
I must use answer,as i dont have permission to comment yet. Your code doesnt look bad,and if you put it to jsfiddle it actually works (at least in chrome). Are you missing reference to jquery or jquery-ui library?
As I said in a past post, I'm a JavaScript newbie, and now learned some JQuery.
Briefing:
I need to create a dialog box that triggers when someone clicks on Cancel, and has (as text or value)"Are you sure you want to exit?", with two buttons: "Yes, I want to leave" and "No, I want to stay on this page". The redirect part from the "I want to leave" button will figure it out later.
Problem: I want to make the buttons to be autoSizable with the width option (in other words, width:auto and height: (number)px, but I can't figure it out :/
This is my code ->
$(document).ready (function(){
var $dialog = $('<div></div>');
$(".selector").dialog({ modal:true });
var $popUp = $('#btnCancel').one('click', function () {
$dialog
.html('All changes will not be saved')
.dialog({
title: 'Are you sure you want to exit?',
resizable: false,
modal: true,
closeOnEscape: true,
buttons: {
"Yes, I want to leave": function() {
$( this ).dialog( "close" );
},
"No, I want to stay on this page": function() {
$( this ).dialog( "close" );
}
}
});
});
$popUp.click(function () {
$dialog.dialog('open');
return false;
});
});
I tried changing the buttons part for this piece of code ->
buttons: [
{ text: "Exit", 'class':'exit-button', resizable: true, click: function () { $(this).dialog("close"); } },
{ text: "Go back", 'class': 'go-back-button', resizable: true, click: function () { $(this).dialog("close"); } }
]
But in this last case, it creates two buttons with the value of "0" and "1", and have no onclick event.
What should I do?
If you give the buttons an id when you create them you can style them with CSS, including giving them a height and width.
Example - http://jsfiddle.net/tj_vantoll/ckhG6/2/
I'm using jquery to open a dialog containing an iframe (don't ask!). I want to submit the form in the iframe on closing the dialog but it isn't working.
I'm probably making a simple error (I'm quite new to jquery) but this problem has been driving me round the bend.
Here is my code:
$(function() {
$( "#iframe" ).dialog({
modal: true,
autoOpen: false,
height: 500,
width: 700,
buttons: {
"Save and close": function() {
$( "#iframe").contents().find("#contentform").submit();
$( "#iframe" ).dialog( "close" );
},
Cancel: function() {
$( "#iframe" ).dialog( "close" );
}
}
});
$( "#openProfile" ).click(function() {
$( "#iframe" ).dialog( "open" );
$('#iframe').attr('src','file.asp');
return false;
});
});
However, if I do this instead of submitting the form:
"Save and close": function() {
var myformvalue = $( "#iframe").contents().find("#formfield").val();
alert(myformvalue);
$( "#iframe" ).dialog( "close" );
}
...it returns the correct value so I know it is recognising my form and its values.
Thanks in advance for your help.
I think you are running up against the jQuery V1.10(/9?) issue where they changed it so that the dialog container is moved out of the DOM, so you don't end up getting postbacks from the page in the iFrame. Reference this: https://stackoverflow.com/a/24663205/3334255 and An ASP.NET button click event is not firing