How do I make a dialog button send to a link? - javascript

I just want the button to, rather than close dialog, link to another page (or both is fine too)
buttons: [
{
text: "Install",
tabIndex: -1,
width: "340",
click: function() {
$( this ).dialog( "close" );
}
}
]

Instead of
$( this ).dialog( "close" );
use
// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");
// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";

$( this ).dialog( "close" );
becomes
$( document ).get(0).href = "http://www.google.com";

Related

window.open external link opening in new tab

So I have a confirmation dialog box that opens when button is clicked, but window.open in javascript opens it in new tab. I tried lot of things like _self, _top but it doesn't work. Is there any way I can open this in same tab/page.
Here is the code:
JAVASCRIPT
$('.sample').on("click", function (e)
{
var link = this;
e.preventDefault();
$( "#ConfirmDialog" ).dialog(
{
resizable: false,
width: 300,
buttons:
{
"Yes": function()
{
window.open($(link).attr("href"));
$( this ).dialog( "close" );
},
Cancel: function()
{
$( this ).dialog( "close" );
}
}
});
});
To change the current page's url, simply set window.location to the new url
$('.sample').on("click", function (e) {
....
"Yes": function() {
window.location = $(link).attr("href")
},
....
});
I have answered in the comments, but since this is what you are looking for, I'm adding it as an answer too.

window.close() not working in Jquery modal

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.

Dialog, datapicker get id

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" );
}
}
});
});
}

closing a jquery-ui dialog one at a time

I'm having an issue with multiple jQuery UI dialogs. What I want is that I can have multiple dialogs, and a click on a button with the class ".close-modal" will only close the dialog in which that button was located. Now, first for a little background: I have a simple function in the "main" parent of the site, which will open a modal dialog by clicking on a link with the class ".modal";
In the parent
function modal( href, title ) {
var $dialog = $('<div></div>');
$dialog.html('<iframe class="modal" name="' + title + '" style="border: 0px;" src="' + href + '" width="100%" height="100%"></iframe>');
$dialog.dialog({
autoOpen: false,
modal: true,
height: 650,
width: 950,
title: title
});
$dialog.dialog( 'open' );
$(document).bind( 'close-dialog', function( ) {
$dialog.dialog( 'close' );
});
}
$('a.modal').click( function( event ) {
event.preventDefault( );
modal( $(this).attr( 'href' ), $(this).attr( 'title' ) );
}
This code works the way I want it to. To open a dialog from a dialog, I call the parent window's modal function with the correct parameters, so that multiple dialogs can be displayed within the parent:
In the dialog
( function( $ ) {
$(document).ready( function( ) {
$('a.modal').click( function( event ) {
event.preventDefault( );
parent.modal( $(this).attr( 'href' ), $(this).attr( 'title' ) );
}
/** Trigger the close-dialog event on the parent to close the current dialog. */
$('.close-dialog').click( function( ) {
parent.jQuery( parent.document ).trigger( 'close-dialog' );
});
});
})( jQuery );
So, in essence; I've defined an event on the parent window ("close-dialog"), which can be called by the code within the iframe which will call $dialog.dialog( 'close' ); This works brilliantly; I can create multiple dialogs, even from within dialogs, but the issue is that once I click a button.close-dialog, it closes all of my dialogs.
Is there any way to determine from which dialog the event was called? Or bind the event to the current dialog?
You could use jquery modal's buttons option.
<script>
$(function() {
$( ".myModals" ).dialog({
modal: true,
buttons: {
Close: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
This should do it for all your modals in one go, and the buttons it creates only apply to themselves. Hope that helps!

How to Open the dialog pop up in my Controller code

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);

Categories