2

I'm dealing with this trouble: I have a page html that inside a "central" <div> recall (include) a php page that do many stuffs.

In this page I have my search menu on left side, so normally would be loaded after "center column" <div> fully loaded.

The include php page is quite slow, so that I would like the right side of the page is loaded before the central column.

This is what I did following many ideas I found on internet and on this site:

I've inserted an image in the footer part of the page with onload()

 <img src="images/logo.jpg" alt="Logo" width="100%" height="150" id="footerLogo" onload="test()"/>

Then here is the script to "activate" php page:

  <script language="javascript">
    function test() {
     $('#myDiv').fadeOut('slow').load('jobs-query.php').fadeIn("slow");   }
  </script>

It works but I guess there are some problems because .load() is different from include, so that when php page is loaded it doesn't get the data posted with the search form present on the right part of the page.

Is there a way to make JavaScript activate exactly PHP code as "include" or should I try something different?

Machavity
  • 30,841
  • 27
  • 92
  • 100
Alberto Giorgis
  • 153
  • 12

3 Answers3

0

What you are trying to do is probably an AJAX query.

This will "activate" your code while the page will need no reloading.

You can use GET method for reads or POST if your job file performs changes in DB or filesystem, etc, like so.

It is very common to use jQuery for AJAX, but if you want to do it with bare JS you can check this question.

Community
  • 1
  • 1
alariva
  • 2,051
  • 1
  • 22
  • 37
  • But could work with a site structured like this?
    header
    center column with include
    right column with search form
    footer. Than inside #right column you have FORM that send search parameters, to the same page, but the included file, uses those parameters to show to the user the result.
     – Alberto Giorgis Jul 24 '15 at 13:51
  • It is independent from the structure, as long as what you want to do is to "activate" (run) your php code. If you as well want to process returning data, that is another chapter. I suggest you to read AJAX basics, and the samples provided by Machavity are a good point to start. – alariva Jul 24 '15 at 16:08
0

You don't need to include your trigger at the bottom of the page. Instead, you should trigger the JS when the DOM is fully loaded. The browser can tell you this and jQuery has a native way to look for it

<script language="javascript">
$(document).ready(function() {
    function test() {
       $('#myDiv').fadeOut('slow').load('jobs-query.php').fadeIn("slow");   
     }
});
</script>

Once you have that part down, then you need an AJAX call within your ready block

$.get('/your/php/file.php', function(data) {
     //Process whatever data your PHP passes back, probably JSON
});
Machavity
  • 30,841
  • 27
  • 92
  • 100
  • In order to understand it better. If I use "include" the php code will become part of html page right? If I use AJAX there's a way to obtain the same effect? So how can I make php included page to "receive" the $var POSTed with a form that is inside the including page and than show the result to the starting page (but the result is formatted inside the included file)...? – Alberto Giorgis Jul 24 '15 at 14:18
  • Correct. `include` puts the PHP into your current page load. An AJAX call would make an entirely separate call to a separate PHP file and return some data you could then use Javascript to show in your page. – Machavity Jul 24 '15 at 14:21
0

If you are trying to find the exact same functionality as include in php, sorry it is not possible. .load, .get, .post, .ajax you will be injecting the response from the request to the DOM of the current page. Your application has to be designed to comply with it.

What you could do is show a loading message or or use a loading image to indicate that the page is being loaded.

$(document.ready(function(){
  $('#myDiv').fadeOut('slow').load('jobs-query.php').fadeIn("slow");}
});
Ammadu
  • 1,675
  • 15
  • 17
  • Thx, that's what I've done. I've created a "progress bar" to show the advancement of loading page, but I've asked myself of there wasn't a way to make included file loaded later... – Alberto Giorgis Jul 24 '15 at 13:42
  • oh you meant you want to delay the loading of the file? you probably can set the loading trigger as a callback in a timeout with your desired interval – Ammadu Jul 24 '15 at 13:54
  • I didn't understand what you meant. If I have a php page, server loads all the code than show it to the user (ok I can make server return the progress to the user-side but it will keep on loading all the page from top to bottom), but if I have the included file inside central div - so it's loaded before the rest of the page - even if I delay page load it will keep on loading: 1st included file and than all the rest no? so what I would like is to have included file being loaded AFTER all the rest o the page and being sent to center column
    – Alberto Giorgis Jul 24 '15 at 14:15
  • Oh so you want it to load only after the dom is ready? Check my update on the answer – Ammadu Jul 24 '15 at 14:22