Develop Reference

Jquery .load() works locally but not on the server

I am not quite sure what is causing the issue here. I am trying to load a view into a Jquery dialog using the .load() function. On my local machine everything works fine, but on the server the URL that ends up being created is not correct because it is adding the parameter to the URL twice.
The links are dynamic from a webgrid which is where the #item.GrouperIDForLookip comes from.
<div id="groupersDialog"></div>
<a id="GrouperField_#item.GrouperIDForLookup" class="grouper">Groupers</a>
...
<script>
$(".grouper").on("click", function () {
var id = $(this).attr("id").split("_")[1];
$('#groupersDialog').dialog({
autoOpen: true,
width: 1000,
height: 600,
resizable: true,
draggable: true,
title: "Groupers",
model: true,
show: 'slide',
closeText: 'x',
dialogClass: 'alert',
closeOnEscape: true,
open: function () {
//Load the Partial View Here using Controller and Action
$('#groupersDialog').load('/Home/_Groupers/?GroupIDForLookup=' + id);
},
close: function () {
$(this).dialog('close');
}
});
});
</script>
On my local machine everything works fine and the URL for the load works. But on the server when running it the URL that ends up being created is %2fHome%2f_Groupers%2f%3fGroupIDForLookup%3d2&GroupIDForLookup=2 which doubles the GroupIDForLookup gives me a GET 404 (page not found).
Does anyone happen to know what would cause this to happen? If you need more code just let me know.

Please update the URL in the load function in the below code.
<div id="groupersDialog"></div>
<a id="GrouperField_#item.GrouperIDForLookup" class="grouper">Groupers</a>
...
<script>
$(".grouper").on("click", function () {
var id = $(this).attr("id").split("_")[1];
$('#groupersDialog').dialog({
autoOpen: true,
width: 1000,
height: 600,
resizable: true,
draggable: true,
title: "Groupers",
model: true,
show: 'slide',
closeText: 'x',
dialogClass: 'alert',
closeOnEscape: true,
open: function () {
//Load the Partial View Here using Controller and Action
$('#groupersDialog').load(
'#URL.Action("_Groupers", "Home")?GroupIDForLookup' + id);
},
close: function () {
$(this).dialog('close');
}
});
});
</script>

Dialog Box not getting closed on clicking button

I am displaying a dialog box on opening of the page. But the problem is when I click on one of the buttons of dialog box, the dialog box window does not close. I don't know why.
Here is my code :
$(document).ready(function() {
var x=$('#loginstatus').val();
if(x==1){
$("#dialog").html("Do You Want to go for Face Recognition and Detection?");
$("#dialog").dialog({
autoOpen: true,
modal: true,
title: "Permission for Face Recognition",
width: 600,
height: 300,
resizable: false,
buttons: {
"Yes,Why Not": function() {
$(this).dialog("close");
callback("1");
},
"No,Thanx": function() {
$(this).dialog("close");
callback("2");
}
}
});
}
});
And in html I have the dialog div and other necessary inputs.
Html:
<div name="dialog" id="dialog"></div>
<input type="hidden" name="loginstatus" id="loginstatus" value="<%=firstlogin%>"/>

test this, I made some changes in button :
$(document).ready(function() {
var x=$('#loginstatus').val();
if(x==1){
$("#dialog").html("Do You Want to go for Face Recognition and Detection?");
$("#dialog").dialog({
autoOpen: true,
modal: true,
title: "Permission for Face Recognition",
width: 600,
height: 300,
resizable: false,
buttons: {
"Yes,Why Not": function() {
callback("1");
$(this).dialog("close");
},
Cancel: function() {
callback("2");
$(this).dialog("close");
}
}
});
}
});

Try
$("#dialog").dialog('close');
instead of
$(this).dialog("close");
It's not quite recommended to use this unless you are absolutely sure about the scope.

$('#dialog').click(function() {
$('.dialog').hide();
});

How to reload the src of an iframe contained jquery dialog each time the dialog is opend?

I have a dialog like this
<div id="dialog">
<iframe id="myIframe" src=""></iframe>
</div>
<button id="opener1">Open Dialog</button>
<button id="opener2">Open Dialog</button>
My script is as follows
$(function () {
$("#dialog").dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
height: 'auto',
width: 'auto',
resizable: true,
title: 'Vessels'
});
$("#opener1").click(function () {
$('#myIframe').src = 'http://www.w3schools.com';
$("#dialog").dialog("open");
return false;
});
$("#opener2").click(function () {
$('#myIframe').src = 'http://www.google.com';
$("#dialog").dialog("open");
return false;
});
});
I want to set the url of the iframe dynamically before the dialog is displayed.
I tried the above code, but not working

You can Try this
$(function () {
$("#dialog").dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
height: 'auto',
width: 'auto',
resizable: true,
title: 'Vessels',
close: function( event, ui ) {
$('#myIframe').attr('src', '');
}
});
$("#opener1").click(function () {
$('#myIframe').attr('src', 'http://www.w3schools.com');
$("#dialog").dialog("open");
return false;
});
$("#opener2").click(function () {
$('#myIframe').attr('src', 'http://www.example.com/');
$("#dialog").dialog("open");
return false;
});
});
While closing the dialog box just simply set the iframe src as empty
Demo : http://jsfiddle.net/94KUB/3/

Try this,
$('#myIframe')[0].src = 'http://www.w3schools.com';
or use attr() like,
$('#myIframe').attr('src','http://www.google.com');
Demo

You can't set the source directly. You have to change the iframe's src attribute like this:
$('#myIframe').attr('src','http://www.w3schools.com');

jQuery wont open 2 consecutive modal dialogs correctly

I am trying to get a button inside a jQuery UI modal dialog to close itself and open another modal dialog.
The problem is that the second dialog when opened will always open without the screen overlay you expect from a modal dialog, as a result you can still click on the screen behind the modal.
The jQuery is as follows
$(function () {
$("#DialogSelectEventType").dialog({
modal: true,
autoOpen: true,
width: 400
});
$("#DialogCreateToDo").dialog({
model: true,
autoOpen: false,
width: 450
});
$("#btnCreateToDo").click(function (e) {
$("#DialogSelectEventType").dialog({ close: function (e, ui) {
$("#DialogCreateToDo").dialog("open");
}}).dialog("close");
});
});
I have also tried changing the handler to
$("#btnCreateToDo").click(function (e) {
$("#DialogSelectEventType").dialog("close");
$("#DialogCreateToDo").dialog("open");
});
Which didn't help
Here is the jsFiddle
Could someone please help me understand why this might be happening? Is this a bug or have I done something wrong?

There is a typo in your code, in the second dialog definition you have "model : true", when it is supposed to be "modal : true"
$(function () {
$("#DialogSelectEventType").dialog({
modal: true,
autoOpen: true,
width: 400
});
$("#DialogCreateToDo").dialog({
modal: true,
autoOpen: false,
width: 450
});
$("#btnCreateToDo").click(function (e) {
$("#DialogSelectEventType").dialog({ close: function (e, ui) {
$("#DialogCreateToDo").dialog("open");
}}).dialog("close");
});
});
Try this: http://jsfiddle.net/tzKf7/3/
Hope it helps.

Moving the .dialog definition into the click handler will do the trick.
$("#btnCreateToDo").click(function (e) {
$("#DialogCreateToDo").dialog({
model: true,
autoOpen: true,
width: 450
});
});

modal popup javascript

Hi all I have a div in my page which represents a popup window. I have a button inside the window. On click of the button, I need to call a javascript function.(I need to do this only in client side, not in server). If the validation is successful, the popup can close. If not, it should display an alert message and STAY THERE INSTEAD OF CLOSING. I need to close my popup only if validation is successful. Else, it should display an alert and just stay. How do I make it stay? The following are my codes.
Div structure:
<script type="text/javascript">
$(function () {
$("#dialog:ui-dialog").dialog("destroy");
$('#TimeslotGroup').dialog({
autoOpen: false,
draggable: false,
resizable: false,
bgiframe: false,
modal: true,
width: 700,
title: "Timeslot Group Entry",
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
});
function showDialog(id) {
$('#' + id).dialog("open");
}
function closeDialog(id) {
$('#' + id).dialog("close");
$("#dialog:ui-dialog").dialog("destroy");
}
//getter
var modal = $(".selector").dialog("option", "modal");
//setter
$(".selector").dialog("option", "modal", true);
</script>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function (evt, args) {
$('#TimeslotGroup').dialog({
autoOpen: false,
draggable: false,
resizable: false,
bgiframe: false,
modal: true,
width: 500,
title: "Timeslot Group Entry",
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
});
</script><div id="TimeslotGroup" class="ui-widget-overlay" style="overflow-y: scroll;">

Use the beforeClose event
$( "#dialog" ).dialog({
beforeClose: function(e, ui){
if(!valid){
return false;
}
}
});