SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How to modify an input that is inserted after page load (via AJAX)

    I have a page that uses ajax to load form inputs into a div after the page loads. I need to be able to apply the autocomplete plugin to these inputs but obviously I have to do this after they are injected since they aren't there on page load. Trouble is that for some reason I cant seem to get jQuery to match these injected elements no matter what I do.

    so here is some code...

    Code:
    function moveRight(passedLI)
    	{
    		var mycontainer = $("#rightColumn");
    		$.get("RightColumnAJAX.cfm", {id: $(passedLI).attr("id")}, function(data){
    					data = $.trim(data)
    					$(data).appendTo(mycontainer);
    		});
    		$('.jobCode').autocomplete({
    			serviceUrl: 'jobCodeSearch_AJAX.cfm',
    			minChars: 3});
    	}
    This is the function that is called which grabs the input and drops it into my div.


    The inputs that are returned via AJAX have a class of jobCode so you can see above that I am trying to match the element with $('.jobCode') but it just wont match the element. as a a matter of fact if I put a alert('matches: ' + $('.jobCode').length); it tells me that it is nto matching any elements.

    So how can I match these injected elements and manipulate them (apply the autocomplete plugin)?

  2. #2
    SitePoint Zealot moretea's Avatar
    Join Date
    Jun 2004
    Location
    Texas, USA
    Posts
    118
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I think what you are looking for is at http://api.jquery.com/on/.

  3. #3
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,412
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    The problem is that ajax requests are done asynchronously, so you code calls the autocomplete plugin before the new content has been returned and inserted into the page. Moving the call inside the $.get success callback should solve the problem:

    Code JavaScript:
    $.get("RightColumnAJAX.cfm", {id: $(passedLI).attr("id")}, function(data){
        data = $.trim(data);
        $(data).appendTo(mycontainer);
        $('.jobCode').autocomplete({ serviceUrl: 'jobCodeSearch_AJAX.cfm', minChars: 3});
    });

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [QUOTE=fretburner;5542659]The problem is that ajax requests are done asynchronously, so you code calls the autocomplete plugin before the new content has been returned and inserted into the page. Moving the call inside the $.get success callback should solve the problem:
    /QUOTE]

    fretburner - I initially had the autocomplete call inside the $.get success callback - but that didn't seem to work either. I was wondering if it might have been a timing issue because putting it on the line after the appendTo statment, maybe the appendTo action hasn't finished yet. but I don't think there is a callback function in appendTo, is there?

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by moretea View Post
    I think what you are looking for is at http://api.jquery.com/on/.
    Thanks for the reply - I actually tried using the on function but didn't have any luck with that.
    I tried putting the following in my document ready...
    Code:
    $('#rightColumn').on('change', '.jobCode', function(){
         alert('matched: ' + $('.jobCode').length);
    });
    #rightCOlumn is the id of the div that my AJAX content is getting inserted into. I just wanted to see if it would match the element so I put an alert in there to display the number of matches for .jobcode and it didnt even get triggered. no alert at all.

    am I misunderstanding the on function?

  6. #6
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,412
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by fretburner View Post
    but I don't think there is a callback function in appendTo, is there?
    No, as far as I know appendTo is synchronous so it shouldn't cause a problem. Could you share the HTML of the relevant section of your page, showing the additional content inserted?

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sure... the content returned from the AJAX is as follows:

    HTML Code:
    <div id="82">
            <strong>Meditech - Facility <a href="#" onclick="$(this).parent().parent().remove(); return false;"><i class="icon-remove"></i></a></strong><br>
             
    
            Document exception menu request:<br>
    
                 
                    <input type="text" name="question_82_9"><br>
                Job Code:<br>
    
                
                    <input type="text" name="question_82_11" class="jobCode" value="9127"><br>
                
    
            <input type="hidden" name="AppID_82" value="82">
            <input type="hidden" name="AppName_82" value="Meditech - Facility">
            <label>Comments</label>
            <input type="text" class="span3" name="Comment_82"><br>
            <label class="radio inline">
                <input type="radio" name="Status_82" id="Status_82" value="Add">
                Add
            </label>
            <label class="radio inline">
                <input type="radio" name="Status_82" id="Status_82" value="Modify">
                Modify
            </label>
            <label class="radio inline">
                <input type="radio" name="Status_82" id="Status_82" value="Delete">
                Delete
            </label>
            <hr/>
        </div>

  8. #8
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I tried modifying my on function a bit so now it reads:
    HTML Code:
    $('body').on('change', '#rightColumn', function(){
       			alert('matched: ' + $('.jobCode').length);
    		});
    So this is basically saying when the onChange event is fired for the #rightColumn div, display an alert.

    but apparently a div does not trigger an onchange when its contents change because this isnt working.

    to test I tried using a click handler and that works - it displays the alert when i click on the right column. So If I cant use the change event for the #rightColumn div, what event do i use for when the AJAX content is added?

  9. #9
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,412
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    bdee1, what do you get in your browser console if you do this?
    Code JavaScript:
    $.get("RightColumnAJAX.cfm", {id: $(passedLI).attr("id")}, function(data){
        data = $.trim(data);
        $(data).appendTo(mycontainer);
        console.log( $('.jobCode') );
    });

  10. #10
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it working with the on function - woo hoo!!

    here is the code I used:
    Code:
    $('body').on('change', '#rightColumn', function(){
       			//alert('matched: ' + $('.jobCode').length);
       			$('.jobCode').autocomplete({
    						serviceUrl: 'jobCodeSearch_AJAX.cfm',
    						minChars: 2,
    						onSelect: function(suggestion) {
    							alert('chosen: ' + suggestion.data);
    						}
    					});
    		});
    SO i wound up attaching the change event to the body element with a #rightColumn filter. the trick was that I had to manually trigger the change event (container.change()) after I add the AJAX content. like this:
    Code:
    function moveRight(passedLI)
    	{
    		var mycontainer = $("#rightColumn");
    		$.get("RightColumnAJAX.cfm", {id: $(passedLI).attr("id")}, function(data){
    					data = $.trim(data)
    					$(data).appendTo(mycontainer);
    					mycontainer.change();
    					
    		});
    
    	}

    thank you both for you assistance!!

  11. #11
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok so I am almost there. I was able to attache the autocomplete plugin to the matched inputs and when the user types in the box, the autocomplete results pop up. but when the user clicks on one of the results, nothing happens. the value is not populated into the text box. whats interesting is that if I use the arrow keys and the tab key to select a result it works perfectly. It just doesn't see the click action.

    any ideas on this one?


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •