Develop Reference

dataBound hitting twice when I search in kendo dropDownList

I'm fairly new to kendo and facing a problem with kendo dropDownList.
I have Channel list kendo dropDown in my Add/Edit popup form. And every time I save my form and click on new Add/Edit I want that saved channel name in that dropDownList.
I'm calling the dropDown data from a SP and then populating that DropDown.
Here is my kendo DropDown:
function buildChannelDropDown(){
$('#ddlChannelSelect').kendoDropDownList({
dataTextField: 'Text',
dataValueField: 'Value',
optionLabel: "Select Main Station",
dataBound: function(e){
if(!onDataBound_SelectByDefaultIfOnlyOneItem(e)) {
var dropdownlist = $("#ddlChannelSelect").data("kendoDropDownList");
var mainChannelDataSource = dropdownlist.dataSource;
if(mainChannelDataSource._data.length > 0){
dropdownlist.select(0);
}
}
},
change: function(){
var selectedChannel = 0;
if($('#ddlChannelSelect').val() != ""){
selectedChannel = $('#ddlChannelSelect').val()
}
GetDataForSelectedChannel(selectedChannel);
},
filter: 'contains'
});
}
And this my function which brings all channel list from backend
function setChannelDropDown(){
var paramObj = {
ChannelGroupId = $("#ddlChannelGroup").val();
}
InvokeAjaxMethod('/Channel/GetChannelList', 'Get', true, paramObj, function(response){
var channelDropDown = $('#ddlChannelSelect').data('kendoDropDownList');
channelDropDown.setDataSource(response.Data);
});}
i'm calling setChannelDropDown() function on Add/Edit button click. Everything is working fine and newly added Channel gets shown in dropDown. Except when I search/type in Filter box in Dropdown(I have kept fiter: "contains"). When I search and select an option and save the form, Popup Form gets close but DropDown opens up. See this Image.
This is how it looks
This DropDown opens up on grid after saving and closing form. After Debugging it came to known that dataBound gets hit again. This happens only when I type in filter box and save.
Does anyone know I can solve this and prevent it from happening?

How to push updates into form with ajax

I have table when i edit any of my rows updates will appear to table but the edit form itself doesn't get update.
Issue in screenshots
1- My row default values
2- Edit form
3- Input update values
4- Updates appear in table
5- Edit form after update still shows old data issue part
I know that I can use options like location.reload(); but the purpose of using ajax (to me) is to not reload the page at all.
code
$(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var table = $("#data_table2").DataTable();
$('#data_table2').on('click', '.groupUpdate', function(e){
var row = $(this).closest('tr');
e.preventDefault();
var ordID = $(this).data('id');
var name = $(this).closest("form").find("#nameUpdate").val();
var description = $(this).closest("form").find("#descriptionUpdate").val();
$.ajax({
type:'PUT',
url:'{{url('dashboard/banks')}}/'+ordID,
data:{
name:name,
desc:description
},
success:function(data){
table.cell( row, 0 ).data( data.data.id ); // return new values to table
table.cell( row, 1 ).data( data.data.name ); // return new values to table
table.cell( row, 2 ).data( data.data.desc ); // return new values to table
document.getElementById("updateForm").reset();
$(".message").append('<div class="alert alert-success fade in">'+data.success+'</div>').hide(4000); // show success message to user
$('.editModal').modal('hide'); // close the edit modal
}
});
});
});
Any idea how to show updates in edit form as well?

Reset a form that restores the default values. That's why you always see the initial values go back when submitting successfully. Please try just remove the reset operation on the form.

Transform to dropdown box when td is clicked and save the changes to database

I have a script that will show a dropdown box when a td(table data) is clicked. It contains options 'X' and 'O'.
my html table contains data in my data base. My client wants a front-end editing of data because that's easy for them. So i made the td transform to dropdown so that they can put remarks easily. But how can i save to database the changes that users made in table.
Here is my script to make td a dropdown box :
$(document).on('click', 'td', function() { ////---make td transform to dropdown list box when click---///
if($(this).find('select').length == 0) {
$(this).empty(); //clears out current text in the table
$(this).append('<select><option></option><option style="font-size:20px;">X <option style="font-size:20px;">O</select>');
}
});

Add Name and Class to your select box
$(document).on('click', 'td', function() {
if($(this).find('select').length == 0)
{
$(this).empty(); //clears out current text in the table
$(this).append('<select class="selectbox" name="selectbox"><option></option><option
style="font-size:20px;" value="X">X <option value="0" style="font-size:20px;">O</select>');
}
});
and create a jquery change event, Try something like this
$(document).on('change', '.selectbox', function() {
$.ajax({
type: 'POST',
crossDomain: true,
data: {
data_value: this.value,
},
url: 'your_url_to_update_to_db.php',
success: function (data)
{
//do Something
},
});
});

Jquery - disable button onsubmit and also change button name

i disable button on a webpage using ajax when clicked and also change the button name. I'm now converting my website to an app but it seems that same code doesn't work in jquery mobile.
$(document).ready(function(){
$("form").on('submit',function(event){
event.preventDefault();
// Disable submit button on this specific form
$('.btn-style1', this).val('Inserted').prop('disabled', true);
data = $(this).serialize();
$.ajax({
type: "POST",
url: "new_user.asp",
data: data
}).success(function() {
$("input[type=text]").val("");
});
});
});
any help?

Try this :
$(this).find('.btn-style1').val('Inserted').prop('disabled', true);
try text instead of val if the text don't change
UPDATE
http://jsfiddle.net/ua0dqo7k/1/
$("#change").click(function(){
$("#test1").text("asdads");
$("#test2").val("asdads");
$("#test3").val("asdads");
});

Inline edit html table with ajax php checkbox & select

Final Edit: I abandoned trying to get checkboxes to work with this method. Instead, I'm just using a combo box with a 'Yes' and 'No'. Combos are working perfectly, thanks to some fantastic help from SE users :) It actually turns out to be better, IMO. Checkboxes with inline editing, the way I've implemented it could lead to accidentally checked or unchecked boxes. A combo is an extra 2 clicks but it's worth it to eliminate accidents. It also looks great because I'm just swapping a little red 'x' or green 'check' to indicate on and off. It looks really nice. Thanks again to everyone for your help!
I'm using the method from 9lessons.info to create a table with inline-editable rows. So far, it's working but not very well when it comes to selects and checkboxes. With selects, it does update the value, but when it hides the input (when clicking outside the tr) the value of the select shows (the fk id field), rather than the text in between opening and closing of the selected option tag (the name field). I can see in the jQuery where it shows the value, but how do I tell it to use the text from the option instead of the value?
the jQuery:
$(document).ready(function(){
$(".edit_tr").click(function(){
var ID=$(this).attr('id');
// hide
$("#name_"+ID).hide();
$("#position_"+ID).hide();
$("#parent_nav_"+ID).hide();
$("#is_disp_"+ID).hide();
// show
$("#name_input_"+ID).show();
$("#position_input_"+ID).show();
$("#parent_nav_input_"+ID).show();
$("#is_disp_input_"+ID).show();
}).change(function(){
var ID=$(this).attr('id');
var name=$("#name_input_"+ID).val();
var position=$("#position_input_"+ID).val();
var parent_nav = $("#parent_nav_input_"+ID).val();
var is_disp = $("#is_disp_"+ID).prop("checked") ? 1 : 0;
// data string
var dataString = 'id='+ ID +'&name='+name+'&position='+position+'&parent_nav='+parent_nav+'&is_disp='+is_disp;
if(name.length > 0 && position.length > 0 && parent_nav.length > 0) {
var parent_nav_txt = $("#parent_nav_input_"+ID+" option:selected").text();
$.ajax({
type: "POST",
url: "admin_nav_edit.php",
data: dataString,
cache: false,
success: function(html) {
$("#name_"+ID).html(name);
$("#position_"+ID).html(position);
$("#parent_nav_"+ID).html(parent_nav_txt);
$("#is_disp_"+ID).html(is_disp);
}
});
} else {
alert('Enter something.');
}
});
//edit input box click action
$(".editbox").mouseup(function(){
return false
});
//outsire click action
$(document).mouseup(function() {
$(".editbox").hide();
$(".text").show();
});
});
I know the 'is_disp' variables in script are not retrieving the right thing, but everything else works so I don't think I need to post the rest of my code, but I will if necessary.
So, what should I put to get it to recognize the checkbox is unchecked, and make sure a 0 gets sent to the db, or a 1 if checked? That's how I've been doing it
With the select, I'm not sure what do to, or how to target the value in between the select tags to show instead of the value="" value, while making sure the value="" value gets stored in the db.
Thanks very much for any help!

to get a select boxes option's text use the :selected selector along with .text()
var text = $("#selectID option:selected").text();
var value = $("#selectID option:selected").val();
for checkbox check the return of .prop("checked")
var check = $("#checkboxID").prop("checked") ? 1: 0;
EDIT:
var parent_nav_text = $("#parent_nav_input_"+ID+" option:selected").text();
Then in your ajax function
$.ajax({
type: "POST",
url: "admin_nav_edit.php",
data: dataString,
cache: false,
success: function(html) {
$("#name_"+ID).html(name);
$("#position_"+ID).html(position);
$("#parent_nav_"+ID).html(parent_nav_text);
$("#is_disp_"+ID).html(is_disp);
}
});

A call to .val() on a checkbox will always return the value it is set with in the DOM. You should instead do this:
var is_disp = $("#is_disp_input_"+ID).is(':checked');
the .is() jQuery function returns true if the element has the CSS selector, in this case :checked.
Also, on the server, you should check if the checkbox variable is true or false using if(!empty($_POST['myvar'])) {} instead of if(isset($_POST['myvar'])) {} because isset() will return true even if myvar is zero or false!