Page 1 of 1
jquery & ajax
Posted: Mon Jul 19, 2010 6:02 pm
by alexander19
Hello everyone!
Been working on a donation system made in jquery,where guild members could donate gold for the guild's benefit.
The wierd thing is that I had no problem with it until today,when I found out that it doesnt work as it should be,
e.g: if someone inserts an amount of gold to donate,it would show the alert box with the donated amount,refresh the page but wont call the .php script anymore(and the wierd thing is that it doesnt happen all the time,sometime it works
)
In ie works fine,but in firefox and chrome it has this wierd bug(didnt checked the other browsers).
I'm gonna post the jquery script and the donation form:
Code: Select all
<script>
function doAjaxPost() {
// get the form values
var field_a = $('#field_a').val();
var field_b = $('#field_b').val();
var field_c = $('#field_c').val();
$.ajax({
type: "POST",
url: "gdonate.php",
data: "amount="+field_a+"&player="+field_b+"&pid="+field_c,
success:alert("The amount of "+field_a+" silver was donated")
});
}
</script>
<script type="text/javascript">
$(document).ready(function()
{
$('#submit').click(function()
{
location.reload();
});
});
</script>
And the form:
Code: Select all
<form action="" method="post">
<input type="text" id="field_a" size="30" maxlength="30">
<input type="hidden" id="field_b" value="<?php echo $player; ?>"/>
<input type="hidden" id="field_c" value="<?php echo $pid; ?>"/>
<input type="button" name="submit" id="submit" value="Donate" onClick="doAjaxPost()"></form>
Any hints would be greatly appreciated,thanks!
Alexander,
Re: jquery & ajax
Posted: Mon Jul 19, 2010 9:05 pm
by Chris
Make the PHP show any errors and then make your JS show the response text? Damn I hate jQuery
. If you just used good old normal JS it would be way easier to fix
. But that's just my opinion aparently.
Re: jquery & ajax
Posted: Mon Jul 19, 2010 10:24 pm
by Jackolantern
I love jQuery
Where are you calling the doAjaxPost() function? When the user clicks the submit button, it appears you are just reloading the page. You could also try using the
$.post() function. It is just a wrapper for $.ajax, but it is more user-friendly. Then, add the location.reload to the callback function from the $.post AJAX call. That way, when the user clicks the submit button, the event function will first grab the form values and store them in variables, call the $.post method to hit the PHP script, and then the callback will reload the page.
Re: jquery & ajax
Posted: Tue Jul 20, 2010 10:06 am
by alexander19
hmm I came up with something like this:
Code: Select all
<script>
function doAjaxPost() {
// get the form values
var field_a = $('#field_a').val();
var field_b = $('#field_b').val();
var field_c = $('#field_c').val();
$.post("gdonate.php",
{ "amount="+field_a+"&player="+field_b+"&pid="+field_c, },
{ location.reload()},
);
}
</script>
Which obviously doesn't work lol..
Any hints on this?
Re: jquery & ajax
Posted: Tue Jul 20, 2010 3:26 pm
by Jackolantern
Maybe something like this could work:
Code: Select all
$(document).ready(function() {
$('#submit').click(function() {
var field_a = $('#field_a').val();
var field_b = $('#field_b').val();
var field_c = $('#field_c').val();
$.post('gdonate.php', {
amount: field_a,
player: field_b,
pid: field_c
}, function() {
location.reload();
});
});
});
Re: jquery & ajax
Posted: Tue Jul 20, 2010 3:37 pm
by alexander19
Thx a lot man it worked nice
Edit:
Btw, I'm not allowed to have multiple forms with jquery on the same page?
I tried adding 2 forms which uses the script you helped me with,but only the first one works,if you check the second one,nothing happens(the php script isnt called and the page doesn't refresh).
I tried changing the id and name of the form button and chnaged it inside the script too but it still wont work.
Any ideeas on this?
Re: jquery & ajax
Posted: Tue Jul 20, 2010 11:07 pm
by Jackolantern
You aren't adding two $(document).ready() functions are you? While I have not set up two AJAX-enables forms on the same page before, I don't know why this wouldn't work:
Code: Select all
$(document).ready(function() {
$('#submit1').click(function() {
var field_a = $('#field_a').val();
var field_b = $('#field_b').val();
var field_c = $('#field_c').val();
$.post('gdonate.php', {
amount: field_a,
player: field_b,
pid: field_c
}, function() {
location.reload();
});
});
// Second form function
$('#submit2').click(function() {
var field_d = $('#field_d').val();
var field_e = $('#field_e').val();
var field_f = $('#field_f').val();
$.post('otherscript.php', {
amount: field_d,
player: field_e,
pid: field_f
}, function() {
location.reload();
});
});
});
Re: jquery & ajax
Posted: Wed Jul 21, 2010 8:45 am
by alexander19
Thx man,it works nice
Re: jquery & ajax
Posted: Sun Jul 25, 2010 12:42 pm
by alexander19
Didn't want to open another post for this issue,so I'm just gonna post it here.(and sorry for the double post)
I have another jquery script,a form and a php script:
Jquery script:
Code: Select all
<script>
$(document).ready(function() {
$('#submit').click(function() {
var field_a = $('#field_a').val();
$.post('attack.php', {
location:field_a
}, function(html){
$("#response").html(html);
});
});
</script>
The form:
Code: Select all
<form action="" method="post">
<input type="hidden" id="field_a" value="<?php echo $location; ?>"/>
<input type="submit" value="Attack" id="submit" class="button1" />
</form>
The php script(I made this just for test,to see if I can echo those values properly inside the div):
Code: Select all
<?php
include_once 'connect.php';
$location = $_POST['location'];
$creatureinfo="SELECT * from creatures where location='$location'";
$creatureinfo2=mysql_query($creatureinfo) or die("could not get the creature you were fighting!");
$creatureinfo3=mysql_fetch_array($creatureinfo2);
echo "The location is ".$location." and the creature name is".$creatureinfo3['name']."";
?>
And the css for the #response id is :
Code: Select all
#response {
height: 250px;
border: 1px solid;
padding: 5px;
overflow: auto;
}
What I'm trying to do,is showing the echoed messages from the php script,inside the #response id.
Been googling for a lot of tutorials and examples,and the only thing I could come up with is this...which doesn't work
Any thoughts on this?
Thanks,
Alexander,
Re: jquery & ajax
Posted: Sun Jul 25, 2010 4:54 pm
by Jackolantern
You need to update your jQuery script like this:
Code: Select all
<script>
$(document).ready(function() {
$('#submit').click(function() {
var field_a = $('#field_a').val();
$.post('attack.php', {
location:field_a
}, function(data){
$("#response").html(data);
});
});
</script>
The callback function in the $.post() call implicitly calls the data returned from the PHP script "data". To my knowledge, there is no way to change this variable's name without digging into jQuery's guts. Provided that you have a div, span or some other container with the ID of "response" on your HTML page, this should work.