Using jQuery in a JavaScript function - Stack Overflow

admin管理员组

文章数量:1180476

function divlightbox(val)
{
    if(val)
    {
        val=val.replace( /^\s+/g, "" );
        var count_js=0;
        var big_string='';
        document.getElementById("video_lightbox").innerHTML="";
        document.getElementById("divlightbox").style.display = "block";
        $("#video_lightbox").css({"height":"430px","top":"10%","width":"480px"});

I found out that the error is in the above. My question is can't I use jQuery and traditional JavaScript at same time? I have done coding like this numerous times and never ran into a problem like this. I used to use jQuery methods like .hide() and .css() inside JavaScript functions but this time it doesn't work.

Thanks in advance.

function divlightbox(val)
{
    if(val)
    {
        val=val.replace( /^\s+/g, "" );
        var count_js=0;
        var big_string='';
        document.getElementById("video_lightbox").innerHTML="";
        document.getElementById("divlightbox").style.display = "block";
        $("#video_lightbox").css({"height":"430px","top":"10%","width":"480px"});

I found out that the error is in the above. My question is can't I use jQuery and traditional JavaScript at same time? I have done coding like this numerous times and never ran into a problem like this. I used to use jQuery methods like .hide() and .css() inside JavaScript functions but this time it doesn't work.

Thanks in advance.

• javascript
• jquery

Share Improve this question Follow edited Jul 3, 2012 at 1:28 Nathan 12k1111 gold badges5353 silver badges9494 bronze badges asked Nov 11, 2010 at 13:47 Wasim KaraniWasim Karani 8,8861010 gold badges5757 silver badges100100 bronze badges 6

• 5 jQuery IS javascript. BTW, what error returns the javascript console/firebug? – fcalderan Commented Nov 11, 2010 at 13:49
• 2 what error are you getting? have you looked at it in firebug? – NG. Commented Nov 11, 2010 at 13:49
• 1 Is jQuery loaded at the time this function is called? – red-X Commented Nov 11, 2010 at 13:52
• I am calling this function on click event of a link and jQuery is loaded when I call this function...What might be the problem red-X – Wasim Karani Commented Nov 11, 2010 at 13:59
• When you say "my error", do you mean you're getting an Error message in the console? Or are you saying that it just isn't doing what you want it to do? You haven't actually described the issue you're having. – user113716 Commented Nov 11, 2010 at 14:03

 |  Show 1 more comment

4 Answers 4

Sorted by: Reset to default 16

While the other answers fix the specific problems, I don't think the OP's question (in bold) is really answered here, as depending on the specific context, $ may possibly not be defined as a jQuery object yet (having had this problem myself a few times now.)

In which case you would need to do something like:

function divlightbox(val) {
    // ...
    // just use jQuery instead of $ one time
    jQuery("#video_lightbox").css({"height":"430px","top":"10%","width":"480px"});
}

OR

function divlightbox(val) {
    // define the $ as jQuery for multiple uses
    jQuery(function($) {
        // ...
        $("#video_lightbox").css("height":"430px");
        $("#video_lightbox").css("top":"10%");
        $("#video_lightbox").css("width":"480px");
    }); 
}

jQuery is JavaScript so YES. Instead .innerHTML="" just use .empty(). Instead .getElementById() use $('#..') and so on.

to do things like hide(); and css() you need jquery objects. you can't do them to dom elements.

so you could do $('#video_lightbox').html(""); or

$('#video_lightbox').empty();

You must provide error in javascript console.

1) Do you pass a val argument to divlightbox function()? When do you call it?

2) why do you use the same identifier divlightbox both for a function and for a div id? Change name to the function please, maybe the problem could be here.

3) Always check if video_lightbox and divlightbox exist before accessing them.

本文标签： Using jQuery in a JavaScript functionStack Overflow