Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jquery click-delete-refresh

    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?

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    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.

  • #5
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 -->
    Last edited by kzar99; 01-18-2011 at 01:40 PM. Reason: fixed code style

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    This happens when I use the "#" code button
    Code:
    function abc() {
       var def = false;
    }
    Why do you think your code looks better than mine?

  • #7
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •