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.
Related
Not sure how to pass along a bool to my (working) C# method DeleteTestuser. I've Googled the heck out of this but mileage varies with all kinds of pitfalls, i.e. old information, bad syntax.
Rather than passing confirm as false, below, I need to return a bool if the user confirms the action. Thanks...
index.cshtml
<a href="#Url.Action("DeleteTestUser", "Home",
new {id = testUser.TestUserId, confirm = false})"
id="confirm-delete">
_layout.cshtml
<script type="text/javascript">
$(function () {
$('#dialog-modal').dialog(
{
title: 'Test User',
draggable: false,
resizeable: false,
closeOnEscape: true,
modal: true,
autoOpen: false,
buttons: {
'Yes': function () {
$(this).dialog('close');
confirmResult(true);
},
'No': function () {
$(this).dialog('close');
confirmResult(false);
}
}
});
$('#confirm-delete').click(function () {
$('#dialog-modal').dialog("open");
});
function confirmResult(result) { return result }
});
</script>
Basically, you're recreating your own confirm() with jQuery UI Dialog. I did this and here is a similar case: confirm form submit with jquery UI
Apply this to your scenario and you have something like:
$(function() {
function ui_confirm(message, callback) {
var dfd = $.Deferred();
var dialog = $("<div>", {
id: "confirm"
})
.html(message)
.appendTo($("body"))
.data("selection", false)
.dialog({
autoOpen: false,
resizable: false,
title: 'Confirm',
zIndex: 99999999,
modal: true,
buttons: [{
text: "Yes",
click: function() {
$(this).dialog("close");
dfd.resolve(true);
if ($.isFunction(callback)) {
callback.apply();
}
}
}, {
text: "No",
click: function() {
$(this).dialog("close");
dfd.resolve(false);
}
}],
close: function(event, ui) {
$('#confirm').remove();
}
});
dialog.dialog("open");
return dfd.promise();
}
function deleteUser(id){
// Code you will execute to delete a user or POST back.
}
$(".button").button();
$('.del').click(function(e) {
e.preventDefault();
// your code
$.when(ui_confirm("Are you sure?")).done(function(val) {
if (val) {
console.log("Delete User Confirmed.");
deleteUser($(this).attr("id"));
} else {
console.log("Do not delete user.");
}
});
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
John Smith Delete
You may be able to get away with just executing specific callbacks. That's up to you. This code can then also be used to pass along another function or to use with a prompt() like dialog.
Update
See: Using Url.Action in javascript
For example:
function deleteTestUser(uid, conf){
var url = '#Url.Action("DeleteTestUser", "Home", new {id=' + uid + ', confirm=' + conf + '})';
$.get(url, function(data){
console.log("User " + uid + " Deleted.");
});
}
I would use POST if possible.
function deleteTestUser(uid, conf){
$.post('#Url.Action("DeleteTestUser", "Home")', { id: uid, confirm: conf }, function(data){
console.log("User " + uid + " Deleted.");
});
}
I am using the jQueryUI autocomplete, have used it many times before, but I now have a more complex requirement.
I have a variable amount of Autocomplete fields to setup, using a JSON datasource and want to use an $().each to set these up. The problem appears to be the data: property of the AJAX call is always defaulting to values the final Autocomplete I setup.
$('[id$=CheckMethod]').each(function(index) {
if ($(this).val() === 'List') {
fieldToSetup = ($(this).attr('id').replace('txt',''));
fieldToSetup = left(fieldToSetup,(fieldToSetup.length - 11));
alert(fieldToSetup);
$('#txt' + fieldToSetup + 'CodeRoom' + escape(inRoomID)).autocomplete({
source: function (request, response) {
var src,
arrayData;
src = 'AJAXCheckCode.asp?actionType=List&GUID=' + $('#txtGUID').val();
$.ajax({
url: src,
datatype: 'json',
data: 'inCode=' + request.term + '&inType=' + $(this).attr('id'),
success: function (outData) {
arrayData = $.parseJSON(outData);
response($.map(arrayData, function (item) {
var theLabel = (item.Notes.length > 0) ? item.TheCode + ' - ' + item.Notes : item.TheCode;
return {
label: theLabel,
value: item.TheCode
};
}));
}
});
},
minLength: 1,
open: function (event, ui) {
$(".ui-slider-handle ui-state-default ui-corner-all").hide();
$(".ui-autocomplete.ui-menu").width(400);
$(".ui-autocomplete.ui-menu").css('z-index', 1000);
},
close: function (event, ui) {
$(".ui-slider-handle ui-state-default ui-corner-all").show();
},
focus: function (event, ui) {
return false;
},
select: function (event, ui) {},
search: function (event, ui) {
}
});
}
});//each CheckMethod
This code results in the 1st Autocomplete field using the inType parameter from the last field setup.
I'd rather not code for a maximum of 4 x 6 Autocomplete fileds and am trying to create one function to setup all the fields, is this possible?
Therefore my AJAX URL for my 1st Autocomplete looks like this
http://foo.com/AJAXCheckCode.asp?actionType=List&GUID={838138D6-A329-40F1-924B-58965842ECF8}&inCode=es&inType=A3&_=1335875408670
when "inType" should actually be A2, not A3 which is the last item of the outer $.each()
Hope this makes some sense!
Solved in the end by adding a class to the text box and then using live() on any text box with the given class that hasn't been bound before...works a charm
$('.foo:not(.ui-autocomplete-input)').live('focus', function(){
var fieldToReSource = ($(this).attr('id').replace('txt',''));
fieldToReSource = left(fieldToReSource,(fieldToReSource.length - 5));
$(this).autocomplete({
source: function (request, response) {
var src,
arrayData;
src = 'AJAXCheckCode.asp?inType=' + fieldToReSource + '&actionType=List&GUID=' + $('#txtGUID').val();
$.ajax({
url: src,
datatype: 'json',
data: 'inCode=' + request.term,
success: function (outData) {
arrayData = $.parseJSON(outData);
response($.map(arrayData, function (item) {
var theLabel = (item.Notes.length > 0) ? item.TheCode + ' - ' + item.Notes : item.TheCode;
return {
label: theLabel,
value: item.TheCode
};
}));
}
});
},
minLength: 1,
open: function (event, ui) {
$(".ui-slider-handle ui-state-default ui-corner-all").hide();
$(".ui-autocomplete.ui-menu").width(400);
$(".ui-autocomplete.ui-menu").css('z-index', 1000);
},
close: function (event, ui) {
$(".ui-slider-handle ui-state-default ui-corner-all").show();
},
focus: function (event, ui) {
return false;
},
select: function (event, ui) {
},
search: function (event, ui) {
}
});
});
I'm using the jquery Tablesorter plugin and when I delete a row and then go to sort the column, the deleted row appears again. From what I've read here on stackoverflow is that I may need to add the trigger.update and/or the trigger.appendcache, but that didn't seem to work, thoug i may be placing it in the wrong place. Any ideas?
<script type="text/javascript">
$(function () {
$(".tablesorter").tablesorter({
headers: { 0: { sorter: false }, 1: { sorter: false }, 2: { sorter: false }, 3: { sorter: false} },
widgets: ['zebra'],
widgetZebra: { css: ['alt-even-class', 'alt-odd-class'] }
});
$('div#deleteDialog').dialog({
autoOpen: false,
width: 400,
height: 200,
modal: true,
position: 'center',
resizable: false,
buttons: {
OK: function () {
var delID = $('div#deleteDialog input').val();
$.post('#Url.Action("Delete", "Plate")', { id: delID }, function (data) {
if (data === 'delete') {
$('tr#' + delID).remove();
resetGrid();
}
});
$(this).dialog('close');
},
Cancel: function () {
$(this).dialog('close');
}
}
});
$('table.tablesorter thead input:checkbox').change(function () {
$('table.tablesorter tbody input:checkbox').attr('checked', $('table.tablesorter thead input:checkbox').attr('checked'));
});
$('#create').click(function () {
document.location.href = '#Url.Action("ItemSelect", "Plate")';
});
$('.menucosting_view').click(function () {
document.location.href = '#Url.Action("Details", "Plate")' + '/' + $(this).parent().parent().attr('id');
});
$('.menucosting_edit').click(function () {
document.location.href = '#Url.Action("Edit", "Plate")' + '/' + $(this).parent().parent().attr('id');
});
$('.menucosting_delete').click(function () {
$('div#deleteDialog input').val($(this).parent().parent().attr('id'));
$('div#deleteDialog').dialog('open');
});
});
function resetGrid() {
$('.tablesorter tr').removeClass('alt-even-class').removeClass('alt-odd-class');
$('.tablesorter tr:even').addClass('alt-even-class');
$('.tablesorter tr:odd').addClass('alt-odd-class');
}
Place $('.tablesorter').trigger('update'); under resetGrid();!
Hi I have a JQuery Ui (jquery-ui-1.8.13.custom.min.js) inside a Dialog. When I start typing on the box I get the dropdown of items but it hides right away? Does anyone know why? Here is my code:
$(".openDialog").live("click", function (e) {
e.preventDefault();
var itemId = $(this).attr("data-item-id");
var ajaxurl = $(this).attr('data-ajax-refresh-url');
var dialogId = $(this).attr("data-dialog-id");
$('<div><img src="Content/images/spinner.gif" /> Loading...</div>')
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
width: 'auto',
title: $(this).attr("data-dialog-title"),
buttons: {
"Save": function () {
$(this).find('form').submit();
},
close: function () {
if (typeof itemId != "undefined") {
$.get(ajaxurl, { id: itemId },
function (data) {
// The data returned is a table <tr>
$("#Row" + itemId).replaceWith(data);
});
bindConfirm();
}
$(this).remove();
}
},
modal: true
}).load(this.href, function () {
$(this).find("input[data-autocomplete]").autocomplete({ source: $(this).find("input[data-autocomplete]").attr("data-autocomplete") });
});
});
They also had problems in early 1.8 releases. I remember applying a custom CSS selector to increase zIndex manually.
See also: http://forum.jquery.com/topic/autocomplete-inside-a-dialog-1-8rc2
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.