Asked  7 Months ago    Answers:  5   Viewed   41 times

If I load a PHP page with Jquery .load(file.php), can the included file use the php variables that were defined on the page that called the load()?

 Answers

80

You're misunderstanding how things work.

  • PHP runs before any browser response is issued to the client, and all code runs on the server. The variables declared in your PHP file are destroyed after all the PHP code has been run; they "vanish."
  • JavaScript runs after the browser response has begun, and all code runs on the client. By "loading" the output result of the PHP file, you won't get any access to PHP's variables, only the output.

If you want to transfer certain variables from PHP to JavaScript, you could dump some output into JSON in your PHP script, like so:

<?PHP
    header("Content-Type: application/json");

    $myVariable = "hello world";

    echo json_encode(array(array("myVariable" => $myVariable)));

    /* Output looks like this:
       [
           {
               "myVariable": "hello world"
           }
       ]
    */
?>

Your JavaScript/JSON should look something like this:

$.getJSON("test.php", function(result) {
    console.log(result[0].myVariable);
});

Does that make sense?

Wednesday, March 31, 2021
 
Revent
answered 7 Months ago
44

Since you are getting this error as output started at /fr/game/map.php:1 (note: line 1) I will place money on you having whitespace or a BOM before the opening <?php tag in /fr/game/map.php.

Make sure the opening < is the first character in the file. If you file is UTF-8, make sure it is UTF-8 without BOM, or convert it to ASCII.

Wrong:


<?php

Right:

<?php
Saturday, May 29, 2021
 
TheTechnicalPaladin
answered 5 Months ago
98

Here's what we did and its working great. We skipped setting src attribute of img and added img-location to a fake attribute lsrc. Then we load a dynamic image with lsrc value, and set the src of actual image only after its loaded.

Its not about faster loading, but its about showing the images only when its downloaded completely on your page, so that user do not have to see that annoying half-loaded images. A placeholder-image can be used while the actual images are being loaded.

Here's the code.

 $(function(){
    $.each(document.images, function(){
               var this_image = this;
               var src = $(this_image).attr('src') || '' ;
               if(!src.length > 0){
                   //this_image.src = options.loading; // show loading
                   var lsrc = $(this_image).attr('lsrc') || '' ;
                   if(lsrc.length > 0){
                       var img = new Image();
                       img.src = lsrc;
                       $(img).load(function() {
                           this_image.src = this.src;
                       });
                   }
               }
           });
  });

Edit: Trick is to set the src attribute only when that source is loaded in temporary img. $(img).load(fn); handles that.

Monday, June 28, 2021
 
Extrakun
answered 4 Months ago
39

Upon reading the jQuery docs pages for jQuery.get() and jQuery.load(), the callback argument is quoted as the following:

"A callback function that is executed if the request succeeds."

Let me stress the terms "request" and "succeeds". The request may succeed, but that does not mean that the content is loaded. Same problem as .load() — the functions aren't built the way I was thinking.

If I want to trigger an event once the new content finally loads, I'll need to take a different approach.

  • I could use the JS onload event, and trigger it by completely replacing an HTML element (having the replaced code contain an onload property). EDIT: Note that using HTML iframe elements is pretty awful, primitive, and "clunky". I just need to find a better way to trigger a function as soon as loading the new content finishes.
  • Also, I could use jQuery to check the .ready() state of new content, but ("AFAIK" / as far as I know) that will only work if the checked content is a new HTML element, not a preexisting HTML element whose interior content is changed. The jQuery .ready() status of any preexisting element will (AFAIK) already be shown as "ready" despite if new content is loading. Perhaps I am wrong about this, and I would like to be corrected if so.

Unless otherwise notified, this answer will be marked as the correct one. The original question was mistaken that .load() was all I needed. Cheers!

Friday, July 30, 2021
 
CKing
answered 3 Months ago
30

Javascript can't access external content to monitor when it's completely loaded. If you have access to the iframe content you can add a call to the parent window's function to trigger it.

Parent Page:

function parsePeopleLink() {
    //all your current code like you have it now
}

Framed Page:

$(function(){
    parent.parsePeopleLink();
    //This will monitor the document being ready in the framed page 
    //and then trigger the parent's function
});
Thursday, October 21, 2021
 
saintsfan342000
answered 5 Days ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share