...

View Full Version : jquery click-delete-refresh



kzar99
01-18-2011, 09:33 AM
Hello everyone and thanks for any advice.

I have a simple delete action in jquery:

$('.delete-section').live("click",function()
{
var ID = $(this).attr("id");
var dataStringDeleteSection = 'section_id='+ ID;

if(confirm("Are you sure you want to delete this Section? There is NO undo!"))
{
$.ajax({
type: "POST",
url: "/path/to/delete.php",
data: dataStringDeleteSection,
cache: false,
success: function(html){
doRefresh_showSections();
}
});

}
return false;
});

function doRefresh_showSections()
{
$.ajax({
type: "POST",
url: "/path/to/show.php",
data: "",
cache: false,
success: function(html){
$("div#sections").html(html);
}
});
}

In one page i have put various actions (show/hide/add/delete).
One "show" action will present a table.
Table is enclosed in <div id="sections"></div>
In each row i have a delete link.
Pressing the delete will remove that row and reload the table.

First delete action works perfectly (first time i click delete link). If i delete again no jquery/action is performed. Instead i return to my original page (like a refresh/F5).
I have checked my data in show.php and the names of classes/divs are correct.
What do i do wrong?

devnull69
01-18-2011, 09:46 AM
Can you give us a URL of a live version? The code you provided seems to be OK ... maybe someone else has a clue? I think the problem might be somewhere else.

kzar99
01-18-2011, 09:57 AM
I don't have a "live" page yet.. i still develop this project in my pc (localhost).

I also have an "add" function.

$('.save-section').live("click",function()
{
var dataStringAddSection = $("form#addSection").serialize();

$.ajax({
type: "POST",
url: "/paht/to/add.php",
data: dataStringAddSection,
cache: false,
success: function(html){
if (html=='') { doRefresh_showSections(); } else { $("div#resultAjaxLoader").html(html); }
}
});
return false;
});

This works ok no matter how many items i add.
The same logic in delete fails.

devnull69
01-18-2011, 10:35 AM
Please post at least the HTML part ... and please use code tags to present the code with the appropriate indentations. You can use the "#" button above the message box to fill in the code tags for you.

kzar99
01-18-2011, 10:49 AM
Ok, so i replace my table with css/div/spans and jquery works perfectly.
All the data that are now in <div id="registered-sections"></div> were in a table (2 colums, nothing fancy).

The current project code is as follows (sorry for length)


The jquery part is:


<script type="text/javascript">
$(document).ready(function () {

// after various ajax calls, show/hide content
function doRefresh_afterAjax()
{
window.location.replace("somepage.php");
}

// various show hide options
// by default, on page load we hide these DIVs
$("#sectionHolder").hide();
$("#view-main").hide();


// click actions
$(".section-manage").click(function () {
$("#tableHolder").hide();
$("#sectionHolder").show();
$("#view-main").show();
return false;
});

// click actions
$(".view-main").click(function () {
$("#tableHolder").show();
$("#sectionHolder").hide();
$("#view-main").hide();
return false;
});



$(".keyword-manage").click(function () {
$("#tableHolder").hide();
$("#sectionHolder").hide();
return false;
});


$(".edit-keyword").click(function () {
$("#tableHolder").hide();
$("#sectionHolder").hide();
return false;
});


$(".cancel").click(function () {
doRefresh_afterAjax();
return false;
});



//
// SECTIONS
//
function doRefresh_showSections()
{
$.ajax({
type: "POST",
url: "show.php",
data: "",
cache: false,
success: function(html){
$("div#registered-sections").html(html);
}
});
}
// ADD
$('.save-section').live("click",function()
{
var dataStringAddSection = $("form#addSection").serialize();

$.ajax({
type: "POST",
url: "add.php",
data: dataStringAddSection,
cache: false,
success: function(html){
if (html=='') { doRefresh_showSections(); } else { $("div#resultAjaxLoader").html(html); }
}
});
return false;
});
// DELETE
$('.delete-section').live("click",function()
{
var ID = $(this).attr("id");
var dataStringDeleteSection = 'section_id='+ ID;

if(confirm("Are you sure you want to delete this Frontend Section? There is NO undo!"))
{
$.ajax({
type: "POST",
url: "delete.php",
data: dataStringDeleteSection,
cache: false,
success: function(html){
doRefresh_showSections();
}
});

}
return false;
});


});
</script>

The html part is:



<table id="content-table" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<th rowspan="3" class="sized"><img src="" alt="" height="300" width="20"></th>
<th class="topleft"></th>
<td id="tbl-border-top">&nbsp;</td>
<th class="topright"></th>
<th rowspan="3" class="sized"><img src="" alt="" height="300" width="20"></th>
</tr>
<tr>
<td id="tbl-border-left"></td>
<td valign="top">
<!-- start content-table-inner -->
<div id="content-table-inner">

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td valign="top">


<!-- start id-form -->
<div id="resultAjax" style="margin: 0pt; padding: 0pt;"></div>
<div id="resultAjaxLoader" style="margin: 0pt; padding: 0pt; text-align: center;"></div>


<div style="display: none;" id="sectionHolder">

<div class="table_row">
<div class="table_header">Frontend Sections</div>
<div class="table_header">Add New</div>
</div>

<div class="table_row">
<div id="table_half_row">

<div id="registered-sections">


<div class="sectionRow">
<span class="sectionRowName">1.Index</span>
<span class="sectionRowOptions"><a href="" id="1" class="icon-2 info-tooltip delete-section"></a></span>
</div>

<div class="sectionRow">
<span class="sectionRowName">2.Extras</span>
<span class="sectionRowOptions"><a href="" id="2" class="icon-2 info-tooltip delete-section"></a></span>
</div>

<div class="sectionRow">
<span class="sectionRowName">3.Payments</span>
<span class="sectionRowOptions"><a href="" id="3" class="icon-2 info-tooltip delete-section"></a></span>
</div>

<div class="sectionRow">
<span class="sectionRowName">4.Emails</span>
<span class="sectionRowOptions"><a href="" id="4" class="icon-2 info-tooltip delete-section"></a></span>
</div>

<div class="sectionRow">
<span class="sectionRowName">5.Other</span>
<span class="sectionRowOptions"><a href="" id="5" class="icon-2 info-tooltip delete-section"></a></span>
</div>

</div>

</div>
<div id="table_half_row">
<form id="addSection" method="post" action="" style="margin: 0pt; padding: 0pt;">
<table id="id-form" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<th valign="top">Section:</th>
<td><input value="11111123423432" gtbfieldid="41" name="mysection" id="mysection" class="inp-form" type="text"></td>
</tr>
<tr><th>&nbsp;</th>
<td valign="top">
<input name="Submit" class="form-submit save-section" value="" type="submit">
<input name="Cancel" class="form-reset cancel" value="" type="reset"> </td>
</tr>
</tbody></table>
</form>
</div>
</div>

<!-- end sectionHolder .......................................... -->
</div>




<div id="tableHolder">
<table class="tablesorter" id="tablesorter" cellspacing="0" width="100%">
<thead>
<tr>
<th width="25%">1.Index</th>
<th width="25%">EN</th>
<th width="25%">GR</th>
<th width="25%">Options</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br>
<br>
<table class="tablesorter" id="tablesorter" cellspacing="0" width="100%">
<thead>
<tr>
<th width="25%">2.Extras</th>
<th width="25%">EN</th>
<th width="25%">GR</th>
<th width="25%">Options</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br>
<br>
<table class="tablesorter" id="tablesorter" cellspacing="0" width="100%">
<thead>
<tr>
<th width="25%">3.Payments</th>
<th width="25%">EN</th>
<th width="25%">GR</th>
<th width="25%">Options</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br>
<br>
<table class="tablesorter" id="tablesorter" cellspacing="0" width="100%">
<thead>
<tr>
<th width="25%">4.Emails</th>
<th width="25%">EN</th>
<th width="25%">GR</th>
<th width="25%">Options</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br>
<br>
<table class="tablesorter" id="tablesorter" cellspacing="0" width="100%">
<thead>
<tr>
<th width="25%">5.Other</th>
<th width="25%">EN</th>
<th width="25%">GR</th>
<th width="25%">Options</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br>
<br>

</div>








<!-- end id-form -->



</td>
<td>

<!-- start related-activities -->
<div id="related-activities">

<div id="related-act-top"><img src="" alt="" height="43" width="271"></div>

<!-- start related-act-bottom -->
<div id="related-act-bottom">

<!-- start related-act-inner -->
<div id="related-act-inner">


<div class="left"><a href="#" title="Back to projet page"><img src="" alt="Back to projet page" height="21" width="21"></a></div>
<div class="right">
<h5>Main Project Page</h5>
<ul class="greyarrow">
<li><a href="#">Click here</a></li>
</ul>
</div>


<div class="clear"></div>
<div class="lines-dotted-short"></div>


<div style="display: none;" id="view-main">
<div class="left"><a href="" title="Keywords"><img src="" alt="Keywords" height="21" width="21"></a></div>
<div class="right">
<h5>Frontend Main</h5>
<ul class="greyarrow">
<li><a href="" class="view-main">Click here</a></li>
</ul>
</div>

<div class="clear"></div>
<div class="lines-dotted-short"></div>
</div>



<div id="section-manage">
<div class="left"><a href="" title="Sections"><img src="" alt="Sections" height="21" width="21"></a></div>
<div class="right">
<h5>Manage Sections</h5>
<ul class="greyarrow">
<li><a href="" class="section-manage">Click here</a></li>
</ul>
</div>

<div class="clear"></div>
<div class="lines-dotted-short"></div>
</div>

<div id="keyword-manage">
<div class="left"><a href="" title="Manage Keywords"><img src="" alt="Manage Keywords" height="21" width="21"></a></div>
<div class="right">
<h5>Manage Keywords</h5>
<ul class="greyarrow">
<li><a href="" class="keyword-manage">Click here</a></li>
</ul>
</div>

<div class="clear"></div>
<div class="lines-dotted-short"></div>
</div>


<div class="clear"></div>
</div>
<!-- end related-act-inner -->

<div class="clear"></div>

</div>
<!-- end related-act-bottom -->

</div>
<!-- end related-activities -->

</td>
</tr>
<tr>
<td><img src="" alt="blank" height="1" width="695"></td>
<td></td>
</tr>
</tbody></table>

<div class="clear"></div>


</div>
<!-- end content-table-inner -->
</td>
<td id="tbl-border-right"></td>
</tr>
<tr>
<th class="sized bottomleft"></th>
<td id="tbl-border-bottom">&nbsp;</td>
<th class="sized bottomright"></th>
</tr>
</tbody></table>
<div class="clear">&nbsp;</div>

</div>
<!-- end content -->
<div class="clear">&nbsp;</div>
</div>
<!-- end content-outer........................................................END -->

devnull69
01-18-2011, 01:34 PM
This happens when I use the "#" code button


function abc() {
var def = false;
}

Why do you think your code looks better than mine?

kzar99
01-18-2011, 02:39 PM
i used the (#i) button from the wysiwyg editor
and i see my code with yellow background behind texts
i see your code in <pre> format

ok i found the # and the #i are different.. i fixed my code



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum