i am trying to close the dialog box automatically after i update the button in dialogbox, but it will not close automatically, is there any proper solution to resolve this issue? this is my code.
<script>
jQuery(function () {
var jQuerydialog = jQuery("#view_dialog").dialog({
autoOpen: false,
title: 'Schedule',
height: 200,
width: 350,
resizable: true,
modal: true,
});
jQuery(".view_dialog").click(function () {
jQuerydialog.load(jQuery(this).attr('href'),
function () {
jQuerydialog.dialog('open');
});
return false;
});
});
</script>
$('#view_dialog').dialog('close'); should work fine.
change of code will work. :)
function dialogOpen(param){
//Getting Html For View
var result = jQuery.ajax({
type: "POST",
url: FULL_BASE_URL+"url"+param,
async: false
});
createDialogBoxById('view_dialog','title','350','200',result.responseText);
}
Related
I am trying to display a dialog box with just an OK button on response of an ajax call. When the user clicks OK, it should reload the page. But now page reload is immediately happening after the dialog box is popped up. It is not waiting for the user to click OK. FYI I am using Jquery Modal dialog box.
Simple browser alert() does the job for me, but I don't like the appearance of alert().
Any help is highly appreciated!
$.ajax({
url: "modules/mymod/save.php",
type: "POST",
data: $('#requestForm').serialize(),
statusCode: {404: function () {alert('page not found');}},
success: function (data) {
// alert(data);
modal({type: 'alert', title: 'Alert', text: data});
window.location.href = window.location.href;
}
});
Reference:
$.ajax({
url: "modules/mymod/save.php",
type: "POST",
data: $('#requestForm').serialize(),
statusCode: {404: function () {alert('page not found');}},
success: function (data) {
// alert(data);
modal({
type: 'alert',
title: 'Alert',
text: data,
buttons: [{
text: 'OK', //Button Text
val: 'ok', //Button Value
eKey: true, //Enter Keypress
addClass: 'btn-light-blue btn-square', //Button Classes
onClick: function() {
window.location.href = window.location.href;
}
}, ],
center: true, //Center Modal Box?
autoclose: false, //Auto Close Modal Box?
callback: null, //Callback Function after close Modal (ex: function(result){alert(result);})
onShow: function(r) {
console.log(r);
}, //After show Modal function
closeClick: true, //Close Modal on click near the box
closable: true, //If Modal is closable
theme: 'xenon', //Modal Custom Theme
animate: true, //Slide animation
background: 'rgba(0,0,0,0.35)', //Background Color, it can be null
zIndex: 1050, //z-index
buttonText: {
ok: 'OK',
yes: 'Yes',
cancel: 'Cancel'
},
template: '<div class="modal-box"><div class="modal-inner"><div class="modal-title"><a class="modal-close-btn"></a></div><div class="modal-text"></div><div class="modal-buttons"></div></div></div>',
_classes: {
box: '.modal-box',
boxInner: ".modal-inner",
title: '.modal-title',
content: '.modal-text',
buttons: '.modal-buttons',
closebtn: '.modal-close-btn'
}
});
}
});
Because your reload runs irrespectively of what is clicked. If you want to assign a callback function to the modal window:
jQuery UI dialog with boolean return - true or false
Also, there is no need to make location.href equal itself (or use the window object). location.reload() works just as well.
You can pass the dialog modal buttons attributes, each with a registered event, like this:
$.ajax({
url: "modules/mymod/save.php",
type: "POST",
data: $('#requestForm').serialize(),
statusCode: {404: function () {alert('page not found');}},
success: function (data) {
$("#dialog-confirm").dialog({
resizable: false,
height: 200,
modal: true,
buttons: {
Proceed: function() {
window.location.href = window.location.href;
},
Cancel: function() {
// Cancellation code here
}
}
});
}
});
Simple browser alert() does the job for me because alert() is an blocking call. If you omit the alert then your code is not bind with any event to check whether user clicked on a button or not, that's why the code block executes immediately and page reloads.
So bind the following code:
window.location.href = window.location.href;
inside some button click, to resolve the issue.
dont use window.location function in success.instead open the modal with ok button at success(how to do that, I think you know already) and assign some id to that button let say id="loction_btn".
then use just this
$('document').on('click','#location_btn',function(){
window.location.href = window.location.href;
});
i'm using kendo Ui and jbox, i can open many times kendo ui window it's working perfect. i was integrared jbox modal window on Kendo ui Window. if i open jbox modal window on kendo ui window it's too working perfect. if i don't close kendo ui window i can open many times jbox modal window it's working good. if i reopen kendo window i can open jbox modal but in jbox javascript content doesn't work properly. i thinks it's about Jquery but i can't solve .
Jquery 1.9.1 Version
here is my code,
my index;
var ICCANPopUp;
$(document).on("click", ".k-overlay", function () {
ICCANPopUp.close();
});
$("#LoadFormDiv").kendoWindow({
width: "750px",
height: "90%",
draggable: false,
resizable: false,
modal: true,
title: "",
visible: false,
open: function(e) {
this.wrapper.css({ top: 25 });
$("html, body").css("overflow", "hidden");
},
close: function (e) {
$("html, body").css("overflow", "");
}
});
$('#LoadFormDiv').closest(".k-window").css({
position: 'fixed',
margin: 'auto',
top: '20%'
});
var ICCANPOPUPLOCATIONBEFOREOPEN;
function ICCANPopUpShow() {
ICCANPopUp = $("#LoadFormDiv").data("kendoWindow");
ICCANPopUp.content('<div style="margin-left:40%; margin-top:20%; ">Yükleniyor...<br/><img src="/Content/images/iccan-loader.gif" width="54" height="55" alt="iMarket Ürün Yükleniyor..." /></div>');
ICCANPopUp.title("");
ICCANPopUp.refresh({
url: "/IccanApi/GetProductByID",
data: { ID: 3012 }
});
ICCANPOPUPLOCATIONBEFOREOPEN = $(window).scrollTop();
window.scrollTo(0,0);
ICCANPopUp.center().open();
}
$("#LoadFormDiv").data("kendoWindow")
.bind("close", function (e) {
$("html, body").animate({ scrollTop: ICCANPOPUPLOCATIONBEFOREOPEN });
});
kendo ui window script's
$('#FavouriteWrp').jBox('Modal', {
width: 602,
height: 495,
closeButton: true,
ajax: {
url: '/Account/Login',
data: '',
reload: true
},
onClose: function () { ResetAllLoginStuff(); }
});
Jbox Modal Window Conent Script,(if i close and reopen kendo window and after if i open jbox modal window this codes not working)
$("form").submit(function (e) {
$(".ICCAN-Register-processing").css({ "display": "block" });
var emailForRegister = $("#UserName").val();
var passwordForRegister = $("#Password").val();
var passwordValidateForRegister = $("#PasswordValidate").val();
var smsForRegister = $('#Sms').prop('checked');
var mailingForRegister = $('#Mailing').prop('checked');
var agreementForRegister = $('#agreement').prop('checked');
$.ajax({
url: '/Account/Register',
data: JSON.stringify({
UserName: emailForRegister,
Password: passwordForRegister,
PasswordValidate: passwordValidateForRegister,
Sms: smsForRegister,
Mailing: mailingForRegister,
agreement: agreementForRegister
}),
type: 'POST',
contentType: 'application/json; charset=utf-8',
success: function (response) {
if (response.isSuccess) {
alert("Kayıt Başarılı");
$(".ICCAN-Register-processing").css({ "display": "none" });
window.location.replace("/");
}
if (!response.isSuccess) {
$(".ICCAN-Register-processing").css({ "display": "none" });
$("#UserName").css({ "border": "1px solid red" });
$("#ResultText").show();
}
}
});
e.preventDefault();
e.unbind();
});
$("#ResultText").hide();
can somebody help me, thanks a lot
When i refreshed page i saw conflict jquery versiob, so i use newest version of jquery and problem is gone.
i'm using the jquery noty plugin and when someone clicks the popup, i want it to goto a URL (below) but i cant figure this out... can someone give me a quick fix.. ?
URL i want it to goto: script.php?hidenoty=true
<script type="text/javascript">
function generate(layout) {
var n = noty({
text: "<?php echo $motd?>",
type: 'warning',
dismissQueue: true,
layout: layout,
theme: 'defaultTheme',
animation: {
open: {height: 'toggle'},
close: {height: 'toggle'},
easing: 'swing',
speed: 500 // opening & closing animation speed
},
timeout: false, // delay for closing event. Set false for sticky notifications
force: false, // adds notification to the beginning of queue when set to true
modal: false,
maxVisible: 3, // you can set max visible notification for dismissQueue true option
closeWith: ['click'], // ['click', 'button', 'hover']
callback: {
onShow: function() {},
afterShow: function() {},
onClose: function() {
$.ajax({ url: 'script.php?hidenoty=true' });
},
afterClose: function() {}
},
buttons: false // an array of buttons
});
console.log('html: '+n.options.id);
}
function generateAll() {
generate('topCenter');
}
$(document).ready(function() {
generateAll();
});
</script>
Change this line...
$.ajax({ url: 'script.php?hidenoty=true' });
to this...
window.location.href = 'script.php?hidenoty=true';
ajax is used specifically to load something without changing the page, so the opposite of what you want :)
I have system that I'm modifying that uses jquery 1.5.1, which means .on doesn't exist.
I have a table and in this table I have multiple links listed in a row, and when the user clicks it opens a pop up window. I have the following code to create a pop up link.
<tr>
<td class="view_detail_label">
</td>
<td>
#Html.ActionLink(
training.Name.Name,
"AddSurvey",
new
{
employeeId = Model.Id,
trainingId = training.Id
},
new
{
#class = "addSurvey"
}
)
<div class="result" style="display:none;"></div>
</td>
</tr>
In the first function below I open a popup window and it works perfectly except when you close the popup you can not reopen it from the link again. To solve this I subscribed my event lively and used delegate and live function. But when tracking it from the console I cannot seen any output from the console statement : console.log($(this).next('.result'));.
$('.addSurvey').click(function () {
$.ajax({
url: this.href,
type: 'GET',
cache: false,
context: this,
success: function (result) {
$(this).next('.result').html(result).dialog({
autoOpen: true,
title: 'Anket',
width: 500,
height: 'auto',
modal: true
}); //end of dialog
//console.log($(this).next('.result'));
} //enf of success function
}); //end of ajax call
return false;
});
$('a.addSurvey').live( 'click', function () {
$.ajax({
url: this.href,
type: 'GET',
cache: false,
context: this,
success: function (result) {
$(this).next('.result').html(result).dialog({
autoOpen: true,
title: 'Anket',
width: 500,
height: 'auto',
modal: true
}); //end of dialog
console.log($(this).next('.result'));
} //enf of success function
}); //end of ajax call
}); //end of live
Why is this the case I used delegate method too and it does not work either. My delegate
function:
$(document).delegate(".addSurvey", "click", function () {
$.ajax({
url: this.href,
type: 'GET',
cache: false,
context: this,
success: function (result) {
$(this).next('.result').html(result).dialog({
autoOpen: true,
title: 'Anket',
width: 500,
height: 'auto',
modal: true
}); //end of dialog
console.log($(this).next('.result'));
} //enf of success function
}); //end of ajax call
});//end of delegate
Thank you for your help.
*EDIT 1 After clesing the popup window when i click it it duplicates the responses somehow it is clicked as twice and when i refresh the page and click on it and then close the responses triples. What might cause this awkward situation? *
**EDIT2 I solved the above problem by using close: function () { console.log("onClose"); $('.surveyTable').load('Home/DetailsSurvey', {id:#Model.Id}); }. By this I reload the the div table and can click on any pop up.
If you are using live then you do not need the first call. Try preventDefault() rather than return false.
$('a.addSurvey').live( 'click', function (e) {
e.preventDefault();
$.ajax({
url: this.href,
type: 'GET',
cache: false,
context: this,
success: function (result) {
$(this).next('.result').html(result).dialog({
autoOpen: true,
title: 'Anket',
width: 500,
height: 'auto',
modal: true
}); //end of dialog
console.log($(this).next('.result'));
} //enf of success function
}); //end of ajax call
}); //end of live
Change to this:
$(".addSurvey").die().live("click", function (event) { event.stopPropagation();
.......rest of code.
Hello everyone I solved my problem as follows: on close action of the popup I reload the page from the server and re render it therefor now it works like a charm. Thanks everyone for your time and attention.
$('a.addSurvey').live('click', function (e) {
var $this = $(this);
e.preventDefault();
$.ajax({
url: this.href,
type: 'GET',
cache: false,
context: this,
success: function (result) {
$(this).next('.result').html(result).dialog({
autoOpen: true,
title: 'Anket',
width: 500,
height: 'auto',
modal: true,
close: function () { console.log("onClose"); $('.surveyTable').load('Home/DetailsSurvey', {id:#Model.Id}); }
}); //end of dialog
console.log($(this).next('.result'));
}, //enf of success function
complete: function () {
console.log("Complete");
},
error: function () {
console.log("Error");
}
}); //end of ajax call
}); //end o
use .on instead of live. live is deprecated..
$('a.addSurvey').on( 'click', function () {
}
on() method is the new replacement for the bind(), live() and delegate() methods. Please use on().
I am having a hell of a time trying to figure out why the code below crashes when the dialog is closed or cancelled. It errors on lines that use ($this) in the dialog button function.
For some reason if I hard code values into addTaskDialog.html(AddTaskForm); it works. I have even hardcoded the returned ajax form and it worked... This problem happens in all browsers.
$(function ()
{
/*
* Initializes AddTask Dialog (only needs to be done once!)
*/
var $dialog = $('<div></div>').dialog(
{
width: 580,
height: 410,
resizable: false,
modal: true,
autoOpen: false,
title: 'Basic Dialog',
buttons:
{
Cancel: function ()
{
$dialog.dialog('close');
},
'Create Task': function ()
{
}
},
close: function ()
{
$dialog.dialog('close');
}
});
/*
* Click handler for dialog
*/
$('#AddTask').click(function ()
{
/* Ajax request to load form into it */
$.ajax({
type: 'Get',
url: '/Planner/Planner/LoadAddTaskForm',
dataType: 'html',
success: function (AddTaskForm)
{
$dialog.html(AddTaskForm);
$dialog.dialog('open');
}
});
});
});
});
Ok I think I know what is going on. On your success callback you are referencing $(this) in AddTaskDialogOptions the problem is that the in this scope $(this) no longer refers to $("#AddTask") so you will need to set a variable to keep a reference to $(this) like so:
var that;
$('#AddTask').click(function ()
{
that = $(this);
/* Ajax request to load form into it */
$.ajax({
type: 'Get',
url: '/Planner/Planner/LoadAddTaskForm',
dataType: 'html',
success: function (AddTaskForm)
{
var addTaskDialog = $('<div></div>');
addTaskDialog.dialog(AddTaskDialogOptions);
addTaskDialog.html(AddTaskForm);
addTaskDialog.dialog('open');
}
});
});
var AddTaskDialogOptions = {
width: 580,
height: 410,
resizable: false,
modal: true,
autoOpen: false,
title: 'Basic Dialog',
buttons:
{
Cancel: function ()
{
that.dialog('close');
},
'Create Task': function ()
{
}
},
close: function ()
{
that.dialog('destroy').remove();
}
}
I figured it out. I'm not sure where I got this code, but it was causing the problems, so I took it out and it all works fine.
close: function ()
{
$dialog.dialog('close');
}