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 2006
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jQuery DOM friendly search and replace

    Some of you no doubt remember that I was working on a javascript that did a regex search and replace on the innerHTML of a section of a site I do front end development for. I got it working in the end but it had some problems (that we were able to live with), but another project on the same site has highlighted a problem that isn't acceptible.

    The problems with the system that we decided we could live with:

    * It produced slightly different results in IE and FireFox/Opera.
    * It used a monster regex that could lead to maintainence issues in the future
    * It doesn't work at all in Safari (though all other reasonably modern browsers that we have available for testing work)

    I have now been given the job of adding features to the site that are based on jQuery, specifically its animation and effects, and DOM manipulation features. The script in question fires on $(document).ready and is meant to test for Flash with a JavaScript function. If it finds a supported version of Flash it should then reveal a hidden hyperlink on the page with an animation. When clicked, the button attaches an iFrame to the DOM and loads the Flash movie into it. If Flash isn't found then the link remains hidden and deactiviated.

    The problem is that the search and replace script I wrote earlier also needs to run on document load. Each script works fine by themselves, but when both scripts are used together the animated reveal ov the hyperlink begins as it should, but then gets interrupted when the search and replace script runs.

    Each script needs to be completely self-contained as some pages will use either one or the other but not both together, but the two scripts need to not interfere with each other when a page that uses them both is loaded.

    With some experimentation I have determined that it's the innerHTML text replacement that is causing the problem.

    I have done some rewriting of the search and replace script to use some jQuery features (as I will be using it anyway for the other script) and while I have manage to shorten the script by using jQuery functions in place of my own AJAX code I found that if I used the jquery .html method I still had the same problem.

    Does anyone have any information on alternatives to using search and replace to do this? Failing that, is there a way to determine whether there is a jQuery animation in progress and waiting until it's complete to do the innerHTML stuff?

  • #2
    New Coder
    Join Date
    Aug 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    why don't you do

    $(document).ready(function(){search_replace(); flash();}

  • #3
    New Coder
    Join Date
    Sep 2006
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    because:

    a)No actual Flash is loaded into the page, the movie loader simply runs a test javascript (the one from http://www.featureblend.com/javascri...n-library.html) and if it finds the correct version of the flash player it reveals the button that will trigger a movie load with a jQuery animation effect, and:

    b) Each script needs to be self contained and not interfere with each other. They can both make use of jQuery but otherwise must be able to exist entirely independently of each other. Some pages will use the regex hyperlink adder script, some will use the video player script, and some will use both.

    One possibility might be adding code to the script that does the search and replace script to see if there are any jQuery animation effects in progress and to wait until they have finished if there are until after they have completed, but I'm not sure how to do this. Additionally, this may fix the interference problem but still wouldn't overcome the other shortcomings mentioned in my earlier post.

    If possible I'd rather replace the whole regex search and replace on the innerHTML (or $(element).html in the jQuery version) with a DOM friendly version on the grounds that I need it to be as cross-browser as possible, and because the innerHTML replacement method is only bound to lead to yet more trouble in any future scripts we decide to add.


  •  

    Posting Permissions

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