Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,674
    Thanks
    28
    Thanked 4 Times in 4 Posts

    How do I make mysql table data available to clients browser and js ?

    This is my project - it has some javascript elements and some php elements and I am not sure how to tie them together

    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 ?

  • #2
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    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?
    You can not say you know how to do something, until you can teach it to someone else.

  • #3
    Senior Coder
    Join Date
    May 2006
    Posts
    1,674
    Thanks
    28
    Thanked 4 Times in 4 Posts
    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

  • #4
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    This is the sort of thing

    Code:
    <!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

    Code:
     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?
    Last edited by timgolding; 05-12-2009 at 02:34 PM.
    You can not say you know how to do something, until you can teach it to someone else.

  • Users who have thanked timgolding for this post:

    jeddi (05-13-2009)

  • #5
    Senior Coder
    Join Date
    May 2006
    Posts
    1,674
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Thanks VERY much.

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

  • #6
    Senior Coder
    Join Date
    May 2006
    Posts
    1,674
    Thanks
    28
    Thanked 4 Times in 4 Posts
    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 Code:
    <?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:

    Code:
    if(ajaxRequest.responseText!="")
                    { 
                        window.alert("match found");
                        return;
    When this bit does it's return will it get to this?

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

    Thanks again for helping

  • #7
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Quote Originally Posted by jeddi View Post
    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 Code:
    <?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:

    Code:
    if(ajaxRequest.responseText!="")
                    { 
                        window.alert("match found");
                        return;
    When this bit does it's return will it get to this?

    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 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.

    Code:
     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.
    Last edited by timgolding; 05-13-2009 at 09:20 AM.
    You can not say you know how to do something, until you can teach it to someone else.

  • #8
    Senior Coder
    Join Date
    May 2006
    Posts
    1,674
    Thanks
    28
    Thanked 4 Times in 4 Posts
    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

    Here is the theo.php

    Maybe I made an error ?

    PHP Code:
    <!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(0myarea.selectionStart);  
    selection myarea.value.substr(myarea.selectionStartmyarea.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=" selectiontrue);
           
    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> 
    Last edited by jeddi; 05-13-2009 at 04:39 PM.

  • #9
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    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.
    You can not say you know how to do something, until you can teach it to someone else.

  • #10
    Senior Coder
    Join Date
    May 2006
    Posts
    1,674
    Thanks
    28
    Thanked 4 Times in 4 Posts
    I am using Moz FF 3.0.10

    Did you look at the links ?

  • #11
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    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?

    Code:
    <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.
    Edit: The alert box now actually displays the text selected e.g

    Code:
    Word: stuff


    PHP Code:
    <!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-size14px;
    }
    form {
        
    margin0px;
    }

    textareainputoptionoptgroup{
        
    font-size14px;
    }
    </
    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(0myarea.selectionStart);  
    selection myarea.value.substr(myarea.selectionStartmyarea.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=" selectiontrue);
           
    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?
    Last edited by timgolding; 05-14-2009 at 12:58 AM.
    You can not say you know how to do something, until you can teach it to someone else.

  • #12
    Senior Coder
    Join Date
    May 2006
    Posts
    1,674
    Thanks
    28
    Thanked 4 Times in 4 Posts
    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 Code:
    <?php 
    /*
    *  thesaurus.php 
    *
    */
    $word $_GET["selection"];
    echo 
    "Word: $word";

    ?>
    ( As you can see it a highly complex script )


    Thanks again

  • #13
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    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:

    Code:
    ajaxRequest.responseText
    You can do what you like with that. So anything between

    Code:
    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.
    You can not say you know how to do something, until you can teach it to someone else.

  • #14
    Senior Coder
    Join Date
    May 2006
    Posts
    1,674
    Thanks
    28
    Thanked 4 Times in 4 Posts
    OK,

    Now I get you.

    To test it out I changed thesaurus.php to:

    PHP Code:
    <?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

  • #15
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Quote Originally Posted by jeddi View Post
    OK,

    Now I get you.

    To test it out I changed thesaurus.php to:

    PHP Code:
    <?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

    Code:
    //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?
    You can not say you know how to do something, until you can teach it to someone else.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •