How to modify html element with jQuery generated from ajax?

Question

I have a text field and if user type something in it, I want to show suggestion of names with ajax then user will select any name that will be set in the text field then user can submit the form.....

<form>
    <input type="text" id="name" name="name" value="" />
    <input type="submit" value="Submit" />
</form>

here is the form.... guess after getting the response from ajax I displayed the suggestion in a div then if user select/click any name that name will be in the value of the text field.... but the problem is when I display the name then I can't access it later with jQuery.... any help??

<div class="ajax-response">
    <p>Name 1</p>
    <p>Name 2</p>
    <p>Name 3</p>
    more like this.........
</div>

How about an autocomplete plugin like jqueryui.com/autocomplete? — nilobarp
– nilobarp, Commented Jan 29, 2015 at 16:06
bro there will be a massive name... I need ajax to get name from database.... — BlackReaper
– BlackReaper, Commented Jan 29, 2015 at 16:24
@BlackReaper The jQuery UI autocomplete plugin supports using a server-side data source (see "Remote datasource" in the documentation), so you'd still be able to query your database for the list of names. — Anthony Grist
– Anthony Grist, Commented Jan 29, 2015 at 16:32
For that I need to load another Library if it is possible with jQuery then I would not add UI Library :) — BlackReaper
– BlackReaper, Commented Jan 29, 2015 at 17:23

Anthony Grist · Accepted Answer · 2015-01-29 16:34:18Z

1

You've got a div element with a class of ajax-response that contains a series of p elements that have text which is your names. The easiest solution would be to delegate an event handler to p elements inside div.ajax-response, like so:

$('div.ajax-response').on('click', 'p', function(e) {
    // one of your names was clicked on
    $('#name').val($(this).text()); // set the value of your #name input to be the text of the clicked element
});

Note that this requires the same .ajax-response element to always exist on your page, and the code would need to be called at a point when that element exists in the DOM (e.g. from a DOM ready handler).

answered Jan 29, 2015 at 16:34

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BlackReaper Over a year ago

Bro I added the name in div.ajax-response with jquery and the dom is not reloaded. like this = $('div.ajax-response').html(response); now will it find the 'p'?? It's not working in my case.... Can you tell me more??

Anthony Grist Over a year ago

@BlackReaper Have you put the code I provided inside a document ready handler? learn.jquery.com/using-jquery-core/document-ready

Luís Soares · Accepted Answer · 2015-01-29 16:37:46Z

0

Yes you can. After you add the response to the document you can do stuff like:

$('.ajax-response p').click(function(ev) {
    var clickedEl = $(ev.currentTarget); 
    // do stuff
});

edited Jan 29, 2015 at 16:37

answered Jan 29, 2015 at 16:07

Luís Soares

6,2506 gold badges44 silver badges71 bronze badges

3 Comments

Luís Soares Over a year ago

inspect DOM structure after adding the response. Then paste it here. You should do that click handler after adding!

BlackReaper Over a year ago

That was my problem... don't know how to inspect DOM structure... can you tell me the method??

Luís Soares Over a year ago

assuming Windows, press Ctrl+Shift+C (or F12)

Collectives™ on Stack Overflow

How to modify html element with jQuery generated from ajax?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related