Multiple jquery Scripts on one page

Question

I am brand new to Jquery and have run into something that if answered will help greatly in the future. I have 2 very simple questions I am using codeigniter, HTML5 and all php pages as well.

I have a menu 'aside' with 4-5 sections that I want to be able to close to save space. So I am using 2 simple slideToggle scripts.

$("a").click(function () {
   $('#cat').slideToggle('slow', function() {
    })
});

and

$("button").click(function () {
  $('#dog').slideToggle('slow', function() {
    })
});

The problem is, if I use button on both, both scripts operate even though I am requesting the script to run on 2 different ID's ( I know the dog and cat thing is silly, I just threw them in to see if a fake id would work and it did)

The question is, how can I use button OR a href on both scripts to preserve my styling?

My second question is can you put multiple scripts on a .js file for inclusion and how would you do it? Does each get script tags or some other kind of separator?

Thanks for helping, these are my first two scripts. At least they work :)

    <div class="menu">
<h2>News Links</h2>

 <a href="#">Display</a>
 <!--
if I use "button" here, both scripts run on tandem
-->
<script>
 $("a").click(function () {
  $('#cat').slideToggle('slow', function() {
    })
});

benchmark->mark('links_start'); $this->db->order_by('id', 'DESC'); $this->db->limit('10'); $query = $this->db->get('links'); foreach ($query->result() as $row)
{ echo "link \" title=\"$row->title\" target=\"_blank\">$row->name "; } $this->benchmark->mark('links_end');

    ?>
   </ul>
   </div>
   </div>
   <div class="menu">
   <h2>Archives</h2>
   <button>Display</button> <!--if I use "a" here, both scripts run on tandem
     -->
    <script>
  $("button").click(function () {
  $('#dog').slideToggle('slow', function() {
    })
  });     
  </script>
  <div id="dog">
  <?php
$this->db->order_by('id', 'DESC');
$where = "publish";
$this->db->where('status', $where);
$this->db->select('id, title', FALSE);
$this->db->select('DATE_FORMAT(date, "%b %D %Y")AS date');
$this->db->from('posts');
$query = $this->db->get();
foreach ($query->result() as $row)

Please post your HTML. As is, the first function will run when you click any a element, and the second will run when you click any button. That probably isn't what you want. — Matthew Flaschen
– Matthew Flaschen, Commented Aug 19, 2010 at 0:51
True Matthew, but if I make both scripts a button then both scripts run and both areas close or open at the same time. I need to be able to do them separately the website is here lemonrose.net. on the left side where you see two "displays. One link one button — Brad
– Brad, Commented Aug 19, 2010 at 1:16

Matthew Flaschen · Accepted Answer · 2010-08-19 02:13:09Z

2

I think what you want is something like this:

<button id="news_display">Display News</button>

<button id="archive_display">Display Archive</button>

$("#news_display").click(function () {
   $('#news').slideToggle('slow');
});    

$("#archive_display").click(function () {
  $('#archive').slideToggle('slow');
});

This uses jQuery id selectors for the click events, as you already did in the anonymous functions. That way, they're specific and independent.

edited Aug 19, 2010 at 2:13

answered Aug 19, 2010 at 1:47

Matthew Flaschen

286k53 gold badges523 silver badges554 bronze badges

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

1 Comment

Brad Over a year ago

Perfect! now am embarrassed. I should have seen that! TY! Seriously thats exactly what I was looking for. That makes a huge difference

Michael · Accepted Answer · 2010-08-19 01:16:54Z

2

You can used combined selectors:

$("a, button").click(function () {
    $('#cat').slideToggle('slow');
});

That will allow you to run the same function when either an a or a button is clicked.

My second question is can you put multiple scripts on a .js file for inclusion and how would you do it? Does each get script tags or some other kind of separator?

A javascript 'script' generally refers to a file included by the script tag, although that usage is ambiguous.

What you've got in your post is a javascript statement, probably inside a script tag on your page:

<script type="text/javascript">
    function helloWorld() {
        alert('Hello world');
    }
</script>

You can do this (inline to the page), or move the contained code out to a .js file and reference it:

<script type="text/javascript" src="myjavascript.js"></script>

Your myjavascript.js file would look like this:

function helloWorld() {
    alert('Hello world');
}

myjavascript.js can contain as much javascript as you'd like. Common approaches are to put grouped functionality into a single javascript file, and include it in the page. This makes it easy to re-use the javascript you've written across multiple pages by including it with the script tag on each page that makes use of it (I assume you've done this with the jquery javascript library already).

You can do the exact same thing that jquery has done, and dump all your javascript into a .js file and use script to load it into your page.

edited Aug 19, 2010 at 1:16

answered Aug 19, 2010 at 0:55

Michael

20.1k7 gold badges59 silver badges90 bronze badges

4 Comments

Brad Over a year ago

My problem is with the combined selectors is that I want to run the scrips both off 'either' a button OR a link. I dont know how to put 2 scripts on one page that both reference a button and dont run both button scripts at once. Even though I am calling them to work on 2 different DIV's. I am rambling here, but I want to perform 2 'separate' operations both using a script button on both scripts. As for the js file, I assume you would make it look much like codeigniter functions. Just call the function. I hope I am not too confusing here

Michael Over a year ago

I don't think I'm following entirely. Do you want the same code to execute when you click either the button or the link, or do you want different code to execute when you click each of them?

Michael Over a year ago

I saw your reply to Matthew Flaschen - glad you got it sorted out. jQuery lets you find DOM elements in a multitude of ways, and is quite powerful, ranging from wide selectors (as you've found with 'button') to very narrow (#id) selector and a heap of other ones in between.

Brad Over a year ago

I knew I was rambling. I want the operations to execute separately. If I make both a button then both execute at the same time. Mathew has the answer below. Thank you very much for your hard work in trying to follow me.

Ryan Tenney · Accepted Answer · 2010-08-19 01:00:12Z

1

In re: your 2nd question: The code you posted

$("a").click(function () {
    $('#cat').slideToggle('slow', function() {
    })
});

… is one statement. You can write as many statements as you'd like into a single javascript file or <script> tag. If you have multiple JavaScript files, you can concatenate them into one file and reference that file from a script tag.

answered Aug 19, 2010 at 1:00

Ryan Tenney

1,8413 gold badges16 silver badges29 bronze badges

1 Comment

Michael Over a year ago

To expand, if you have multiple javascript files you can also use multiple script tags.

Collectives™ on Stack Overflow

Multiple jquery Scripts on one page

3 Answers 3

1 Comment

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related