I have a datatable which will be model binded when the page opens but when i am doing any edit or delete function the the datatable will be binded using ajax call. So I am having a function
$('#user-detail-datatable tbody tr td a').on('click', function () {
//prepoluting values on edit
$("#CarryUser").val($(this).closest('tr').find('td')[5].outerText);
d = $(this).closest('tr').find('a')[1].id;
$("#display").val($(this).closest('tr').find('td')[6].outerText);
UsingBranchId = $(this).closest('tr').find('td')[2].outerText;
$("#fileUpload").val($(this).closest('tr').find('td')[0].outerText);
});
used to get the values from datatable to bind a model which will open on click of edit button. but this function is not getting hit after I am editing or deleting can anyone explain why. And help me out
You would need to use a delegated event handler. As for now you have one time binding to elements which is lost as soon the table is updated. Use
$('#user-detail-datatable').on('click', 'tbody tr td a', function () {
}]
instead.
Related
I was wondering if someone can help guide me how I can write a event when I'm using toggleClass in jQuery?
I have a list of items and when I click on an item, it highlights it, and when someone clicks another item from the list, the previous highlighted item goes away and highlights the current click. Also, if I click the same item that has been highlighted, it goes away.
Now I'm trying to write a function to call ajax when only its been highlighted. So it won't run the ajax function again when its being pressed again (when highlight is removed).
$(".media").on('click',function(){
var $this = $(this);
// highlighting the object
$this.toggleClass('selectMedia').siblings().removeClass('selectMedia');
// saving the id
var selId1 = $this.data('id');
$.post("ajax/ajax_sessions.php", {"sel_1":selId1}, function(data) {
alert(data); // alerts 'Updated'
});
});
Thank you for help!
Just check for the existance of the class before doing your AJAX request:
if ( ! $this.hasClass('selectMedia') ) return;
// Now do your AJAX request...
I want to switch page and select a row on grid when page loaded. And in $(document).ready(function()) I write this:
$("#myGrid").data("kendoGrid").dataSource.page(17);
And it's working: the grid page is switched to 17. But right after that I write:
$("#myGrid").data("kendoGrid").select($("#myGrid").data("kendoGrid").tbody.find('>tr').find('>td').filter(function () {return $(this).text() == "#Model.ActionId";}).parent('tr:first'));
And it's not working. But when I run this command from browser's console, the row is selected. What should I do?
Probably your grid is bound to a remote service. In that case paging doesn't happen immediately. The grid's data source makes asynchronous request to the remote service and the grid is rebound when the response is received.
To make it work you need to call the selection code after response is received. The dataBound event of the grid is the proper place to call that code. Here is an example:
$("#myGrid").kendoGrid({
/* other configuration */
dataBound: function() {
this.select(this.tbody.find('>tr').find('>td').filter(function () {return $(this).text() == "#Model.ActionId";}).parent('tr:first'));
}
});
I am using RenderPartial to generate CListView and all the contents generated properly and good pagination is working fine too. But when I added my custom JS to elements generated by the CListview it works fine for the the fist page content but when i use pagination and click to page 2 then the JS binding fails.
Is there any other way to bind custom event to elements generated in YII CListview I had tried using live, and on nothing work for me here is my js file.
I think I have to call my function on every ajax load in but how can I achieve in yii
This is the script I am using to update ratings on server with button click and this the element for which these forms and buttons are defined are generated by CListview in yii
$(document).ready(function(){
$('form[id^="rating_formup_"]').each(function() {
$(this).live('click', function() {
alert("hi");
var profileid= $(this).find('#profile_id').attr('value');
var userid= $(this).find('#user_id').attr('value');
console.log(userid);
var data = new Object();
data.profile_id=profileid;
data.user_id=userid;
data.liked="Liked";
$.post('profile_rating_ajax.php', data, handleAjaxResponse);
return false;
});
});
});
You can also try CGridView.afterAjaxUpdate:
'afterAjaxUpdate' => 'js:applyEventHandlers'
The $.each method will loop only on existing elements, so the live binder will never see the ajax-generated content.
Why don't you try it like this:
$(document).ready(function(){
$('form[id^="rating_formup_"]').live('click', function() {
alert("hi");
var profileid= $(this).find('#profile_id').attr('value');
var userid= $(this).find('#user_id').attr('value');
console.log(userid);
var data = new Object();
data.profile_id=profileid;
data.user_id=userid;
data.liked="Liked";
$.post('profile_rating_ajax.php', data, handleAjaxResponse);
return false;
});
});
This problem can be solved by two ways:
Use 'onclick' html definitions for every item that is going to receive that event, and when generating the element, pass the id of the $data to the js function. For example, inside the 'view' page:
echo CHtml::htmlButton('click me', array('onclick'=>'myFunction('.$data->id.')');
Bind event handlers to 'body' as the framework does. They'll survive after ajax updates:
$('body').on('click','#myUniqueId',funcion(){...});
I'm using codeigniter and when selecting a dropdown form onchange works and i get my second field ok(Country->City).
When i submit the form with errors, the page reloads with the errors displayed but my onchange stops working.
Any ideas for what's going on?
Hmm, here's what i'm doing. User get's to homepage and fills the form, the onchange is working. User then submits the form with an error and i check the validation and load a new page(register) with the same onchange function. I tried to change the function name (getLocal) to another name but the result is the same. Tried to use live.("change", getLocal) and the result is the same, no firing on the register page...
function getLocal(){
$("#city").load("home/ajaxlocal", {country: $(this).val()} );
//alert($(this).val());
return false;
}
..............
$js = 'id="country"';
$(document).ready(function() {
$("#country select").bind("change", getLocal);
});
td echo form_label('Country :', $country);
td id="country">echo form_dropdown('country', $country,$ct,$js);
IF yo arent reloading the page, but reloading elements with AJAX, the jquery will not bind to those new elements if you specify them in the ready() function.
$(document).ready(function() {
$("#country select").bind("change", getLocal);
});
This is loading this onload - try using .live()
http://api.jquery.com/live/
This method is a variation on the basic .bind() method for attaching event handlers to elements. When .bind() is called, the elements that the jQuery object refers to get the handler attached; elements that get introduced later do not, so they would require another .bind() call.
I'm trying to do a simple update, but can't figure out somthing.
I have a table that i get from a DB with an Edit button that when i press change to a Save button so i can save with Ajax the record that the user just edit.
I'm doing the first part just fine, have one function that do all the jquery stuff on the page (that is working just fine).
Now I want to change the $('#a'+productID) line to save insted of edit. i am changing the link attribute also, so when the user presses save it will send him to a function that will make the Ajax request and update the record.
But i dont have a clue how to start that....I don't think it has any thing to do with any bind function becouse i am allready binded by calling the save function (or am i wrong and need to bind antway???) can any one help me out here?
P.S. the save function recives the productID do i have the right product when i will need it.
Don't have a code to send for the save function becouse i don't know how to start it and every thing i tried doesn't work....sorry :-(
It might be easier if you simply had both buttons on the page and toggled between them depending on the page state.
<a id="editButton" href="http://example.com/widget/edit/1">Edit</a>
<a id="saveButton" href="http://example.com/widget/update/1" style="display: none;">Save</a>
$(function(){
$('#editButton').click( function() {
// set up the form as edit...
$(this).hide();
$('#saveButton').show();
return false;
});
$('#saveButton').click( function() {
var button = $(this);
var href = button.attr('href');
$.post(href,$('form').serialize(), function() {
// change form back to readonly...
button.hide();
$('#editButton').show();
}
});
});