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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Manipulating ajax data after load

    I currently have a script that it uses ajax to search, the results turn up and I have buttons to each result.

    Code:
    document.getElementById('buttonone').innerHTML = "Search Sent";
    Works for the button that loaded with the original page
    Code:
    document.getElementById('buttontwo').innerHTML = "Added Ty";
    Does not work for the button loaded with ajax

    Is there a way to register the new elements on ajax load?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,636
    Thanks
    6
    Thanked 1,003 Times in 976 Posts
    You need to put that into the callback of the AJAX function.

  • #3
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nm I found it, I had to reinitialize the whole thing after the first return of the ajax so the doc would find it.
    Last edited by Acheron; 09-17-2012 at 09:01 PM.

  • #4
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    3
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hi Acheron,

    Are you open to using jQuery, it would make things a bit simpler.

    I'll try to show you what VIPStephan means using a jQuery example:

    Code:
    <h1>Search</h1>
    
    <div id="searchResults">
    
    </div>
    
    <script type="text/javascript">
    $(function(){
    	
    	function getSearchResults(){
    		$.post(
    			'url-to-my-search.html',
    			{'searchQuery':'search-string'},
    			function(html){
    				//we're now inside the callback				
    				//perform actions with data returned from search form
    				$('#searchResults').html(html);
    				
    				//this is where you can put your event for your button
    				$('#button').bind('click', function(e){
    					getSearchResults();
    				});
    			});
    	}
    	
    	getSearchResults();
    	
    });
    </script>
    Your button will have to be on the page: "url-to-my-search.html"

    I just ran into this issue myself the other day, and this is how I resolved 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
    •