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)
<script type="text/javascript">
$.ajax({url: "documents/myphp.php", success: function(data){$("#output").html(data);}});
</script>
above code will call documents/myphp.php page and display result inside div with 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:
<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:
<script type="text/javascript">
$(document).ready(function() { $("<em><element></em>").click(function(){ $.ajax({url: "documents/myphp.php", success: function(data){$("#output").html(data);}}); }); });
</script>
To get only specific element from given page:
<script type="text/javascript">
$(document).ready(function(){$.ajax({url: "documents/myphp.php",success: function(data){var dt=$(data).find("<em><element></em>").html(); $("#output").html(dt);}});});
</script>
<script type="text/javascript">
$(document).ready(function(){$.ajax({url: "documents/myphp.php",success: function(data){var dt=$(data).find("<em><element></em>").html(); $("#output").html(dt);}});});
</script>
<script type="text/javascript">
$(document).ready(function(){$.ajax({url: "documents/myphp.php",success: function(data){var dt=$(data).find("<em><element></em>").html(); $("#output").html(dt);}});});
</script>
|
$("element") can be any normal CSS selector, for example:
- $("#output") - this is any element with ID: "output"
- $("div #output") - this is DIV with ID: "output"
- $(".myClass") - this is any element with class "myClass"
- $("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).
|
