Develop Reference

get each column without using row.find('td:eq(0)')

How can I get each column in row without using .find('td:eq(0)')? I need another way to get each column.
$(document).on('click', '.delete_librarian', function()
{
var librarianDataRow=$(this).closest('tr');
var librarianId=parseInt(librarianDataRow.find('td:eq(0)').text());
var librarianName=librarianDataRow.find('td:eq(1)').text();
$('#confirm-model-body').text("Are you sure you want to delete "+librarianName+" data");
$('#confirm-modal').modal({backdrop: 'static'});
$('#confirm-model-yes-button').click(function () {
$.ajax({
url: "/api/admin/librarian",
type: "DELETE",
dataType: "json",
data: JSON.stringify({id:librarianId}),
success:function (data) {
if(data.success == true)
{
window.location.reload();
}
else
{
alert(data.message);
}
}
});
});
});

You could use vanilla JS instead if you don't want to use jQuery methods for whatever reason:
$(document).on('click', '.delete_librarian', function() {
var librarianDataRow = this.closest('tr');
var librarianId = Number(librarianDataRow.children[0].textContent);
var librarianName = librarianDataRow.children[1].textContent;
// ...
Could also use
$(document).on('click', '.delete_librarian', function() {
var librarianDataRow = this.closest('tr');
var librarianId = Number(librarianDataRow.cells[0].textContent);
var librarianName = librarianDataRow.cells[1].textContent;
// ...

jquery Autocomplete is not loading the results correctly and menu doesn't show unless I press down key

This is what I have:
searchTimeoutID;
InitQuickSearch = function() {
$( 'input#quick-search' ).autocomplete({
source: []
});
$('input#quick-search', document).on('keyup', function(e) {
switch(e.which) {
default: // live search
window.clearTimeout(searchTimeoutID); // remove timer
var str = $(this).val(); // search string
if (str !== '') { // do the search
searchTimeoutID = window.setTimeout(LiveSearch, 100);
}
break;
}
});
};
LiveSearch = function() {
var str = $('input#quick-search').val();
if(str !== '') {
$.ajax({
type: 'POST',
url: '/livesearch',
data: { query: str },
cache: false,
success: function(data){
var results = data.split(',');
alert(results); // displays correct results here
$( 'input#quick-search' ).autocomplete( 'option', { source: results });
},
error: function(response) {
printError(response);
}
});
}
return false;
};
When I output the results variable using alert(results), the values look correct.
However, when I try and update the values in autocomplete it does not display the correct values. Also, I have to press the down key for the menu to appear.
$( 'input#quick-search' ).autocomplete( 'option', { source: results });
What am I doing wrong?

I just had to change:
searchTimeoutID = window.setTimeout(LiveSearch, 100);
to:
LiveSearch();

Bootstrap datepicker beforeShowday works only on first change

I'm trying to disable booked dates on datepicker. My code simply posts an ID to ajax.php file and i run a mysql query based on that id and get start and end dates. then i make an array that contains these dates and the ones in between. Finally I get this json_encoded array and it basically defines dates to be disabled on my bootstrap datepicker. I have recently found out that nothing is wrong with $.post method and changed the title. The problem was beforeShowday, it doesn't rerun after changes. Here is the jQuery code:
$.ajaxSetup({ cache: false });
var date = new Date();
date.setDate(date.getDate());
function getJsonRes(urlid){
var tarihler = [];
var url="ajax.php";
$.post( url, {"id":urlid}, function(data) { //this is the post request
$.each( data, function(key, val) { //to retrieve json encoded data
var tarih=val;
tarihler.push(tarih);
});
var disabledDays = tarihler;
function daysDisabled(date) {
for (var i = 0; i < disabledDays.length; i++) {
if (new Date(disabledDays[i]).toString() == date.toString()) {
return false;
}
}
return true;
}
$('#grs').datepicker({ //this is start date
language:'tr',
todayHighlight:true,
weekStart: 1,
startDate:date,
autoclose: true,
format: 'dd-mm-yyyy',
beforeShowDay: daysDisabled
})
.on('changeDate', function (selected) {
startDate = new Date(selected.date.valueOf());
startDate.setDate(startDate.getDate(new Date(selected.date.valueOf()))+1);
$('#cks').datepicker('setStartDate', startDate);
});
$('#cks').datepicker({ //this is end date
todayHighlight:true,
weekStart: 1,
language:'tr',
autoclose: true,
format: 'dd-mm-yyyy',
beforeShowDay: daysDisabled
})
.on('changeDate', function (selected) {
FromEndDate = new Date(selected.date.valueOf());
FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf())));
$('#grs').datepicker('setEndDate', FromEndDate);
});
}, "json");
}
$('#choice').change(function(){
var idvalue=$(this).val();
getJsonRes(idvalue);
});

send jquery var to php in my code

.js code is loaded on index.php load. I want to send [date var] to php
$(function() {
$('#datepicker').datepicker( {
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
showButtonPanel: true,
numberOfWeek: 0,
dateFormat: 'yy-mm',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
var date = year +'-'+month;
var newDate = new Date(year, month, 1)
$(this).datepicker('setDate',newDate);
}
});
});

You can place whatever you want to send in reqObject. You can access this object in you php code as the requestBody.
Call back is the function you want to execute after you get response from the server.
url is noting but the url to which you are posting your data
var reqObject = {"newDate":newDate}
var type = 'POST'
var url = "your post url"
var callback = function(data){
console.log(data)
//Your code goes here
}
sendData(type,reqObject,url,callBack);
sendData: function(type,reqObject,url,callBack) {
$.ajax({
type: type,
data: reqObject ,
dataType: "json",
url: url ,
success: function(response){
callBack(response);
}
});
}

Update row in WebGrid with JQuery

FOUND THE PROBLEM:
Just needed to replace row.replaceWith with row.parent().parent().replaceWith().
I'm trying to update a WebGrid row with JQuery after I've clicked a submit button in a modal dialog, but the updated data just append the last column, not the whole row as I want.
Let's say I want the table to look like this after the update:
ID - Name - Phone number
But with my code it looks like this after the update:
ID - Name - ID - Name - Phone number
as it just replaces the last column with a new table within the last column with the updated data.
I'm getting the correct data as output, but in the wrong place in the row.
Please help! :)
Here is the Javascript code:
$(function () {
$("#edit-event-dialog").dialog({
resizable: false,
height: 300,
modal: true,
autoOpen: false,
open: function (event, ui) {
var objectid = $(this).data('id');
$('#edit-event-dialog').load("/Events/CreateEditPartial", { id: objectid });
},
buttons: {
"Save": function () {
var ai = {
EventID: $(this).data('id'),
Name: $("#Name").val(),
Phone: $("#Phone").val()
};
var json = $.toJSON(ai);
var row = $(this).data('row');
$.ajax({
url: $(this).data('url'),
type: 'POST',
dataType: 'json',
data: json,
contentType: 'application/json; charset=utf-8',
success: function (data) {
var grid = $(".pretty-table");
row.replaceWith('<tr><td>' + data.ev.EventID + '</td><td>' +
data.ev.Name + '</td><td>' + data.ev.Phone + '</td></tr>');
},
error: function (data) {
var data = data;
alert("Error");
}
});
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#event-edit-btn").live("click", function () {
var url = $(this).attr('controller');
var row = $(this);
var id = $(this).attr('objectid');
$("#edit-event-dialog")
.data('id', id)
.data('url', url)
.data('row', row)
.dialog('open');
event.stopPropagation();
return true;
});

You have set row to $(this) which is your case represents $("#event-edit-btn") ( btw i suggest using classes as identifiers, but it's not a problem ). Later on you replace your actual button with the new <tr> set but what you actually need to do is traverse to the tr parent of that button and replace it.
Change your live handler to:
$("#event-edit-btn").live("click", function () {
var url = $(this).attr('controller');
var row = $(this).closest('tr'); //or use some #id or .class assigned to that element
var id = $(this).attr('objectid');
$("#edit-event-dialog")
.data('id', id)
.data('url', url)
.data('row', row )
.dialog('open');
event.stopPropagation();
return true;
});