jquery click-delete-refresh

kzar99 · 01-18-2011, 08: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, 08: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, 08: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, 09: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, 09: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:

Code:

<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:

Code:

	<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, 12:34 PM

This happens when I use the "#" code button

Code:

function abc() {
   var def = false;
}

Why do you think your code looks better than mine?

kzar99 · 01-18-2011, 01: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