I have a webpage that retrieves data (via ajax/php) and shows it in an html div (id='parent'). I'd like to add a print feature, which will take the contents of parent and show it in another page.
I've never made a dynamic webpage before. All the information I show is just pulled onto the main page via ajax. So I don't know where to begin really. I assume it has something to do with those long character strings I see in the urls of lots of internet sites, but I don't know! do I just use the url character string to store information about the current state of the page so the user can go back to what they were looking at with the back button. will the back button automatically work, or do i have to listen for it and reload the page based on what i pull from that string?
Very appreciative if someone can point me to some good articles or work out a little pattern of what steps I should take to
pull data from the page
put it on another page (or is it another page? do I just clear the page i'm on and re-fill it with other data??)
enable the back button to go back to the first page.
Thank you so much!
Those long character strings you are talking about sound like SessionIDs. The idea is that you store all the data you need to share between website requests on the server and identify the user by this ID to retreive the correct dataset when she requests the next website.
PHP already supports this out-of-the-box. The documentation of the PHP session handling functionality can be found here:
http://www.php.net/manual/en/book.session.php
To take data from ajax into another tag you can do something like this
<script>
var page_request = false;
function ajax_request(url)
{
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject)
{ // if IE
try
{
page_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
page_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
else
return false
page_request.open('GET', url);
page_request.send(null);
return page_request.responseText;
}
function ChangeDiv(id, url)
{
document.getElementById(id).innerHTML = ajax_request(url);
}
</script>
then just call ChangeDiv with the url you want (e.g 'http://website.com/page.php?params=1')
Related
I am trying to make a chat room on my website, I am using php and mysql to store the messages and all the info. How could I automatically refresh the page every time someone updates the database? example:
If I am on my site, the messages show up on my screen but I can only see more recent messages after I refresh the page. Is there a way to make it real-time?
Also I do not know much javascript/ajax/jquery or any of that. Any help is appreciated!
There will be low amount of traffic on my site. Probably around 10-15 people at a time, if that even.
Your best bet is to make an AJAX request every sec or so and see if there are new messages.
You probably do not want to be reloading the page every time. My recommendation, and there are many ways to do this, is to make a ajax call every so often and check/pull the new information from the database.
I would research AJAX and do a tutorial.
This would be accomplished through ajax by calling a function and updating the div. I would not suggest making people refresh a page everytime they send a message it would get ugly. Another option would be using HTML5 web workers
http://msdn.microsoft.com/en-us/hh549259.aspx
You are going to need to learn AJAX in order to make this work well, and jQuery is probably the easiest way to do it. If we can assume that the DIV you want to update has the ID PonyRides, you would want to do:
$("#PonyRides").ajax({url: "/chat.php?getupdates=true"});
This will get the contents of chat.php and stick it into the #PonyRides DIV. This assumes that chat.php will get the contents of the database and format them into HTML.
The remaining challenge is to make it update whenever your database does, but the simplest way is just to reload the whole chat regardless of whether an update has been made or not.
That will impact performance, but if you have less than a hundred chatters you'll probably be fine. If you have more than that, you'd do well to sense inactivity and decrease the checking period, or only send updates instead of the whole chat. Those are more complicated topics, though, and you can build them in as needed once you get these basic concepts down.
To do this, simply wrap the ajax() call in an interval like so:
setInterval(function(){ //the following code runs repeatedly
$("#PonyRides").ajax({url: "/chat.php?getupdates=true"}); //update our chat div
},5000); //repeat every five seconds
The other, awful method would be to load chat in an iFrame, set to reload periodically using the meta refresh technique. This would be dreadful, and can only be recommended if you are trying for some reason to support incredibly old browsers.
You can use AJAX request to update the values
<script type='text/javascript'>
// function for making an object for making AJAX request
function getXMLHTTPRequest() {
try {
req = new XMLHttpRequest();
} catch(err1) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (err2) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (err3) {
req = false;
}
}
}
return req;
}
var http899 = getXMLHTTPRequest();
function searchFabIndia() {
var myurl = "http://my2nddomain.com/yebhi.php";
myRand = parseInt(Math.random()*999999999999999);
var modurl = myurl+"?rand="+myRand;
http899.open("GET", modurl, true);
http899.onreadystatechange = useHttpResponse899;
http899.send(null);
}
function useHttpResponse899() {
if (http899.readyState == 4) {
if(http899.status == 200) {
// do all processings with the obtained values / response here
// after doing the stuff, call fn again after 30 s say
setTimeout("searchFabIndia()", 30000);
}
}
}
</script>
<body onload='searchFabIndia();'>
I would suggest making an AJAX request to a file on your server which will update the database. If the update to the database is successful then return the message which was updated. Back on the client side you wait for the response and if you get one then append the message to the end of the content. This way you're loading all the messages every time (which would be expensive), you're only loading new messages.
There must be something similar to SignalR(.net) for php. It lets you add code when an event occurs, I think that is what you are looking for.
I am developing a magento webstore where there is a page where customer can pick the route where he/she wants to pick up the order. The selection is twofold and at the moment two different set of buttons so no checkbox or radio buttons. First the user picks the date then then the place.
Right now i am calling a javascript function which loads a cookie on button press then reloads the page and returns user to an anchor link so the user doesn't get confused where he was when making the first selection. When the page reloads the sidebar contains php which reads the contents of the cookies. This doesn't feel very intuitive and I am sure there is a much better way to do this. The choices user has made should be displayed on the sidebar shopping cart which is a .phtml file. Just a simple "you have chosen the route x" is enough, right now I have an echo but the page has to reload first.
So in short when user makes a choice the sidebar should update with information about the choice, without the page reloading itself and returning to position with the help of anchor-links. The notification should preferably be in the left sidebar. I don't think I want to use popups or temporary notifications but they could be an additional feature.
I am pretty sure this is a very simple question but for some reason I cant seem to find the right keywords and then there is magento itself.
OK This is the best one I have come up so far. I still consider it only partially solved and I think I could get more help from a magento community but for now it works well enough.
Include this script to the custom.phtml header:
<script type="text/javascript">
function AJAX(){
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
return xmlHttp;
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
return xmlHttp;
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
}
catch (e){
alert("Your browser does not support AJAX.");
return false;
}
}
}
}
// Timestamp for preventing IE caching the GET request (common function)
function fetch_unix_timestamp()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}
// Reload div with php
function refreshdiv_timediv(){
var seconds = '3';
var divid = "ajax";
var url = "routes/customer_needs_to_see_this.php";
var xmlHttp_one = AJAX();
// No cache
var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;
// The code...
xmlHttp_one.onreadystatechange=function(){
if(xmlHttp_one.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp_one.responseText;
setTimeout('refreshdiv_timediv()',seconds*1000);
}
}
xmlHttp_one.open("GET",nocacheurl,true);
xmlHttp_one.send(null);
}
// Start the refreshing process
window.onload = function startrefresh(){
setTimeout('refreshdiv_timediv()',seconds*1000);
}
</script>
Then I place customer_needs_to_see_this.php to folder routes in the www root directory. The script above will automatically refresh the div "ajax" and inside the ajax-div there is a php include routes/user_needs_to_see_this.php. The div with include is located in cart_sidebar.phtml
I had to place the file outside of magento's template files because I couldn't do includes like ../template/checkout/customer_needs_to_see_this.php. Includes work when they are in the same folder as the view (phtml-file) file but otherwise it doesnt seem to work. Also I couldn't get the script to fetch the user_needs_to_see_this.php from magento's template files.
Right now it updates itself every 3 seconds when customer is on the custom.phtml page. I think its ok because its just reading and making cookies so its not anything heavy. I might change it to onclick in the future.
I got the code here.
There are plenty other examples like that but the above example seems to cover most of the bases.
As the title states, I am looking for a flag script, explained below:
It should be like any video site flag script: click the small grey flag once, it becomes colored and you cannot click it again. It should be done in ajax as I don't want my user to have his page reloaded (and all activity restarted) just because he made the mistake of flagging an item on my site.
The php behind should not add multiple flags from the same user - i though it would be a good idea if it checked for a cookie, if not set -> increment field in MySQL and set cookie, if set ->ignore.
This is really urgent, as I am a total noob at ajax and Javascript and I need it done by Tuesday...
The reason I need this is that I really want to know how it's done because a project that we are studying at school has something similar and my homework is to think of a solution that would accomplish the same thing, without looking at the initial source code. I thought of a solution but don't have the time to implement it because this week as well as the next one, I have a ton of exams and I really don't want to miss any...
Thanks in advance for any help you give me!
Cheers!
Make an ajaxrequest, and let that do you php handling, when its done you send the return to your page.
I made you a template. I guess you can do the PHP yourself?
function setFlag(state){
var ajaxRequest; // The variable that makes Ajax possible!
//Set AjaxRequest for all Major browsers, nothing to do here, this is standard
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser is lame!");
return false;
}
}
}
// When the Ajax Request waits for php you get some status codes, everything is done when it reaches 4. Add your javascript events etc here...
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState < 4){
//document.getElementById('ajaxCatchbox').innerHTML = "Load...";
}
if(ajaxRequest.readyState == 4){
// Some Javascript to change your flag colour image
}
}
// this is here your php happens without page reload. (In the php file)
var queryString = "?state=" + state;
ajaxRequest.open("GET", "ThePhpFileThatDoesYourDatabaseHandling.php" + queryString, true);
ajaxRequest.send(null);
}
The PhP does your database and sets the right var on 1 so you'll know which flag is clicked. Every time you refresh the page you use this var to display which flag is clicked. Just when there is no flag clicked yet, you'll add this function and in the Javascript change it on the fly because on that moment you havent reloaded yet.
i added something like state to the function coz I thought you might want to know which flag is clicked but ofc you can add ID our flagnumber etc... and you can send that to php using the querystring...
Gr
Ok, this is my second post, and PLEASE accept that I am a complete newbie, willing to learn, spending many hours trauling various sites for answers, and I've almost got to where I need to be (at least for this bit).
I have a web page which has a nubmer of javascript functions that work together to generate a Google Map with various lines etc. using the google maps API.
I also have a MySQL Database with some information in.
I have created a PHP script to dynamically generate a dropdown box with information from the database. (and that bit seems to work fine) - http://www.bournvilleconservatives.com/temp/select.php
What I now need to do is get that dropdown box to appear in the HTML / Javascript page that I already have, so that when a user selects something from the list, it calls a javascript function with the value selected.
I'm told I need to use AJAX to pull the box in, and use innerhtml to display it, but I really have no idea how, and could do with an example of something similar to help me on my way.
I would put the PHP in the html page, but that page is actually wrapped up in a Joomla! wrapper, so its all rather complicated.
Thanks in advance.
jQuery solution
If you are willing to use jQuery, it will help you a lot with accessing the DOM, making Ajax calls and stuff. Let me give you a solution in jQuery:
First, put a div into HTML (this will store your select box):
<div id="i_want_my_select_here"></div>
Then put this code in the end of you HTML before </body>.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#i_want_my_select_here').load('/temp/select.php');
});
</script>
In the first script tag, we include the jQuery library from Google's CDN. In the second, we write our Javascript/jQuery code. The .load() function makes it easy to make an Ajax call and load the response into an HTML element.
You can see this is much easier than all that code in my other answer :).
If you're using prototype, you can use either Ajax.Request or Ajax.Updater, tho you should have a parent div with either to replace/insert into.
Example w/ Request:
new Ajax.Request('select.php', {
method: 'post',
onSuccess: function(r) {
var select = r.responseText;
$('parent_div').update(select);
}
});
Example w/ Updater:
new Ajax.Request('parent_div', 'select.php', { method: 'post' });
First, the Ajax example (taken from tizag.com and modified), Javascript code comes:
var ajaxRequest; // The variable that we will put an XMLHTTPRequest object in
//We try to create an XMLHTTPRequest object,
//it is the object that lets us use Ajax
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
// and do stuff with it (this function will only run,
// when the data arrives back from the server!)
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){ //if request is successful
//HERE COMES THE DOM INSERTION
}
}
//We call the PHP file
ajaxRequest.open("GET", "/temp/select.php", true);
ajaxRequest.send(null);
What basically happened is that through XMLHTTPRequest we called your PHP file. When the response (PHP file's output) comes, ajaxRequest.onreadystatechange will run instantly. So whatever we want to do with the data received, we have to do it in the place I've written //HERE COMES THE DOM INSERTION.
We want to insert the output into the HTML. To take the easiest route, first create a div/span in your HTML at the exact place you want your select to appear (it's very important to define the ID).
<div id="i_want_my_select_here"></div>
Then again, here comes the Javascript that replaces //HERE COMES THE DOM INSERTION.
//use the id to get Javascript access to the DIV
var div=document.getElementById('i_want_my_select_here');
//put the output of PHP into the div
div.innerHTML=ajaxRequest.responseText;
I have a page on which I want to show a couple of MySQL tables.
There is one table on the right that may only change when a different person is selected.
De second table is the main table in the center. I have a dropdown box with contains every person. The results from the selected person is showed in the middle table. There are multiple results for each person so there is a second dropdown box to choose which of these results you want to show. This is al done by a Ajax XMLHTTP request.
The problem is that the right table uses some javascript. I know this is not possible with Ajax in combination with a XMLHTTP-request. But without the javascript I can't make what I want. Is there a way, to show the right table after the javascript is finished doing his work?
I now use frames. This is not very nice. Because I have to style both pages to look nice together, and that's not so easy as said. But this way it is doing as I want it to be.
So I searched the internet (a long time) and just a few minutes before I wanted to give up i found this piece of code (coming from http://www.javascriptkit.com/dhtmltutors/ajaxincludes.shtml):
function HttpRequest(url){
var pageRequest = false //variable to hold ajax object
/*#cc_on
#if (#_jscript_version >= 5)
try {
pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try {
pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e2){
pageRequest = false
}
}
#end
#*/
if (!pageRequest && typeof XMLHttpRequest != 'undefined')
pageRequest = new XMLHttpRequest()
if (pageRequest){ //if pageRequest is not false
pageRequest.open('GET', url, false) //get page synchronously
pageRequest.send(null)
embedpage(pageRequest)
}
}
function embedpage(request){
//if viewing page offline or the document was successfully retrieved online (status code=2000)
if (window.location.href.indexOf("http")==-1 || request.status==200)
document.write(request.responseText)
}
}
HttpRequest("external.htm") //include "external.htm" onto current page
This code works perfectly... The first time. As soon as you change the person the whole page disappears and only the table shows up and firefox keeps "loading" the page (you see that circle going round). I do know how to edit the code above to fit my needs but I have no understanding of Ajax or how to fix this problem. Hopefully someone can help me and give me a good solution! And tell me why the code above isn't working properly?
Thanks in advance!
Milaan
document.write only works when the page is loading for the first time, Once the page rendering is done, calling document.write will clear the page first.
https://developer.mozilla.org/en/document.write
What you might want to do instead is:
if (window.location.href.indexOf("http")==-1 || request.status==200) {
var elm = document.createElement('div');
elm.innerHTML = request.responseText;
document.getElementsByTagName('body')[0].appendChild(elm);
}
It´s been a long time since I´ve seen code like this, but one problem I can see, is that you don´t include any kind of variable in your XMLHttpRequest; no user ID or anything. Is it just supposed to load a static page?
And is there any reason you can´t use a library like jQuery? It´s no magic bullet but it will make your life and ajax requests a lot easier.
You might want to use dom functions to add your downloaded content to the existing document, like:
document.getElementById('mypanel').innerHTML = '<html code goes here>';
The best idea probably would be to use a slim javascript framework lie jquery which helps you with browser compatibility.
jQuery should make things easier for you. Your code should look something like this.
$.post("somepage.php", function(data){
$("#divID").html(data);
});
<div id="divID"></div>
And somepage.php could be something like this:
<?php
// get table content
echo "<table>...</table>";
?>