I am trying to use a dialogue box modal for displaying terms and condition on my webpage. But at button disagree the webpage doesnot close while calling function window.close. I want to close the recent page after clicking the button disagree
Below pasted is the sample code I am having problem at.
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:600,
width:400,
modal: true,
buttons: {
'Agree': function() {
$( this ).dialog( window.location.assign('../mdv/main.php') );
},
'Disagree': function() {
$( this ).dialog( window.close() );
}
}
});
});
</script>
Thank you in advance.
You do it like this:
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:600,
width:400,
modal: true,
buttons: {
'Agree': function() {
$( this ).dialog( window.location.assign('../mdv/main.php') );
},
'Disagree': function() {
$( this ).dialog("close");
}
}
});
});
</script>
You can either close the dialog itself using the code above or you can close the window if it's a popup window opened previously via JavaScript.
In which case you'll need the reference of that to invoke the close method.
However you can't close an entire webpage/tab with JavaScript which is a javaScript limitation. As I mentioned, you can only close it if it was previously opened with JavaScript.
Related
I need help on a small javascript portion of my website assignment for class, filling in the blanks:
In the script section of your contact.html page, inside your document ready function but outside your submit function) add the following code to turn the dialog div (above) into a jQuery dialog box.
$(_______).dialog({
autoOpen: _____________,
modal: ________,
width: ________,
buttons: {
"_______": function() {
$(this).dialog("close");
}
}
});
Note, this is just the code you are given in the demos for creating a dialog box. I have added several blanks to the code that you will need to set as follows:
The dialog function needs to be called for the element with the id of dialog.
It should not auto open
It should be modal
It should have a width set that is less than 600 pixels
The button name should be OK or Accept or something like that.
Although this not the right forum to ask these kind of questions, here is the answer for your question.
$("#DivIdWhichWillBecomeADialog").dialog({
autoOpen: false,
modal: true,
width: 500px,
buttons: {
"OK": function() {
$(this).dialog("close");
}
}
});
$(function(){
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 500px,
buttons: {
"OK": function() {
$(this).dialog("close");
}
}
});
Here is your answer:
$(function() {
$("#dialogDivId" ).dialog({
autoOpen: false,
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
},
width:550
});
});
I am somewhat new to javascript and need to integrate couple plugins for one project. Is there a way to get customer_id (that was gotten when the dialog window was opened, and suggested by autocomplete) into "Create new job" button location.
I want to close first dialog after user clicks "Create new job" and then open new dialog window, but I want to pass customer_id from the first dialog window into second dialog window. There might be some dialog and autocomplete interaction that I might not understand, I just can't get customer_id before I call new_job() function.
$(function() {
$( "#dialog-name" ).dialog({
autoOpen: false,
})});
function customer_funct(){
$( "#dialog-name" ).dialog( "open" )
$(function() {
var name = $( "#name" );
$( "#name" ).autocomplete({
source: "suggest_name.php",
minLength: 2,
select: function( event, ui ) {
var customer_id = ui.item.customer_id;
// I am able to get customer_id here,
//now I need to pass it to the function below.
}
});
$( "#dialog-name" ).dialog({
autoOpen: false,
height: 300,
width: 500,
modal: true,
buttons: {
"Create new job": function() {
$( this ).dialog( "close" );
cust_name = (name.val());
// is there any way to get "customer_id" at this location
// before I call new_job() function after the user selects customer
// from the database and clicks "Create new job"?
new_job(customer_id, cust_name);
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
By default the select event ui parameter only contains a "label" and "value" property
JQuery UI Autocomplete Success Event
In order to access a custom property you would need to explicitly add it after you retrieve your data via an ajax call. Similar to this post.
I guess I answer the question myself after some thinking. If someone else is working on jQuery autocomplete and dialog interaction, and if you need to open the new dialog window (in new_job(customer_id))with the id value from the previous dialog window and close that previous dialog window on success:
$(function() {
$( "#dialog-name" ).dialog({
autoOpen: false,
})});
function customer_funct(){
$( "#dialog-name" ).dialog( "open" )
$(function() {
var name = $( "#name" );
$( "#name" ).autocomplete({
source: "suggest_name.php",
minLength: 2,
select: function( event, ui ) {
var customer_id = ui.item.customer_id;
new_job(customer_id);
$(this).val(''); return false;
}
});
$( "#dialog-name" ).dialog({
autoOpen: false,
height: 300,
width: 500,
modal: true,
buttons: {
"Create new job": function() {
alert('Please select customer or click "Add New" customer');
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
}
I have a table that, when any row is clicked, launches a jQueryUI modal dialog box to allow users to edit that record. I use the following script which seems to work, successfully loading the relevant record's details in using AJAX:
$("#datatbl tr").bind('click', function() {
var url = 'item_edit.asp?id='+$(this).attr("data-myid");
var dialog = $('<div style="display:hidden" title="Record details:"></div>').appendTo('body');
// load remote content
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog({
height: 440,
width: 550,
autoOpen: false,
modal: true,
buttons: {
"Update this record": function() {
$('#editform').submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
dialog.dialog('open');
}
);
//prevent the browser to follow the link
return false;
});
It works ok the first time I click on a record, but if I click cancel and try to edit another record, the dialog box does appear (with the correct record details) however, no scripts within the dialog box work - eg: there's a jqueryUI datepicker input and some validation.
There are no javascript errors and, from my limited understanding of FireBug, I can't spot anything going wrong so I would appreciate some advice how to proceed, thanks!
EDIT: Argh! Sometimes, it takes something like typing it out here to spot the obvious. I just realised that the DIV created for the dialog box doesn't get destroyed when the box closes. I've added a line to do this and it now works. Thanks for listening. :)
For future reference, I added an ID to the DIV created in 'var dialog' and removed it in the Cancel function:
Cancel: function() {
$( this ).dialog( "close" );
$('#dialogbox').remove();
}
I'd still appreciate if anybody suggests a better way to handle this behaviour.
I fixed it: the DIV created for the dialog box doesn't get destroyed when the box closes.
I added an ID to the DIV created in 'var dialog' and removed the DIV in the Cancel function:
Cancel: function() {
$( this ).dialog( "close" );
$('#dialogbox').remove();
}
You can create the dialog at one time only, not on every load of its content, just set the autoOpen to false.
<div id="dialog">
<div id="content" style="display:hidden" title="Record details:"></div>
</div>
$('#dialog').dialog({
height: 440,
width: 550,
autoOpen: false,
modal: true,
buttons: {
"Update this record": function() {
$('#editform').submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
$("#datatbl tr").bind('click', function() {
var url = 'item_edit.asp?id='+$(this).attr("data-myid");
// load remote content
$('#content').load(url);
$('#dialog').dialog('open');
return false;
}};
I am added div content into the dialog box using jquery.I am using the same div content to display in my page.Now i want to decrease the size of content by percentage which i am pushing in dialog.But it should apply only for the content of dialog not for the content on my page.So how can i do that using jquery?help me
$(function() {
$( "#maincontainer" ).dialog({
autoOpen: false,
width:50%,
height:400,
autoClose: false,
show: "fold",
hide: "core"
});
$( "#previewBtn").click(function() {
$( "#maincontainer" ).dialog( "open" );
return false;
});
});
you 'height:auto' property; this may work
I have this div in my master page.
<div id="UICancelChanges" title="Are you sure?" style="display: none;">
Your changes have not been saved. Are you sure you want to CANCEL ?
</div>
On click I am just opening Jquery dialog popup window..
CancelEdit = function (accountId) {
$("#UICancelChanges").dialog({
resizable: true,
height: 140,
width: 500,
modal: true,
buttons: {
"Yes": function () {
$(this).dialog("close");
},
"No": function () {
$(this).dialog("close");
}
}
});
return false;
};
Is there any way that I can change the Title of this Div popup dynamically? using same code I need to change the title dynamically?
How to open my popup window in the controller code?something like this?
return new JavaScriptResult() { Script = "alert('SubCategory Successfully Added. Thank You.'); window.location='/ObnCategory/Index';" };
Instead of alert i need to open the popup window.
Thanks
call this before you display the dialog
initialise:
$( "#UICancelChanges" ).dialog({ title: 'Dialog Title' });
to set the new title do
$( "#UICancelChanges" ).dialog( "option", "title", 'New Dialog Title' );
to get the title
var title = $( "#UICancelChanges" ).dialog( "option", "title" );
for more help on the properties visit http://jqueryui.com/demos/dialog/#option-title
Per the jQuery UI website documentation:
$( ".selector" ).dialog( "option", "title", 'Dialog Title' );
you can use this:
$("span.ui-dialog-title").text(anything);