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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    jQuery and AJAX loaded content issues

    Hi,

    The following code is used to display a list of photo galleries and allows the user to delete individual galleries and re-order the list. Prior to re-ordering the list I am able to run the jQuery event to delete a gallery by clicking on the corresponding button. This produces an confirmation box. Whenever I re-order the list and try to delete another gallery nothing happens. I am aware that there are issues with jQuery events and AJAX loaded content, but despite spending several hours trying to resolve the issue and the incorporation of the on() handler I am unable to. Any help would be appreciated.

    The AJAX returns the response text with no issues.

    The code is as follows:

    The jQuery, placed within the header tag
    Code:
    	
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>	
    <script type="text/javascript">
    var runningUpdates = 0;
         $(document).ready(function(){
    $('.galleryDelete').on("click", function() {
    		var deleteGallery =confirm('Are you sure you want to delete this gallery?');
    		row = $(this).parent().parent();
    			
    		if (deleteGallery == true) {
    			$(".galleryResponse").css('display','block').html("<img alt='Loading' src='../images/loading.gif'/> Deleting...");
                             runningUpdates++;
    			//Call to delete table row
    			$.ajax({
    				url: "galleryFunctions.php",
    				type: "GET",
    				dataType : 'html',
    				data: "action=delete" + "&id=" + $(this).parent().parent().val(),
    				success: function(response) {
    					$(".galleryResponse").html(runningUpdates + response);								},
    				error: function(response) {
    				$(".galleryResponse").html();
    							 }
    				});
    			} 
    		});
    			
    	//Change order of galleries
    	$("#galleryOrder").on("change", function() { 
    		var galleryOrderText = $("#galleryOrder option:selected").text()
    		var galleryOrder = $("#galleryOrder").val();
    		$(".galleryResponse").css('display','block').html("<img alt='Loading' src='../images/loading.gif'/> Sorting by "+galleryOrderText+"...");
    		//Return galleries list
    		$.ajax({
    			url: "galleryFunctions.php",
    			type: "GET",
    			dataType : 'html',
    			data: "action=refresh" + "&order=" +galleryOrder,
    						success: function(response) {
    			//Replaces old table with the new ordered table
    			$(".lcInformationContents").html(response);						
    						},
    			error: function(response) {
    			$(".galleryResponse").html('Error Refreshing Gallery.');
    						 }
    		});
    	});
    });
    The HTML and PHP to populate a table with rows for each gallery.
    PHP Code:
            $GetGallery "SELECT * FROM Gallery";
        
    $result mysqli_query($dbc$GetGallery);

        
        echo 
    '<div class="lcInformation">
                    <div class="lcGalleryToolbar">
                        <a class="galleryAdd">Add</a>
                        <a class="galleryRefresh">Refresh</a>
                        Order By: <select id ="galleryOrder">
                                      <option value="1">ID</option>
                                      <option value="2">Creation</option>
                                      <option value="3">Name</option>
                                      <option value="4">Creator</option>          
                                 </select>
                    </div>
                    <div class="lcInformationContents">

                    <table align="center" cellspacing="3" cellpadding="3">
                    <tr>
                        <td width="120px" align="left"><b>Gallery Name</b></td>
                        <td width="40px" align="center"><b>Tools</b></td>
                    </tr>'
    ;
                    
    //Fetch table rows
                    
    while ($row mysqli_fetch_array($result)) {
                    
                    echo 
    '<tr class="galleryRow" value="'.$row['GalleryID'].'">
                            <td class="galleryName" align="left">'
    .$row['GalleryName'].'</td>
                            <td align="center">    
                                <a class="galleryDelete" title="">Delete</a>    
                            </td>
                        </tr>'
    ;
            
                    }
        echo 
    '</table>'
        echo 
    '</div></div>'
    Thanks.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,276
    Thanks
    10
    Thanked 581 Times in 562 Posts
    you need to re-bind the click each time you change the content, on bind the content container instead. i'd show you the code but i have no idea what your container looks like without seeing the markup.


    it would be something like:
    Code:
    $('#galDump').on("click", ".galleryDelete", function() {
    Last edited by rnd me; 06-18-2013 at 09:55 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    Neoscar (06-18-2013)

  • #3
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rnd me View Post
    you need to re-bind the click each time you change the content, on bind the content container instead. i'd show you the code but i have no idea what your container looks like without seeing the markup.


    it would be something like:
    Code:
    $('#galDump').on("click", ".galleryDelete", function() {
    Works perfectly! Thanks for the help, rnd me. The websites on which I looked earlier never really explained that aspect of it.


  •  

    Posting Permissions

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