How to display (another) page inside page


by using jquery/ajax you can put output of any file from your website inside container :

to do this add following code (through insert html)

 

<div id="output"></div> 
<script type="text/javascript"> 
$.ajax({url: "documents/myphp.php", success: function(data){$("#output").html(data);}});

</script>

 

above code will call documents/myphp.php page (can also be html page) and display result inside div with id "output" : <div id="output">

 

Some other options available:

 

To make this content load AFTER page is loaded (to speed up the general page load), you can try this:

 

<div id="output"></div> 
<script type="text/javascript">
$(document).ready(function() { $.ajax({url: "documents/myphp.php", success: function(data){$("#output").html(data);}}); });

</script>

 

$(document).ready(... will force the script to be exacuted after page is prepared, so it will not wait for this action to be finished to show the page.

 

To make this content load ON CLICK:

<div id="output"></div> 
<script type="text/javascript">
$(document).ready(function() { $("<element>").click(function(){ $.ajax({url: "documents/myphp.php", success: function(data){$("#output").html(data);}}); }); });

</script>

 

 

 To get only specific element from given page:

 

<div id="output"></div>

<script type="text/javascript">
$(document).ready(function(){$.ajax({url: "documents/myphp.php",success: function(data){var dt=$(data).find("<element>").html(); $("#output").html(dt);}});});
</script>

 

$("element") can be any normal CSS selector, for example:

  1. $("#output") - this is any element with ID: "output"
  2. $("div #output") - this is DIV with ID: "output"
  3. $(".myClass") - this is any element with class "myClass"
  4. $("input .myClass") - this is an input with class "myClass"

As you can notice - it uses absolutely same element selections as in CSS, so you can check the Internet for more complex selections (by checking CSS or jQuery selector examples).

 

 

 


Print  posted by miro   Jquery/Ajax tags:  • Ajax 

4.8:1302036234:1




CATEGORIES


home



TAGS



RECENT ENTRIES



ARCHIVE