how do I include a jQuery script into an include.js file?

Question

lease forgive me if this is simple-minded a question.

I have a jQuery script shown below embedded in my app:

   <script type='text/javascript'>//<![CDATA[
   $(function(){
   $('#div1).on('click', function () {
       $('#divTitle').show();
   });

   $('#div1').on('click', function () {
       $('#divTitle').slideUp();
   });
   });//]]>

   </script>
   <script type='text/javascript'>//<![CDATA[
   $(function(){
   $('#div2').on('click', function () {
       $('#secDiv').show();
   });

   $('#div2).on('click', function () {
       $('#secDiv).slideUp();
   });

   });//]]>

</script>

My boss just told me to put this jQuery in include.js file.

I included the file as shown below

function showIcon() {
            toggleButtonIcon('[Widget dijit.form.ToggleButton, pan]');
            navToolbar.activate(esri.toolbars.Navigation.PAN);
            /*dijit.registry.byClass("dijit.form.ToggleButton").forEach(function(togbtn) {          
                if (togbtn == '[Widget dijit.form.ToggleButton, pan]') {
                    togbtn.attr("checked", true);
                }
                else
                {
                    togbtn.attr("checked", false);
                }
            });
            */      
      }


     //<![CDATA[
      $(function(){
       $('#div1).on('click', function () {
           $('#divTitle').show();
       });

       $('#div1').on('click', function () {
           $('#divTitle').slideUp();
       });
       });//]]>

      <![CDATA[
       $(function(){
       $('#div2').on('click', function () {
           $('#secDiv').show();
       });

       $('#div2).on('click', function () {
           $('#secDiv).slideUp();
       });

       });//]]>

but now it isn't working anymore.

It is supposed to show and hide certain icons.

What am I doing wrong?

Answer 1

You want to include your Javascript in a file right ?

Assuming jQuery has been included before :

Html

<script type="text/javascript" src="path/to/include.js"></script>

include.js

   jQuery(function($){
       $('#div1').on('click', function () { //missing '
           $('#divTitle').show();
       });

       $('#div1').on('click', function () {
           $('#divTitle').slideUp();
       });


       $('#div2').on('click', function () {
           $('#secDiv').show();
       });

       $('#div2').on('click', function () { //missing ' here
           $('#secDiv').slideUp(); //missing ' here too
       });

   });

    //Edit omitted this part
    function showIcon() {
        toggleButtonIcon('[Widget dijit.form.ToggleButton, pan]');
        navToolbar.activate(esri.toolbars.Navigation.PAN);    
      }

Answer 2

A couple things. First drop the <script> and CDATA tags. They aren't necessary in an external javascript file (presumably being included by a <script> tag in the HTML).

Secondly, you'll need to wrap your javascript with $(document).ready(). You probably had this javascript at the bottom of your current HTML (or at least after the HTML elements it was binding to), and since this external JS file likely gets loaded in the header, the HTML elements aren't there to bind to.

new include.js :

    function showIcon() {
        toggleButtonIcon('[Widget dijit.form.ToggleButton, pan]');
        navToolbar.activate(esri.toolbars.Navigation.PAN);
        /*dijit.registry.byClass("dijit.form.ToggleButton").forEach(function(togbtn) {          
            if (togbtn == '[Widget dijit.form.ToggleButton, pan]') {
                togbtn.attr("checked", true);
            }
            else
            {
                togbtn.attr("checked", false);
            }
        });
        */      
    }

    $(document).ready(function() {

    $(function(){
       $('#div1).on('click', function () {
          $('#divTitle').show();
       });

       $('#div1').on('click', function () {
          $('#divTitle').slideUp();
       });
    });

   $(function(){
       $('#div2').on('click', function () {
           $('#secDiv').show();
       });

       $('#div2).on('click', function () {
          $('#secDiv').slideUp();
       });
   });

   });

Also verify that you have something like this in your HTML file:

    <script type="text/javascript" src="path/to/include.js"></script>