My first call of ajax'sBlockUI is OK ( block and unblock). But in the second time the blockUI freeze. I need to refresh the page (F5) and after that the page unfreeze.
I don't undersand Why the code work in first time and not in second call
<script>
$(document).ajaxStop( setTimeout( $.unblockUI,2000));
$(document).ready(function() {
var map = new Object();
//pour chaque div possedant lattribut class
$( 'div[class]').each(function(index){}).draggable(
{
//l'evenement stop correspond fin du drag
stop: function(event, ui) {
var position = $(this).position();
map[this.id] = position;
},
// permet de delimiter la zone
containment: "#content"}).click(function() {
alert('test');
});
$('#savePosition').click(function() {
var allPosition='';
for (var m in map){
allPosition+= m +'-' + map[m].top + '-' + map[m].left+'/';
}
$.blockUI({ css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
}, message: 'Sauvegarde en cours du dispositif' });
var updateUserRoute = #{jsRoute #Application.saveDisposition() /}
callAjax(updateUserRoute,allPosition);
});
});
function callAjax(updateUserRoute,allPosition){
$.ajax({
url: updateUserRoute.url(),
type: updateUserRoute.method,
data:{ positionTables: allPosition}
});
//.done(function( msg ) {
// alert( "disposition des tables sauvegardé" );
// });
}
</script>
Related
I am using jquery block UI plugin, my requirement is to check if user is authorized user or not, here is my code
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#btnsubmit').click(function () {
$.blockUI({ css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
}
});
});
});
function ajaxAuth() {
//UserLogin.IServiceLogin.HelloWorldCC(OnSuccess, OnFailure);
var usrname = document.getElementById('txtusrname').value;
var pasd = document.getElementById('txtpassword').value;
UserLogin.IServiceLogin.GetUseCred(usrname, pasd, onSuccess, onFailed);
}
function onSuccess(result) {
setTimeout($.unblockUI, 0);
var obj = jQuery.parseJSON(result);
if (obj.name != "error" ) {
document.getElementById('labusr').value = obj.name;
document.getElementById('labpass').value = obj.passd;
document.getElementById('labkey').value = obj.key;
location.href = "DesignAPage.aspx";
} else {
$.blockUI({ message: $('#question'), css: { width: '350px'} });
// $('#ok').click(function () {
// $.unblockUI();
// return false;
// });
}
}
function onFailed(result) {
alert("failure");
}
</script>
so the problem is while i am using $.blockUI({ message: $('#question'), css: { width: '350px'} }); it just blocks the screen for a second and unblocks the screen.
Any help is greatly appreciated
The problem is being caused by setTimeout($.unblockUI, 0);. Even though you might think that calling this would cause the code to attached function to run immediately, it does not. You can verify this by running the following:
setTimeout(function() {
console.log('one');
}, 0);
console.log('two');
two is logged before one. The reasoning for this is in the way JavaScript handles timers internally. Since it is single threaded, nothing ever runs concurrently. Passing 0 milliseconds to setTimeout will just force the function to run at the first available moment. In this case that's right after $.blockUI is called.
John Resig has a nice write up on this at http://ejohn.org/blog/how-javascript-timers-work/.
try doing this in else block
else {
$.unblockUI({
onUnblock: function () {
$.blockUI({ message: $('#question'), css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
}
});
$('#ok').click(function () {
$.unblockUI();
return false;
});
}
});
}
I chopped your code up a bit but this is working.
$(document).ready(function() {
$.blockUI({ css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
}
});
onSuccess();
});
function onSuccess() {
$.unblockUI();
$.blockUI({ message: "Some message", css: { width: '350px'} });
}
I am using jquery ui 1.7.2 alongwith jquery 1.3.2
The following script is causing drop event to be triggered twice.. I tried a lot of time but not able to figure out why?
any suggestions to fix this code
$("document").ready(function () {
$(".draggable").draggable({
revert: "invalid",
helper: "clone",
connectToSortable: ".column"
});
$(".column").droppable({
accept: ".draggable",
drop: function (event, ui) {
debugger;
var ordinalNo = 1;
$(".column .contentObject").each(function () {
ordinalNo = ordinalNo + 1;
});
var objectId = guidGenerator() + '_' + ordinalNo;
var objectType;
var contentObjContent = "<div id=\"" + objectId + "\" ><h2>[<span class=\"ordinal\"></span>] ";
if (event.srcElement.id === "tableobj") {
objectType = tableSource;
}
else if (event.srcElement.id === "chartobj") {
objectType = chartSource;
}
else if (event.srcElement.id === "textobj") {
objectType = textSource;
}
$.ajax({
url: "/ContentBuilder/ContentObject",
data: {
viewObjectId: objectId,
contentObjectId: null,
contentObjectTypeId: objectType,
contentObjSourceId: null,
ordinal: ordinalNo
},
type: "POST",
success: function (data) {
contentObjContent = data;
}
});
}
});
$(".column").sortable({
connectWith: '.column',
handle: 'h2',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
update: function (event, ui) {
changeOrdinal();
if (event.srcElement.id.length <= 0) {
updateObjectOrdinals();
}
}
}).disableSelection();
$(".tablecolumn").sortable({
connectWith: '.tablecolumn',
handle: 'h2',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
update: function (event, ui) {
changeColumnOrdinal();
}
}).disableSelection();
});
becouse you use dropable AND sortable on the same selector $(".column"). I think both triggering a drop.
By default, while sorting, items are replaced (for example, if I take the third element and move it to the first, than the first and the second elements will move down)
I do not need this behaviour. I'd like elements not to change order while I finish sorting (release mouse).
I need this because I want to ask user if he want to change element or to re-order?
P.S. option tolerance have only 2 options, and they don't help in this situation.
I meant something like this (sortable list with option of replacing elements):
$(function() {
var
/**
* Sortable List, that can insert or replace elements
*/
SortableList = (function() {
var
// Configuration of Sortable list
// css classes of separator and sortable elements
// jQuery UI droppable and sortable init configuration
CONFIG = {
'confirm-message': 'Insert? Element will be removed',
'separator-class': 'sortable-separator',
'sortable-class': 'sortable-elem',
// Initialization of jQuery UI Droppable
'separators-droppable-init': {
drop: function(e, ui) {
// Insertation
var drag = ui.draggable,
drop = $(this),
a = drop.prev(),
b = drop.next();
Separators.clean();
Elements.insert(a, b, drag);
Separators.init();
},
over: function(e, ui) {
$(this).css({
'background-color': 'lightgreen'
});
},
out: function(e, ui) {
$(this).css({
'background-color': 'white'
});
}
},
'sortable-droppable-init': {
drop: function(e, ui) {
// Replace
var drag = ui.draggable,
drop = $(this);
if (Elements.replace(drop, drag)) {
Separators.init();
}
}
},
'sortable-draggable-init': {
revert: true,
start: function(e, ui) {
$(this).css({
'z-index': '999',
'cursor': 'move'
});
},
stop: function(e, ui) {
$(this).css({
'z-index': '1',
'cursor': 'default'
});
}
}
},
getSeparators = function() {
return $('.' + CONFIG['separator-class']);
},
getSortables = function() {
return $('.' + CONFIG['sortable-class']);
},
/**
* Separators Handler
*/
Separators = (function() {
var
// create separator html element
_create = function() {
return $('<div />').addClass(CONFIG['separator-class']);
},
// create all separators and insert them
createAll = function() {
getSortables().each(function() {
$(this).before(_create());
}).last().after(_create());
return Separators;
},
// remove all separators
clean = function() {
var s = getSeparators();
if (s.length) {
s.remove();
}
return Separators;
},
// init jQuery UI Droppable interface
initDroppable = function() {
getSeparators().droppable(CONFIG['separators-droppable-init']);
return Separators;
},
// Initialization of separators
init = function() {
if (getSeparators().length) {
Separators.clean();
}
return Separators.createAll().initDroppable();
};
// Return result
Separators = {
clean: clean,
createAll: createAll,
init: init,
initDroppable: initDroppable
};
return Separators;
}()),
Elements = (function() {
var
init = function() {
getSortables().droppable(CONFIG['sortable-droppable-init']).draggable(CONFIG['sortable-draggable-init']);
return Elements;
},
// replaces element A with element B
replace = function(A, B) {
if (!confirm(CONFIG['confirm-message'])) {
return false;
}
B.draggable("option", "revert", false).css({
top: 0,
left: 0
});
A.replaceWith(B);
return Elements;
},
// insert element C between elements A and B
insert = function(A, B, C) {
C.draggable("option", "revert", false).css({
top: 0,
left: 0
});
if (!A.length) {
B.before(C);
} else {
A.after(C);
}
return Elements;
},
// result to return
Elements = {
init: init,
replace: replace,
insert: insert
};
return Elements;
}()),
init = function() {
Separators.init();
Elements.init();
};
return {
init: init
};
}());
SortableList.init();
});
.sortable-elem {
width: 32px;
height: 32px;
background-color: darkred;
border: 1px solid brown;
color: white;
}
.sortable-separator {
width: 100px;
height: 16px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<link href="//code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="//code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
<div class="sortable-elem" data-order="1">1</div>
<div class="sortable-elem" data-order="2">2</div>
<div class="sortable-elem" data-order="3">3</div>
<div class="sortable-elem" data-order="4">4</div>
<div class="sortable-elem" data-order="5">5</div>
<div class="sortable-elem" data-order="6">6</div>
<div class="sortable-elem" data-order="7">7</div>
<div class="sortable-elem" data-order="8">8</div>
<div class="sortable-elem" data-order="9">9</div>
<div class="sortable-elem" data-order="10">10</div>
View on JSFiddle
As you can see, I'm using cookies to pop up modal confirmation boxes and alerts. While these have worked for a long time until very recently, I must have added something to this chunk of code and it all went haywire. The "close" function on the modal is supposed to clear the cookies so the pop up won't pop up anymore, now it is not clearing the cookies unless there is a CKEditor on the page, which puzzles me since the call for editor is AFTER the modals...
I forgot in what order I added each element - stupid, I know - and am having a hard time what could've caused the problem. I also recently wrote a bunch of mod_rewrite rules, though I'm not sure if that would change anything.
PLEASE HELP! I need this project done this week...
Here's my entire jQuery chunk:
<script type="text/javascript">
$(document).ready(function(){
$("body").prepend('<div id="topbar" class=""><\/div><div id="subnavbar" class="subnavbar-<?php echo $nav_id; ?>"><\/div>');
$("#group-left a").prepend('- ');
$("input").hint();
$("#mypassword").focus(function(){
this.type='password';
$(this).val('');
});
$("#mypassword").blur(function(){
if($(this).val() == "Password") {
this.type='text';
}
});
$("label.required").append('<span style="color: #F00; float: none;">*<\/span>');
$("#coupon_start").datepicker({dateFormat: 'yy-mm-dd'});
$("#coupon_end").datepicker({dateFormat: 'yy-mm-dd'});
$("div.blog-entry img").each(function() {
var blogImgFloat = $(this).css("float");
if(blogImgFloat == "left") {
$(this).css("margin-right", "15px");
} else if(blogImgFloat == "right") {
$(this).css("margin-left", "15px");
}
});
$.fn.tipper = function() {
if($(this).attr('alt')) {
if($(this).hasClass('height')) {
$(this).qtip({
content: $(this).attr('alt'),
position: {
corner: {
target: 'topMiddle',
tooltip: 'bottomMiddle'
}
},
style: {
name: 'cream', // Inherit from preset style
padding: 10,
tip: 'bottomMiddle',
border: {
width: 5,
radius: 5
}
},
show: 'focus',
hide: 'blur'
});
}
else {
$(this).qtip({
content: $(this).attr('alt'),
position: {
corner: {
target: 'rightMiddle',
tooltip: 'leftMiddle'
}
},
style: {
name: 'cream', // Inherit from preset style
padding: 10,
tip: 'leftMiddle',
border: {
width: 5,
radius: 5
}
},
show: 'focus',
hide: 'blur'
});
}
} else { return false; }
};
$("#content input").each( function(){ $(this).tipper(); } );
$("#content textarea").each( function(){ $(this).tipper(); } );
// calendar
$("#ajax-datepicker").datepicker({
onSelect: function(date,instance){
$(".eventdateheader").html(date);
$.ajax
({
type: "GET",
url: "/grab_events.php",
data: "date=" + $.datepicker.formatDate("yy-mm-dd", $(this).datepicker('getDate')),
success: function(result)
{
$("#eventslist").html(result);
}
});
},
minDate: '-2W',
dateFormat: 'M d, yy'
});
$("#event-datepicker").datepicker({
onSelect: function(date,instance){
window.location = "/events.php?date=" + $.datepicker.formatDate("yy-mm-dd", $(this).datepicker('getDate'));
},
minDate: '-2W',
gotoCurrent: true,
dateFormat: 'M d, yy'
});
$("#event-datepicker").datepicker('setDate', '<?php echo $selected_date; ?>');
$(".date").datepicker({
dateFormat: 'yy-mm-dd',
showOn: 'button',
buttonImage: '/images/calendar.gif',
buttonImageOnly: true
});
// regular dialog box
$("#dialog").dialog({autoOpen: false, modal: true});
$("#dialog_link").click(function(){
$("#dialog").dialog("open");
return false; });
// user context menu
$("a.user").contextMenu(
{ menu: 'HKPopUpMenu' },
function(action, el, pos) {
var username = $(el).attr('id');
if(action == "viewprofile") { window.location = "/profile.php?req="+username; }
else if(action == "viewblog") { window.location = "/profile_blog.php?req="+username; }
else if(action == "sendmsg") {
$("#sendmsg_to").val(username);
$("#sendmsg_div").dialog("open");
return false;
}
else if(action == "sendwink") {
$.cookie("modal_confirm", "<?php echo $alert_13_send_wink_frag; ?>"+username+"?");
$.cookie("confirmGo", "/sendwink_process.php?req="+username+"&nexturl=<?php echo curPageURL(); ?>");
window.location.reload();
}
else {
alert(
'Action: ' + action + '\n\n' +
'Element text: ' + thisid + '\n\n' +
'X: ' + pos.x + ' Y: ' + pos.y + ' (relative to element)\n\n' +
'X: ' + pos.docX + ' Y: ' + pos.docY+ ' (relative to document)'
);
}
}
);
// send message form
$("#sendmsg_div").dialog({
autoOpen: false,
height: 300,
width: 500,
modal: true,
buttons: {
'<?php echo $popmenu_sendmsg; ?>': function() {
//validate
var m_to = $('input[name=sendmsg_to]');
var m_subject = $('input[name=sendmsg_subject]');
var m_body = $('textarea[name=sendmsg_body]');
if (m_to.val()=='') {
m_to.addClass('highlight');
return false;
} else { m_to.removeClass('highlight'); }
if (m_subject.val()=='') {
m_subject.addClass('highlight');
return false;
} else { m_subject.removeClass('highlight'); }
if (m_body.val()=='') {
m_body.addClass('highlight');
return false;
} else { m_body.removeClass('highlight'); }
$("#sendmsg_form").submit();
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
},
close: function() {
}
});
$("a.leftmenu_compose_message").click(function(){
$("#sendmsg_div").dialog("open");
return false; });
$("a.mail").click(function(){
$("#sendmsg_to").val($(this).attr('id'));
$("#sendmsg_div").dialog("open");
return false; });
// save search form
$("#savequery_div").dialog({
autoOpen: false,
height: 220,
width: 300,
modal: true,
buttons: {
'<?php echo $popmenu_savequery; ?>': function() {
$("#savequery_form").submit();
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
},
close: function() {
}
});
$("a.savequery").click(function(){
$("#savequery_div").dialog("open");
return false; });
// confirm box
if($.cookie("modal_confirm")!==null) {
$("body").prepend('<div id="confirm" title="System Message">'+$.cookie("modal_confirm")+'<\/div>');
var g = $("#confirm");
g.html( g.html().replace(/\+/g," ") );
$("#confirm").dialog({
modal: true,
stack: true,
buttons: {
'OK': function() {
window.location = "\/" + $.cookie("confirmGo");
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
},
close: function(){
$.cookie("modal_confirm",null);
$.cookie("confirmGo",null);
$(this).remove;
}
});
}
// alert box
if($.cookie("alert")!==null) {
$("body").prepend('<div id="alert" title="System Message">'+$.cookie("alert")+'<\/div>');
var f = $("#alert");
f.html( f.html().replace(/\+/g," ") );
$("#alert").dialog({
modal: true,
stack: true,
buttons: {
'OK': function() {
$(this).dialog('close');
}
},
close: function(){
$.cookie("alert",null); $(this).remove;
}
});
}
<?php if($include_editor) { ?>
// editors
$("textarea.editor").ckeditor( {
skin: 'kama',
toolbar: 'HKEditor',
filebrowserImageUploadUrl: '/php/upload.php',
language: <?php if($_SESSION["user_lng"] == "kor") { echo "'ko'"; } else { echo "'en'"; } ?>
});
<?php } ?>
}); // END DOC.READY
I figured it out.
It wasn't working because javascript can't deal with server-relative URLs.
I fixed it by specifying the paths for cookie:
$.cookie("modal_confirm", null, { path: '/' });
etc.
I'm creating a Web interface for a table in Mysql and want to use jQuery dialog for input and edit. I have the following code to start from:
$("#content_new").dialog({
autoOpen: false,
height: 350,
width: 300,
modal: true,
buttons: {
'Create an account': function() {
alert('add this product');
},
Cancel: function() {
$(this).dialog('close');
$.validationEngine.closePrompt(".formError",true);
}
},
closeText: "Sluiten",
title: "Voeg een nieuw product toe",
open: function(ev, ui) { /* get the id and fill in the boxes */ },
close: function(ev, ui) { $.validationEngine.closePrompt(".formError",true); }
});
$("#newproduct").click(function(){
$("#content_new").dialog('open');
});
$(".editproduct").click(function(){
var test = this.id;
alert("id = " + test);
});
So when a link with the class 'editproduct' is clicked it gets the id from that product and I want it to get to the open function of my dialog.
Am I on the right track and can someone help me getting that variable there.
Thanks in advance.
Set a variable eg the_id on top of everything in your script and try this code:
$("#newproduct").click(function(){
$("#" + the_id).dialog('open');
});
$(".editproduct").click(function(){
the_id = this.id;
});
Thanks Sarfraz you were right about the variable. For others interest the full code is now:
$(document).ready(function() {
var id = 0;
$("#content_new").dialog({
autoOpen: false,
height: 350,
width: 300,
modal: true,
buttons: {
'Create an account': function() {
alert('add this product');
},
Cancel: function() {
$(this).dialog('close');
$.validationEngine.closePrompt(".formError",true);
}
},
closeText: "Sluiten",
title: "Voeg een nieuw product toe",
open: function(ev, ui) { alert(id); },
close: function(ev, ui) { $.validationEngine.closePrompt(".formError",true); }
});
$("#newproduct").click(function(){
$("#content_new").dialog('open');
});
$(".editproduct").click(function(){
id = this.id;
$("#content_new").dialog('open');
});
$("#new").validationEngine();});
And on the opening of the modal dialog box i get the correct ID.