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 6 of 6
  1. #1
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1

    Ajax content and innerHTML

    Hi all,

    I have a javascript+CSS based popup (? by toggling display property), which works well. The popup <div> consist of an <h3>, <img> (serves as close button) and a big <ol> (This markup is in a seperate file and is about 2KB)

    I need to bring the content via Ajax rather than statically placing it inside the document. I'm very reluctant to use innerHTML, as it's non standard and I may lose the "close" action from the img(mentioned above), which would be there otherwise.

    My other option is to save the content(without any html tag) in a php array and return through Ajax, and then dynamically create all html nodes with all attributes using proper DOM methods.

    I expect some advice from you to choose the right one.

    PS: My popup script is obtained from http://www.php-development.ru/javasc...pup-window.php
    Last edited by abduraooft; 12-17-2009 at 04:05 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,366
    Thanks
    11
    Thanked 590 Times in 571 Posts
    the best standards are defacto ones!

    never be afraid to try simple solutions, what do you have to lose?

    .innerHTML is a standard in html5, so that tired old argument will be not just lame, but incorrect.
    there is no faster or simpler way to parse/add html elements than innerHTML.

    in my experience, the only troubles i've had with .innerHTML are:
    • cloning some input values
    • populating selects with options
    • minor table row issues in IE.
    • <script> tag's need eval'd



    attrib events should work just fine.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    abduraooft (12-18-2009)

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Ok, thanks for your input.
    I'm using Sajax toolkit, and my element triggering the popup is
    Code:
    <a href="/search/" onclick="x_getSearchTips(showSearchTips);popup_show('popup', 'popup_drag', 'popup_exit', 'screen-center', 0,0); return false;">Search tips</a>
    (where the parameter 'popup' is the id of the popup container, 'popup_drag' is the id of the <h3> tag and 'popup_exit' is the id of the close button image.)
    It gets the Ajax content and shows the popup, but it can't register the other events on the popup block for clik,drag,close etc.

    My script is exactly the same as their http://www.php-development.ru/javasc...opup-window.js

    How can I customise it to suit with my current dynamic content?

    (I can upload an online demo of my code, if required. Please let me know.)
    Thanks.
    Last edited by abduraooft; 12-18-2009 at 12:07 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,366
    Thanks
    11
    Thanked 590 Times in 571 Posts
    Quote Originally Posted by abduraooft View Post
    Ok, thanks for your input.
    It gets the Ajax content and shows the popup, but it can't register the other events on the popup block for clik,drag,close etc.

    (I can upload an online demo of my code, if required. Please let me know.)
    Thanks.

    perhaps the content takes a moment or two to "show up". i don't see the x_getSearchTips code, but if it adds the content, try giving it some time to complete. sometimes dom changes take a while, while the javascript flow itself moves on. try setting innerHTML in a loop for example...

    without seeing x_getSearchTips(), my best guess is that slightly delaying the popup call might work:

    Code:
    <a href="/search/" onclick="x_getSearchTips(showSearchTips);window.setTimeout(function(){popup_show('popup', 'popup_drag', 'popup_exit', 'screen-center', 0,0);}, 80); return false;">Search tips</a>
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    abduraooft (12-19-2009)

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Wow! that delay works, though it demands me to use a big value there. And even with that, it can't detect some element(s)/register some event handlers.

    Please check the demo at http://itsnot.freehostia.com/ajax-popup/

    Here's the non ajax version,http://itsnot.freehostia.com/ajax-popup/no.php, which works just fine.
    Last edited by abduraooft; 12-19-2009 at 01:58 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,366
    Thanks
    11
    Thanked 590 Times in 571 Posts
    Quote Originally Posted by abduraooft View Post
    Wow! that delay works, though it demands me to use a big value there. And even with that, it can't detect some element(s)/register some event handlers.

    Please check the demo at http://itsnot.freehostia.com/ajax-popup/

    Here's the non ajax version,http://itsnot.freehostia.com/ajax-popup/no.php, which works just fine.
    x_getSearchTips() uses asynch ajax to fetch it's content.
    using a setTimeout value to wait until it's done is not a great way of doing things.
    too little and you miss the call, too much and every user has to wait for the worst-case...

    you can move the ajax to synch (not highly recommendeded), or you can move the 2nd half of your old onclick into the "onreadystatechange" ajax event, ~line 130:

    Code:
    document.getElementById(target_id).innerHTML = eval(data); // ~line130
    window.setTimeout(function(){popup_show('popup', 'popup_drag', 'popup_exit', 'screen-center', 0,0);}, 80);
    you might need to do a couple other adjustments to get it smoothly working, but this is the main idea: queuing up the workload to successively complete each sub-task reliably without user-perceived delay using function call chaining.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%


  •  

    Posting Permissions

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