Tablesorter Adding Deleted Row Back In After Sorting - tablesorter

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();!

Related

Send Jquery UI Dialog value to Url.Action

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

asp.net mvc 4 bootstrap jquery combobox autocomplete

I'm having problems with the rendering of combobox in my project.
The autocomplete functionality works correctly. But you can not click to select the items in the combobox. Also the items are badly formed, and a descriptive label appears at the bottom.
Print:
http://tinypic.com/r/2jebtau/8
View:
<div class="col-lg-10">
#Html.DropDownList("IdProcedimento", (IEnumerable<SelectListItem>)ViewBag.PriorityID, new { #class = "form-control", id = "combobox" })
</div>
Script:
(function ($) {
$.widget("custom.combobox", {
_create: function () {
this.wrapper = $("<span>")
.addClass("custom-combobox")
.insertAfter(this.element);
this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},
_createAutocomplete: function () {
var selected = this.element.children(":selected"),
value = selected.val() ? selected.text() : "";
this.input = $("<input>")
.appendTo(this.wrapper)
.val(value)
.attr("title", "")
.addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
.autocomplete({
delay: 0,
minLength: 0,
source: $.proxy(this, "_source")
})
.tooltip({
tooltipClass: "ui-state-highlight"
});
this._on(this.input, {
autocompleteselect: function (event, ui) {
ui.item.option.selected = true;
this._trigger("select", event, {
item: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
},
_createShowAllButton: function () {
var input = this.input,
wasOpen = false;
$("<a>")
.attr("tabIndex", -1)
.tooltip()
.appendTo(this.wrapper)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("custom-combobox-toggle ui-corner-right")
.mousedown(function () {
wasOpen = input.autocomplete("widget").is(":visible");
})
.click(function () {
input.focus();
// Close if already visible
if (wasOpen) {
return;
}
// Pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
});
},
_source: function (request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response(this.element.children("option").map(function () {
var text = $(this).text();
if (this.value && (!request.term || matcher.test(text)))
return {
label: text,
value: text,
option: this
};
}));
},
_removeIfInvalid: function (event, ui) {
// Selected an item, nothing to do
if (ui.item) {
return;
}
// Search for a match (case-insensitive)
var value = this.input.val(),
valueLowerCase = value.toLowerCase(),
valid = false;
this.element.children("option").each(function () {
if ($(this).text().toLowerCase() === valueLowerCase) {
this.selected = valid = true;
return false;
}
});
// Found a match, nothing to do
if (valid) {
return;
}
// Remove invalid value
this.input
.val("")
this.element.val("");
this._delay(function () {
this.input.tooltip("close").attr("title", "");
}, 2500);
this.input.data("ui-autocomplete").term = "";
},
_destroy: function () {
this.wrapper.remove();
this.element.show();
}
});
})(jQuery);
$(function () {
$("#combobox").combobox();
});
Try to add these files:
jquery-ui.css // this is for styling
jquery-1.10.2.js
jquery-ui.js"
And the following css classes are also required:
.custom-combobox {
position: relative;
display: inline-block;
}
.custom-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
/* support: IE7 */
*height: 1.7em;
*top: 0.1em;
}
.custom-combobox-input {
margin: 0;
padding: 0.3em;
}
And check if "form-control" class is having efects.
You have downloaded this from here
Have you changed the paths of images(icons) which are being used by the plugins in CSS.

twice occuring drop events from jquery ui

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.

the old dialog opens with the new dialog

Hi
I am using jquery dialog box,and when I am selecting a record from atable, it call the dialog box, then when I close it and chose another record, it opens the old dialog with the new dialog... what is the problem
$(document).ready(function () {
$("#btnenterpat").click(function () {
$("#enter_payment").dialog('open');
});
$("#enter_payment").dialog({
autoOpen: false,
resizable: false,
modal: true,
width: 400,
height: 300,
buttons: {
Cancel: function () {
$(this).dialog('close');
},
ok: function () {
retur_dialog = 'ok';
$(this).dialog('close');
},
},
beforeClose: function () {
if (retur_dialog == 'ok') {
$.ajax({
url: 'ssssssss.php',
data: {
pm1: $("#pm1").val(),
pm2: $("#pm2").val(),
pm3: $("#pm3").val(),
pm4: $("#pm4").val(),
pm5: $("#pm5").val(),
pm6: $("#pm6").val(),
pm7: $("#pm7").val(),
},
});
}
}
});
});
EDIT:
First page:
<?php
include ("angela_test.php")
?>
<div style="font-size:12px;">
</div>
<br />
<table id="tbl_angela_test_data"></table>
<div id="p_angela_test_data"></div>
<script type="text/javascript">
$(document).ready(function(){
var selected_id;
var colCap = Array();
var colDef = Array();
var grp_filter = 0;
$.ajax({
url: "getColDefs.php" ,
data: {table: "bk_accounts", userid: "5", groupid: "1"},
dataType: "json",
async: false,
success: function (data) {
colCap = data[0];
colDef = data[1];
}
});
var cols = '';
for(i=0; i<colDef.length; i++) {
cols += colDef[i].name;
if (i != (colDef.length-1)) {
cols += ';';
}
}
jQuery("#tbl_angela_test_data").jqGrid({
url:'admin/angela_test_table_get.php',
postData: {columns: cols},
datatype: 'json',
mtype: 'POST',
height: 'auto',
width: 'auto',
rowNum: 20,
rowList: [10,20,30],
colNames: colCap,
colModel: colDef,
pager: "#p_angela_test_data",
viewrecords: true,
toolbar: [true, 'both'],
caption: "angela_test",
onSelectRow: function(id){
selected_id = id;
$("#angela_test_del_bnt, #angela_test_edit_bnt").attr("disabled", false);
}
});
jQuery("#tbl_angela_test_data").setGridWidth(500);
$("#t_tbl_angela_test_data").height(40);
$("#t_tbl_angela_test_data").append('<button id="angela_test_edit_bnt" style="height:30px; width:100px;" disabled="true">Edit</button>');
// edit button
$("#angela_test_edit_bnt").click(function(){
var rw = '#angela_test_item_'+selected_id;
var maintab = $("#tabs");
if ($(rw).html() != null) {
maintab.tabs('select',rw);
} else {
maintab.tabs('add',rw,'Edit form');
$(rw, '#tabs').load('admin/angelatest.php?id='+selected_id);
}
});
//////////////////////////////
})
</script>
and the second page is:
<?php
include_once("angela_test.php");
?>
<input type="button" id="btnenterpat" value="Enter Payment">
and the dialog code is:
<script type="text/javascript">
$(document).ready(function () {
$("#btnenterpat").click(function () {
$("#angela_test").dialog('open');
});
$("#angela_test").dialog({
autoOpen: false,
resizable: false,
modal: true,
width: 400,
height: 300,
buttons: {
Cancel: function () {
$(this).dialog('close');
},
ok: function () {
$(this).dialog('close');
},
},
}).parent().find(".ui-dialog-titlebar-close").hide();
});
</script>
<!--Enter Payment windows -->
<div id="angela_test" ></div>
<!--dialog windows end -->
Calling $('#some-div').dialog('destroy') would restore the #some-div element to its original form before calling $('#some-div').dialog(...). Maybe you can consider doing that upon closing the dialog?

jQuery cookie not clearing upon UI close

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.

Resources