1

I have a program with two files, a program.js and a program.php. The js one uses jQuery and wraps everything inside $(document).ready , so everything happens after DOM is loaded.

program.php is writing a few elements in the way of: 

printf( "<table>"> );

How can I delay the elements that I create through php until DOM has loaded? They generate before the jQuery created elements, and I have some conflict.

Should I wrap the php items in a function and set a delay to it?

Is there a more ideal way? It doesn't feel proper to do

printf("<script>$document.ready(function(){");
//and the rest of elements that I want to delay

EDIT: The original conflict that made me think of this, was that the jQuery file is doing: 

  $("#create-booking").button().on("click", function() {
      dialog.dialog("open");
      });

While the php is doing: 

printf("<button id='create-booking'>Create</button>");

So the event is not being applied. My suspicion is that the php element loads much faster and when it's created, the jQuery handler didn't have time to appear yet.

telex-wap
  • 832
  • 1
  • 9
  • 30
  • You have to use Ajax or just wrap it in a $.ready as you have already suggested. – ascx May 09 '15 at 17:24
  • `They generate before the jQuery created elements, and I have some conflict` Maybe ask question regarding this instead. See XY problem: http://mywiki.wooledge.org/XyProblem – A. Wolff May 09 '15 at 17:25
  • PHP runs on your server FIRST. So, any PHP that runs in your page template runs first, long before the browser even sees the page. So the PHP created elements are already done and in the page before any $(document).ready()` Javascript runs in the page. – jfriend00 May 09 '15 at 17:45

1 Answers1

2

If your issue is just one of display and you just want everything to show at the same time, then you can hide the PHP generated elements (the one's in the HTML source of the page) with CSS and then show them in your $(document).ready() handler and then all content will show at the same time.

For example, if the PHP generated content was in a parent div like this:

<div id="container">
   <!-- PHP generated content -->
   <table>
      ...
   </table>
</div>

Then, you could add a default CSS style rule like this:

#container {display: none;}

And, then add this Javascript:

$(document).ready(function() {
    // do other scripting things here first

    // then show your content, now that everything else is in place
    $("#container").show();
});

If your issue is something else (you mention "conflict" without explaining what that is), then you need to describe what the actual conflict problem is so we can help you fix the root problem, not just add a bandaid around it. See XY Problem for an understanding of why it's better to describe your actual problem rather than your attempted solution.

EDIT:

From your comments, it sounds like your only concern is that the PHP content may be visible a little bit before your event handlers are in place. Unless you have some unusual delay in loading the web page, that generally does not cause a problem for web pages because the time gap is very small between display and event handler installation and the consequences of the problem are very small (a very quick click might be missed in which case the user would probably just click again). So, usually people do not worry about that issue. But, if you want to address it, you can just not make the content visible until after the event handlers are installed. There are many different ways to do that, but I've shown one above.

You should understand that there is a strict sequence of events here. All PHP generated content comes first. The PHP runs on the server and creates the HTML of the page. That finished HTML is then sent down to the browser. The browser starts to load and parse that HTML. Then, when the browser encounters a <script> tag as part of that page, it will run that script in the order the script tag appears in the page. Any <body> content (from your PHP server) that comes before that script tag will be already in the page and visible. Any <body> content that comes after that script tag will not yet be available to the script.

Further Edit:

OK, now you've explained that you're adding content to the page dynamically via Javacript/Ajax. That will likely finish after $(document).ready() so yes you would have a problem adding event handlers.

You have two choices to fix that:

  1. You can delay the adding of event handlers until AFTER your ajax calls have finished adding content. You would have to hook into the completion callbacks for your ajax calls and then call a function from there that would add the event handlers.

  2. You can switch to using delegated event handling which allows you to add the event handlers to an existing parent element BEFORE the actual child content has been added to the page. Here are some references on how to use delegated event handling:

JQuery Event Handlers - What's the "Best" method

Does jQuery.on() work for elements that are added after the event handler is created?

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Should all jquery events be bound to $(document)?

Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • You are right with the XY. I didn't describe the other problem because I thought it was under control: the jQuery file attempts to grab the id of the elements created through php and applies a click event handler, so the problem I was considering is that if the php elements get created before jQuery had time to run, they are created without that handler. Although maybe that doesn't make sense and I truly need to open a different question for that problem. – telex-wap May 09 '15 at 17:32
  • @telex-wap - that problem description makes perfect sense. I'd suggest you just use the "edit" link on your question to clarify it. – jfriend00 May 09 '15 at 17:34
  • @telex-wap - I added a paragraph to the end of my answer about your event handler issue. – jfriend00 May 09 '15 at 17:39
  • thanks! although I was not very concerned about delay in visibility. Is more a thing of applying event handlers. I also edited the original question to reflect that. – telex-wap May 09 '15 at 17:40
  • @telex-wap - if your script is applying event handlers in `$(document).ready()`, then ALL elements of the page from your PHP server are already available in the page. So, unless you are using Ajax calls to dynamically add content to the page via Javascript, you would not have the issue you are concerned about. – jfriend00 May 09 '15 at 17:43
  • Ah! That's exactly what I am doing, using Ajax calls..... so that might be the issue – telex-wap May 09 '15 at 17:44
  • @telex-wap - OK, that's THE major missing part of your question. You will have to use the completion functions from those Ajax calls to know when the dynamic content has been added already and then after that hook up the event handlers OR you can use [delegated event handling](http://stackoverflow.com/questions/9814298/does-jquery-on-work-for-elements-that-are-added-after-the-event-handler-is-cre/9814409#9814409). – jfriend00 May 09 '15 at 17:46
  • I think you found the exact reason of the problem I am having. I will accept the answer and start reading about delegated event handling, which I think that is the right solution for me. – telex-wap May 09 '15 at 17:50
  • @telex-wap - I added a bunch more to my answer about delegated event handling. – jfriend00 May 09 '15 at 17:51