Question

I have been trying to make a updateable grid.Which means i show an icon on mouseover
on click of that icon i show a new row with textboxes and hide the previous row then there is a an icon which saves the values using ajax.On Successfull completion of this ajax save process i make a new row of the data and replace the previous row with textboxes.

Problem is that i cant run mouseovers and other function using jQuery selectors as the newly replaced html will not be binded to it.I did a workaround for that i was calling:

jQuery('[rel="datepicker"]').datepicker();
          jQuery('[rel="innerRows"]').mouseover(function (){
          //alert('hererere');
            var spanId = jQuery(this).attr('spanid');
            jQuery('[rel="innerSpans"]').hide();
            jQuery('#edit_'+spanId).show();
          });
          jQuery('[rel="editButton"]').click(function (){
            var recordId = jQuery(this).attr('id');
            jQuery('#show_'+recordId).hide();
            jQuery('#hid_'+recordId).show();
          });
          jQuery('[rel="saveRecord"]').click(function (){
            var recordId = jQuery(this).attr('recId');
            var event    = jQuery.trim(jQuery('#event_'+recordId).val());
            var date     = jQuery.trim(jQuery('#date_'+recordId).val());
            var location = jQuery.trim(jQuery('#location_'+recordId).val());
            var notes    = jQuery.trim(jQuery('#notes_'+recordId).val());
            if(event !='' && date !='' && location !='' && notes !=''){
              jQuery.ajax({
                  url:'/application/saveevent/',
                  dataType: 'html',
                  data: '&recId='+recordId+'&event='+event+'&date='+date+'&location='+location+'&notes='+notes,
                  success : function (text){
                    jQuery('#hid_'+recordId).replaceWith(text);
                    bind();
                  } 
              });
            }

to show and save the row.Now in the bind function i am again calling the above script to rebind the new html with jQuery selectors.

Problem is that in this bind function

 jQuery('[rel="innerSpans"]').hide();
            jQuery('#edit_'+spanId).show();

Doesnt work it does not show or hide the button inside the generated html
It is to show and hide the edit icons in the generated html which it doesnt.
Is it because of the element is in replaced html or what.
Please suggest.

This is the HTML.

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="eventsTableEdit">
                              <tbody><tr class="headeventtbl">
                                <td width="280" class="">Event</td>
                                <td width="160" class="">Date</td>
                                <td width="200">Location</td>
                                <td width="200">Notes</td>
                              </tr>
                                                            <tr id="show_6" spanid="6" rel="innerRows" class="odd">
                                <td class=""><span id="edit_6" style="display: inline;" rel="innerSpans"><a id="6" rel="editButton" href="javascript:void(0)"><img title="Click here to edit." alt="Click here to edit." src="/img/edit.png"></a></span>event of councils</td>
                                <td class="">02/08/2012</td>
                                <td>Canada</td>
                                <td class="">Call them</td>
                              </tr>
                              <tr id="hid_6" style="display:none;">
                                <td><span id="save_6"><a recid="6" rel="saveRecord" href="javascript:void(0)"><img title="Click here to save." alt="Click here to save." src="/img/save.png"></a></span><input type="text" value="event of councils" id="event_6" name="data[event]"></td>
                                <td><input type="text" value="02/08/2012" rel="datepicker" id="date_6" name="data[date]" class="hasDatepicker"></td>
                                <td><input type="text" value="Canada" id="location_6" name="data[location]"></td>
                                <td><input type="text" value="Call them" id="notes_6" name="data[notes]"></td>
                              </tr>
                                                            <tr id="show_7" spanid="7" rel="innerRows" class="odd">
                                <td class=""><span id="edit_7" style="display: none;" rel="innerSpans"><a id="7" rel="editButton" href="javascript:void(0)"><img title="Click here to edit." alt="Click here to edit." src="/img/edit.png"></a></span>eventssssss</td>
                                <td>03/07/2012</td>
                                <td>Restaurant</td>
                                <td>Notes are here</td>
                              </tr>
                              <tr id="hid_7" style="display:none;">
                                <td><span id="save_7"><a recid="7" rel="saveRecord" href="javascript:void(0)"><img title="Click here to save." alt="Click here to save." src="/img/save.png"></a></span><input type="text" value="eventssssss" id="event_7" name="data[event]"></td>
                                <td><input type="text" value="03/07/2012" rel="datepicker" id="date_7" name="data[date]" class="hasDatepicker"></td>
                                <td><input type="text" value="Restaurant" id="location_7" name="data[location]"></td>
                                <td><input type="text" value="Notes are here" id="notes_7" name="data[notes]"></td>
                              </tr>

                            </tbody></table>

I replace the row with a new row which is updated.http://203.100.79.84:9733/

Regards
Himanshu Sharma

Answer 1

Have you tried using on() instead of mouseover()?

E.g:

jQuery('[rel="innerRows"]').on("mouseover", function (){

    var spanId = jQuery(this).attr('spanid');
    jQuery('[rel="innerSpans"]').hide();
    jQuery('#edit_'+spanId).show();
 });