Need help in adding jQuery to PHP!

Hello,
I have a text based game, i have done the register and login page using PHP and jQuery but i can't use that knowledge with the other PHP files, such as crimes , topics ... and so on.
What i want is to add jQuery into my PHP files in order to remove the refresh on submit, for example player want to do crime or send message, it will submit using jQuery and display a message without refresh.

Any help is appreciated , i have a file already testing it on it , its working but not all of it!

Please if you have a good knowledge with this or you believe that you can help me out, PM me!

Am ready to do anything in return.
Thanks in advance.

 

That should get you started :
Process a form without refreshing the page

 

I have already started that without any problem (Login and Registering) but am having some problems in long PHP files!

 

What kind of problems ? Simply separate the actions of the AJAX requests in a PHP file and the caller (the JS code) in another PHP.

 

I have the problem that if the page didn't finish the load and the user clicked on submit it will view the message in the Submit PHP file, else it will show the message in the same page.
So what i want is , the user can't submit until the page is loaded, how can i do that?

 

use in every $.ajax request the option async : true

 

Ok, i have just found out that FireFox browser is only loading some times , how can i solve it?

 

$(document).ready(function(){
	
	$('#send_msg').submit(function(e) {

		send_msg();
		e.preventDefault();
		
	});
	
});


function send_msg()
{
	hideshow('loading',1);
	error(0);
	
	$.ajax({
		type: "POST",
		url: "http://www.mafiafamilies.net/submit/send_msg.php",
		data: $('#send_msg').serialize(),
		dataType: "json",
		success: function(msg){
			
			if(parseInt(msg.status)==1)
			{
				succ(1,msg.txt);

			}
			else if(parseInt(msg.status)==0)
			{
				error(1,msg.txt);

			}
			

			hideshow('loading',0);
		}

	});

}


function hideshow(el,act)
{
	if(act) $('#'+el).css('visibility','visible');
	else $('#'+el).css('visibility','hidden');
}

function error(act,txt)
{
	hideshow('error',act);
	if(txt) $('#error').html(txt);
}


function succ(act,txt)
{
	hideshow('succ',act);
	if(txt) $('#succ').html(txt);
}

Code (markup):

This is my JS

 

Replace your jQuery document ready function with :

$(document).ready(function(){
	$('#send_msg').submit(function() {
		send_msg();
		return false;
	});
});

HTML:

 

Same problem, if user click before the page is loaded it will show the message from the Submit PHP file, and on Firefox some times it work and some times it just loading...

All help is appreciated , thank you tvoodoo for your time

 

Fixed on FireFox , but still having the other problem.
What i need is to disable the Submit button until the page is being fully loaded.
And how can i refresh image when user submit , for example , i have Slot Machine , i want to refresh to refresh the 3 images when user submit using AJAX.
Is that possible?

Again , thank you.

 

Do something like this :

<script>
function send_msg()
{
	hideshow('loading',1);
	error(0);
	
	$.ajax({
		type: "POST",
		url: "http://www.mafiafamilies.net/submit/send_msg.php",
		data: $('#send_msg').serialize(),
		dataType: "json",
		success: function(msg){
			
			if(parseInt(msg.status)==1)
			{
				succ(1,msg.txt);

			}
			else if(parseInt(msg.status)==0)
			{
				error(1,msg.txt);

			}
			

			hideshow('loading',0);
		}

	});
        return false;
}


function hideshow(el,act)
{
	if(act) $('#'+el).css('visibility','visible');
	else $('#'+el).css('visibility','hidden');
}

function error(act,txt)
{
	hideshow('error',act);
	if(txt) $('#error').html(txt);
}


function succ(act,txt)
{
	hideshow('succ',act);
	if(txt) $('#succ').html(txt);
}
</script>
<form action="#" method="POST" onsubmit="send_msg()">
</form>

HTML:

 

Yes it is ... you will have to try some basic ajax request so that you can understand how it works.
The slot machine can be achieved using 2 solutions :
1.Generating a random number that will return one of your images for each slot (repeating for the number of slots you have)
OR
2.Call one ajax request and generate all slots directly in one php script call

 

I have the PHP script already for changing those images, but i want to refresh them with the output on succ for example.