Manipulating ajax data after load

[Acheron]

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

document.getElementById('buttonone').innerHTML = "Search Sent";

Works for the button that loaded with the original page

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?

[VIPStephan]

You need to put that into the callback of the AJAX function.

[Acheron]

Nm I found it, I had to reinitialize the whole thing after the first return of the ajax so the doc would find it.

[phenem]

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:

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