CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
user8452686
user8452686

Reputation:

Pass Ajax Variable value to html element in different page

How can I pass data from a query in php and set it's result using an ajax method. Here is what I have so far in a file called file1.php: 

<script type = "text/javascript">
    function myAjax () {
        $.ajax( { type : 'POST',
          data : { },
          url  : 'query.php',
          success: function ( data ) {
            $doc = new DomDocument();
            $doc->Load('file2.php');
            $element = $doc->getElementById('resultFromFile1');

          },
          error: function ( xhr ) {
            alert( "error" );
          }
        });
    }
</script>

I wanna put the contents in this html element in the php file file2.php:

          <p id ="resultFromFile1" name = "results">No Results</p>

Many stack overflow posts haven't been any help. Could someone point me in the right direction?

Upvotes: 0

Views: 1520

Answers (2)

FyZ1K
FyZ1K

Reputation: 80

First of all what kind of content is query.php returning? Is it a JSON Object or are you just "echoing" the output as a string?

Next Question: Are you using jQuery, AngularJS or something in that direction?

Usually what you want to do is get the information from the "query.php" and pass it as a JSON formatted ajax result...

Now to your actual Problem: You want to get the element called "resultFromFile1" that's inside file2.php but you aren't adding anything to the "visible scope" yet since Load only loads the content but it doesn't add the content to any element you have to define an element holding your "file2.php". If i were you to avoid all these Problems i would use AngularJS for displaying your data in to a view and just include your "result" template via ng-include and let the ajax fill the document..

To solve your Problem:

<script type = "text/javascript">
// Your Solution
function myAjax () {
    $.ajax( { type : 'POST',
      data : { },
      url  : 'query.php',
      success: function ( data ) {
        $doc = new DomDocument();
        $doc->Load('file2.php');
        $element = $doc->getElementById('resultFromFile1');
      },
      error: function ( xhr ) {
        alert( "error" );
      }
    });
}

// My Solution for this problem using native js

// Load the "file2" contents in to the file2Holder element
LoadUrlToElement('file2.php','file2Holder',function(data){

    /* When the first loading of file2.php is done, load the results from the query.php and put it in to the element called "resultFromFile1" which we just loaded and placed in to the dom before. But i would recommend you to use AngularJS to avoid this Callback hell and get many cool features that webdevelopers don't want to miss these days.... */

    LoadUrlToElement('query.php','resultFromFile1',function(){
        alert('Content of resultFromFile1 is => '+document.getElementById('resultFromFile1'));
    });
});

function LoadUrlToElement(url,elementID,done) {
    $.ajax( { type : 'POST',
      data : { },
      url  : url,
      success: function ( data ) {
          if(document.getElementById(elementID) === undefined){
          alert("Can't proceed cause the content holder"+elementID+" is not found");
              return; // Abort here cause there is no container with this id...
          }
          document.getElementById(elementID).html = data;
          if(done !== undefined && typeof done === 'function') done(data);
      },
      error: function ( xhr ) {
        alert( "error" );
      }
    });
}
</script>
<div id="file2Holder"></div>

Upvotes: 0

Jozef Cipa
Jozef Cipa

Reputation: 2227

It's wrong approach. You should rather create php script which will save your ajax request data in let's say database and then in file2.php load this data from DB, not directly update file

Upvotes: 0

Related Questions