I have the following code:
<?php
if ($x == 1){
?>
<b>Some html...</b>
<?php
}
else if ($x==2){ ?>
<b> Other html...</b>
<?php
}
?>
Now I would like to have two links below (a href) and somehow pass the variable $x (so Link1 passes x=1 and Link2 passes x=2) in order to load the relevant bit of code from if statement. I know I can pass $x using the form and then test its value and load required a bit of code, but I would like to do it smoothly, without reloading the page. I think that jQuery could help it, but I have no idea how to do it. Any ideas greatly appreciated.
Forgetting about PHP for the moment, you're looking for jQuery's .load():
<div id="container"></div>
Load 1
Load 2
<script type="text/javascript">
loadContent = function(content){
$('#container').load(content + '.html');
}
</script>
The above code (not tested, but it's at least close) will insert the contents of 1.html, or 2.html (on the server) into the div with id="container".
There are plenty of tutorials, like the one linked in pygorex1' answer, that cover various ways of doing this.
What you're looking for is AJAX - the ability to load server content using background HTTP requests in Javascript. Here's a tutorial I've found useful for implementing AJAX using JQuery:
http://articles.sitepoint.com/article/ajax-jquery
Related
I am relatively new to working with PHP and more specifically JQuery, so please excuse my lack of knowledge.
I am trying to load a small html table that has php information that I have queried game servers for like so.
Except... this creates quite a large loading time for the page, and I was wondering if there was a way to load the html page, display a "Loading..." sort of text and then load the PHP table from a separate file.
My PHP/HTML for the table can be found
here.
So to sum up, If possible, I would like a page that says "Loading..." (or something of the sort) and then once the entire HTML page has been loaded, the table of servers to appear.
I hope that I have provided all relevant information and if anything more is required please ask below, as any help would be appreciated! Again, please excuse my lack of knowledge as I am relatively new to all of this!Thanks in advance!
Create another php file "yourTableFile.php" with, by example
<table>
<?php
foreach ($toto as $tutu)
echo "<tr><td>" . $tutu . "</td></tr>";
?>
</table>
And in your first page put the script
<script>
$(function() {
$('#mySlowTable').load("yourTableFile.php");
});
</script>
then, where you want to show it :
<div id="mySlowTable">
Your loading image here
</div>
In the main page:
<div id="theTable">Loading...</div>
$(function() { $("#theTable).load("url/to/table.php"); });
main page; index.php
There are two iframe in main page as
iframe name= topifrm
iframe name= content
I want to click on link "Education", then the following action should happen:
load topindex.php page to the topifrm and at the same time
load education.php page to the content
or
if you kindly please send me how do I access to php variable, say "$edu_id" in education.php from topindex.php page..
I have to say that there a lot of problems in what you are requesting. For a first, don't use IFrames. They were used like that ages ago and thankfully, things like ajax arrived.
The other problem is :
if you kindly please send me how do I access to php variable, say
"$edu_id" in education.php from topindex.php page..
Have in mind that PHP scripts are executed on the server and not in the browser. For that reason, whatever you see in the browser is a strict html file. To make it clear, you can't have access to the php variables from the browser. But it's not the end! Because many people do what you're trying to do but in a better way.
Let say you index.php that return this:
<html>
<head><title></title></body>
<body>
<div id="menu">
<ul>
<li><a data-phpid="education">Education</a></li>
</ul>
</div>
<div id="container"></div>
</body>
</html>
You'll need some javascript because without javascript, it's not really possible to do it correctly with iframes. With iframes, you can't really just get "data" or catch exceptions if the page fails to load.
I'll be using jQuery as everyone uses it and it might be easier to understand because it's not a so bad library. Put this is a script tags after you linked jquery and it should work.
$(function () {
// this will get executed when document is ready
$('#container').load("/secondframe.php");
$('#menu a').click(function() {
var pageid = $(this).data('phpid');
$("#container").load("/secondframe.php?phpid=" + pageid);
});
});
That said, it should work, in your php script you'll be checking for $_GET['pageid'] to get the id you just sent as "get" params.
But If I were you, I wouldn't use load but instead serialize everything to json, pass the json to a Javacript object to generate html on the browser instead of rendering html on the server. Leave php as it will never give you anything good but only nightmares.
Learn javascript! Learn it well don't use jQuery (jquery will prevent you from understanding how to write code in javascript). Learn python to write application server, learn ruby and don't restrict yourself to rails. And learn a lisp because real programmer program with lambda calculus!
I want to display the photos according to the album selected. But, I don't want to post the page, I want to just change the div.
This is my script:
<script type="text/javascript">
function replaceContent(divName, contentS) {
document.getElementById(divName).innerHTML = <?php echo get_pictures_from_album($fb, $albums, contentS); ?>;
}
</script>
And this is the select tag that invokes it:
<select name="album" size= "1" style="width:210;" onchange="replaceContent('photos', this.options[this.selectedIndex].value);">
<?php get_albums_select_list($albums); ?>
</select>
<div id = "photos">
<?php echo get_profile_pictures($fb, $albums); ?>
</div>
I understand from a reading that I have done that the problem might be connected to javascript Vs php variable types.
Please advise.
Looks like you are looking for an AJax call to an PHP script that retrives the data for the appropriate album selected and THEN update the div with the callback function.
Ajax + PHP basics
You are mixing Clientside and Serverside Code here. The function replaceContent is called after the page (and the php code) was loaded. You would need an Ajax Call for that if you need more information about that:
Ajax Tutorials on Google
What you are doing is not possible because PHP code runs before (on the server because PHP is server-side language) javascript code.
You will have to resort ot AJAX for that.
I wish to do something iframe-like with my div i've got going here.
Basically, i've gotten as far as making links change the content of the div like so:
Open file
This works pretty well, sadly though, if i make another link inside that to change the content back to the first file, the server gets stuck in an infinite loop and crashes.
I really am just trying to find some way to dynamically change content, and to fetch that content from a file using php. If my way of approaching this is completely ludicrious, i do appreciate suggestions.
I think the best and easiest way is to use jQuery:
<script type="text/javascript">
$('#addContent').click(function(){
$("#maincontent").load("file.php");
return false;
});
</script>
Open File
<div id="maincontent"></div>
This script will load content of file.php into selected div using ajax call.
This looks like a good place for jQuery's load() function. Just give the div an id, add a click event to the link and have the event load the contents of your php script into the div. Maybe append a class (e.g., 'updated') to the div when you load the new data. That way your click event can check is('.uploaded') on the div and switch it back when the link is clicked again.
Put divs inside #maincontent that hold the different content that you want. Give the divs IDs. When the link is clicked hide/show the appropriate content
This is a similar thread: Tabbing in PHP?
Firstly, I'd suggest not building the event handler like that. For one thing you'll have to be really careful you correctly escape the content. I would do it this way:
<div id="content1">
<?php include 'file1.php'; ?>
</div>
<div id="content2">
<?php include 'file2.php'; ?>
</div>
and then manipulate those with Javascript. You could either set the innerHTML or simply hide/show the relevant divs. So:
<script type="text/javascript">
var content = 1;
function swap_content() {
document.getElementById('maincontent').innerHTML = document.getElementById('content' + content).innerHTML
if (content == 1) {
content = 2;
} else {
content = 1;
}
}
</script>
Open File
Alternatively you could just hide/show them as appropriate rather than copying content.
Lastly, while not required this is much more trivial to do in a Javascript library like jQuery.
To me it sounds like you should use AJAX. On the clickevent (which you also shouldn't bind with inline code), you would instead load the content with an XHR request.
To make life easier for you I would recommend looking at a JavaScript Library, where my personal favorite would be jQuery (www.jquery.com). To achieve what you are trying to do you would just do:
$('#id_to_the_a_tag').click(function() {
$("#maincontent").load("file.php");
return: false;
});
Intense Debate uses the following javascript code to display a comments number on my blog, which I have included in a handy little php function. By passing this php function the ID of a blog post, it creates a link to the comments section of that specific post.
function show_comments_number($id) {
$url="index.php?p=post&id=$id";
?>
<script>
var idcomments_acct = 'xxx';
var idcomments_post_id = '<? echo $id;?>';
var idcomments_post_url = '<? echo $url;?>';
</script>
<script type="text/javascript" src="http://www.intensedebate.com/js/genericLinkWrapperV2.js"></script>
<?}
The problem is that Intense Debate parses the URL I'm trying to pass it, leaving off the & and everything after it. So the link Intense Debate produces is just "index.php?p=post" -- obviously this is a problem.
Any ideas as to why it's chopping the URL in this way?
Or follow the W3C's advice and change & to a ; (make sure to modify your argument_separator.input and argument_separator.output accordingly).
Chances are, the &id in your URL is being interpreted as an invalid HTML entity. Wrapping your <script> tag in a comment (<!--<script></script>//-->) should help with that.
Change the &id to &id, and you should solve it.