Page 1 of 1

DHTML/JavaScript/PHP

Posted: Mon May 24, 2004 11:15 pm
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.

Posted: Mon May 24, 2004 11:23 pm
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.

Posted: Mon May 24, 2004 11:26 pm
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.

Posted: Tue May 25, 2004 12:22 am
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

Posted: Tue May 25, 2004 3:21 pm
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.

Posted: Tue May 25, 2004 3:54 pm
by Weirdan
I always thought these newbie questions like 'How do I call PHP function from JavaScript' indeed make some sense. ;)

Posted: Tue May 25, 2004 11:19 pm
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

Posted: Wed May 26, 2004 2:12 am
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...

Posted: Wed May 26, 2004 2:17 am
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)....

Posted: Wed May 26, 2004 3:50 pm
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

Posted: Wed May 26, 2004 8:56 pm
by infolock
well, it inserts into the database like it should, but your echo function calls never actually echo out anything. wierd.

Posted: Thu May 27, 2004 4:34 am
by Weirdan
Yep, it needs further testing. It was Proof of Concept, not a complete library/technology.

Posted: Thu May 27, 2004 10:26 am
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

Reloading DIV tag

Posted: Wed Dec 21, 2005 5:05 am
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