We Keep Coding

How can I load a pop up box with a specied URL in asp.net using JavaScript?

I want to display a pop-up box once I click the "Add Component" Link. The first time it's clicked, it will display a proper dialog box, but if I click again and again it will go that URL without the pop-up box, The pop-up box contains another view page. If I close that box, it should say "Closed", and if I click "Add Component" again the pop-up should show. Here is my JavaScript and HTML Code:
<script>
$(document).ready(function () {
$('#lnkCreate').on('click', function (e) {
var url = $(this).attr('href');
$("#dialog-edit").dialog({
title: 'Add Component',
autoOpen: false,
resizable: false,
height: 455,
width: 500,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function () {
$(this).load(url);
alert(url);
},
close: function () {
$(this).dialog('close');
alert("closed view");
}
});
});
</script>
<p style="padding-left:18em;padding-top:1em">
#Html.ActionLink("Add Component", "Create",null, new { id = "lnkCreate" })
</p>

jQuery dialog jumping to full page in browser

I have a dialog with a WebGrid that displays a list of items:
#if (Model.ItemsByLocation != null)
{
#grid.GetHtml(
tableStyle: "table",
fillEmptyRows: true,
headerStyle: "header",
footerStyle: "footer",
mode: WebGridPagerModes.All,
firstText: "<<First",
previousText: "<Prev",
nextText: "Next>",
lastText: "Last>>",
htmlAttributes: new { id = "grid"},
columns: new []
{
//grid.Column("ItemNumber", "Item"),
grid.Column(header: "Item Number", format: (item) => Html.ActionLink((string)item.ItemNumber, "ShowItem", "Inventory", new { id = item.ItemNumber.ToString()}, new {onclick = "GetItemDetails(" + item.ItemNumber.ToString() + ");"})),
grid.Column("ItemDescription","Desc"),
grid.Column("ItemSerialNumber","SN"),
grid.Column("itemLocationSite","Site"),
grid.Column("ItemLocationBuilding","Bldg"),
grid.Column("ItemLocationFloor","Flr"),
grid.Column("ItemLocationOffice","Off"),
grid.Column("ItemTypeDescription","Type"),
grid.Column("FirstName","First"),
grid.Column("LastName","Last")
})
}
else {
<p><i>No item to display</i></p>
}
This is a dialog itself from another page - no problem with this. When I click on the link the JS function is called:
function GetItemDetails(id) {
var test = id;
$.ajax({
type: 'GET',
url: '#Url.Action("ShowItem")?id=' + id,
success: function (data) {
$("#divDetails").html(data);
$("#divDetails").dialog("open");
$("#divDetails").show();
}
});
return false;
}
This responds with another dialog on top of the first dialog, but only for a second or two and then both dialog close and the data in the second dialog is displayed full page in the browser. Any ideas why this is?
This is the dialog for the details:
$(document).ready(function () {
//debugger;
$("#divDetails").dialog({
autoOpen: false,
width: 'auto',
resizable: true,
title: 'Item Details',
modal: true,
closeOnEscape: false,
show: {
effect: 'drop', direction: 'up'
},
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
}).prev("ui-dialog-titlebar").css("background", "#FF3300");
$(".dialog").click(function () {
$("#divDetails").dialog("open");
});
});
<div id="divDetails" style="display:none" class="ui-dialog-titlebar ui-widget-header">
</div>
I put some breakpoints in the code and after the second dialog is displayed the controller Index function is called. How does that happen? It does this if I remove the ShowItem from the link, But if I put that back in, it calls the ShowItem function twice. Why?

I still do not know what the problem was but if I change the webgrid column to this, it works just fine:
grid.Column(header: "Item Number", format:##item.ItemNumber.ToString()),

confirm box in jQuery

I want to create one customized confirm box in jQuery with two buttons(OK , Save)
If user press OK, two javascript functions in order should be called and executed, if user press Save just one js function should be called.
Now my question:
how can I call one js function inside the dialoge of confirm box.
this is my code
$('<div></div>').appendTo('body')
.html('<div><h6>If you Click on OK,you willaccept modifications and close the activity, click on Save means: only acceptance without closure the activity?</h6></div>')
.dialog({
modal: true, title: 'message', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
OK: function () {
f1(); // How can I call it...my question is from syntax problem
f2(); // How can I call it...my question is from syntax problem
$(this).dialog("close");
},
Save: function () {
f1(); // How can I call it...my question is from syntax problem
$(this).dialog("close");
}
}
});
as you maybe understand my problem is syntax of this calling.let me tell you f1() and f2() are two javascript function which have defined and implemented.
Thanks in advance
Now I have another Question from this dialog..I want to get response from this dialoge...Let me copy my code maybe in this way you can understand more.
$('<div></div>').appendTo('body')
.html('<div><h6><fmt:message key="message" /></h6></div>')
.dialog({
modal: true, title: 'message', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
OK: function () {
close='yes';
arg="&accept_op_id="+op_id+"&tat="+tat+"&acdd="+acdd+"&ente="+ente+"&fdd="+fdd+"&aed="+aed+"&add="+add+"&close="+close;
openSched('piano',arg,'non_sched');
},
Save: function () {
close='no';
arg="&accept_op_id="+op_id+"&tat="+tat+"&acdd="+acdd+"&ente="+ente+"&fdd="+fdd+"&aed="+aed+"&add="+add+"&close="+close;
openSched('piano',arg,'non_sched');
}
}
});
I want to say: if user clicked on OK,one variable which is called 'close' is assigned yes and then one function (openSched()) will be called with this close value....If user clicked on Save , close =no
How can I do that...do you see one syntax problem??
Thanks in advance for your help

jQuery(document).ready(function() {
jQuery("#dialog").dialog({
modal: true, title: 'message', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
OK: function () {
f1();
f2();
$(this).dialog("close");
},
Save: function () {
f1();
$(this).dialog("close");
}}
});
$('#dialog').dialog('open');
});
function f1()
{
alert("f1 called");
}
function f2()
{
alert("f2 called");
}
<div id="dialog"><h6>If you Click on OK,you willaccept modifications and close the activity, click on Save means: only acceptance without closure the activity?</h6></div>

Try like this
Working Demo
$("<div></div>").appendTo("body").html("<div title='You Title here' class='newDiv'><h6>If you Click on OK, you will accept modifications and close the activity, <br/><br/> Click on Save means: only acceptance without closure the activity?</h6></div>").find(".newDiv").dialog({
dialogClass: "no-close",
buttons: [{
text: "OK",
click: function () {
fnOnOkay();
$(this).dialog("close");
}
}, {
text: "Save",
click: function () {
fnOnSave();
$(this).dialog("close");
}
}]
});
function fnOnOkay() {
fnOne();
fnTwo();}
function fnOnSave() {
console.log("Call one on save clicked");}
function fnOne() {
console.log("Call one on OK clicked");}
function fnTwo() {
console.log("Call Two on OK clicked");}

Show Popup on Click

Following code, but it is not working.
$('#img').on('click', function () {
$("#new").dialog({
autoOpen: true,
position: { my: "center", at: "top+350", of: window },
width: 1000,
resizable: false,
title: 'Add User Form',
modal: true,
open: function () {
$(this).load('#Url.Action("_new", "Help")');
},
buttons: {
"Add User": function () {
addUserInfo();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
return false;
});
I have a partial view name _new in Help Folder Under Views.
Can someone guide me too achieve it. I am using MVC4 framework :)

You have to move the click to the anchor (a) instead of the img. The click event will never reach the img.
See jsfiddle.

wait till jquery dialog box returns

I need to open a popup window on clicking a button and used jquery dialog for this.
$(document).ready(function(){
$("#dialog-form").dialog({
autoOpen : false,
height : 300,
width : 350,
modal : true,
buttons : {
"Add" : function() {
$("#tag1").text($("#textArea").val());
$(this).dialog("close");
},
Cancel : function() {
$(this).dialog("close");
}
},
close : function() {
$("#textArea").val("");
}
});
});
function openWindow(){
$("#dialog-form").dialog("open");
statement1;
statement2;
}
<button id="add" onclick="openWindow()">Add</button>
problem over here is when i click the button dialog box is opened, but before even i enter some text in the dialog box statement1 and statement2 are getting executed and then focus is coming to the dialog box.
How can i make the statement1 and statement2 to execute only after dialog box returns?
I don't want to add the statement1 and statement2 to the "Add" function. The reason for not adding the statements in the "Add" function is because i have multiple buttons and each of these should first open the dialog box and then will execute different set of statements.

Easy fix would be to use the close callback:
$(document).ready(function () {
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function () {
$("#tag1").text($("#textArea").val());
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
$("#textArea").val("");
//statement1 -- won't fire until dialog is closed
//statement2 -- won't fire until dialog is closed
}
});
});
function openWindow() {
$("#dialog-form").dialog("open");
}
Another thing to consider would be $.Deferred

I have an example for you:
$(".selector").click(function () {
var dialog = $('<div title="Title"></div>').dialog({
open: function (event, ui) {
$.ajax({
url: 'www.google.com.br',
cache: false,
success: function (html) {
$(dialog).html(html);
},
error: function () {
$(dialog).remove();
alert("Some Error MSG");
}
});
},
close: function () {
$(dialog).remove();
},
resizable: false,
width: 500,
modal: true
});
});
In this case, the dialog is receiving the HTML result, only after it opens.

This can be achieved by the following way:-
$('#mydialog').dialog("open");
$('#mydialog').load('serverURL',server_data_variable, function() {
myfunction();
});
This will execute the function once the dialog loading is done.It will register the callback to be executed post dialog done.The variable server_data_variable is optional and is supposed to be used only if user wants to send some data otherwise it can be skipped as.well.

Solution 1: (same as solution from Aaron Blenkush)
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function () {
$("#tag1").text($("#textArea").val());
$(this).dialog("close");
//statement1 -- will fire only if "add" button is clicked
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
$("#textArea").val("");
//statement1 -- will fire after dialog is closed
}
});
Solution 2 is to make a promise:
const dialogPromise = new Promise(function (resolve, reject) {
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function () {
$("#tag1").text($("#textArea").val());
$(this).dialog("close");
resolve(true);
},
Cancel: function () {
$(this).dialog("close");
resolve(false);
}
},
close: function () {
$("#textArea").val("");
}
});
});
const addClicked = await dialogPromise;

Call callback function after "open" clause in the dialog setup.
modal: true,
resizable: false,
resize: 'auto',
close: dialogCloseFunction,
**open: function(){if(itemid) {showDailogSides(itemid);}** if(!siteParams[3]) {$(".detailSideClass").hide(); $(".addToChartinDialog").hide();}},
//hide: {effect: "fadeOut", duration: 5000}
show: { effect: "fade", duration: 1000 } //drop blind fade fold slide clip