[SOLVED] evil innerHTML using jQuery.

[Zane]

if you go here

http://zanedockery.com/p2

 

I can begin my question easier.

 

Click either button for Add New Customer or Builder

even use the Zip Code box and check it out....it should be working.

 

But what my main problem is...is with the Choose Builder dropdown.

This is the way it is supposed to act.

http://zanedockery.com/p2/index2.php

 

Now the only difference between these two examples (code wise) is that I am using AJAX ... the jQuery $.get function to get a list from the database.

 

What's bugging the living hell out of me is that whenever I do use $.get...like the first example page.  It doesn't register the clicks on the LIs

 

If you have firebug you'll notice things aren't working right.

 

Why can't I get my list and register their clicks?

 

[Zane]

Well apparently I just shouldn't use AJAX for that dropdown.  don't know why I wanted to use it so bad.

 

either way.. I cheated and did it strictly with PHP with an include

[Zane]

Ok..still I find myself going back to Javascript (or jQuery..whatever).  I'm trying to get the Search to work on the keyUp event.  It works fine so far.  I can view all the matches and yada yada...doesn't look pretty yet but yeah...it works.

 

My only problem is the same problem I was having earlier.  If I use Javascript to edit the innerHTML of something.  I can't have any onClick triggered.  Mind you that I'm having them triggered via jQuery with

 

$('div.new').click(function() {
	$('#body').fadeTo('fast', .33);
	$('#popup').show();
});

 

On the page load the div click works just fine but when the search fails to yeild results...I have it show the two ONLY CLICKABLE divs and they aren't clickable.  Why?

 

check it out

http://zanedockery.com/p2

 

The Add New buttons are the click able ones

 

 

[.josh]

jquery eh? shouldn't this be in 3rd party scripts?

 

BURN.

[Zane]

well it would be if I didn't write this myself...but I did  I should have said I used the jQuery API.

 

either way...I'm stuck on this.

[Zane]

Using this

$('#searchterm').keyup(function(){
	$.post("get.php", {func: "getCustomers", s:$(this).val()}, function(data) {
		$('#content .results').html(data);											  
	});
});

 

I grab the customer list from the database using get.php

		$sql = "SELECT a.name, a.phone, CONCAT( a.address, ' ', b.city, ', ', b.state_prefix, ' ', a.zip ) AS address, c.builder as builder
				FROM customers a
				INNER JOIN zip_code b ON a.zip = b.zip_code
				LEFT OUTER JOIN builders c ON a.builder = c.id
				WHERE a.name LIKE '%$y%'
				ORDER by a.id DESC
		";
		$q = mysql_query($sql) or die(mysql_error());
		if(mysql_num_rows($q) >= 1) {
			while($r = mysql_fetch_array($q)) {
				$block .= "";
				$block .= "" . $r['name'] . "" . $r['builder'] . "";
				$block .= "
Phone: " . $r['phone'] . "";
				$block .= "\n";
			}
		}
	echo $block;

 

Works perfect....as far as getting the data and displaying it....

 

but when it is displayed I can't "click" on it.

 

If in the initial HTML I have a

some bull

and I write the following jQuery code

$('.result').click(function() {
	alert("Thou hast clickethed")
});

I can click it just fine, but if I populate the container for .result using jQuery like this

$('.result container').html("some bull")

 

then I can't "click" it....can I repeat myself anymore?

 

I don't understand what is going on with this. Does anyone else?

[Zane]

Woohoooo

 

after searching forever on the horrible documentation they have I found the live() function

 

 

so now instead of this...

   $('.result').click(function() {
      alert("Thou hast clickethed")
   });

 

I have to do this

   $('.result').live("click", function() {
      alert("Thou hast clickethed")
   });

 

schwew..I feel so much better now.