Is it possible to make one html button execute 2 different jquery functions that the 2nd one starts after the first one is complete

Question

I am doing a group for project uni, the assignment is to make a functioning fake website with a cms and api.

I have been trying create a filter for a categories of post's with each button filtering out the all the topic's except the one you clicked for. i have been trying to use click method in jquery to hide and show the post when the button is clicked, i am also trying to have one button to show and hide all of the post.

the first one i run it work's but then the display all button after the post have hide and showed inline style's prevents the the other categories button to filter out the unrelated posts and hide the post that are related to the button.

I am also using bootstrap from http://getbootstrap.com/ and google fonts.

Can anyone help me.

 var clickOnce = false; $('.filter-button-group button').click(function() { if (!clickOnce) { $('.grid > div').hide(); $('.grid .' + this.className).show(); clickOnce = true; } else { $('.grid .' + this.className).toggle(); } }); // for the disply all button $("#filter-button-group_1 button").on('click', function(){ $(".grid > div").toggle(); }); 

  <div class="well"> <h4>Blog Categories</h4> <div class="row"> <div class="col-lg-6"> <div class="filter-button-group blog-cat"> <button type="button" class="cat_1">Infrastructure </button> <button class="cat_2">Announcements </button> <button class="cat_3">Political allies </button> <button class="cat_4">Budget reports </button> </div> </div> <!-- /.col-lg-6 --> <div class="col-lg-6"> <div class="filter-button-group blog-cat"> <button class="cat_5">Legal matters </button> <button class="cat_6">World events </button> <button class="cat_7">Personal affairs </button> </div> </div> <!-- /.col-lg-6 --> </div> <!-- /.row --> </div> <div class="grid"> <!-- First Blog Post --> <div class="cat_3 cat_6"> <h2>Lorem ipsum dolor sit amet</h2> <p class="text-muted"><i class="fa fa-clock-o"></i> Posted on September 28, 2015 at 10:15 PM</p> <ul class="blog-tags"> <li>Political allies</li> <li>World affairs</li> </ul><br> <hr> <img class="img-responsive" src="img/blog-three.jpg" alt="Lorem ipsum dolor sit amet"> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="row-fluid summary"> <div id="blog-detail" class="collapse"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div class="row-fluid summary"> <button class="btn btn-sml" data-toggle="collapse" data-target="#blog-detail">Show more +</button> </div> <hr> </div> <!-- Second Blog Post --> <div class="cat_2 cat_5 cat_6"> <h2>Lorem ipsum dolor sit amet</h2> <p class="text-muted"><i class="fa fa-clock-o"></i> Posted on September 25, 2015 at 9:40 AM</p> <ul class="blog-tags"> <li>Announcements</li> <li>Legal matters</li> <li>World events</li> </ul><br> <hr> <img class="img-responsive" src="img/blog-nuclear.jpg" alt="Lorem ipsum dolor sit amet"> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="row-fluid summary"> <div id="blog-detail-2" class="collapse"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div class="row-fluid summary"> <button class="btn btn-sml" data-toggle="collapse" data-target="#blog-detail-2">Show more +</button> </div> <hr> </div> <!-- Third Blog Post --> <div class="cat_3 cat_5 cat_6"> <h2>Lorem ipsum dolor sit amet</h2> <p class="text-muted"><i class="fa fa-clock-o"></i> Posted on September 21, 2015 at 3:20 PM</p> <ul class="blog-tags"> <li>Political allies</li> <li>Legal matters</li> <li>World events</li> </ul><br> <hr> <img class="img-responsive" src="img/blog-nk.jpg" alt="Lorem ipsum dolor sit amet"> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="row-fluid summary"> <div id="blog-detail-3" class="collapse"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div class="row-fluid summary"> <button class="btn btn-sml" data-toggle="collapse" data-target="#blog-detail-3">Show more +</button> </div> <hr> </div> </div> <div class="row-fluid summary" id="filter-button-group_1"> <button class="cat_1 cat_2 cat_3 cat_4 cat_5 cat_6 cat_7" data-toggle="collapse" data-target="#blog-old">Display all posts</button> </div> 

Answer 1

Judging from your title, try this.

 function functionOne() { alert('functionOne complete'); functionTwo(); } function functionTwo() { alert('functionTwo running'); } 

 <input type="button" value="button" onclick="functionOne();"> 

JQuery also has optional call back functions. For example...

$('test').fadeOut(800, function(){
//this functions runs after the fade.
});

Answer 2

Don't know exactly what you are after but if you want one button that can do two function that only run function 2 after function 1 have been run you can do this:

HTML:

<input type="button" value="button" onclick="btn_toggle();">

JavaScript:

var f01_complete = false;

function btn_toggle(){
    if (f01_complete != true){
        function_01();
    }else{
        function_02();
    }
}

function function_01() {
    alert("do stuff");
    f01_complete = true;
}

function function_02() {
    alert("do stuff 2");
    f01_complete = false;
}

DEMO

Answer 3

I think you want to set multiple click events on a single element but have some sort of priority of execution. I suggest following approach to do it using jQuery provided features. It basically uses bind and trigger.

HTML

<input type="button" value="button">

jQuery

//Caching input
var inputCached = $("input");

inputCached.click(function(){

    //Triggering each of them in order
    $(this).trigger("priorityone");
    $(this).trigger("prioritytwo");
});

//Binded this priority 1 function to the input
inputCached.bind("priorityone", function(){
    alert("test1");   
});

//Binded this priority 2 function to the input
inputCached.bind("prioritytwo", function(){
    alert("test2");   
});

DEMO https://jsfiddle.net/7ub1j3d4/

Answer 4

This question is more or less about: more than one handler for same event

Suppose that you have two handlers, f and g , and want to make sure that they are executed in a known and fixed order, then just encapsulate them:

$("...").click(function(event){
  f(event);
  g(event);
});

In this way there is (from the perspective of jQuery) only one handler, which calls f and g in the specified order.