i have been trying use variable selector limited 1 function, how pass variable value other functions well. i'm new ajax, please me solve issue.
i tried local storage didn't work.
here html code:
<td class="info-group jname"> <p class="pro-info-right text-per jname"><?php echo $jsdata['js_fname']; ?></p> <div class="edit jname" style="display:none"> <input class="editbox jname" name="js_fname_edit" value=""> </div> <?php if($this->user_valid == true) { ?> <a href="#"><span title="edit" class="edit-icon jname ctrl glyphicon glyphicon-pencil"></span></a> <a href="#"><span title="delete" class="del-icon ctrl glyphicon glyphicon-remove-sign"></span></a> <?php } ?> </td> <td class="info-group jaddr"> <p class="pro-info-right text-per jaddr"><?php echo $jsdata['js_address']; ?></p> <div class="edit jaddr" style="display:none"> <input class="editbox jaddr" name="js_fname_edit" value=""> </div> <?php if($this->user_valid == true) { ?> <a href="#"><span title="edit" class="edit-icon jaddr glyphicon glyphicon-pencil"></span></a> <a href="#"><span title="delete" class="jaddr del-icon glyphicon glyphicon-remove-sign"></span></a> <?php } ?> </td> javascript:
$(document).ready(function(){ var slctd; $('.info-group').click(function(e) { e.preventdefault(); slctd = ($(this).attr('class').split(' ')[1]); $('.'+ slctd +' .text-per').hide(); $('.'+ slctd +' .ctrl').hide(); var data = $('.'+ slctd +' .text-per').html(); $('.'+ slctd +' .edit').show(); $('.'+ slctd +' .editbox').val(data); $('.'+ slctd +' .editbox').focus();//comming here }); $('.'+ slctd +' .editbox').mouseup(function(e) { e.preventdefault();//not comming here return false; }); $('.'+ slctd +' .editbox').change(function(e) { alert(slctd);//not comming here e.preventdefault(); $('.'+ slctd +' .edit').hide(); var js_address = $('.'+ slctd +' .editbox').val(); var datastring = 'js_address='+ js_address; $.ajax({ type: "post", url: "<?php echo base_url().'index.php/jobseeker/edit_personal' ?>"+'_'+ slctd +'', data: datastring, cache: false, success: function(html) { $('.'+ slctd +' .text-per').html(js_address); $('.'+ slctd +' .text-per').show(); } }); }); $(document).mouseup(function(e) { e.preventdefault();//not comming here $('.'+ slctd +' .edit').hide(); $('.'+ slctd +' .text-per').show(); $('.'+ slctd +' .ctrl').show(); }); });
here same code written in other style. more efficient , better code.
basically slctd nothing .info-group element , can use context selector select elements inside clicked td passing selector.
$(document).ready(function () { // when clicked on element having class info-group $('.info-group').on('click', function (e) { e.preventdefault(); var $this = $(this); // cache context performance $this.find('.text-per, .ctrl').hide(); // hide elements inside clicked td matching classes var data = $('.text-per', this).html(); // context selector, passing here search .text-per element inside i.e. td element $('.edit', this).show(); $('.editbox', this).val(data).focus(); // can chain methods here }).on('mouseup', '.editbox', function (e) { // when mouseup of .editbox inside .info-group return false; // preventdefault not needed when using return false }).on('change', '.editbox', function (e) { var parenttd = $(this).closest('.info-group'); // parent <td> object, can used context selecting elements inside $('.edit', parenttd).hide(); // hide .edit element inside td var value = $('.editbox', parenttd).val(); var datastring = $('.editbox', parenttd).attr('name') + '=' + value; // create data-string name=value format // send ajax request using appropriate data $.ajax({ type: "post", url: "<?php echo base_url().'index.php/jobseeker/edit_personal' ?>" + '_' + parenttd + '', data: datastring, cache: false, success: function (html) { $('.text-per', parenttd).html(value).show(); // update html after successful completion of ajax } }); }); $(document).mouseup(function (e) { e.preventdefault(); $('.edit').hide(); $('.text-per').show(); $('.ctrl').show(); }); }); 
Comments
Post a Comment