DHTML/JavaScript/PHP

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
infolock
DevNet Resident
Posts: 1708
Joined: Wed Sep 25, 2002 7:47 pm

DHTML/JavaScript/PHP

Post by infolock »

It's been a while, but i'm still alive :P

currently working on a new project and i've hit a little ditch...

Basically, I'm trying to execute a php script after an ONCHANGE call from a text box, and then post that data with a Javascript function that dynamically posts the data...

In other words, take the following example into mind :

Code: Select all

Price<div id="counter">Your text will appear here</DIV>
<form method="post">
<input TYPE="text" value="some text" name="divValue" id="divValue" size="20" onchange="updateMessage()">
</form>
<script language="JavaScript">
<!--

function updateMessage()
&#123;
  var x = document.getElementById("divValue").value;
  document.getElementById("counter").childNodes&#1111;0].nodeValue = x;
&#125;

// -->
</script>
when you type something in the box, and then tab out, it replaces the previous "Some Text" with whatever it is you typed in the text box, without having to reload the page.

With that in mind, here lies my problem :

what i'm wanting to do is when I (or a user) tabs out of this box, the action should be that a function is called from php (in this case, it would be a query function to see if the item exists in the databse). when the item is found, it should then run the little updateMessage function and post whatever field it is i found in sql.

is this possible? if so, could anyone point me in the right direction as to how to figure this one out? it's busting my brain cells and i guess i'm just not able to find the correct search string to type in google to get any kind of results for this subject.

Thanks in advance.
Last edited by infolock on Tue May 25, 2004 11:24 pm, edited 2 times in total.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

there are 2 ways I know of to do this.
  1. use javascript to "fake" submit the form to a reprocessing php script
  2. have a hidden iframe do the query via javascript. Inside the iframe, have it rewrite the content of a known tag/id in your interface.
Last edited by feyd on Mon May 24, 2004 11:26 pm, edited 1 time in total.
User avatar
infolock
DevNet Resident
Posts: 1708
Joined: Wed Sep 25, 2002 7:47 pm

Post by infolock »

sweet, thanks feyd. i'll play around with that ( should have been a nobrainer, but i guess i got intimidated by having to use javascript ( which i don't know lol ). :D Thanks again man, let's hope this work.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

there is another way discussed lately in this forum:
  • have <script> tag with an id attached
  • change src on the fly to get the js generated by remote php executed in the context of the page
here is what I done to test this approach:
page.html:

Code: Select all

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled&lt;/title&gt;
&lt;script language='Javascript' type='text/javascript'&gt;
function query(q) &#123;
    if(navigator.appName == 'Netscape') &#123; // the one true browser
        remote = document.createElement('script');
        remote.src = q;
        remote.language = 'Javascript';
        remote.type = 'text/javascript';
        comm = document.getElementById('comm_container');
        comm.appendChild(remote);
        comm.removeChild(remote);
    &#125; else &#123;
        remote = document.getElementById('flawed_browser_script');
        remote.src = q;
    &#125;
&#125;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;input type = 'button' id='some1' value='some1' onClick='query("http://testhost/pjs.php?q=" + this.id);' /&gt;
&lt;input type = 'button' id='some2' value='some2' onClick='query("http://testhost/pjs.php?q=" + this.id);' /&gt;
&lt;input type = 'button' id='some3' value='some3' onClick='query("http://testhost/pjs.php?q=" + this.id);' /&gt;
&lt;!-- JS fetching container --&gt;
    &lt;div id='comm_container' style='display:none'&gt;
        &lt;script id='flawed_browser_script' type='text/javascript' language='Javascript'&gt;
        &lt;/script&gt;
    &lt;/div&gt;
&lt;!-- end of JS fetching container --&gt;
&lt;/body&gt;
&lt;/html&gt;
pjs.php:

Code: Select all

<?php
echo <<<EOF
alert('$_GET[q]');
EOF;
?>
It was tested on Firefox 0.8, IE6, Opera 7.23 and Mozilla 1.4
User avatar
infolock
DevNet Resident
Posts: 1708
Joined: Wed Sep 25, 2002 7:47 pm

Post by infolock »

wierdan, as always man, you cease to amaze me :D thanks bro. at work right now but will try it out later. thanks again man.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

I always thought these newbie questions like 'How do I call PHP function from JavaScript' indeed make some sense. ;)
User avatar
infolock
DevNet Resident
Posts: 1708
Joined: Wed Sep 25, 2002 7:47 pm

Post by infolock »

well, i redone what you suggested a little wierdan(using a text box instead of buttons,a nd a query statement instead of a regular echo...).

anyways, what is happening is absoulutely nothing to the table..

If i watch the status window, it shows that the id is being passed to the script, but even trying to echo out q gets me nothing.

am i missing something or doing something wrong? sorry man, like i said, i know nothing about javascript so i'm kinda going by ear..

anyways here is what i got. thanks for any help.

bob.htm

Code: Select all

&lt;html&gt; 
&lt;head&gt; 
&lt;title&gt;Untitled&lt;/title&gt; 
&lt;script language='Javascript' type='text/javascript'&gt; 
function query(q) { 
    if(navigator.appName == 'Netscape') { // the one true browser 
        remote = document.createElement('script'); 
        remote.src = q; 
        remote.language = 'Javascript'; 
        remote.type = 'text/javascript'; 
        comm = document.getElementById('comm_container'); 
        comm.appendChild(remote); 
        comm.removeChild(remote); 
    } else { 
        remote = document.getElementById('flawed_browser_script'); 
        remote.src = q; 
    } 
} 
&lt;/script&gt; 
&lt;/head&gt; 
&lt;body&gt;
&lt;form&gt;
&lt;input name='name' type='text' id='fname' value='' onchange='query("http://testhost/query.php?q=" + this.value);' /&gt;
&lt;/form&gt;
&lt;!-- JS fetching container --&gt; 
    &lt;div id='comm_container' style='display:none'&gt; 
        &lt;script id='flawed_browser_script' type='text/javascript' language='Javascript'&gt; 
        &lt;/script&gt; 
    &lt;/div&gt; 
&lt;!-- end of JS fetching container --&gt; 
&lt;/body&gt; 
&lt;/html&gt;
query.php

Code: Select all

$fname = $HTTP_GET_VARS['q'];
mysql_connect('localhost','uname','pword') or die(MySQL_Error());
mysql_select_db('mydb') or die(MySQL_Error());
$sql = "Insert into testdummy (fname) VALUES ('".$fname."')";
$result = mysql_query($sql) or die(MySQL_Error());

again, the value is getting passed, but it's like my script isn't even getting executed as my table remains blank... dunno. wierd indeedy 8O
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

Code: Select all

function alert($msg){
echo <<<EOF
alert('$msg');
EOF;
}
$fname = $HTTP_GET_VARS['q'];
alert("got fname: $fname");
mysql_connect('localhost','uname','pword') or alert(MySQL_Error());
mysql_select_db('mydb') or alert(MySQL_Error());
$sql = "Insert into testdummy (fname) VALUES ('".$fname."')";
alert("going to execute SQL: $sql");
$result = mysql_query($sql) or alert(MySQL_Error());
alert("After all: result is $result");
it should give you some pointers...
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

by the way, do you have testhost in your hosts file? It's not a legal domain name, so you must add it to your hosts file to use it (or alternatively change the url to point to real location of query.php, i.e. real domain or localhost)....
User avatar
infolock
DevNet Resident
Posts: 1708
Joined: Wed Sep 25, 2002 7:47 pm

Post by infolock »

lol... i completely overlooked that man.. i guess i must have just seen "http://xxxxhost..." and just thought it was localhost... should have looked harder eh? lol. tricky tricky :P
User avatar
infolock
DevNet Resident
Posts: 1708
Joined: Wed Sep 25, 2002 7:47 pm

Post by infolock »

well, it inserts into the database like it should, but your echo function calls never actually echo out anything. wierd.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

Yep, it needs further testing. It was Proof of Concept, not a complete library/technology.
User avatar
infolock
DevNet Resident
Posts: 1708
Joined: Wed Sep 25, 2002 7:47 pm

Post by infolock »

that'll work. thanks. i did a little research on iframes and i think that's the route i'm gonna go. thanks again man :D
User avatar
kendall
Forum Regular
Posts: 852
Joined: Tue Jul 30, 2002 10:21 am
Location: Trinidad, West Indies
Contact:

Reloading DIV tag

Post by kendall »

Hey,

Im trying something where i want to randomly generate content in a div tag and have it reload new content into that div tag without reload the page.

I really dont wanna resort to iframes (yuck)

I was looking at your javascript but i need to execute the javascript to get the content and insert it in the div tag

Code: Select all

<html>
<head>
<title>Untitled</title>
<script language='Javascript' type='text/javascript'>
function showTip(q) {
    if(navigator.appName == 'Netscape') { // the one true browser
        remote = document.createElement('script');
        remote.src = q;
        remote.language = 'Javascript';
        remote.type = 'text/javascript';
        comm = document.getElementById('comm_container');
        comm.appendChild(remote);
        comm.removeChild(remote);
    } else {
        remote = document.getElementById('tip');
        remote.src = q;
    }
}
</script>
</head>
<body>
<a href="javascript: showTip('hot_tips_random_test.php');" >Random Tip</a>
<!-- JS fetching container -->
    <div id='comm_container'>
        <script id='tip' type='text/javascript' language='Javascript' src="hot_tips_random_test.php">
        </script>
    </div>
<!-- end of JS fetching container -->
</body>
</html>
any suggestions

Kendall
Post Reply