PHP reloading scripts without reloading the page

This site is best viewed in a modern browser with JavaScript enabled.

PHP reloading scripts without reloading the page

Ronnie268

I'm writing Analytical software that uses javascript but mainly PHP to log things

The javascript posts some result to $_GET variable like this

document.location.href = "?screenwidth=" + screen.width + "&screenheight=" + screen.height; but this requires the page to reload for PHP to process it.

However the page CANNOT reload every time someone visits, because it disrupts the user experience too much.

Is there a way, in javascript or PHP, of opening dynamically the PHP file, not in an iframe, cos that messes up the formatting, so PHP can operate on it and write it to a MYSQL database.

I don't mind if this requires some complicated code - I'm hapy to give it a bash.

Thanks,

Jonathan

Mindzai

You could send all this data via an asynchronous post request using javascript (AJAX). I'd recommend using one the frameworks such as jquery, they make this very simple.

STREETRULEZ

hi there =)

i'm at work now, so i can't try the code, but if you're little skilled in debugging, you can rewrite this =)

so, ajax is powerfull, but easy to hack, so i do not recommand ajax for such things.

try something like that:

<input type = button onclick = 'this.name = "openeer"; window.open("the.address.and/get?goes=here", "title", "format");' />

in the opening window write

openeer.functionToCall(variablesToSend);

i'm not sure if it was parent.openeer or openeer (the name we have given)

this is much secure than ajax =)

have phun

maxx

STREETRULEZ

hi there again =)

this.name was wrong - sorry, but here is an examplecode, i've wrote to get an login-window, returning the POST to the caller

function zeigeLogin()
{
	self.name = 'openeer';
	var wind = window.open("", "Login", "width=550,height=290");
	wind.document.write("<html><head>"+
	"<style type = 'text/css'>.login_legend{font-size:18px;font-weight:bolder;color:#555555;border:0px;}"+
	""+
	"</style>"+
	"</head><body><div id='suche_container' class='suche_container' style='width:540px;height:230px;background-image:url(images/popup_hg.jpg); padding-bottom: 6px;  border-bottom: 1px solid #D2D1D2;'>"+
					"<form action='' target = 'openeer' method='post' onsubmit = 'window.close()'>"+
					"<fieldset>"+
						"<legend class='login_legend' style='padding-left: 13px;'>IMMOBLOG LOGIN</legend>"+
						"<div style = 'margin-top:6px;'>"+
						"<label for = 'login_user' class = 'login_text_linemargin8px' style = 'color:#555555;width:100px;'>Benutzername</label>"+
						"<input type ='text' name = 'login_user' id = 'login_user' class='input_text' style = 'width:270px;' />"+
						"</div><div style = 'margin-top:4px;'>"+
						"<label for = 'login_password' class = 'login_text_linemargin4px' style = 'color:#555555;width:100px;'>Passwort</label>"+
						"<input type = password name = 'login_password' id = 'login_password' class='input_text' style = 'width:270px;' /></div>"+
						"<div style = 'margin-top:4px;margin-left:96px;'><input type = checkbox class = 'login_checkbox input_checkbox' style = 'color:#555555;' name = 'rememberme' id = 'rememberme' />"+
						"<label for = 'rememberme' class = 'login_text_linemargin4px'>Ich m&#246;chte aus diesem Computer einge-<br>loggt bleiben, bis ich mich aktiv abmelde</label></span></div>"+
						"<div style = 'margin-top:4px;'><span class = 'login_text_linemargin4px' style = 'margin-left:280px;'><input type='submit' value='Anmelden' class='input_submit'></span></div>"+
						"<div></div><br /><br />"+
						"<legend class = 'login_legend'>Registrierung</legend>"+
						"<div>Um einen Kommentar abzugeben, k&#246;nnen Sie sich hier registrieren.</div>"+
						"<div  style = 'margin-left:280px;'><input type = button class = 'input_button' value = 'Registrieren' onclick = 'this.form.action=\"?register=true\";this.form.submit();window.close();'/></div>"+
				"</fieldset></form></div></body></html>");
}

for example you can call openeer.foo(bar) for value-passing =)

Mindzai

STREETRULEZ;1010760 wrote:
so, ajax is powerfull, but easy to hack, so i do not recommand ajax for such things.

What an absolutely nonsense statement. AJAX is just a technique used to send a request to the server, just the same as if you typed the url and hit enter yourself. Your solution of opening another window with a form which the user then has to submit anyway is far, far less graceful than sending the request automatically, and precisely no more secure.

Ronnie268

Mindzai;1010706 wrote:
You could send all this data via an asynchronous post request using javascript (AJAX). I'd recommend using one the frameworks such as jquery, they make this very simple.

How would I do this? Is it possible without reloading the page?

Thanks for the replies,

Ronnie268

Mindzai

Yes, the following is an example using jQuery:

$.post(
    "stats.php", // script which saves stats
    {
        // the data to send
        foo: "someValue",
        bar: 123,
        baz: "some other value" // etc
    },
    function(response) {
        // callback function from your php script
        alert(response.message);
     }, 
    "json" // response format
);

stats.php:

<?php

if (!isset($_POST)) die();

// save the stats or whatever here, they are all in $_POST, eg $_POST['foo'] == "someValue" 

// send a response if you want to
echo json_encode(array('message' => 'Hooray! You sent: ' .  print_r($_POST, true))); 

?>

sjk1000

surely you can squeeze an iframe in to make this really simple? the one I've just used to display nr realtime incoming info is

I add the following which reloads the page after 300000 milliseconds ie 5mins ...without disturbing the user

no scrollbars, border or anything visible. I assume I can shrink the width and height to 1px to make it disappear altogether

Mindzai

All well and good until you want to use something other than a transitional doctype, not to mention the annoying click every time the iframe refreshes. Plus this will resend the stats every 5 mins, surely you want stats once per request? There is really no need to be using iframes in this day and age!

STREETRULEZ

Mindzai;1010795 wrote:
What an absolutely nonsense statement. AJAX is just a technique used to send a request to the server, just the same as if you typed the url and hit enter yourself. Your solution of opening another window with a form which the user then has to submit anyway is far, far less graceful than sending the request automatically, and precisely no more secure.

hi there =)

first, i want to scream out, that my daughter was born on 2009-06-02 23:15:00 and we named her 'michelle' =) and yes, i'm proud bout this little girl XD

so to this quote you should read something more on some official sites =)

http://www.usatoday.com/money/industries/technology/2006-08-04-ajax-attack-usat_x.htm

is one of the sites i've in mind =)

Mindzai

Yes, that certainly seems "official"...

Saying AJAX is responsible for security holes is utter rubbish. If the code requested has security holes, it makes no difference whether AJAX is involved or not. AJAX is just a technique, not a technology in itself. But you carry on using JS popups like it's 1998, it's no skin off my nose!

Ronnie268

sjk1000;1010916 wrote:
surely you can squeeze an iframe in to make this really simple? the one I've just used to display nr realtime incoming info is

<iframe width=”270″ height=”146″ scrolling=”no” frameborder=”0″ src=”...linkToFramePage...”></iframe>

I add the following which reloads the page after 300000 milliseconds ie 5mins ...without disturbing the user

<script>
function reFresh() {
location.reload(true)
}
window.setInterval(”reFresh()”,300000);
</script>

no scrollbars, border or anything visible. I assume I can shrink the width and height to 1px to make it disappear altogether

I use this for the nightly version but it won't pull out the title of the page, and invalidates Strict and Transitional doctypes.

I've been thinking about a way of doing it with a 1px x 1px image something like this

<img src="log.php?<script type="text/javascript">document.write("screenheight = " + screen.height + "&screenwidth = " + screen.width);

This would produce a url like log.php?screenheight=768&screenwidth=1024 etc.

How could I use PHP to produce an image in the script?

Thanks,

Ronnie268

Mindzai

You are really not going about this the right way. There is a technique designed for doing just what you are trying to do already. Please don't be put off by some of the rubbish posted in this thread.

bokeh

If you wrote your html and css properly you wouldn't need to worry about the client's screen dimensions. What are you going to do for people with javascript disabled.

Mindzai

Who said screen resolution is an issue? It's stats software. Analytics captures client screen resolution...

bokeh

Mindzai;1011441 wrote:
Who said screen resolution is an issue? It's stats software. Analytics captures client screen resolution...

So why does he want an iframe?

Mindzai

Because he was given the (extremely bad) advice that he should not use AJAX to send the stats back to the server. If you read the very first line of first post:

I'm writing Analytical software that uses javascript but mainly PHP to log things

Ronnie268

bokeh;1011432 wrote:
If you wrote your html and css properly you wouldn't need to worry about the client's screen dimensions. What are you going to do for people with javascript disabled.

If you'll excuse me saying, I'm a web designer and I think I know how to write CSS and (X)HTML. As Mindzai correctly pointed out, I am writing an analytics package for distribution (free) and, although this is not something I require, Screen Resolution is something logged by Google Analytics, the most well-known free package. Many people may take this into account when considering using my software.

For people without javascript, the main script runs in php, so that will pick most things up. Please do not flame, it is considered offensive on forums. The iframe was a temporary method of implementing javascript.

To connect javascript and PHP, it is necessary either to set cookies or to compose a url using javascript. Both require a page reload for PHP to interpret them. This messes up detection of the referrer in PHP, so I used an iframe.

I repeat on sending a url of a PHP script for the image, how do I get it do display the image?

Thanks,

Ronnie268

Mindzai

Ronnie268;1011548 wrote:
To connect javascript and PHP, it is necessary either to set cookies or to compose a url using javascript. Both require a page reload for PHP to interpret them. This messes up detection of the referrer in PHP, so I used an iframe.

This is not correct. As Ive said a few times in this thread now, the right way to do this is to send a post request via AJAX. This doesn't require composing a url with javascript, setting cookies or reloading any pages.

if you really want to use an image (which I would consider a "bodge job" as we say in the UK), you'd have to set the appropriate HTTP header withthe header() function, and then output the image file to the browser.

<?php
header('Content-type: image/gif');
readfile('file.gif');
exit();
?>

I really would not suggest doing this though, it's not a good approach.

Ronnie268

Mindzai;1011582 wrote:
if you really want to use an image (which I would consider a "bodge job" as we say in the UK), you'd have to set the appropriate HTTP header withthe header() function, and then output the image file to the browser.

Yes - I'm UK too. I am aware of this being a "bodge" job.

Thanks for the Ajax solution. How exactly would I do this? I'm not an Ajax guy!

Thanks,

Ronnie268