...

View Full Version : How do I make mysql table data available to clients browser and js ?



jeddi
05-09-2009, 06:36 AM
This is my project - it has some javascript elements and some php elements and I am not sure how to tie them together :confused:

This is my plan:

Overview:
I want to use a server based thesaurus to enable a client to make changes to their document in their browser.

So the thesaurus file needs to be served to the client and then the client does the searching locally using the pc's ram.

File would be about 3 Mb. ( A guess)

So a client has some text content in an html textarea of a form.
He/she highlights a word (with cursor or double-click) and then clicks on
a "thesaurus button".

Eg word = "gust"

That thesaurus button will take the word wind and put it in square brackets
and then after it it list words that it gets from the server provided thesaurus.

EG [gust, breeze, wind, surge]

Now, I can do this bit but what I don't know about is how to get javascript to read a text file from the server that delivers the html page.

The file format could be a flat text file with a line fro each entry:

gust: breeze, wind, surge

I guess that it would need these entries as well:

breeze: wind, surge, gust
wind: surge, surge, gust
surge: surge, gust, wind

This would make the file much longer though
Is there a way for js to search a file to do this kind of thing ?

I am familiar with php and could store everything in a mysql table
but I don't know how I would serve that up to the javascript.

Also it is the javascript that will have to do the search and retrieve
not the server.

The thesaurus needs to come from the server because the client may add
a new word and this needs to be available next time - so I need to update the thesaurus file on the server when the form is processed.

---------------

So the php question is:

How do I take the mysql database and serve up a file that js can read and perform searches on ?

timgolding
05-09-2009, 07:38 PM
No way in passing it to js without sending 3MB to the user each time. Which isn't really good for your users (especially if on dialup). I guess the thesaurus list would have to be coded into the page that is sent to the user in which case would be laggy on the browser. I would personally use AJAX for this task. That way when the user clicks to check the thesaurus entry it sends a request to a php file that could query the thesaurus for that term and send the data back to the client without the need for a page refresh.

Don't be put off by the term AJAX. From your part its just a case of inserting some JS in your code and then making the php file to do the query and return the data.

And let me know if you want that code to give it a try?

jeddi
05-12-2009, 08:34 AM
Hi Timgolding,

Thanks very much for your suggestion,
That sounds just what I need to do.

As this is the first time I have done anything like this,
I would appreciate to any kind of code to get me started.

Thanks again :thumbsup:

timgolding
05-12-2009, 12:19 PM
This is the sort of thing



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Thesaurus Tests</title>
<script type="text/javascript">
<!--
function getthesaurus(){
//crappy browser sniffer
var isFF = false;
var textSelected = false;
if(navigator.userAgent.toLowerCase().indexOf("firefox") > 0){
isFF = true;
}
var myarea = document.getElementById("area");
var begin,selection,end;
if (isFF == true){
if (myarea.selectionStart!= undefined) {
begin = myarea.value.substr(0, myarea.selectionStart);
selection = myarea.value.substr(myarea.selectionStart, myarea.selectionEnd - myarea.selectionStart);
end = myarea.value.substr(myarea.selectionEnd);
if (selection.length > 0){
textSelected = true;
}
}
}else{
if (window.getselection){
selection = window.getselection();
}else if (document.getselection){
selection = document.getselection();
}else if (document.selection){
selection = document.selection.createRange().text;
}
var startPos = myarea.value.indexOf(selection);
if (startPos!= 0){
var endPos = myarea.value.indexOf(selection) + selection.length;
textSelected = true;
}
}
if(textSelected == true){

myajax(selection)
}
}

function myajax(selection)
{
var ajaxRequest; // The variable that makes Ajax possible!

try
{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer Browsers
try
{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}

ajaxRequest.onreadystatechange = function()
{
if(ajaxRequest.readyState == 4)
{
if(ajaxRequest.responseText!="")
{
window.alert("match found");
return;
}
else
if(ajaxRequest.responseText == null)
{
window.alert("system error");
return;
}
else
{
window.alert("no match found");
return;
}
}
}



ajaxRequest.open("GET", "/thesaurus.php?selection=" + selection, true);
ajaxRequest.send(null);
}

//-->
</script>
</head>
<body>
<form method="" action="">
<textarea name="area" id="area">
</textarea>
<input type="button" onclick="return getthesaurus();" value="Check Thesaurus" />
</form>
</body>
</html>


it will send data to a file called thesaurus.php that goes in the same folder as the script is in other wise change the line



ajaxRequest.open("GET", "/thesaurus.php?selection=" + selection, true);


I haven't written the php part for you but you can have a go at that and let me know if you need help with that too?

jeddi
05-13-2009, 05:32 AM
Thanks VERY much.

I will start going through it
and will try to understand it before I implement.

jeddi
05-13-2009, 06:45 AM
OK I have read through
the code. This is very interesting! I didn't know that forms could be used
to run server-side scripts without need ing to reload a page!.

Now, I am having difficulty connecting it up

I have started a script "thesaurus.php ":

First of all I just want to make sure it is receiving the data,
so I just did this:


<?php
/*
* thesaurus.php
*
*/
$word = $_GET["selection"];
echo "Word: $word";

?>

I have put the code on my server
at:

http://www.sd5.info/theo.php


As you can see the control desn't seem to get past the
alert.

Looking at the myajax() function ,

here:


if(ajaxRequest.responseText!="")
{
window.alert("match found");
return;

When this bit does it's return will it get to this? :confused:

ajaxRequest.open("GET", "/thesaurus.php?selection=" + selection, true);

Thanks again for helping :)

timgolding
05-13-2009, 09:18 AM
OK I have read through
the code. This is very interesting! I didn't know that forms could be used
to run server-side scripts without need ing to reload a page!.

Now, I am having difficulty connecting it up

I have started a script "thesaurus.php ":

First of all I just want to make sure it is receiving the data,
so I just did this:


<?php
/*
* thesaurus.php
*
*/
$word = $_GET["selection"];
echo "Word: $word";

?>

I have put the code on my server
at:

http://www.sd5.info/theo.php


As you can see the control desn't seem to get past the
alert.

Looking at the myajax() function ,

here:


if(ajaxRequest.responseText!="")
{
window.alert("match found");
return;

When this bit does it's return will it get to this? :confused:

ajaxRequest.open("GET", "/thesaurus.php?selection=" + selection, true);

Thanks again for helping :)

Hi I can't see what your problem is. Well you just need two files one called thesaurus.php which is this code



<?php
/*
* thesaurus.php
*
*/
$word = $_GET["selection"];
echo "Word: $word";

?>


And the other called whatever (theo.php is fine) that should have the ajax code provided. As long as they are in the same folder the should be talking to each other fine.



ajaxRequest.open("GET", "/thesaurus.php?selection=" + selection, true);


This bit of code is responsible for sending the word to be checked to thesaurus.php. The bit resposible for sending it back is just the echo on the other file.

jeddi
05-13-2009, 04:36 PM
Hello again!

Unfortunately I don't know why it is not working either.

You can see the results by going here:

http://www.sd5.info/theo.php

Also you can see that thesaurus.php is on the same directory
by using this url:

http://www.sd5.info/thesaurus.php?selection=stuff

As expected it echos: Word: stuff

The theo.php stops at the alert box. Hitting the return does not seem to run the thesaurus.php script :confused:

Here is the theo.php

Maybe I made an error ?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Thesaurus Tests</title>
<script type="text/javascript">
<!--
function getthesaurus(){
//crappy browser sniffer
var isFF = false;
var textSelected = false;
if(navigator.userAgent.toLowerCase().indexOf("firefox") > 0){
isFF = true;
}
var myarea = document.getElementById("area");
var begin,selection,end;
if (isFF == true){
if (myarea.selectionStart!= undefined) {
begin = myarea.value.substr(0, myarea.selectionStart);
selection = myarea.value.substr(myarea.selectionStart, myarea.selectionEnd - myarea.selectionStart);
end = myarea.value.substr(myarea.selectionEnd);
if (selection.length > 0){
textSelected = true;
}
}
}else{
if (window.getselection){
selection = window.getselection();
}else if (document.getselection){
selection = document.getselection();
}else if (document.selection){
selection = document.selection.createRange().text;
}
var startPos = myarea.value.indexOf(selection);
if (startPos!= 0){
var endPos = myarea.value.indexOf(selection) + selection.length;
textSelected = true;
}
}
if(textSelected == true){

myajax(selection)
}
}

function myajax(selection)
{
var ajaxRequest; // The variable that makes Ajax possible!

try
{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer Browsers
try
{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}

ajaxRequest.onreadystatechange = function()
{
if(ajaxRequest.readyState == 4)
{
if(ajaxRequest.responseText!="")
{
window.alert("match found");
return;
}
else
if(ajaxRequest.responseText == null)
{
window.alert("system error");
return;
}
else
{
window.alert("no match found");
return;
}
}
}

ajaxRequest.open("GET", "/thesaurus.php?selection=" + selection, true);
ajaxRequest.send(null);
}

//-->
</script>
</head>
<body>
<form method="" action="">
<textarea name="area" id="area">
</textarea>
<input type="button" onclick="return getthesaurus();" value="Check Thesaurus" />
</form>
</body>
</html>

timgolding
05-13-2009, 08:22 PM
Just out of curiosity what browser are you using? I'm pretty sure the Ajax part of the script will work on your browser. But the text selection part I didn't have time to create myself so just stole it off someone. It worked fine on FF. Well I'm going to run some tests now.

jeddi
05-13-2009, 08:35 PM
I am using Moz FF 3.0.10

Did you look at the links ?

timgolding
05-13-2009, 11:28 PM
Sorry jeddi I am having an issue with IE8 showing all my forms on all my sites tiny winy. Getting a bit angry really.

Yes i just clicked the links you posted now. It seems to be working fine. You have to type some text into the text area then use the mouse to select the word you want to check when it is highlighted in black you click check thesaurus. Then a popup comes up saying match found. If you haven't fully selected a word before clicking the button then it does nothing. I can't see why it's not working for you. It works on IE8, Opera and FF for me. I am using Firefox/3.0.10 same as you it seems. Are you sure you have javascript enabled. what happens if you run this in a file?



<script type="text/javascript">
window.alert("javascript enabled");
</script>


Anyway here is some modified code. Fixes my IE8 issue and i think i am going to post on here any time i post any codes with form controls on it. It also does something if no words were selected. The alert box now actually displays the text selected e.g



Word: stuff






<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Thesaurus Tests</title>
<!--[if IE 8]>
<style type="text/css">
body
{
font-size: 14px;
}
form {
margin: 0px;
}

textarea, input, option, optgroup{
font-size: 14px;
}
</style>
<![endif]-->
<script type="text/javascript">
<!--
function getthesaurus(){
//crappy browser sniffer
var isFF = false;
var textSelected = false;
if(navigator.userAgent.toLowerCase().indexOf("firefox") > 0){
isFF = true;
}
var myarea = document.getElementById("area");
var begin,selection,end;
if (isFF == true){
if (myarea.selectionStart!= undefined) {
begin = myarea.value.substr(0, myarea.selectionStart);
selection = myarea.value.substr(myarea.selectionStart, myarea.selectionEnd - myarea.selectionStart);
end = myarea.value.substr(myarea.selectionEnd);
if (selection.length > 0){
textSelected = true;
}
}
}else{
if (window.getselection){
selection = window.getselection();
}else if (document.getselection){
selection = document.getselection();
}else if (document.selection){
selection = document.selection.createRange().text;
}
var startPos = myarea.value.indexOf(selection);
if (startPos!= 0){
var endPos = myarea.value.indexOf(selection) + selection.length;
textSelected = true;
}
}
if(textSelected == true){

myajax(selection)
}
else
window.alert("no text selected");
}

function myajax(selection)
{
var ajaxRequest; // The variable that makes Ajax possible!

try
{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer Browsers
try
{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}

ajaxRequest.onreadystatechange = function()
{
if(ajaxRequest.readyState == 4)
{
if(ajaxRequest.responseText!="")
{
window.alert(ajaxRequest.responseText);
return;
}
else
if(ajaxRequest.responseText == null)
{
window.alert("system error");
return;
}
else
{
window.alert("no match found");
return;
}
}
}

ajaxRequest.open("GET", "/thesaurus.php?selection=" + selection, true);
ajaxRequest.send(null);
}

//-->
</script>
</head>
<body>
<form method="post" action="nothing.php">
<textarea name="area" id="area"></textarea>
<input type="button" onclick="return getthesaurus();" value="Check Thesaurus" />
</form>
</body>
</html>


Can i ask you a massive favor - Have you got IE8 installed? If so can you load google.co.uk and see if the form controls (search box and buttons) there are tiny weeny unusable small?

jeddi
05-15-2009, 06:43 AM
Hi Tim.

That's no big favor and I am happy to take a look.
Very sorry but I only have version 6 and everything looks normal on it.

I don't really use IE except to check my website look, pretty much only use Moz FF.

Going back to my little script.

I think there is a mis-understanding.
The alert box was working fine in my browser using the first link that I gave.

The problem is that the intention of the js script is to
start the server side php script: thesaurus.php.

I get the alert box, no problem, but I want the thesaurus.php to be run,
the proof of that running will be the display Word: stuff

So its getting this to work that is the problem I guess:

ajaxRequest.open("GET", "/thesaurus.php?selection=" + selection, true);

The script thesaurus.php works by itself - that was what the second link proved.


Here is the thesaurus.php.




<?php
/*
* thesaurus.php
*
*/
$word = $_GET["selection"];
echo "Word: $word";

?>

( As you can see it a highly complex script ;) )


Thanks again

timgolding
05-15-2009, 09:22 AM
Hi jedi.

I don't use IE either.

The code I posted in the previous post (the revised code) sends the content of theo.php back to thesaurus.php then shows you what it is.

So will display Word: Stuff.

I chose the popup only to demonstrate how the two files talk to each other. All you need to know is that the content echoed on theo.php will be sent back to thesaurus.php and will be stored in this:


ajaxRequest.responseText

You can do what you like with that. So anything between



if(ajaxRequest.responseText!="")
{

return;
}


will be the script that displays the thesaurus results. You will probably use a bit of javascript to populate another results box. But anyway try the revised script in the above post.

jeddi
05-15-2009, 11:37 AM
OK,

Now I get you.

To test it out I changed thesaurus.php to:


<?php
/*
* thesaurus.php
*
*/
$word = $_GET["selection"];

if($word == "one"){$x = 1;}
if($word == "two"){$x = 2;}
if($word == "three"){$x = 3;}
if($word == "four"){$x = 4;}
if($word == "five"){$x = 5;}
if($word == "six"){$x = 6;}
if($word == "seven"){$x = 7;}

$y = (10*$x)+6;

echo "$word x ten plus six = $y";

?>

Works nicely - have ago :)

http://www.sd5.info/theo.php

timgolding
05-16-2009, 01:37 PM
OK,

Now I get you.

To test it out I changed thesaurus.php to:


<?php
/*
* thesaurus.php
*
*/
$word = $_GET["selection"];

if($word == "one"){$x = 1;}
if($word == "two"){$x = 2;}
if($word == "three"){$x = 3;}
if($word == "four"){$x = 4;}
if($word == "five"){$x = 5;}
if($word == "six"){$x = 6;}
if($word == "seven"){$x = 7;}

$y = (10*$x)+6;

echo "$word x ten plus six = $y";

?>

Works nicely - have ago :)

http://www.sd5.info/theo.php

Good that your starting to understand. I have tested that link, it works nicely provided I put one of those numbers in. You should initialize $x though in case a user doesn't put one of those words in



//at top
$x=0;


So what you going to do about the thesaurus what format is the actual thesaurus in. Is a text file, csv or what?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum