asked on

jquery interaction with php

Hi,

I ran into a bit of a snag with a php/jquery program after I got some more instructions recently.

I thought php would solve it but maybe it wont.

I need to place say 10 equations on a canvas /html5 which will display 1 simple maths question at a time eg 4 + 5 = ? these are 2 random variables and an answer in a variable.
I need to click a button and then display another question on the canvas after checking the answer of user input in a textbox.
After 10 questions the user clicks a button and saves the score to a mysql DB.

I know how to access a db with php no problem and creating a canvas with random variables isnt an issue but getting the button click to
1)refresh the canvas
2)save to a mysql db from jquery and that involves jquery/php communication.

It is linking the technologies is confusing me as in aspx this can be done all with 1 language.

SOLUTION

Julian Hansen

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Julian Hansen

Having said that ....

I don't see why you need to AJAX your values with JQuery at all.

Keep the validation code and submit a form back to your script to save the answer.

Or am I missing the point of your question?

t is linking the technologies is confusing me as in aspx this can be done all with 1 language.

Not sure what you mean by this - PHP and ASP are essentially the same in the way they work.
They generate html which is sent to the browser.
They receive requests back from the browser optionally with GET / POST variables.

Javascript / JQuery is used in both situations to enhance the above process.

In ASPx you have update panels and other tools that generate code to do some of the heavy lifting for things like AJAX but the underlying processes remain the same.

jagguy

ASKER

Thanks for the responses.
In aspx I can stay on the same page with postbacks and keep variables values with sessions.
The canvas element gives me more control of what appears on screen as more functional than the aspx model but it isnt easy to connect to a db.

let me look at your code first before I respond.

Julian Hansen

You can do that with PHP as well - it is not an ASP thing - just that ASP hides the detail from you.

The connection to the db always has to be from the server - you can't connect directly to the database from the client.

There are two approaches

1. Post back a form to a server side process which validates and submits to db or generates an error and regenerates the page with submitted values and errors

OR

2. Javascript in page makes an AJAX request back to a server side script which pretty much does the same thing - validates / submits or sends back errors for the AJAX script to display on the screen.

Ray Paseur

Here is a "hello world" example showing how to use jQuery and AJAX to replace the contents of an element in the document. Please read it over and post back with any questions.
https://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_10712-The-Hello-World-Exercise-with-jQuery-and-PHP.html

jagguy

ASKER

OK I am still reading your response and here is my code.
It works fine apart from a few display issues .
You can see where I need to connect to the db and I need to work out what to do.

<body>
<input type="button" value="Click Answer"/>
<input type="text" name="one"/>
<input type="button" value="Next Quetion"/>

   <canvas id="myCanvas" width="200" height="200"></canvas>
   <script>
  var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
   var j=0;
	var btn = document.getElementsByTagName("input")[0];
	var txt1 = document.getElementsByTagName("input")[1];
	var btn2 = document.getElementsByTagName("input")[2];
	ctx.font="30px Arial";
	var rnum1;
	var rnum2;
	var ans=0;
	var correct=0;

	function display() {
		
        ctx.clearRect(0,0,200,200);
		rnum1=Math.floor(Math.random()*10)+1;
		rnum2=Math.floor(Math.random()*10)+1;
		ans=rnum1+rnum2;
		ctx.fillText(rnum1 ,10,70);
		ctx.fillText(" + " +rnum2 +" = ",40,70);
		
      //  fi++;
     }
	 
     btn.addEventListener("click", function(){
      //   ctx.clearRect(0,0,200,200);
       // ctx.fillText("hello=" ,10,110);
		if (ans== txt1.value)
		{
			//txt1.value="correct";
			ctx.fillText("correct"  ,10,30);
			correct+=1;
		}
		else 
		{
			//txt1.value="wrong";
			ctx.fillText("wrong"  ,10,30);
		}
		ctx.fillText(" num correct" + correct  ,10,100);
		if (correct==10)
		{
		//connect mysql db and insert a row	 *****************************
		}
    });
	
	  btn2.addEventListener("click", function(){
       // ctx.clearRect(0,0,200,200);
   		display();
		
    });
	
	display();
	
	
    </script>

</body>
</html>

Open in new window

Ray Paseur

Since the JavaScript is running on the client machine and the MySQL data base is running on the server, you will want to use an AJAX request from the client to the server to send the fields you want inserted into the row. The article posted above shows the design pattern to follow. You will just put the values for your fields into the request and post it to the backend script.

SOLUTION