Hi there, I was strugling some hours with javascript and Ajax, but did not find a solution. Think that for you specialist it will be easy and sure you'll about my simple question Starting with Ajax / Javascript / PHP I found an example (code below) Google advises to make an double navigation so that also non javascript users can navigate and the googlebot can read the pages. Their (google) example: <a href=â€ajax.htm?foo=32†onClick=â€navigate('ajax.html#foo=32'); return falseâ€>foo 32</a> What I'd like to make is a menu or link navigation (loop build with php). How can I put the several navigation id's so it works with the document.getElementById("txtCustomerId").value; Who can help me with this ? Thanks a lot ! Valeria ---------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> var url = "GetCustomerData.php?id="; // The server-side script function handleHttpResponse() { if (http.readyState == 4) { if(http.status==200) { var results=http.responseText; document.getElementById('divCustomerInfo').innerHTML = results; } } } function requestCustomerInfo() { var sId = document.getElementById("txtCustomerId").value; http.open("GET", url + escape(sId), true); http.onreadystatechange = handleHttpResponse; http.send(null); } function getHTTPObject() { var xmlhttp; if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); } else if (window.ActiveXObject){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); if (!xmlhttp){ xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } } return xmlhttp; } var http = getHTTPObject(); // We create the HTTP Object </script> </head> <body> <p>Enter customer ID number to retrieve information:</p> <p>Customer ID: <input type="text" id="txtCustomerId" value="" /></p> <p><input type="button" value="Get Customer Info" onclick="requestCustomerInfo()" /></p> </body> </html>
sure you can just do id="linkNN" (eg, id="link32"). But this is probably the harder way because you need to explicitly call on all of the ids if you are to attach any events to them. you are already doing this with the inline javascript onclick (which is now considered outdated and bad practice). the semantic way to do this is something like <a class="linkmenu" data-id="32" href=â€ajax.htm?foo=32â€>foo 32</a><br /> <a class="linkmenu" data-id="33" href=â€ajax.htm?foo=33â€>bar 33</a> then write a loop that reads all these into an array and iterates them, attaching click events and killing the click. if you use a framework, this will be very simple, eg in mootools as usual as i know nothing else: window.addEvent("domready", function() { $$("a.linkmenu").addEvent("click", function(e) { e.stop(); // stop the click // call the JS function instead navigate(this.get("href")); // er, it makes more sense here to call for the DB id here instead // navigate(this.get("data-id")); // uncomment to make this the case // or even... all we need is this really: $("txtCustomerId").set("value", this.get("data-id")); requestCustomerInfo(); }); }); // end domready Code (markup): populating the id from the DB / PHP. anyway, without a js framework, you can google for getElementsByClassName (it is now native in firefox 3) or go as getElementsByTagName and then iterate their className to find linkmenu. mootools is available at mootools.net/download. it can also do the ajax calls for you. good luck
Hi Dimitar, Thanks for your fast respons. Ai, HTML and programming in PHP and MYSQL is no problem. But as a new in javascript en Ajax your code now is far to much for me I'll have a look and try and try and try . If you could help me a little forward should be great Valeria