Load div with content on button click

Question

i want to load some divs with jquery according to buttons. For example we have

<div class="content">
    <button type="button" name="addteam">Add New Team</button>
    <button type="button" name="addplayer">Add New Player</button>
    <button type="button" name="addgame">Add New Game</button> 
    <button type="button" name="deleteteam">Delete Team</button>
    <button type="button" name="deleteplayer">Delete Player</button>
    <button type="button" name="deletegame">Delete Game</button>
    <button type="button" name="addplayermatch">Add Player To Match</button>
    <button type="button" name="deleteplayermatch">Remove Player From Match</button>
</div>

Now if the user clicks on say Add New Player i want it to show the

<div class="addnewplayer">
    <h2>Add New Player</h2>
    <form action="addplayer.php" method="POST"/>
        <p>Name: <input type="text" name="name" /></p>
        <p>Sex: <input type="text" name="sex" /></p>
        <p>Email: <input type="text" name="email" /></p>
        <p>Birth: <input type="text" name="birth" /></p>
        <p>League: <input type="text" name="league" /></p>
        <p>Team: <select name="teamName" class="addPTeam"><script>fillTeams();</script></select></p>
        <input type="submit" value="Submit" />
    </form>
</div>

I just picked up jquery this week. I understand i can make a function onClick for each button but is that wise enough? And then use $(".addnewplayer").html(.... and put the whole div info in there?

If you could point out the best way to do this.

Thank you

Do you have different forms for each(like.. Add New Team, Add New Player etc.) ? — RaviRokkam
– RaviRokkam, Commented Jan 14, 2014 at 10:22

mplungjan · Accepted Answer · 2014-01-14 10:31:22Z

I would consider this:

Live Demo

<head>
<style>
.content { display:none }
</style>
<script src="jquery.js"></script>
<script>
$(function() {
  $(".but").on("click",function(e) {
    e.preventDefault();
    $(".content").hide();
    $("#"+this.id+"div").show();
  });
});
</script>
</head>
<body>

<div class="navigation">
    <button class="but" type="button" id="addteam">Add New Team</button>
    <button class="but" type="button" id="addplayer">Add New Player</button>
    <button class="but" type="button" id="addgame">Add New Game</button> 
    <button class="but" type="button" id="deleteteam">Delete Team</button>
    <button class="but" type="button" id="deleteplayer">Delete Player</button>
    <button class="but" type="button" id="deletegame">Delete Game</button>
    <button class="but" type="button" id="addplayermatch">Add Player To Match</button>
    <button class="but" type="button" id="deleteplayermatch">Remove Player From Match</button>
</div>

<div id="addplayerdiv" class="content">
    <h2>Add New Player</h2>
    <form ...>
    </form>
</div>
<div id="addteamdiv" class="content">
    <h2>Add New Team</h2>
    <form ...>
    </form>
</div>
</body>

If the HTML is extensive, you can load the content from an html file:

$(function() {
  $(".but").on("click",function(e) {
    e.preventDefault();
    $("#content").load(this.id+".html");
  });
});

Arun P Johny · Accepted Answer · 2014-01-14 10:19:08Z

You can use a template html to specify the contents for each of the buttons content, then do something like

You can do soemthing like

<div class="content">
    <button type="button" name="addteam" data-href="addteam.html">Add New Team</button>
    <button type="button" name="addplayer" data-href="addplayer.html">Add New Player</button>
    <button type="button" name="addgame" data-href="addgame.html">Add New Game</button>
    ....
</div>

then

//target all buttons elements with data-href property
$('button[data-href]').click(function () {
    //load the contents of the url specified by the href into addnewplayer
    $(".addnewplayer").load($(this).data('href'));
})

then in addteam.html

<div>
    ...
</div>

Maurice Perry · Accepted Answer · 2014-01-14 10:22:43Z

Consider hiding the div's instead of loading them:

<div class="content">
<button type="button" name="addteam">Add New Team</button>
<button type="button" name="addplayer">Add New Player</button>
<button type="button" name="addgame">Add New Game</button> 
<button type="button" name="deleteteam">Delete Team</button>
<button type="button" name="deleteplayer">Delete Player</button>
<button type="button" name="deletegame">Delete Game</button>
<button type="button" name="addplayermatch">Add Player To Match</button>
<button type="button" name="deleteplayermatch">Remove Player From Match</button>
</div>
...
<div id="addplayer" class="panel">
<h2>Add New Player</h2>
<form action="addplayer.php" method="POST"/>
<p>Name: <input type="text" name="name" /></p>
<p>Sex: <input type="text" name="sex" /></p>
<p>Email: <input type="text" name="email" /></p>
<p>Birth: <input type="text" name="birth" /></p>
<p>League: <input type="text" name="league" /></p>
<p>Team: <select name="teamName" class="addPTeam"><script>fillTeams();</script></select></p>
<input type="submit" value="Submit" />
</form>
</div>

css:

.panel {
    display: none;
}

.panel.current {
    display: block;
}

JavaScript:

$(".content").on("click", "button", function() {
    var name = $(this).attr("name");
    $(".panel").removeClass("current");
    $("div#" + name).addClass("current");
});

Lijo · Accepted Answer · 2014-01-14 10:28:57Z

you can use ajax so that the div will dynamically loaded each time when you click on the buttons

   <div class="content">
    <button type="button" name="addteam" onclick="onshow()>Add New Team</button>
    <button type="button" name="addplayer">Add New Player</button>
    <button type="button" name="addgame">Add New Game</button> 
    <button type="button" name="deleteteam">Delete Team</button>
    <button type="button" name="deleteplayer">Delete Player</button>
    <button type="button" name="deletegame">Delete Game</button>
    <button type="button" name="addplayermatch">Add Player To Match</button>
    <button type="button" name="deleteplayermatch">Remove Player From Match</button>
</div>
   <div class="addnewplayer">

</div>
    <script language="javascript">

        function onshow()
        {

         $.ajax({
            type:'POST'
            url:context+'/newteam',
           success:function(data) { 
              $( "div.addnewplayer" ).html( data );


            }

          });

        }



     then in newteam.html

<div class="addnewplayer">
    <h2>Add New Player</h2>
    <form action="addplayer.php" method="POST"/>
        <p>Name: <input type="text" name="name" /></p>
        <p>Sex: <input type="text" name="sex" /></p>
        <p>Email: <input type="text" name="email" /></p>
        <p>Birth: <input type="text" name="birth" /></p>
        <p>League: <input type="text" name="league" /></p>
        <p>Team: <select name="teamName" class="addPTeam"><script>fillTeams();</script></select></p>
        <input type="submit" value="Submit" />
    </form>
</div>

Itay Gal · Accepted Answer · 2014-01-14 10:31:17Z

0

I would recommend show/hide option example

$(function(){
    $('button').click(function(event){
        var name = $(this).attr("name");
        $("#" + name + "div").slideToggle("slow");
    })
});

In this example you create a form inside a div and place it after the button. The div id needs to be the button name + "div". Then the function knows which div to toggle.

edited Jan 14, 2014 at 10:31

answered Jan 14, 2014 at 10:25

Itay Gal

10.8k6 gold badges43 silver badges78 bronze badges

Collectives™ on Stack Overflow

Load div with content on button click

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related