CODEWITHSUNDEEP
jqueryhtmlajax
bobcat
bobcat

Reputation: 165

Can't work with DOM elements after AJAX call

I have a large AJAX response which inserts a good amount of HTML. After this I can't work with any of the newly created IDs or Classes as if they were present when the form was loaded.

I have looked into .live() which solves one of my problems but not the other.

I basically want to show a DIV either by ID or class that was inserted via AJAX .html() when a link is clicked.

Example:

CODE:

html_out = "<div class='span-1'><a href='#' onClick='show_sub_row(\"#sub_row" + id + "\"); return false;'>[ + ]</a></div>";
html_out += '<div class="hidden_sub_row prepend-2" style="display: none;" id="#sub_row' + id + '">';
html_out += 'Content';
html_out += '</div>';
$('#search_results').html(html_out);

Then after the HTML is created I try:

function show_sub_row(sub_row) { 
$(sub_row).show('fast');
}

I know it is referencing the correct ID since I can do a alert(sub_row) and it shows the correct ID that matches the ID shown using FireBug to inspect the hidden DIV.

Upvotes: 1

Views: 869

Answers (3)

bobcat
bobcat

Reputation: 165

Disregard I am an idiot and just now noticed that I included the # mark in my ID reference which is why it wasn't working.

Upvotes: 1

xkeshav
xkeshav

Reputation: 54016

use # before sub_row

function show_sub_row(sub_row) { 
$('#sub_row').show('fast');
}

Upvotes: 1

philwinkle
philwinkle

Reputation: 7056

Unless sub_row is an initialized var somewhere outside of the code you have represented here, the block should be:

function show_sub_row(sub_row) { 
$('#sub_row').show('fast');
}

Also, your actual HTML ID for sub_row contains a # character which may make this even more difficult to pinpoint the real issue. I would modify it to:

html_out += '<div class="hidden_sub_row prepend-2" style="display: none;" id="sub_row' + id + '">';

Upvotes: 3

Related Questions