CODEWITHSUNDEEP
javascriptsalesforcetypeerror
Eagerin Sf
Eagerin Sf

Reputation: 166

TypeError: $(...) is null

My requirement is when I mouseover on helpText values will be displayed with hyperlinks in it, after clicking on hyperlink mouseout event should occur. For that I added a click event and then mouseout event. But getting error.

My code is:

<script>
   jQuery.noConflict();
    function doOnclick(){
        doMouseout();
    }
    function doMouseout(){
    alert('hi');
        $('Foo').hide();
    }
</script>

 <style>
    .helpLink {
      position:relative;
    }

    .video{
      display:none;
      width:160px;
      height:120px;
      background:#EEE;
      border:1px solid #CCC;

      position:absolute;

      z-index:10;
    }
  </style>


            <apex:outputLink styleClass="helpLink" onmouseover="$('{!$Component.Foo}').style.display = 'block';">  <!-- title="help" onmouseout="$('{!$Component.Foo}').style.display = 'none';" -->
                <apex:image value="/s.gif" styleClass="helpIcon" />
            </apex:outputLink>
            <apex:outputPanel id="Foo" styleClass="video" title="help" >
               <a  href="{!taburl}" target="_blank"  onclick="doOnclick();" >link</a>
               <a href="{!tabvideo}" target="_blank">Video</a>
            </apex:outputPanel>

Getting error:

TypeError: $(...) is null

Upvotes: 1

Views: 4723

Answers (1)

JCD
JCD

Reputation: 2231

I've always used jQuery.noConflict() to return a different alias to use in order to avoid conflicts with other libraries that may be using $. By no means is it necessary to do this, but I find it helps avoid confusion.

That said, Salesforce does some unexpected things with element IDs on VF pages (but if you specify an ID in your VF markup, it will at least show up in the ID of the generated HTML somewhere), so I would recommend using a selector that grabs all elements with IDs containing what you're looking for, such as jq$("[id*='Foo']").

<apex:includeScript value="{!$Resource.jquery}" />

<script >
    jq$ = jQuery.noConflict();
    function doOnclick(){
        doMouseout();
    }
    function doMouseout(){
        alert("hi");
        jq$("[id*='Foo']").hide();
    }
</script>

<style>
    .helpLink {
        position:relative;
    }
    .video{
        display:none;
        width:160px;
        height:120px;
        background:#EEE;
        border:1px solid #CCC;
        position:absolute;
        z-index:10;
    }
</style>

<apex:outputLink styleClass="helpLink" onmouseover="$('{!$Component.Foo}').style.display = 'block';">  <!-- title="help" onmouseout="$('{!$Component.Foo}').style.display = 'none';" -->
    <apex:image value="/s.gif" styleClass="helpIcon" />
</apex:outputLink>
<apex:outputPanel id="Foo" styleClass="video" title="help" >
    <a  href="{!taburl}" target="_blank"  onclick="doOnclick();" >link</a>
    <a href="{!tabvideo}" target="_blank">Video</a>
</apex:outputPanel>

Upvotes: 2

Related Questions