Jump to content

Jay@TastefulTitles.com

Members
  • Posts

    35
  • Joined

  • Last visited

Everything posted by Jay@TastefulTitles.com

  1. I have several different pages that all need access to the same XML data file. I'm trying to use this fairly-standard function to load the file when the page loads. If I call getXMLFile() from within each pageLoadFunction, it works, but I'd like to use it to set up some other vars and avoid duplicating code. getXMLFile = function(callback) { var request = new XMLHttpRequest(); request.open("GET", "MyFileName.xml"); request.setRequestHeader("Content-Type", "text/xml"); request.onreadystatechange = function() { if (request.readyState == 4 && request.status == 200) { callback(request.responseXML); //Does code needed for all pages go here? Or where? } }; request.send(); } What I would like to do is put something like this in my HTML, using a callback to call the fill function after the file has loaded: <body onload="openXML(fillPageFunction)"> <!--There is a unique fill function for each page--> OpenXML() would call getXMLFile() to load the data, then make use of it. Procedurally, here is what I want to happen: Use getXMLFile() to load the data file Go ahead and render page HTML/CSS while file is loading When file is loaded, use it to fill some global vars needed on all pages Call a fill function to fill fields on the specific page I've spent hours studying manuals, tutorials, and examples on using callbacks, but my procedural brain still can't make them work. Can someone familiar with callbacks please show me how I could accomplish this? (Using named functions, rather than anonymous, would probably help to make it clearer to me.) To fill vars needed on all pages, would I put that code right after the line "callback(request.responseXML);"? Or where? To fill fields on specific page I would call a unique fillPage function for each page. Where would I do that? Can I make that function a param to openXML()?
  2. Solved! 😀 My brain had a sudden flash, so I decided to try something. Lo and behold, it worked! Here's what it took: $xml->getElementsByTagName("customers")->item(0)->replaceChild($node, $oldnode); I had not understood from the examples that I have to start with the parent node to replace a child node. Seems logical now that I've found it, but I sure didn't see it before. I doubt I could have got there if you hadn't found my var error, so many thanks for that.
  3. So I do. Thanks for catching that! I was so hopeful that correcting the var name would solve the problem, but there is no change. That line now looks like this: $node->replaceChild($node, $oldnode); //THIS LINE FAILS I think that may have been a relatively recent error, as I changed some var names to make it easier to compare with the example code, but its failure predates that. I hope you can take another look and find what else is screwed up. Logically, there must be some problem with the params I'm sending in this line, because the previous line executes without problem, and if I comment this line out, everything thereafter runs. My understanding of the DOM may still be a little fuzzy, so I can't see what isn't right. Using textContent on both vars shows exactly what I would expect. I even tried simply retyping the line, because I've seen instances where that made a difference, but not this time.
  4. At Ingolme's suggestion, I've switched from simpleXML to DOMXML for this because I need to be able to replace a node. I've done my best to follow PHP.com examples, and everything seems to work up until the point of the actual replacement. I hope you can spot what's keeping it from working. The vars found in the heredoc are assigned earlier from the customer input form. if $found is positive, it contains a cId (customer ID) that exists in the DB and should be updated with any new info (code shown). If negative, it's abs() is the cId for a new node to be added (code omitted here). In $xml, the <customer> node is child of <customers>, which is child of <root>. If I comment out the replaceChild line before the break, execution continues unhindered. Nodename reports "customer" and nodetype reports 'XML_ELEMENT_NODE' for both $node and $oldNode, so I don't know what is preventing the replacement. // SAVE CUSTOMER DATA // $found= $cId; $cId = abs($found); // Create DOM from data file $xml = new DOMDocument; $xml->formatOutput = true; $xml->load("Titles data.xml"); // Create node from customer input $str = <<<XX <customer> <cId>$cId</cId> <organization>$organization</organization> <website>$URL</website> <contact>$name</contact> <email>$email</email> <phone>$phone</phone> <addr>$address</addr> <city>$city</city> <state>$state</state> <zip>$zip</zip> <orders> <oId></oId> </orders> </customer> XX; $DOMChild = new DOMDocument; $DOMChild->loadXML($str); //turn $str into DOMDoc $node = $DOMChild->documentElement; //not sure if this is right, example suggests it is $node = $xml->importNode($node, true); //Is this necessary? examples suggest it is if ($found > 0) { //if positive, $found contains cId of desired customer $list = $xml->getElementsByTagName("cId"); //list of ID's to search for ($r = $list->length -1; $r > 0; $r--) { //find customer that fits cId if ($list->item($r)->nodeValue==$cId) { //when found, $r is index to customer node list $oldnode=$xml->getElementsByTagName("customer")->item($r);// get node to be replaced $msg=$r."—"; //$msg is included in email sent later; shows arrival here $node->replaceChild($node, $oldNode); //THIS LINE FAILS, HALTING EXECUTION break; } } }
  5. I like to use this hack when adding values in JS: sum = -(-x - y); It eliminates the ambiguous '+' operator altogether, along with any type confusion. It can also be put into a function: function add(a, b) {return -(-a - b)} sum = add(x, y); This may be slightly less efficient than declaring the var as numeric, but I think it makes for neater code, and there are times we want to make use of JS's loose typing, so the var can be used as text in one place and numeric in another.
  6. I will look at it. Do you have an example of using DOMDocument? That might work just as well for me. Thanks!
  7. Okay, I'll hunt for a DW replacement. It has to run on OS10.11.6. Any recommendations? Meanwhile, I can upload and run the code regardless of the error message, but it doesn't seem to work. I was wondering if you could see a reason why. Is this a reasonable way to approach my goal? Some of the discussions I've read seem to imply I have to insert each tag separately, but I can't tell for sure.
  8. "Syntax error on line 1" is apparently how DW CS5 reports a syntax error anywhere in a PHP doc. The only thing on line 1 is "<?php". The error could be in line 12,345, and fixing it will make the error report go away. In this case, if I comment out the heredoc (lines 138-155), it reports "No syntax errors."
  9. I'm a novice to PHP. What I want to do is add a new customer record to my XML database. It looks as if a simple way to do this would be to create a string using heredoc, which will insert the variable values, then turn it into a simpleXML object: $xml=simplexml_load_file("Test data.xml"); //load XML file // these $vars are all defined from form input in previous code $str= <<<EOS <!----> <customer> <cId>$Customer</cId> <organization>$organization</organization> <website>$URL</website> <contact>$name</contact> <email>$email</email> <phone>$phone</phone> <addr>$address</addr> <city>$city</city> <state>$state</state> <zip>$zip</zip> </customer> EOS; $new = new SimpleXMLElement($str); //turn $str into SimpleXML element $xml->addChild("customer",$new); //add it to DB My first question is whether DreamWeaver CS5 will allow me to do this. It gives me the "syntax error on line 1." Is it able to recognize heredoc? Second, am I approaching this the right way? I'm sure this is something that is done regularly for myriad websites, but I haven't found any clear direction on the best way to handle it. Finally, if this is the right approach, what am I missing to make it work?
  10. Most of my product pages include a link to a window showing the text of my translation, formatted with CSS to appear as a series of scrolling "slides." Each "slide" is a separate <div> containing 2, 1, or 0 <p>'s. The number of slides can range from ~25 to ~1,000. On some of the larger ones, I'm wondering whether there is an advantage to splitting the text HTML between two separate shell divs? If I put the first 50 or so slides in one <div>, will it load and display faster than if I put all 800 slides in the same <div>? I'll try to illustrate: <body> <div class="shell" onclick="window.close()"> <div><p>Title</p><p>by Composer></p></div> <!-- ~800 more divs here --> <div><p>Translation credit</p><p>Titles credit></p></div> </div> </body> OR... <body> <div class="shell" onclick="window.close()"> <div><p>Title</p><p>by Composer></p></div> <!-- ~50 divs here --> </div> <div class="shell" onclick="window.close()"> <!-- ~750 more divs here --> <div><p>Translation credit</p><p>Titles credit></p></div> </div> </body> The CSS makes the break between the shell divs invisible. The only difference would be whether one would display faster. Presumably if the first div were displayed before the second (currently not visible) were parsed, the second would be completed well before the user finished scrolling through the first, but I don't know whether it works that way or not. To see live examples, click on "View supertitles" at the bottom of these two windows. I have split the divs in the first (811 slides), not in the second (885 slides). https://tastefultitles.com/Catalog.html?num=4 https://tastefultitles.com/Catalog.html?num=25
  11. A button in my window opens a new, narrow window centered on the screen. window.open("/myWindow.html", "_blank", width="400", height=screen.height, top=0, left=(screen.width / 2 - 200)); My naive assumption was that, on a large screen (laptop or larger), this would create a window 400px wide. On my 13" macbook, according to the information in the Safari web inspector, it creates a window only 347.826px wide. The CSS of the new window sets a background, then creates a <div class="shell">, 300px wide. The setting of margin:0 auto is meant to center the "shell" in the new window. body { background-color:#C03; background-image:url(../images/Curtain%20narrow.jpg); overflow-x:hidden; } div.shell { background-color:transparent; color:white; font-family:Arial, Helvetica, sans-serif; font-size:16.5px; font-weight:600; height:auto; margin:0 auto; min-height:90vh; overflow:hidden; text-align:center; } What happens is that the 300px shell is drawn tight against the right edge of the narrower-than-specified window, and can be pulled back and forth. If I manually resize the window to 400px it looks and works as intended. Should I focus on getting the window to draw the right size? Attempt to resize it on open? Or is there some different setting that would give me what I want? On my iPhone 6s, The window fits the screen width and the shell div is centered. What am I missing to get the same results on the larger screen?
  12. Good grief! I can't believe I looked at that for so many hours without seeing it. It sure helps to have another set of eyes. Many thanks!
  13. I'm trying to fill a table on my HTML page with values from my xml data file. Var v is an HTMLCollection object containing these nodes extracted from the xml file: <pubisher>Peters</pubisher> <translator>Jay Reeve</translator> <slidecount>885</slidecount> <pagecount>189</pagecount> <other></other> I'm using this chunk of code. The vars are all local and declared earlier. for (r=0;r<v.length;r++) { str=v[r].innerHTML; //str gets the value "Peters" if (str>"") { fld=v[r].nodeName; //fld gets the value "publisher" x=document.getElementById(fld); //x is "undefined" x.style.display="block"; x.childNodes[1].innerText=str; } } On the first pass, x is supposed to reference the first row from this HTML table: <table id="details"> <tr id="publisher"> <td> Publisher:</td><td></td></tr> <tr id="translator"><td> Translator:</td><td></td></tr> <tr id="slidecount"><td>Slide count:</td><td></td></tr> <tr id="pagecount"> <td> Page count:</td><td></td></tr> <tr id="other"> <td> Other:</td><td></td></tr> </table> The debugger shows these values as they should be: fld: "publisher" str: "Peters" but x=document.getElementById(fld) is left undefined and throws an error. If I replace the variable fld with the string "publisher", it works fine. The table row becomes visible and the empty cell gets the value "Peters". So is there a restriction I don't know on using variables for Id's? Or Id's for table rows? I'm pretty sure I've done it before, but I can't see why this is failing. Is fld a restricted keyword? Could there be a type issue? I tried splicing quotes onto the fld string, but that didn't help. I don't think it can have anything to do with the fact that this is part of an anonymous callback function that runs after the file is loaded where v gets its value. Any insight would be most appreciated.
  14. It turns out I had merely neglected to include this line in my code: <meta name="viewport" content="width=device-width, initial-scale=1" /> Doing that took care of the problem. You'd think I would know better by now, but having never run into that before, it took me quite a while to find it.
  15. I thought I had fixed the missing px, but hadn't. Thanks for pointing it out. I have not heard of the security problem before, nor the simple fix. Thanks! Would you be interested in explaining how that helps? What could some miscreant do with my folders list, and how does the empty index.html prevent that?
  16. Apparently removing the <style></style> tags from the css file allowed it to work. I don't know why the first declaration (body) was the only one hindered, but now it seems to work fine. A newbie mistake, I'm sure, but you might keep it in mind for the next one who asks. Thanks for your input.
  17. 1. Okay. I didn't know that. I don't think I had any. 2. The body css has all the same parent tags as the others, but it's the only one that doesn't work. Is that true even in a css file? I'm missing the point of your first response. There is no body styling from the separate css file. There is from the html file.
  18. My site opens a html window containing a long series of divs with text. It uses a separate css file, all of which works except for the body styling. If I put the same styling (via cut & paste) into the html for the window, it works fine. The html and the css files are in the same folder. There's no reason I can't add those few lines of css to the html in the ~30 windows that use it, but I'm curious why it won't work the other way. Here's the code: <style> body { background-color:#600; background-image:url(../images/Curtain%20narrow.jpg); } </style> You can view the css file (including the body styling) here. As I said, everything else in the css file works correctly, so the file is obviously being loaded and read. Is there a secret about body styling I don't know?
  19. My site opens a window using this code: function view() { var title=workId("title"); var L = (screen.width - 355) / 2; var H = screen.height; var p = 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no,width=339,height='+H+',top=0,left='+L+'"'; window.open("/slides/"+title+".html", "_blank", p); } I've hard coded the width of the window because it is essentially a popup and needs to be that width to have the right proportions. The longest lines of text should fill the box without breaking. When I view it in Safari's "Responsive Design Mode", it looks as it should for every size device, but when I open it on my iPhone 6s, it becomes very tiny. It can easily be enlarged to the proper size, but the boxes are much wider than the text, although the vertical fit is perfect. What am I missing to have it show up right on a phone? Why doesn't it look like the "Responsive Design Mode" image? The file is here, but of course if you open it directly, it won't get the window sizing from the window.open statement. I'm guessing the phone pays no attention to the window.open sizing, but I don't know how else to size it. FWIW, this is the css code I'm using: <style> body { background-image:url(http://tastefultitles.com/images/Curtain%20narrow.jpg); background-size:100vw; font-family:Arial, Helvetica, sans-serif, Gadget, sans-serif; font-weight:600; text-align:center; margin:8pt; } div:not(#shell){ margin-bottom:8px; padding-bottom:1em; background-color:black; color:white; height:2em; overflow:hidden; font-size:14px; } p { margin:0; line-height:1.3em; } p:first-of-type { padding-top:0.2em; } p:only-of-type { padding-top:0.8em; } p:nth-child(2) { padding-top:0; } .l { border-bottom: 1px solid white; } </style>
  20. It took many hours, but I have it working now. Thanks for the tip!
  21. I have been using the following function to load my xml data file. It used to be solid, but now it often (but not always) fails to load and goes on to create errors in the next function when it tries to use the data. I don't know whether that's because the data file is growing larger, or if that's unrelated, but I need something I can depend on. I've experimented with some other load functions found online, but have had no more success with them. I'm using the synchronous version, as I understand it is supposed to wait until the load is done before going on. Is my understanding flawed? Is there an asynchronous version with callback that would be more reliable? //-------------------------------- function getTitlesList() { if (window.XMLHttpRequest) { var xhttp = new XMLHttpRequest(); } xhttp.open("GET", "/Titles data.xml", false); xhttp.send(); var Works = xhttp.responseXML; return Works.getElementsByTagName("work"); } //--------------------------------
  22. Overflow:hidden seems to do the trick. I thought I had tried all the options, but I might have assumed incorrectly that hidden would hide part of the img. Thanks a million!
  23. Removing the float sends all the text below the img, which keeps the div from being too short, but is clearly not what I want. No, there is no positioning in this div. Do you have something to suggest?
  24. I have a div that contains an img and text. The img is floated left at 40% width. The height of the img and the amount of text may vary. What I want to do is make sure the parent div is at least high enough to enclose the img. (It may be higher if the text is longer than the img, but that case works fine already.) I've tried various overflow settings, but none seem to accomplish this. Is there a way using css or straight js?
  25. Thanks for the quick response. I've been passing arguments to functions for more than 40 years. (A game I wrote for the Commodore 64 was chosen as one of the 12 best ever published in Compute's Gazette.) But I've only worked in js occasionally for 10 years, and am new to callbacks. Even so, I can't see how what you did is different from what I did. I declared 3 functions. None of them required any arguments to accomplish their function. (Neither do the 3 in my real code.) I passed function test2 as a callback to test1.... Okay, I think the lightbulb just went on... I was passing the callback function in the function definition, rather than in the function call. (I really thought that's what I was seeing in the examples.) So is this right? <script> function test1(x) { alert(1); x(test3); } function test2(x) { alert(2) x() } function test3() { alert(3) } test1(test2) </script It seems to give the desired results, but please let me know if you see a problem. I think I can make it work now, but for some reason my brain is still struggling with it. Thanks for powering up the lightbulb! [On a completely separate note, is there a way to keep this code editor from doing such bizarre things with indents?]
×
×
  • Create New...