Jump to content
Larry Ullman's Book Forums

QuakeLive

Members
  • Posts

    50
  • Joined

  • Last visited

  • Days Won

    1

QuakeLive last won the day on May 2 2017

QuakeLive had the most liked content!

QuakeLive's Achievements

Newbie

Newbie (1/14)

4

Reputation

  1. EDIT: In the meantime I solved this - the answer is at the end Hi, First of all - I apologize - my English is bad. I have this JSON data in file mydata.json: [ {"name": "Aster", "product": "aster", "stock": "10", "price": "2.99"}, {"name":"Daffodil","product":"daffodil","stock":"12","price":"1.99"}, {"name":"Rose","product":"rose","stock":"2","price":"4.99"}, {"name":"Peony","product":"peony","stock":"0","price":"1.50"}, {"name":"Primula","product":"primula","stock":"1","price":"3.12"}, {"name":"Snowdrop","product":"snowdrop","stock":"15","price":"0.99"} ] I want to use this JSON to create the following HTML elements (using jQuery/Ajax): <div class="dcell"> <img src="images/aster.png"/> <label for="aster">Aster:</label> <input type="text" id="aster" name="aster" value="0" stock="10" price="2.99" required> </div> <div class="dcell"> <img src="images/daffodil.png"/> <label for="daffodil">Daffodil:</label> <input type="text" id="daffodil" name="daffodil" value="0" stock="12" price="1.99" required > </div> <div class="dcell"> <img src="images/rose.png"/> <label for="rose">Rose:</label> <input type="text" id="rose" name="rose" value="0" stock="2" price="4.99" required> </div> <div class="dcell"> <img src="images/peony.png"/> <label for="peony">Peony:</label> <input type="text" id="peony" name="peony" value="0" stock="0" price="1.50" required> </div> <div class="dcell"> <img src="images/primula.png"/> <label for="primula">Primula:</label> <input type="text" id="primula" name="primula" value="0" stock="1" price="3.12" required > </div> <div class="dcell"> <img src="images/snowdrop.png"/> <label for="snowdrop">Snowdrop:</label> <input type="text" id="snowdrop" name="snowdrop" value="0" stock="15" price="0.99" required> </div> but I'm not sure how to solve this problem (using jQuery/Ajax). I started this: <script type="text/javascript"> $(function() { $("<button>Ajax</button>").appendTo("#buttonDiv").click(function(e) { $.getJSON("mydata.json", function(data) { ///?????????????????????????????? }); e.preventDefault(); }); }); </script> ... and I don't know how to do it. Do you know how I could do this, is there a simple and elegant way to do this? Thank you in advance! Solution (it's so easy // embarrassed): $.getJSON("mydata.json", function(data) { var html = ''; $.each(data, function(key, value){ html += '<div class="dcell">'; html += '<img src="images/'+value.product+'.png"/>'; html += '<label for="'+value.product+'">'+value.name+':</label>'; html += '<input type="text" id="'+value.product+'" name="'+value.product+'" value="0" stock="'+value.stock+'" price="'+value.price+'" required>'; html += '</div>'; }); $('#yourContainerId').html(html); });
  2. Hi, I plan to start learning PHP in the next two months (right now I'm learning some other things, and when I finish with them I'll start with PHP). I'm interested in this book, but I have one question - since the book is from 2011/2012, were there any major changes in the meantime? I mean, now we have newer version of PHP, so will I miss something "big" if I read book that is from 2011/12? If so, can we expect a new edition of this book in the near future? I apologize, my English isn't good.
  3. This explains it! I have to think more, I have no concentration! Thank you so much Hartley! Now I'm reading the chapter about Closures which is at the end of the book, where this is also explained
  4. Hi HartleySan, Sorry for the late reply. I was looking at code and I can't find what is the problem. I will upload original files from ch13 (also available here), and the same files but with added jquery.dataTables.min.js in js directory. 1. Original (from larryullman.com & wihtout jquery.dataTables.min.js in js directory) - http://download1348.mediafire.com/k8eh0h0n78wg/hpe52nx7c4d52qp/ch13.zip 2. With jquery.dataTables.min.js in js directory - http://download1072.mediafire.com/2rr2ohn9d3jg/0890rotur5egm89/withJS.zip This is not an emergency, when you have a lot of free time and will - you can check this And, sorry for my bad English. Thanks.
  5. Hi, In chapter 13 there is an example of using the DataTables plugin - in folder ch13 there is table.html. In that .html file there is: <script src="js/jquery.dataTables.min.js"></script>, but in js folder there is no that file. So, I downloaded the DataTables from http://datatables.net/download/, and in folder DataTables-1.10.0\media\js there is that file, so I just copied it (jquery.dataTables.min.js) to js folder of that example (ch13\js), but it doesn't work again :/ Do you know what could be the problem? Also, I have another question - according to the documentation: http://datatables.net/manual/installation - to use DataTables we need to include DataTables on your page using the following HTML: But in the example tables.html (ch13) there CSS included is: and JavaScript included: ... which is different than in the documentation. Does this mean that I do not need to include CSS file jquery.dataTables.css as in documentation? EDIT: I also tested version of table.html with includes as it is explained in the documentation, but it still doesn't work :/
  6. I am learning very slowly, I have a feeling it will take me 100...00 years to read the books, to practice, to do the examples... Just now (today), I found this interesting video
  7. I think the problem is not to understand, but to apply knowledge. In many cases, when I read this JS book or some JS tutorial - I can understand but when I want to apply knowledge and create something new and original - I just stuck, block... Of course, the key is to practice and gain experience. There are those who argue that programming should be learned "only through hundreds of examples and exercises, not through reading "fat books"... they claim that reading those books is a waste of time... But I personally do not believe in such stories, or I just don't have the capacity to learn in that way.
  8. This explains it! I have to think more, I have no concentration! Thank you so much Hartley!
  9. Thank you very much HartleySan!!! I tested your code and it works perfectly! Right now, I'm making version with external .js files. After that, I'll try to make some CSS, for example - row for the current CD will have a different color... : ) I must say that I knew that code from my post is bad - but I didn't know why exactly... After seeing your code and explanations, it's clear now. There are a few interesting things regarding your code: currentCd = (currentCd - 1 + numCds) % numCds; I must say that I never would have thought to do it this way. Very clever : ) The best way to understand this is to do a few examples, for example: Lets say that the number of CDs are 5, and that the currently selected CD is third (currentCd = 2): numCds = 5 currentCd = 2 To get the previous CD: (2 - 1 + 5) % 5 ---> 6 % 5 = 1 // which is the second CD If the current CD is 0: (0 - 1 + 5) % 5 --->4 % 5 = 4 // which is the fifth CD There is one small mistake when typing, instead of cds[currentCd].years it should be cds[currentCd].year: html = '<ul><li>Artist: ' + cds[currentCd].artist + '</li><li>Title: ' + cds[currentCd].title + '</li><li>Year: ' + cds[currentCd].year + '</li></ul>'; This is also very interesting: for (i = 0, len = trs.length; i < len; i++) { trs[i].onclick = function() { currentCd = parseInt(this.id.split('_')[1], 10); html = '<ul><li>Artist: ' + cds[currentCd].artist + '</li><li>Title: ' + cds[currentCd].title + '</li><li>Year: ' + cds[currentCd].year + '</li></ul>'; document.getElementById('cd_details').innerHTML = html; }; } First of all, I was thinking to do it in a completely different (*stupid) way... This way is elegant and short. As for this line: currentCd = parseInt(this.id.split('_')[1], 10); this.id - this is the value of id attribute of a row trs - but I'm not sure if I understood well this. "this" refers to an element on which onclick event happened, right? Why does not work this way: currentCd = parseInt(trs.id.split('_')[1], 10); ? Again, thank you very much HartleySan!!!
  10. Thank you HartleySan! I would be grateful if you could help me to "fix" this, but, of course, this isn't urgent - when you have the will and some time
  11. First of all, I apologize for the delay in my reply. Now I'm trying to make it work, but without success and I give up. Some things work, but - as you noticed - HTML/JS code is very bad. As for the using of JSON instead of XML - now I will start reading/learning JSON Thanks!
  12. Hi, I started reading the chapter about Ajax (JavaScript and XML), but I wanted to learn little more about XML so I am also reading w3schools.com. There are good examples and tutorials, but I don't like some things such as using inline event handlers. Anyway, I wanted to create the following application: My English is not good, but I'll try to explain how this application should work (there are two very similar examples on w3schools, and this example is a combination of these two. Also, I am not using inline event handlers and JavaScript is in external .js files, not in the HTML file) First of all, we have one XML file that looks like this: <CATALOG> <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>One night only</TITLE> <ARTIST>Bee Gees</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>Polydor</COMPANY> <PRICE>10.90</PRICE> <YEAR>1998</YEAR> </CD> </CATALOG> This is the HTML file: <!doctype html> <html> <head> <meta charset="utf-8"> <title>XML Aplikacija - Katalog</title> </head> <body> <div id="showCD"></div> <br> <input id="previous" type="button" value="<<" /> <input id="next" type="button" value=">>" /> <br><br> <div id="tabela"></div> <script src="js/ajax.js"></script> <script src="js/xmlAplikacija.js"></script> </body> </html> We have two buttons for navigation between the CDs (next and previous). For example, when you click on ">>" (next) - above (inside of <div id="showCD"></div>) will show some information (Artist, Title, Year) about the CD. Also, there is <div id="tabela"></div> - inside this will be displayed a table containing information about Artist and Title for ALL CDs from XML (see picture above). There is one more thing - when you click on some row in that table - above the buttons, also inside of <div id="showCD"></div> need to show information about the CD (Artist, Title, Year) (same as with buttons, but instead of changing to the Next/Previous CD - you directly choose from a table by clicking on a row). So, let's see JavaScript: First, we have a standard ajax.js: function getXMLHttpRequestObject() { var ajax = null; if (window.XMLHttpRequest) { ajax = new XMLHttpRequest(); } else if (window.ActiveXObject) { ajax = new ActiveXObject('MSXML2.XMLHTTP.3.0'); } return ajax; } Then we have xmlAplikacija.js: window.onload = function() { var xmlhttp = getXMLHttpRequestObject(); var xmlDoc = null; xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4) { if ((xmlhttp.status >= 200 && xmlhttp.status < 300) || (xmlhttp.status == 304)) { xmlDoc = xmlhttp.responseXML; x = xmlDoc.getElementsByTagName("CD"); i = 0; function displayCD(i) { artist = (x[i].getElementsByTagName('ARTIST')[0].childNodes[0].nodeValue); title = (x[i].getElementsByTagName('TITLE')[0].childNodes[0].nodeValue); year = (x[i].getElementsByTagName('YEAR')[0].childNodes[0].nodeValue); txt = "Artist: " + artist + "<br>Title: " + title + "<br>Year: " + year; document.getElementById('showCD').innerHTML = txt; }; displayCD(i); document.getElementById('previous').onclick = function() { if (i > 0) { i--; displayCD(i); } }; document.getElementById('next').onclick = function() { if (i < x.length - 1) { i++; displayCD(i); } }; var tbl = "<table border='1'>"; for (var b=0; b < x.length; b++) { tbl += "<tr onclick='displayCD(" + b + ")'>"; tbl += "<td>"; tbl += x[b].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue; tbl += "</td><td>"; tbl += x[b].getElementsByTagName('TITLE')[0].childNodes[0].nodeValue; tbl += "</td></tr>"; }; tbl += "</table>"; document.getElementById('tabela').innerHTML = tbl; } else { alert('Doslo je do greske'); } } }; xmlhttp.open('GET', 'resources/xmlFajl.xml', true); xmlhttp.send(null); }; Everything works fine: when I click on the buttons - it changes to the next/previous CD, there is a table with all CD-s. BUT, I don't know how to make it work - to change (show) CD when you click on a row. For example, when you click on "Dolly Parton" in that table - above should show (also inside of <div id="showCD"></div>) information about the CD (Artist, Title, Year) (same as with buttons, but instead of changing to the Next/Previous CD - you directly choose from a table by clicking on a row - as I have already explaine). On w3schools they wre using inline event handlers, and, as you can see in the code above - I've tried that: var tbl = "<table border='1'>"; for (var b=0; b < x.length; b++) { tbl += "<tr onclick='displayCD(" + b + ")'>"; tbl += "<td>"; tbl += x[b].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue; tbl += "</td><td>"; tbl += x[b].getElementsByTagName('TITLE')[0].childNodes[0].nodeValue; tbl += "</td></tr>"; }; tbl += "</table>"; document.getElementById('tabela').innerHTML = tbl; but without success, it doesn't work. Do you have any idea how this could work? Thanks in advance!
  13. Is it important to Identify a Result Handler first, and then to Make a Request, or it does not matter? I am asking this because in the book Larry always first Identify a Result Handler and then Make a Request... for example: but for me it would be more logical (and nicer) to Make a Request first: Maybe there is some practical reason why...
  14. HartleySan, thank you so much for helping me to understand Ajax, JavaScript... now, some things are much clearer. Thank you for your support and help! So, speaking about the default behaviour - regardless of whether everything was OK - page somescript.php would be loaded.
×
×
  • Create New...