Reputation: 61
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
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
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
Reputation: 2612
This line:
var id =($(object).parent().find('a').attr('value'));
should be:
var id =($(object).parent().find('a').attr('id'));
Upvotes: 0