Develop Reference

Triggering event on clicking OK button in Jquery Modal dialog box

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

Dialog does not do autoposition

I use dialog from jQuery UI. On my website, content of the dialog is changing dynamically (custom autocomplete of typed text). I already set css max-height: 90%; on dialog, so on a long content, dialog should be fully visible. But, when dynamic content as automplete is generated, dialog is resized, but still in same position, so 40% of content is not visible, it os out of screen. How can I fix that, when long content is generated, dialog will be autpositioned to the middle of screen?
EDIT 1:
Here is litle part of code from my website:
$.ajax({
cache: false,
type: 'GET',
'url': URL_SAVE.expandVariables({}, {
'pres': self
}),
success: function(data) {
var label = $('<label>Open file:<label>').appendTo(dialogElement);
dt = data;
input = $('<input type="text" />').appendTo(dialogElement).autocomplete({
source: data,
autoFocus: true,
minLength: 0
});
dialog.open();
}
});
Here is demo, what is so similar to original jsFiddle
EDIT 2:
This is initialization code for dialog:
var dialogElement = $('<div></div>'),
input, dt, self = {
serverEditor: server('editor')
}, dialog = new Dialog(dialogElement, 'Open', {
'saveable': 'Open',
'width': 400,
'saveOnlyIf': function() {
return dt.has(input.val());
},
'ifNotSaved': function() {
alert('Please choose correct file name!');
}
}).on('save', function() {
$.ajax({
'type': 'GET',
'url': URL_SAVE.expandVariables({}, {
'pres': self
}) + input.val(),
'success': function(data) {
Presentation.unserialize(data);
}
});
});

X-editable: close editing area on validation failure

What I have:
Multiple comments in some page. Each user can modify all his comments.
$.each(comments, function() {
this.editable({
type: 'textarea',
mode: 'inline',
onblur: 'submit',
showbuttons: false,
inputclass: 'edit-comments-text-input',
validate: function(value) {
if (!value.trim()) {
return 'Can not be empty!'; //DON'T CLOSE THE EDITABLE AREA!!!
}
},
success: function(response, newValue){
comment.text = newValue.trim();
});
});
What a problem:
If user input an empty string, validation fails. BUT the editable area won't be closed, so user can move on and edit the next comment, with still open editing area for the previous.
Question:
How to close editing text area on validation failure?

I read some source code, and I got it sorted.
The important line is:
$('.editable-open').editableContainer('hide', 'cancel');
so in the example above this would be:
$.each(comments, function() {
this.editable({
type: 'textarea',
mode: 'inline',
onblur: 'submit',
showbuttons: false,
inputclass: 'edit-comments-text-input',
validate: function(value) {
if (!value.trim()) {
$('.editable-open').editableContainer('hide', 'cancel');
return 'Can not be empty!'; //DOES NOW CLOSE THE EDITABLE AREA!!!
}
},
success: function(response, newValue){
comment.text = newValue.trim();
});
});

zclip not work in jquery ui inactive tab

I am using zclip in my asp.net webpage on jQuery UI dialog in jQuery UI tab. It works great in first tab which is active but it doesn't work when I add it to second tab and click second tab and clip copy button.
my markup is below:
<input type="text" id="txtCallStatus" class="disabled"
readonly="readonly" value="NOT SET" />
Copy status
Js code is below:
$.ajax({
type: "POST",
dataType: "json",
url: "/recording/verifyUser",
data: {
ID: $("#ID").val(),
PSSWD: $("#PSSWD").val(),
ACCID: $("#ACCID").val(),
PASSWDINT: $("#PASSWDINT").val()
},
success: function (data) {
if (data == "success") {
$('#dialog-AddCallRecording').dialog({ closeOnEscape: false });
$(".ui-dialog-titlebar").hide();
$("#dialog-AddCallRecording").dialog({
dialogClass: 'transparent',
modal: true
});
$("#dialog-AddCallRecording").dialog("open");
// The link with ID "copy-description" will copy
// the text of the paragraph with ID "description"
$('a#copy-dynamic').zclip({
path: '../../Content/Zclip/ZeroClipboard.swf',
copy: function () { return $('input#txtCallStatus').val(); }
});
// The link with ID "copy-dynamic" will copy the current value
// of a dynamically changing input with the ID "dynamic"
}
else {
$("#dialog-user-login").dialog('option', 'position', 'center');
$("#dialog-user-login").dialog("open");
}
}
});
In success, after dialogue is open, I am initializing the zclip.
Please suggest solution to it. Thanks

Tooltip script. Need to correct code

$(function() {
$('.challenge').tooltip({html: true, trigger: 'hover'});
$('.challenge').mouseover(function(){
var that = $(this);
var ajaxQueue = $({
url: "<?=base_url();?>/ajax/challenge_tip",
type: 'POST',
cache: true,
data: {
'idd': $(this).attr("rel"),
},
dataType: 'json',
success: function(challenge_j) {
that.tooltip('hide')
.attr('data-original-title', challenge_j)
.tooltip('fixTitle')
.tooltip('show');
}
});
$.ajaxQueue = function(ajaxOpts) {
var oldComplete = ajaxOpts.complete;
ajaxQueue.queue(function(next) {
ajaxOpts.complete = function() {
if (oldComplete) oldComplete.apply(this, arguments);
next();
};
$.ajax(ajaxOpts);
});
};
});
});
it's my first experience with js and i need some help. for tooltips i use bootstrap tooltips.
when cursor hover on link, script send post data to controller and receive callback data. in the first hover script receives the data, but tooltip doesn't pop up, only the second hover. how i can fix it?
and one more question. can script will send the request only the first mouse hover, and the following hover will use the information from the cache?
and sorry my english ;D

It is hard to test cross domain
Here is what I THINK you need
$(function() {
$('.challenge').tooltip({html: true, trigger: 'hover'});
$('.challenge').mouseover(function(){
var that = $(this);
$.ajax({
url: "<?=base_url();?>/ajax/challenge_tip",
type: 'POST',
cache: true,
data: {
'idd': $(this).attr("rel"),
},
dataType: 'json',
success: function(challenge_j) {
that.tooltip('hide')
.attr('data-original-title', challenge_j)
.tooltip('fixTitle')
.tooltip('show');
}
});
});
});

Create flag for ajax query.
var isTooltipTextEmpty = true;
$('.challenge').mouseover(function(){
if(isTooltipTextEmpty) {
...add ajax query here)
}
}
And you need to trigger tooltip show event, when ajax query is ready like this
.success(data) {
$('.challenge').show();
isTooltipTextEmpty = false; //prevents multiple ajax queries
}
See more here: Bootstrap Tooltip