Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Load my .js code, only when ‘x’ DIV exists

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #38571
    farzadina
    Participant

    I want my Javascript code to be loaded, only when #example DIV exists on page. (e.g: load video.js code, only when there is a video on the page)
    How to do that?

    #104587
    Paulie_D
    Member

    I think this is redundant as you would need JS to detect the presence of the div anyway…wouldn’t you?

    #104640
    farzadina
    Participant

    So how I can detect the presence of the div without the help of the Jquery? (I know it’s possible with wordpress ‘Custom Fields’, but don’t know how to do that)
    Did I understood your purpose?

    #104642
    filipeb
    Member

    if (document.getElementById('divID')) {
    //do something
    }

    ?

    #104679
    farzadina
    Participant

    }

    Doesn’t worked. What’s wrong?

    #104682
    TheDoc
    Member

    That’s because you’re just writing a bunch of text, it doesn’t know what to do with it.

    http://stackoverflow.com/questions/1900874/how-to-add-anything-in-head-through-jquery-javascript

    Skip the jQuery answer and find the JS one.

    #104704
    farzadina
    Participant

    Sorry @TheDoc, I couldn’t understand your purpose. My question is: Appent X, when have Y = Don’t append X when there is no Y DIV.
    Ok?

    #104705
    JohnMotylJr
    Participant

    — deleted because it was garbage code —

    #104709
    JohnMotylJr
    Participant

    — deleted because it was garbage code —

    #104710
    filipeb
    Member

    ";
    document.getElementsByTagName('head')[0].appendChild( toAppend );
    }

    I didn’t test it, but that should be what you’re looking for. I just used the method posted through TheDoc‘s comment.

    #104712
    farzadina
    Participant

    @_John_ Thanks, I will wait for your solution.

    @filipeb
    Didn’t worked for me. What’s the ‘head’ tag name? and is it same for everywhere or should I change that in my page?

    #104715
    TheDoc
    Member

    The ‘head’ is , that’s where you want to append your script to.

    #104716
    TheDoc
    Member

    The reason why it didn’t work might be because the script itself isn’t a DOM element – check out that thread I linked to to see how to make it into one.

    #104721
    JohnMotylJr
    Participant

    @farzadina

    var script   = document.createElement("script");
    script.type = "text/javascript";
    script.src = "js/javascript.loading.js";

    if ($("#example").length > 0){
    document.head.appendChild(script);
    }

    Demo: http://jsfiddle.net/john_motyl/McNTG/
    Not sure if this is the best way of doing this, but it works.

    Also check this out: http://api.jquery.com/jQuery.getScript/
    Seems like this could be a more semantic approach to dynamically using js files. I hope this helped.

    This works as well and is pretty cool:

    $(function() {
    if ( $('div').length > 0 )
    {
    $.getScript("http://malsup.github.com/jquery.easing.1.3.js", function(data, textStatus, jqxhr) {
    console.log(data); //data returned
    console.log(textStatus); //success
    console.log(jqxhr.status); //200
    console.log('Load was performed.');
    })
    .fail(function(jqxhr, settings, exception) {
    $( "div" ).text( "ajax request for script failed." );
    });
    }
    });

    I feel that the .fail() is acting like a try

    #104753
    farzadina
    Participant

    @TheDoc Yes, it looks you are right, I didn’t saw a Script as a DOM ever. Thanks for you helps.
    @_John_ Thanks a lot, I used your first code & that worked great! The second one is not suitable for me, because I don’t need those messages (e.g failed).
    Thanks again.

Viewing 15 posts - 1 through 15 (of 16 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.