We Keep Coding

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

Script within a jQueryUI modal dialog box only works once

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

Make my new cloned div as readonly in dialog

I am sending the div content after modifications on page as a preview of that page in dialog box using clone in jquery.Now i want to make the cloned div which is previewed in dialog as readonly.How can i do that? help me
function callPreview()
{
$('#maincontainer').clone().appendTo('#previewDiv');
document.getElementById('previewDiv').disabled=true;
$.fx.speeds._default = 500;
$(function() {
$( "#previewDiv" ).dialog({
autoOpen: false,
width:600,
height:800,
autoClose: false,
show: "fold",
hide: "core",
resizable:false
});
$( "#previewBtn").click(function() {
$( "#previewDiv" ).dialog( "open" );
return false;
});
});
}

If readonly means that no input from user allowed,but still, the user can select and copy text, you can try to specify the 'readonly' attribute for each 'input' element in the div:
$("input","#previewDiv").attr('readonly', true);

$("#selector :input").attr("disabled", true);
This works for me!