I am using HTML and jQuery to create a website for a company. It is a mobile website, I used jQuery and HTML to create a site that loads all at one time (all the coding is on one page, and when you click a link it changes the page with a #pagename in the URL bar. So once you load the main website you don't have to have an internet connection to load it any further. I started it out all in HTML then decided I was an idiot for doing that because there are over 500 values that are going ot be on the site. So I changed it to PHP and used mySQL for the database. I then coded the page to show the information off the site. The problem that I ran into is that with the PHP coding it isn't reloading the page to the new page when you click on it. That might so confusing so let me explain better and show you.
Here is how the site is suppose to work : http://communitymedics.com/app/
Here is how the site is working with the PHP code : http://communitymedics.com/app/index2.php
<?php
$result = mysql_query("SELECT DISTINCT state FROM hospital ORDER BY state");
echo "<div data-role='page' id='locations-hospital'>";
echo "<div data-role='header' data-position='fixed'>";
echo "<h1>Locations</h1>";
echo "<a href='#' data-rel='back' data-theme='a'>Back</a>";
echo "</div><div data-role='content'><ul data-role='listview'><br><li data-role='list-divider'>Select State</li>";
while($row = mysql_fetch_array($result))
{
echo "<li><a href='#" . $row['state'] . "'>" . $row['state'] . "</a></li>";
}
;
?>
If you notice, when you click on the state, Indiana for example, it doesn't do anything, the link in the URL doesn't change and it won't change to the Indiana page.
Any idea on how to fix this. In the end the idea is to have it similar to what the entire HTML page is right now, not sure what I am missing in the PHP code that is causing it not to open that page.
My other issue is if you're on the #locationhospitals page you will notice the header that is suppose to say "select state" at the top isn't showing, like the spacing isn't working right. Any idea on this?
THANKS!
What you're using were just anchors, which only act on the page loaded into the browser already, allowing you to jump to different points in the document. What doesn't happen is a new request to the web server. No server request, no PHP runs.
So how do we fix this?
Well, since you're now using PHP and a database you MUST maintain a connection to the server in order to use your application (well, browser caching aside, but that's a different question for a different day). You're already using jQuery, awesome!!
Basically, you're going to have a container, we'll call it
<div id="foo"></div>
Using jQuery, bind click events to the various "buttons" we'll call them. When someone clicks on one we'll make an AJAX request to your PHP to grab the data and display it inside the container. When someone hits another "button", we'll replace the old data with the new data. You could even use the script you have right there if you really wanted to...
That is to say without some wicked serious modification. mysql_* is deprecated, and you should switch over to mysqli. I don't see where your data params are coming in, so make sure they're clean before passing them to your query as well.
Since OP asked, here is a super quick and dirty way to bind a click event to some element on the page and then use that to make the request
jQuery("#any_element_with_this_id").click(function(clickedElementReference){
jQuery("#foo").empty();//might as well go ahead and empty our our container
jQuery.get("phpscript.php",{"state_id":"IN"},function(dataFromYourScript){
jQuery("#foo").html(dataFromYourScript);//insert our fresh data, hot off the press
},"HTML");
});
This is wicked dirty, and probably doesn't even work, but it should give you a place to start.