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?

I'm assuming the missing quotes in several places are just typos. — Niet the Dark Absol
– Niet the Dark Absol, Commented Feb 8, 2013 at 16:09

Michael Marr · Accepted Answer · 2013-02-08 16:13:05Z

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>

soyuka · Accepted Answer · 2013-02-08 19:24:23Z

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);    
      }

edited Feb 8, 2013 at 19:24

answered Feb 8, 2013 at 16:10

soyuka

9,1554 gold badges42 silver badges55 bronze badges

4 Comments

soyuka Over a year ago

still missing ' on line 2 : $('#div1) => $('#div1') If it's still not working remove maybe the function showIcon and give it a try

Chidi Okeh Over a year ago

Neither yours nor @Michael is working. I will try removing the showIcon and see what happens.

soyuka Over a year ago

Please fiddle a small thing with html + javascript it could be something else...

Chidi Okeh Over a year ago

Ok, I was able to create a separate js file and dumped them there and now it works. Not how I would have preferred it but I am ok with it right now. By the way, the one that worked for me is Michaels.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related