Javascript not working when adding another script

Question

Ok Guys please forgive my ignorance. I'm new to javascript so all help is well received. I've been trying to implement these solutions but it's not working. This is what I have on my revised code:

    <script type="text/javascript">
    jQuery.noConflict() // return `$` to it's previous "owner"
    (function($){ // in here you're assured that `$ == jQuery`
    $(document).ready(function(){  
    $('#slider1').tinycarousel()
    $('a.fancybox').fancybox()
    $('textarea, select').uniform()
    $('#slider').nivoSlider ({ pauseTime: 6000, effect: 'sliceDown'})
    })
    })(jQuery)
    </script>

When i do this it makes all of the above stop working.

Also, I still have the other statement

    function $(id) {
    return document.getElementById(id);
}

Which Im not sure if I understand what to do with it since if I take it off the element that goes with it stops working (it's a dual slider)

Thanks Again

I'm a javascript novice so my apologies :0)

I'm using this javascript on a website:

    <script type="text/javascript">        
    $(document).ready(function(){  
        $('#slider1').tinycarousel();
        $('a.fancybox').fancybox();
        $('textarea, select').uniform();
        $('#slider').nivoSlider ({ pauseTime: 6000, effect: 'sliceDown'});
    });
    </script>

There is another script that contains this at the beginning which is making everything else to stop working. As soon as I delete it everything works again. Is there a way to unite these? or do they need to stay separate?

    function $(id) {
        return document.getElementById(id);
    }

Thanks in advance...

mu is too short · Accepted Answer · 2011-10-06 06:34:18Z

5

Use noConflict to release $ and the use jQuery() instead of $() for jQuery operations:

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $.noConflict();
    // Now $('x') uses the custom $ function.
</script>

answered Oct 6, 2011 at 6:34

mu is too short

436k71 gold badges863 silver badges822 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Baz1nga · Accepted Answer · 2011-10-06 06:35:54Z

2

The problem is you have declared a function called $ which now overwrites the jquery reference that is created by jquery.

thus when you do $('#slider1').tinycarousel(); you are now expecting a method tinycarousel defined on the object returned by your function.

if you still want to continue using jquery and your function you will have to use

jQuery("something").tinycarousel()

answered Oct 6, 2011 at 6:35

Baz1nga

15.6k3 gold badges38 silver badges63 bronze badges

1 Comment

Baz1nga Over a year ago

also add $.noConflict(); as suggested by mu so that you explicitly remove the $ reference that query creates.

Ricardo Tomasi · Accepted Answer · 2011-10-06 07:12:59Z

1

It's good practice to "shield" your code from this kind of problem by never using the $ function directly, instead create a new scope where you explicitly define $ = jQuery:

jQuery.noConflict() // return `$` to it's previous "owner"
(function($){ // in here you're assured that `$ == jQuery`
    $(document).ready(function(){  
        $('#slider1').tinycarousel()
        $('a.fancybox').fancybox()
        $('textarea, select').uniform()
        $('#slider').nivoSlider ({ pauseTime: 6000, effect: 'sliceDown'})
    })
})(jQuery)

Alternatively, jQuery passes itself to the DOMReady short form:

jQuery.noConflict()

jQuery(function($){
        $('#slider1').tinycarousel()
        $('a.fancybox').fancybox()
        $('textarea, select').uniform()
        $('#slider').nivoSlider ({ pauseTime: 6000, effect: 'sliceDown'})
})

Make this a standard practice and you'll avoid the issue in the future.

answered Oct 6, 2011 at 7:12

Ricardo Tomasi

35.3k2 gold badges58 silver badges66 bronze badges

1 Comment

Daniel Over a year ago

Thanks again everyone for all the answers They are really appreciated.

Deeptechtons · Accepted Answer · 2011-10-06 06:31:22Z

-1

You should probably remove the second script because jQuery itself contains ID selector which will select elements from dom using id as requirement.

Remove this

function $(id) {
return document.getElementById(id);
}

Do this from now to select with ID

$(document).ready(function(){


$("#myCarousel").fadeIn();

});

answered Oct 6, 2011 at 6:31

Deeptechtons

11.1k28 gold badges106 silver badges178 bronze badges

11 Comments

Alxandr Over a year ago

That might render the entire second script useless though, and it might be as long and complicated as jQuery is for all we know. However, jQuery has the dollar-safe options (don't remember how it's done, but it's pretty simple).

Simon H Over a year ago

LOL ... why is his script overwriting JQuery? Anyway, this should fix the problem. If you are including the jquery in the header of your webpage (ie <script type="text/javascript" src="/path/to/jquery.js"></script>).

Deeptechtons Over a year ago

@Alxandr no point in reinventing the ID selector u agree? also jQuery would provide chainability. #script2 would not

Baz1nga Over a year ago

your not addressing the question you are giving a suggestion which could be in a comment.

Lee Over a year ago

the function $(id) from script#2 returns a DOM element. jQuery's $(...) function returns a jQuery set object. These are not the same things, so you can't replace script#2's $ function with jQuery's $ function.

|

Collectives™ on Stack Overflow

Javascript not working when adding another script

4 Answers 4

Comments

1 Comment

1 Comment

Remove this

Do this from now to select with ID

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Remove this

Do this from now to select with ID

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related