...

View Full Version : Don't want page to reload when submitting checkboxes



Calle81
11-05-2010, 09:52 AM
Hi all!

I have created a form with some checkboxes. However there is a problem. When I click the submit button the whole page reload. I only want the odds tables to reload so to speak.

To make matters worse, after the page has been refreshed it goes back to the top.

Here is the page: http://www.spelacasino.se/odds-online/

Any suggestions?

poyzn
11-05-2010, 09:55 AM
Any suggestions?

Using ajax to reload div content

Calle81
11-05-2010, 01:04 PM
Easier said then done it seems.

kbluhm
11-05-2010, 02:21 PM
Easier said then done it seems.

Just like everything else web-related. ;)

Calle81
11-05-2010, 03:24 PM
Well I haven't been using ajax anything. This is my current code (shortened down a bit, might have missed some parts, but this script is working well except it reloads the entire page):

Any suggestions is appreciated. Looking to jsut reload the div with the table. Bit tired after 23 hours of programming but trying to keep it up :thumbsup:



<input id="All" name="All" type="checkbox" value="Alla"/>All

<input id="LaLiga" name="Primera" type="checkbox" value="Primera"/>La Liga

<input id="SerieA" name="Serie" type="checkbox" value="Serie"/>Serie A

<input type="submit" value="Submit" name="submit"/>





if ($_POST["Alla"] == "Alla")
{
$LeagueAll = '';
}

if ($_POST["Serie"] != null)
{
$Serie = $_POST["Serie"];
$LeagueAll = "EMPTY";
}
else
{
$Serie = "EMPTY";
}

if ($_POST["La Liga"] != null)
{
$LaLiga= $_POST["LaLiga"];
$LeagueAll = "EMPTY";
}
else
{
$LaLiga= "EMPTY";
}

require_once('connections/test.php');

$maxRows_Recordset1 = 200;
$pageNum_Recordset1 = 0;
if (isset($_GET['pageNum_Recordset1'])) {
$pageNum_Recordset1 = $_GET['pageNum_Recordset1'];
}
$startRow_Recordset1 = $pageNum_Recordset1 * $maxRows_Recordset1;

mysql_select_db($database_Odds, $Odds);
$query_Recordset1 = "SELECT `Game Date`, `Game Time`, `Game Name`, `League Name`, `Odds_1`, `Odds_X`, `Odds_2` , `Odds_1_Unibet`, `Odds_X_Unibet`, `Odds_2_Unibet`, `Odds_1_bet365`, `Odds_X_bet365`, `Odds_2_bet365`,`Odds_1_betsafe`, `Odds_X_betsafe`, `Odds_2_betsafe` FROM Games WHERE `Game Name` NOT LIKE '%:%' AND `League Name` LIKE '%$LaLiga%' OR `League Name` LIKE '%$Serie%' AND `Game Name` NOT LIKE '%:%' OR `League Name` LIKE '%$All%' AND `Game Name` NOT LIKE '%:%'

etc...

Keleth
11-05-2010, 03:50 PM
You can't do it with PHP. PHP is a server side technology. It does not have any active communication with the user. It takes a page, processes it into HTML, and sends it to the user. Once at the user end, the user has to do w/e on the page, send a new request to the server, which will send back new HTML.

To do this, you need Javascript, and specifically for this situation, AJAX. Google AJAX, or for simplicity, pick up a framework like jQuery, which makes doing AJAX requests easier.

Calle81
11-05-2010, 04:08 PM
Yeah, I know I need AJAX, that is what this thread is about. I just can't seem to get any AJAX coding working. Been playing around with a few tutorials but no luck so far.

kbluhm
11-05-2010, 04:56 PM
Here's a simple AJAX request using jQuery to hijack click events, process the data with `ajax/my-form.php`, and inserts the resulting HTML into a defined div.

Untested, no guarantees, example only:


<form id="my-form">
<input type="checkbox" name="check_1" value="1" />
<input type="checkbox" name="check_2" value="2" />
<input type="checkbox" name="check_3" value="3" />
<div id="form-response"></div>
</form>

<script>
// Hijack the checkbox click events
$( '#my-form input[type=checkbox]' ).click( function() {
$.post(
// The URL to process the form data and spit out HTML
'ajax/my-form.php',
// The serialized form data, treated as $_POST
$( '#my-form' ).serialize(),
// grab the response and do with it what you will
function( response ) {
$( '#my-form #form-response' ).html( response );
}
);
} );
</script>

Keleth
11-05-2010, 05:40 PM
Yeah, I know I need AJAX, that is what this thread is about. I just can't seem to get any AJAX coding working. Been playing around with a few tutorials but no luck so far.

To be fair, you never expressed interest in help in AJAX code, just generic help. So you can understand my confusion, specially since this is a PHP forum :p

Why don't you show us your code? We can help you figure it out. But that is also why I recommended jQuery, it makes AJAX requests very easy.

Calle81
11-05-2010, 08:02 PM
Thanks for your suggestion kbluhm. I will try the code, I want a submit button though but I think I can figure out how to put one in.

kbluhm
11-05-2010, 08:32 PM
Here's another hint. To hijack the form submission, change this line:


$( '#my-form input[type=checkbox]' ).click( function() {

...to this:


$( '#my-form' ).submit( function() {

...and return false at the end to prevent the default action:


<form id="my-form" action="/ajax/my-form.php">
<input type="checkbox" name="check_1" value="1" />
<input type="checkbox" name="check_2" value="2" />
<input type="checkbox" name="check_3" value="3" />
<input type="submit" value="submit" />
<div id="form-response"></div>
</form>

<script>
// Hijack the form submission
$( '#my-form' ).submit( function() {
// not too sure of a better solution for handling scope within the callback
$this = $( this );
$.post(
// The URL to process the form data and spit out HTML
$this.attr( 'action' ),
// The serialized form data, treated as $_POST
$this.serialize(),
// grab the response and do with it what you will
function( response ) {
$this.children( '#form-response' ).html( response );
}
);
// Halt the default action
return false;
} );
</script>

Calle81
11-07-2010, 03:04 PM
Thanks for you suggestions, seems to work out well so far. Gonna test it a bit more to see that everything is ok.

Calle81
11-07-2010, 04:10 PM
Only problem with this code seems to be that it doesn't run the my-form.php on the first page load. So first time you enter the page is empty.

DrDOS
11-07-2010, 04:28 PM
Here's what I did for a site without a database. I made a php page that contained the onload entries for the form, just the entries you see when you first load the page. All the folders were checked by the index.php to see if they had a version of this entries.php, if not it was copied to the folder. Then when the form was submitted it changed the entries in the folder copy. So when the page reloaded after submission the form had all the user made entries. Of course the same thing could be done with a database, with some modifications.

kbluhm
11-07-2010, 04:45 PM
Only problem with this code seems to be that it doesn't run the my-form.php on the first page load. So first time you enter the page is empty.

That's not really a problem. It's really not that difficult. You have full control over whatever you'd like to display within that div:


<form id="my-form" action="/ajax/my-form.php">
<input type="checkbox" name="check_1" value="1" />
<input type="checkbox" name="check_2" value="2" />
<input type="checkbox" name="check_3" value="3" />
<input type="submit" value="submit" />
<div id="form-response"><?php
/*
* Display whatever you want here
* - you have full control
* - include a file
* - process some inline code
* - etc
* - etc...
*/
?></div>
</form>

<script>
// Hijack the form submission
$( '#my-form' ).submit( function() {
// not too sure of a better solution for handling scope within the callback
$this = $( this );
$.post(
// The URL to process the form data and spit out HTML
$this.attr( 'action' ),
// The serialized form data, treated as $_POST
$this.serialize(),
// grab the response and do with it what you will
function( response ) {
$this.children( '#form-response' ).html( response );
}
);
// Halt the default action
return false;
} );
</script>

Calle81
11-08-2010, 06:17 PM
Thank you so much for your help, got it all working with ajax now. You can check it out at : http://www.spelacasino.se/odds-online/

Cheers!

/Carl



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum