Forums

farzadina

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?

Paulie_D

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

farzadina

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?

filipeb


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

?

farzadina

<script>
if (document.getElementById('wrapper')) {
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
}
</script>

Doesn't worked. What's wrong?

TheDoc

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.

farzadina

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?

JohnMotylJr

-- deleted because it was garbage code --

JohnMotylJr

-- deleted because it was garbage code --

filipeb


<script>
if (document.getElementById('wrapper')) {
   var toAppend = "<script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js\" type=\"text/javascript\"></script>";
   document.getElementsByTagName('head')[0].appendChild( toAppend );
}
</script>

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

farzadina

@_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?

TheDoc

The 'head' is <head>, that's where you want to append your script to.

TheDoc

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.

JohnMotylJr

@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

farzadina

@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.

Mottie

Have you looked at yepnope.js?

treehouse : what would you like to learn today?

Forums

[Solved] Load my .js code, only when 'x' DIV exists