Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2012
    Location
    Houston, TX
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Inserting JavaScript Variables into HTML

    So i have aquired my data from a external source, plaed it within a function and have it in a state which i can define it with JS variables. URL for images, some text strings, etc...

    Now i have an fully designed site with filler images and ipsum text that was all for the design process.

    How do i now replace the images via the js variable containing the url for the images and the text etc....

    document.getElementById().src=""?

    But this seems to show a second of the original image before replacing it with the queried new image...

    document.write?

    Would i build the entire section of HTML code into document.write commands and insert the JS variables in that mannor?

    what exactly is best practice for this? and of course most seamless for the end user.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,603
    Thanks
    80
    Thanked 4,500 Times in 4,464 Posts
    document.getElementById().src=""?

    But this seems to show a second of the original image before replacing it with the queried new image...
    That's the right way, but the question is: Why would you have something OTHER than the first image there in the first place? If it takes a second or two to figure out what you need to display, maybe you should instead show something completely different--a kind of "please wait" placeholder?--until you have all your content ready to display.

    document.write is considered obsolete and is clearly not the preferred way to go. Among other things, you can *NOT* use document.write after a page is loaded (after the </body> and </html> tags have been processed by the browser). If you do so, you will WIPE OUT ALL PRIOR CONTENT of the page, including even the JavaScript code you use to do the document.write! So that means you MUST use document.write DURING the creation of the page. And if your filtering et al. takes several seconds to complete, that means that the browser will be showing *nothing* (or at least an incomplete page) until you complete the last processing and the last document.write.

    So... Methinks you need to come up with a way to make your page look good for those few seconds it takes to do the processing.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    erebus (10-05-2012)

  • #3
    New Coder
    Join Date
    Sep 2012
    Location
    Houston, TX
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    That's the right way, but the question is: Why would you have something OTHER than the first image there in the first place? If it takes a second or two to figure out what you need to display, maybe you should instead show something completely different--a kind of "please wait" placeholder?--until you have all your content ready to display.

    document.write is considered obsolete and is clearly not the preferred way to go. Among other things, you can *NOT* use document.write after a page is loaded (after the </body> and </html> tags have been processed by the browser). If you do so, you will WIPE OUT ALL PRIOR CONTENT of the page, including even the JavaScript code you use to do the document.write! So that means you MUST use document.write DURING the creation of the page. And if your filtering et al. takes several seconds to complete, that means that the browser will be showing *nothing* (or at least an incomplete page) until you complete the last processing and the last document.write.

    So... Methinks you need to come up with a way to make your page look good for those few seconds it takes to do the processing.
    Excellent, thank you for the definitive explanation!

    The images are there as... i guess you would call them stock images mearly placed for the design and layout aspects. I removed them and the without seeing the images change and instead seeing the images appear a brief moment after the page loads is almost acceptable... if even noticable if i wasent staring directly at it like the person who just made a change to it.. lol

    if the JSON request drags out and there is a longer delay... i guess i can aquire a loading image or something of the sort as xelawho recommended.

    thanks again for the help


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •