Jump to content

mathieu

Members
  • Posts

    17
  • Joined

  • Last visited

Everything posted by mathieu

  1. Hi, I'm trying to create a navigation menu. When you click on each item of the menu, it displays the corresponding target page below and hides the others. You will find HTML & JS code below and in attachment. Here is the way I proceed: with JS and my "initiateNavigation" function, I :1) attach a JS function to every link of the menu. This "navigation" function will be called on click and hide all the pages and display only the selected one.2) call the navigation function to display the first page (page 1). The initiateNavigation function is called when the document is ready: $(document).ready(function(){}; The problem is that every time I click on a link, it does the work and loads the targeted page, but the browser considers the document to be ready again, and it calls the initiateNavigation again and displays page 1. How can I call the initiateNavigation function once only? Thanks, M. HTML code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title></title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="javascript.js"></script> </head><body> <div> <div id="lienpage1"><a href="">Page 1</a></div> <div id="lienpage2"><a href="">Page 2</a></div> <div id="lienpage3"><a href="">Page 3</a></div> </div> <div> <div id="page1">bla bla page 1</div> <div id="page2">bla bla page 2</div> <div id="page3">bla bla page 3</div> </div> <div>test</div></body></html> JS code: function navigation(destinationsIdsArray,focus){ $.each(destinationsIdsArray, function(){ $('#'+this).hide(); }); $('#'+focus).fadeIn(500); } function initiateNavigation(selectorsIdsArray,destinationsIdsArray){ //selectorsIdsArray = array of ids of the selectors, i.e. divisions containing the links that will be used for selecting the target divisions to focus on. //destinationsIdsArray = array of ids of the target divisions. if(selectorsIdsArray.length!=destinationsIdsArray.length){ alert('both arrays do not have the same length'); return; } $.each(destinationsIdsArray, function(){ $('#'+this).hide(); }); $.each(selectorsIdsArray, function(){ var destination=destinationsIdsArray[$.inArray(String(this),selectorsIdsArray)]; $('#'+this).click(function(){ navigation(destinationsIdsArray,destination); }); }); navigation(destinationsIdsArray,destinationsIdsArray[0]); } $(document).ready(function(){ initiateNavigation(['lienpage1','lienpage2','lienpage3'],['page1','page2','page3']); }); Thanks index.html javascript.js.zip
  2. Great, it works, at last ! All this for a sole little comma... I'm really sorry.But at least it has allowed me to improve both server and client codes.Have a nice dayM.
  3. Thanks for your proposal. I wish I could send you a live link, but it looks like my online platform is not fully settled now. I'm trying to fix this right now, but in the meantime, please find the full code below and attached. Sorry for the special characters, we French people use them a lot... serveur.php: <?phpheader('Content-type: application/xml');//Connexion à la base de données$connexion = mysqli_connect('localhost','root','root','Photographies');if(mysqli_connect_errno($connexion)) {echo mysqli_connect_error();}//Récupération de l'id de la série, passé dans l'URL$serie=$_GET["serie"];//Requête des photos de cette série$resultatRequete = mysqli_query($connexion,"SELECT Nom,Format FROM Photographies WHERE Serie=".$serie." ORDER BY OrdreDansSerie ASC"); //Construction du Document XML$xmlDoc = new DOMDocument('1.0', 'iso-8859-1');$xmlDoc->formatOutput = true;$root = $xmlDoc->createElement('serie');$root = $xmlDoc->appendChild($root);while($row = mysqli_fetch_array($resultatRequete)) { $photographie = $xmlDoc->createElement('photographie'); $photographie = $root->appendChild($photographie); $nom = $xmlDoc->createElement('nom'); $nom = $photographie->appendChild($nom); $text = $xmlDoc->createTextNode($row['Nom']); $text = $nom->appendChild($text); $format = $xmlDoc->createElement('format'); $format = $photographie->appendChild($format); $text = $xmlDoc->createTextNode($row['Format']); $text = $format->appendChild($text);} echo $xmlDoc->saveXML();mysqli_close($connexion);?> client.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title></title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> //Attention : ce fichier doit être appelé depuis l'url http://localhost:8888/client.html $(document).ready(function(){ //Serie var serie = 1; //AJAX var resultat = $.ajax({ url: 'serveur.php?serie=' + serie, dataType: 'XML', async: false success: function (data) { var noms = $(data).find('photographie'); alert(noms.length); } }); }); </script></head><body></body></html> ThanksM. client.html serveur.php
  4. Thanks for your proposal. I wish I could send you a live link, but it looks like my online platform is not fully settled now. I'm trying to fix this right now, but in the meantime, please find below the full code. Sorry for the special characters, we French people use them a lot... serveur.php: <?phpheader('Content-type: application/xml');//Connexion à la base de données$connexion = mysqli_connect('localhost','root','root','Photographies');if(mysqli_connect_errno($connexion)) {echo mysqli_connect_error();}//Récupération de l'id de la série, passé dans l'URL$serie=$_GET["serie"];//Requête des photos de cette série$resultatRequete = mysqli_query($connexion,"SELECT Nom,Format FROM Photographies WHERE Serie=".$serie." ORDER BY OrdreDansSerie ASC"); //Construction du Document XML$xmlDoc = new DOMDocument('1.0', 'iso-8859-1');$xmlDoc->formatOutput = true;$root = $xmlDoc->createElement('serie');$root = $xmlDoc->appendChild($root);while($row = mysqli_fetch_array($resultatRequete)) { $photographie = $xmlDoc->createElement('photographie'); $photographie = $root->appendChild($photographie); $nom = $xmlDoc->createElement('nom'); $nom = $photographie->appendChild($nom); $text = $xmlDoc->createTextNode($row['Nom']); $text = $nom->appendChild($text); $format = $xmlDoc->createElement('format'); $format = $photographie->appendChild($format); $text = $xmlDoc->createTextNode($row['Format']); $text = $format->appendChild($text);} echo $xmlDoc->saveXML();mysqli_close($connexion);?> client.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title></title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> //Attention : ce fichier doit être appelé depuis l'url http://localhost:8888/client.html $(document).ready(function(){ //Serie var serie = 1; //AJAX var resultat = $.ajax({ url: 'serveur.php?serie=' + serie, dataType: 'XML', async: false success: function (data) { var noms = $(data).find('photographie'); alert(noms.length); } }); }); </script></head><body></body></html> ThanksM.
  5. Well, if it does work on your platform, that's already a good point. So I guess the output is "3". No, I don't use MSIE. I'm using Chrome, Firefox and Safari under Mac OS X. Yes, I checked and the PHP code produces the correct XML as an output. The browser recognizes it as XML, since it says "This XML file does not appear to have any style information associated with it. The document tree is shown below." By "no display" I mean that when I run the JavaScript, I get a blank page as a result, with no writtings... Yes, indeed the most robust way is maybe to interpret the output of the server as a text, then load it in a DOM object and parse it. Is that what you mean? ThanksM.
  6. Hmmm... I fear it doesn't work either. There is simply no display. I guess something's wrong in the data sent by the serveur. I was assuming the data were good, because the responseText() function does display the right XML output (cf. above). Maybe you will be able to spot an obvious mistake in the PHP code? <?phpheader('Content-type: application/xml');//Connexion à la base de données$connexion = mysqli_connect('localhost','root','root','Photographies');if(mysqli_connect_errno($connexion)) {echo mysqli_connect_error();}//Récupération de l'id de la série, passé dans l'URL$serie=$_GET["serie"];//Requête des photos de cette série$resultatRequete = mysqli_query($connexion,"SELECT Nom,Format FROM Photographies WHERE Serie=".$serie." ORDER BY OrdreDansSerie ASC"); //Construction du Document XML$xmlDoc = new DOMDocument('1.0', 'iso-8859-1');$xmlDoc->formatOutput = true;$root = $xmlDoc->createElement('serie');$root = $xmlDoc->appendChild($root);while($row = mysqli_fetch_array($resultatRequete)) { $photographie = $xmlDoc->createElement('photographie'); $photographie = $root->appendChild($photographie); $nom = $xmlDoc->createElement('nom'); $nom = $photographie->appendChild($nom); $text = $xmlDoc->createTextNode($row['Nom']); $text = $nom->appendChild($text); $format = $xmlDoc->createElement('format'); $format = $photographie->appendChild($format); $text = $xmlDoc->createTextNode($row['Format']); $text = $format->appendChild($text);} echo $xmlDoc->saveXML();mysqli_close($connexion);?> ThanksM.
  7. Hi, Thanks for your answer and sorry for my late response. I've tested handling the "photographie" tags with the getElementsByTagName() function rather than the jQuery find() function, as you proposed.There is no display anymore, the alert() function simply doesn't work. I'm not sure to know what we can conclude of this experiment... How do you usually exchange data between server and browser with PHP and JavaScript? ThanksMathieu
  8. I've add such a header and now the output is clearly recognized as XML by the browser, which was obviously not the case before.However it looks like the XML is still in responseText, not responseXML: Javascript: var resultat = $.ajax({ url: 'serveur.php?serie=' + serie, dataType: 'XML', async: false }); var noms = $(resultat.responseXML).find('photographie'); alert('Number of photographie elements: ' + noms.length + '\n\n' + resultat.responseText); Output of the alert function: Number of photographie elements: 0<?xml version="1.0" encoding="iso-8859-1"?><serie> <photographie> <nom>_DSC4689</nom> <format>3_2</format> </photographie> <photographie> <nom>_DSC2359</nom> <format>3_2</format> </photographie> <photographie> <nom>_DSC4632</nom> <format>3_2</format> </photographie></serie> I guess there is a problem in the Javascript code, isn't it? Thanks
  9. OK, now I get the thing: the php code was wrong: $xmlDoc = new DOMDocument('1.0', 'iso-8859-1');$xmlDoc->loadXML($xml); //$xml is the string containing the XML codeecho $xmlDoc->saveXML(); I guess the "echo" function is the problem. I replaced it with return but it's not better.How can I transfer some XML code from the server to the web browser with PHP? Thanks
  10. Thanks. Yes, it does: I've tested it with alert(result.responseText);
  11. Hi, I'm trying to extract some specific elements (tags) from an XML document which is the result of an ajax query.However, I cannot get any element. Below the alert function displays '0', while the XML document does have 3 'myTag' tags... Any help would be much appreciated Thanks, M. var result = $.ajax({ url: 'server.php', dataType: 'XML', async: false }); var myArray = $(result.responseXML).find('myTag'); alert(myArray.length);
  12. Thanks a lot, Ingolme, I accessed it through the http://localhost adress and it works.Just for my reference, why is it necessary to do things this way?Thanks
  13. Indeed, both client and server are on the same machine. In order to test whether this assumption is correct or not, I've uploaded the PHP file on a remote server. When I call the PHP direct through the browser, it works fine. However, when I call it through AJAX, I catch an exception:- NETWORK_ERR: XMLHttpRequest Exception 101 (Chrome)- Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) (Firefox)
  14. Hi, I'm trying to build a "hello world" AJAX / PHP application: AJAX code: <html><head> <title></title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ //Requete AJAX var resultat = $.ajax({ url: "serveur.php", async: false }); alert(resultat.responseText); }); </script></head><body></body></html> PHP code: <?phpecho 1;?> I would expect the result of the alert() function to be "1", while it is:<?phpecho 1;?> So as far as I understand, the server-side code is not interpreted, and that's surprising to me since it is interpreted when I run it separately, without calling from AJAX. May I ask for your help? Thanks, Mathieu
×
×
  • Create New...