0

I'm adding the entire center section of the web page based upon what menu item was selected. The center sections are added like

       $.get("biosketchStart_Select.html", function (data) {
                        $("#custom_data_container").html(data);
        });

There are different html pages that are added in the same manner. Is it possible to add text to an input or add a row to a table from the main page after the page is added? Normally:

       $('#bioTable').append('<tr id="bio-modal-' + obj.RecID + '"><td width="15%">Created</td><td width="15%">Last Update</td><td class="n" width="25%">' + obj.BiosketchName + '</td><td width="25%">' + obj.Category + '</td><td width="1%"></td><td><span class="underline"><a href="#/" onclick = "deleteBio(\'' + obj.BiosketchName + '\',' + obj.RecID  + ')" >Delete</a></span><span class="word-spacing"><span class="underline"><a href="#/" onclick = "editBio(\'' + obj.RecID  + '\')">Edit</a></span></span></td></tr>');

Will add a row to the bioTable as long as it is called from the same section of code.

The bioTable is created on the html page that is being added but the row needs to be added from the main page based upon the end users input. It this possible or do I need to create a Event Delegation? Can I call a plain javaScript function on the added html page using the Event Delegation process?

I looked at Event binding on dynamically created elements? and it is very close however I don't have any event that is firing on the added html page. 

$('Document').on(eventName????, '#bioTable', function() {});

I understand using the above line of code but I don't have an event. It needs to show the added rows based upon the value of the main page and run automatically.

Bill
  • 1,423
  • 2
  • 27
  • 51
  • Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Heretic Monkey Feb 12 '18 at 01:13
  • 1
    If you are just wanting to modify the html that was added you don't need event delegation, you just need to make sure the code that modifies it is called after it has been retrieved / added. – Patrick Evans Feb 12 '18 at 01:24
  • Patrick- your right. It is all coming down to a timing issue. In a javascript function I'm loading the additional html AND trying to add the new rows from a ajax call. If I wait then it works fine. I'll move some code around and see if I can call my ajax function after the page is totally loaded. – Bill Feb 12 '18 at 01:35

1 Answers1

0

You can reference dynamically loaded content in the way that you are attempting, have you tried it and had it fail?

The selector in your JQuery statement is executed when it is called. As long as #bioTable is present by the time you call the .append function, it will succeed. Attempting to bind something like .click or .on to that element before it exists will not work though. See the following example:
https://jsfiddle.net/t6tz95dc/

Jesse
  • 305
  • 2
  • 7
  • Jesse-- It turns out to be a timing issue. I'm loading the html and calling the add rows in the same javascript function so the html is not fully loaded. I moved it around so the the code fires after each other and is not fine-- Thanks – Bill Feb 12 '18 at 01:42
  • That is because `$.get` (and all other AJAX calls) is asynchronous- meaning `$.get` is executed and the only thing that waits for it to finish executing is the function(s) you specify as part of that call. If you want something to execute after the asynchronous request returns, place it in the function specified as a parameter or use one or more of `.done`, `.fail`, `.always`. See [JQuery documentation](https://api.jquery.com/jquery.get/). – Jesse Feb 12 '18 at 01:47