I'm pulling another page with javascript and jquery. I get that info to show through a div tag like this <div id="other page">will load here</div> In the box when you type on a separate page it will alert you. For example go directly to getcd.php But when you select the user then go to type it doesn't alert you. How would I get this to work? Everything seems to load fine. How when I have javascript on the other page. It doesn't seem to load, inside the div tag. Any suggestions on how to reference? cd_catalog.xml <?xml version="1.0" encoding="utf-8"?> <!-- Edited by XMLSpy --> <CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> <CD> <TITLE>Hide your heart</TITLE> <ARTIST>Bonnie Tyler</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>CBS Records</COMPANY> <PRICE>9.90</PRICE> <YEAR>1988</YEAR> </CD> <CD> <TITLE>Greatest Hits</TITLE> <ARTIST>Dolly Parton</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>RCA</COMPANY> <PRICE>9.90</PRICE> <YEAR>1982</YEAR> </CD> <CD> <TITLE>Still got the blues</TITLE> <ARTIST>Gary Moore</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>Virgin records</COMPANY> <PRICE>10.20</PRICE> <YEAR>1990</YEAR> </CD> <CD> <TITLE>Eros</TITLE> <ARTIST>Eros Ramazzotti</ARTIST> <COUNTRY>EU</COUNTRY> <COMPANY>BMG</COMPANY> <PRICE>9.90</PRICE> <YEAR>1997</YEAR> </CD> <CD> <TITLE>One night only</TITLE> <ARTIST>Bee Gees</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>Polydor</COMPANY> <PRICE>10.90</PRICE> <YEAR>1998</YEAR> </CD> <CD> <TITLE>Sylvias Mother</TITLE> <ARTIST>Dr.Hook</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>CBS</COMPANY> <PRICE>8.10</PRICE> <YEAR>1973</YEAR> </CD> <CD> <TITLE>Maggie May</TITLE> <ARTIST>Rod Stewart</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>Pickwick</COMPANY> <PRICE>8.50</PRICE> <YEAR>1990</YEAR> </CD> <CD> <TITLE>Romanza</TITLE> <ARTIST>Andrea Bocelli</ARTIST> <COUNTRY>EU</COUNTRY> <COMPANY>Polydor</COMPANY> <PRICE>10.80</PRICE> <YEAR>1996</YEAR> </CD> <CD> <TITLE>When a man loves a woman</TITLE> <ARTIST>Percy Sledge</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Atlantic</COMPANY> <PRICE>8.70</PRICE> <YEAR>1987</YEAR> </CD> <CD> <TITLE>Black angel</TITLE> <ARTIST>Savage Rose</ARTIST> <COUNTRY>EU</COUNTRY> <COMPANY>Mega</COMPANY> <PRICE>10.90</PRICE> <YEAR>1995</YEAR> </CD> <CD> <TITLE>1999 Grammy Nominees</TITLE> <ARTIST>Many</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Grammy</COMPANY> <PRICE>10.20</PRICE> <YEAR>1999</YEAR> </CD> <CD> <TITLE>For the good times</TITLE> <ARTIST>Kenny Rogers</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>Mucik Master</COMPANY> <PRICE>8.70</PRICE> <YEAR>1995</YEAR> </CD> <CD> <TITLE>Big Willie style</TITLE> <ARTIST>Will Smith</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>9.90</PRICE> <YEAR>1997</YEAR> </CD> <CD> <TITLE>Tupelo Honey</TITLE> <ARTIST>Van Morrison</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>Polydor</COMPANY> <PRICE>8.20</PRICE> <YEAR>1971</YEAR> </CD> <CD> <TITLE>Soulsville</TITLE> <ARTIST>Jorn Hoel</ARTIST> <COUNTRY>Norway</COUNTRY> <COMPANY>WEA</COMPANY> <PRICE>7.90</PRICE> <YEAR>1996</YEAR> </CD> <CD> <TITLE>The very best of</TITLE> <ARTIST>Cat Stevens</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>Island</COMPANY> <PRICE>8.90</PRICE> <YEAR>1990</YEAR> </CD> <CD> <TITLE>Stop</TITLE> <ARTIST>Sam Brown</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>A and M</COMPANY> <PRICE>8.90</PRICE> <YEAR>1988</YEAR> </CD> <CD> <TITLE>Bridge of Spies</TITLE> <ARTIST>T'Pau</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>Siren</COMPANY> <PRICE>7.90</PRICE> <YEAR>1987</YEAR> </CD> <CD> <TITLE>Private Dancer</TITLE> <ARTIST>Tina Turner</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>Capitol</COMPANY> <PRICE>8.90</PRICE> <YEAR>1983</YEAR> </CD> <CD> <TITLE>Midt om natten</TITLE> <ARTIST>Kim Larsen</ARTIST> <COUNTRY>EU</COUNTRY> <COMPANY>Medley</COMPANY> <PRICE>7.80</PRICE> <YEAR>1983</YEAR> </CD> <CD> <TITLE>Pavarotti Gala Concert</TITLE> <ARTIST>Luciano Pavarotti</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>DECCA</COMPANY> <PRICE>9.90</PRICE> <YEAR>1991</YEAR> </CD> <CD> <TITLE>The dock of the bay</TITLE> <ARTIST>Otis Redding</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Atlantic</COMPANY> <PRICE>7.90</PRICE> <YEAR>1987</YEAR> </CD> <CD> <TITLE>Picture book</TITLE> <ARTIST>Simply Red</ARTIST> <COUNTRY>EU</COUNTRY> <COMPANY>Elektra</COMPANY> <PRICE>7.20</PRICE> <YEAR>1985</YEAR> </CD> <CD> <TITLE>Red</TITLE> <ARTIST>The Communards</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>London</COMPANY> <PRICE>7.80</PRICE> <YEAR>1987</YEAR> </CD> <CD> <TITLE>Unchain my heart</TITLE> <ARTIST>Joe Cocker</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>EMI</COMPANY> <PRICE>8.20</PRICE> <YEAR>1987</YEAR> </CD> </CATALOG> HTML: getcd.php <?php $q=$_GET["q"]; $xmlDoc = new DOMDocument(); $xmlDoc->load("cd_catalog.xml"); $x=$xmlDoc->getElementsByTagName('ARTIST'); for ($i=0; $i<=$x->length-1; $i++) { //Process only element nodes if ($x->item($i)->nodeType==1) { if ($x->item($i)->childNodes->item(0)->nodeValue == $q) { $y=($x->item($i)->parentNode); } } } $cd=($y->childNodes); for ($i=0;$i<$cd->length;$i++) { //Process only element nodes if ($cd->item($i)->nodeType==1) { echo("<b>" . $cd->item($i)->nodeName . ":</b> "); echo($cd->item($i)->childNodes->item(0)->nodeValue); echo("<br>"); } } echo'this will bring up a alert window when you type'; echo'<input type="text" onkeypress="myFunction()"> <script> function myFunction() { alert("You pressed a key inside the input field"); } </script>'; ?> PHP: main.html <html> <head> <script> function showCD(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getcd.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form> Select a CD: <select name="cds" onchange="showCD(this.value)"> <option value="">Select a CD:</option> <option value="Bob Dylan">Bob Dylan</option> <option value="Bonnie Tyler">Bonnie Tyler</option> <option value="Dolly Parton">Dolly Parton</option> </select> </form> <div id="txtHint"><b>CD info will be listed here...</b></div> </body> </html> HTML:
If that script is the same for Bob Dylan and Dolly Parton why don't just let main.html creates a static, same script for all? But okay, let's say they're different. Maybe a script requires to be properly INSTALL-ed first as a script; it can't just be pasted like other regular html elements: var myScript = document.createElement('script'); document.getElementById('txtHint').appendChild(myScript); Code (markup): Your main.html has the responsibility to create that above. And what's inside myScript however is defined by your getcd.php. So basically there're 2 dynamic parts inside #txtHint: one is your parsed XML + text-input, the other is myScript. Perhaps responseXML will be easier to use (instead of responseText) for splitting and pasting this two. Later on, a change on select element should do some cleanup first (uninstall previous myScript). And I don't have any ideas how to do that properly at the moment
I was just using that as a example. I know there is a away to do it I am just not sure how to do it and its on the tip on my head. It is actually dynamic. What do you mean by not properly installed?
Well... To me it be easier if instead of text, you could adjust getcd.php to output XML, like: <?xml version="1.0" encoding="utf-8"?> <root> <div> <b>TITLE:</b> Greatest Hits<br/> <b>ARTIST:</b> Dolly Parton<br/> <b>COUNTRY:</b> USA<br/> <b>COMPANY:</b> RCA<br/> <b>PRICE:</b> 9.90<br/> <b>YEAR:</b> 1982<br/> <input type="text" onkeypress="myFunction()"></input> </div> <script> function myFunction(){ alert("You pressed a key inside the input field"); } </script> </root> Code (markup): Then inside xmlhttp.onreadystatechange(), instead of processing xmlhttp.responseText: document.getElementById("txtHint").innerHTML=xmlhttp.responseText;//this I called PASTING Code (markup): use xmlhttp.responseXML: //1. cleanup #txtHint first var txtHint = document.getElementById('txtHint'); while (txtHint.childNodes.length > 0) txtHint.removeChild(txtHint.firstChild); //2. create new mydiv and myscript (this I called INSTALLING) var xmldoc = xmlhttp.responseXML, mydiv = document.createElement('div'), myscript = document.createElement('script'); mydiv.innerHTML = xmldoc.getElementsByTagName('div')[0].innerHTML; txtHint.appendChild(mydiv); myscript.innerHTML = xmldoc.getElementsByTagName('script')[0].innerHTML; txtHint.appendChild(myscript); Code (markup):
Yes I completely agree redoing the files that way. However with what I have to work with it would be easier to pull it through the div tag and would save me weeks of time. Also its not my choice. So That wouldn't work really. I would just really need to get it to pull through the div tag.
I figured it out. I can't believe how simple it was.. All I had to do was put my javascript inside the div tag itself. like this.. ( in main.html instead of in getcd.php) <div id="txtHint"><b>CD info will be listed here...</b><script> function myFunction() { alert("You pressed a key inside the input field"); } </script></div> Code (markup): Old \/ <div id="txtHint"><b>CD info will be listed here...</b></div> Code (markup):
The </b> was just my sloppy code. I also did one for simple math too on main.html <div id="txtHint"> inside the div tag I did one for math too. <script type='text/javascript'>//<![CDATA[ //window.onload=function(){ function loadmath() { var x = document.getElementById("x"); var y = document.getElementById("y"); var d = document.getElementById("d"); var xstored = x.getAttribute("data-in"); var ystored = y.getAttribute("data-in"); setInterval(function(){ if( x == document.activeElement ){ var temp = x.value; if( xstored != temp ){ xstored = temp; x.setAttribute("data-in",temp); calculate(); } } if( y == document.activeElement ){ var temp = y.value; if( ystored != temp ){ ystored = temp; y.setAttribute("data-in",temp); calculate(); } } },50); function calculate(){ d.innerHTML = x.value * y.value; } x.onblur = calculate; calculate(); }//]]> </script> Code (markup): </div> on getcd.php I added in <input id="x" data-in="" type="text" /><br> *<input id="y" data-in="" type="text" onkeypress="loadmath()"/><br> <hr> <div id="d"></div> I kept messing around with firebug.. Trust me I don't rate myself high on javascript or english but I just hit a new level today : ) Thank you for your support.
yea, javascript don't get executed at all if you include it via an AJAX call like you do. so the function is never tied to your alert()-ing html element, and the function that alert()s is never put into memory as javascript that can be executed. the solution is to Always do your alerts from the page that made the AJAX call, as you found out already