CODEWITHSUNDEEP
jquerygrails
user3068680
user3068680

Reputation: 61

Function is not executing after ajax call

Below is the piece of sample code , i am trying to execute a javascript function on button click, which sends a ajex call which refresh tr , but openEditPage(this); is not execute after that first refresh

<tbody>
  <g:each in="${item}" var="value">
    <tr id='tableRow"${value.id}"'>
      <td width="20"><input type="checkbox" name="tagChekBox" class="checkbox" value="${value.id}" style=""></td>
      <td>${value.Name}</td>
      <td>${value.noOfTags}</td>
      <td>
        <div class="add-remove-icon">
          <a href="#" class="icon-edit-sign edit-btn" value="editable-row${value.id}" onClick ="openEditPage(this);"></a>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="editable-row" id="editable-row${value.id}"></div>
        <div>
          <input type="text" id="${value.id}" value="${value.Name}" name="tagcatName" class="margin-none" >
        </div>
        <button class="saveTagCategorButton">Save</button>
      </td>
    </tr>
  </g:each>
</tbody>

<script>
  /*this finction show the div of editable row */
  function openEditPage(object){
    var id =($(object).parent().find('a').attr('value'));
    $('#'+id).slideDown();

    return false;
  }

  $(".saveTagCategorButton").click(function(){
    jQuery.ajax({

      success: function(response,textStatus){
        var trElement=that.parent().parent().parent().parent();
        trElement .slideUp();
        trElement.prev().html(response);
      },
    });
    return false;
  });
</script>

response contains--

<tr id='tableRow"${value.id}"'>
  <td width="20">
    <input type="checkbox" name="tagChekBox" class="checkbox" value="${value.id}" style="">
  </td>
  <td>${value.Name}</td>
  <td>${value.noOfTags}</td>
  <td>
    <div class="add-remove-icon">
      <a href="#" class="icon-edit-sign edit-btn" value="editable-row${value.id}" onClick ="openEditPage(this);"></a>
    </div>
  </td>

Upvotes: 0

Views: 118

Answers (3)

Rohit416
Rohit416

Reputation: 3486

you should also modify your HTML structure and script a bit as well, value is not the supported attribute of <a> tag. Use id = "editable-row${value.id}" instead.

change this line 

($(object).parent().find('a').attr('value'));

with this one

$(object).prop('id'); //this will yield the same result

HTML:

<a href="#" class="icon-edit-sign edit-btn" id="editable-row${value.id}" onClick ="openEditPage(event, this);">Link</a>

Script:

function openEditPage(event, object){
 var id = $(object).prop('id');
 $('#'+id).slideDown();

 event.preventDefault();
}

$(function(){
$(".saveTagCategorButton").click(function(){
  jQuery.ajax({
   //other jquery ajax parameters,
    success: function(response,textStatus){
      /*
      * this is not a good approach, calling parent() to parent() again and again,
      * use something more appropriate and less complex for jQuery to parse the DOM, I would have done this but I am unsure of your requirements
      */
      var trElement = $(this).parent().parent().parent().parent();  //use 'this' instead of 'that' wrapped in jQuery.
      trElement.slideUp();
      trElement.prev().html(response);
     },
    }); 
 });       
});

Again this line var trElement = $(this).parent().parent().parent().parent(); will get the whole <tbody>.

return false will cancel the default action of the control and also stops the propagation of further actions bind to that control. So always use event.preventDefault() if cancelling only the default action and so as event.stopPropagation().

Upvotes: 1

teck yap
teck yap

Reputation: 69

If I understand your requirement,

function openEditPage(object){

// Not sure why the line below is needed.
// 'id' will return you the 'object' as well.
var id =($(object).parent().find('a').attr('value'));

$('#'+id).slideDown(); // Change to $(object).slideDown();

return false;
}

Upvotes: 0

hammus
hammus

Reputation: 2612

This line: var id =($(object).parent().find('a').attr('value'));

should be:

var id =($(object).parent().find('a').attr('id'));

Upvotes: 0

Related Questions