2

I have a problem wherein when i post something under a tab, i goes back to the active tab when submit button is clicked. For example, i posted on tragedies tab, i goes back again to the weather tab which is my active tab. Heres my code

heres a part of the code

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#weather" data-toggle="tab">Weather</a></li>
    <li class=""><a href="#traffic" data-toggle="tab">Traffic</a></li>
    <li class=""><a href="#accident" data-toggle="tab">Accident</a></li>
    <li class=""><a href="#politics" data-toggle="tab">Politics</a></li>
    <li class=""><a href="#tragedies" data-toggle="tab">Tragedies</a></li>
    <li class=""><a href="#warnings" data-toggle="tab">Warnings</a></li>

</ul>

full source code is in here: http://pastebin.com/Mn9WJ9qj

I searched some javascript to use but still it cant be help with my code.

user3865549
  • 21
  • 4
  • Looks like we would need to see more code to understand how to give an answer. Personally I would probably do an Ajax post rather than a classic one which would retain the state of your page. – DavidG Oct 27 '14 at 08:47
  • Our professor required us to use this since our project is about enterprise java but we are just required html for design but we can still use bootstrap – user3865549 Oct 27 '14 at 08:49
  • I mean, you should keep everything you have but use `jQuery` to post the data with an ajax call. – DavidG Oct 27 '14 at 08:51
  • can you give me a link to where i can post my whole source code? – user3865549 Oct 27 '14 at 08:54
  • Here's my full source code http://pastebin.com/Mn9WJ9qj – user3865549 Oct 27 '14 at 08:59
  • Can you teach me that process sir DavidG? Im noob in javascript right now. We haven't tackled it yet but im trying to implement it – user3865549 Oct 27 '14 at 09:10

2 Answers2

0

The Togglable tabs plugin has been intend to use on a single page. Clicking a tab triggers a navigation to a hash tag such as #tab2, hash tag links don't reload the page the javascript plugin catch the click and sets the tab active base on the hash tag.

In your code the forms have a action set to a page (weathercomment.html) and not an anchor. So submitting the form reloads the page (and set the tab that have got hard code class="active" as the active tab again).

When you indeed want to load a different page (url) after submitting you should code the class="active" dynamically based on the request_uri.

Alternatively you could return false on the submit event of the form, which don't reload your page. (see also: How to prevent buttons from submitting forms). Before the return false you could use the form input values to update your database or do something else. You can do a ajax call here too.

Example:

html

 <!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">...</div>
  <div role="tabpanel" class="tab-pane" id="profile">
    <div id="formresponse"></div>
    <form role="form" id="profileform">
    <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div> 
     <button type="submit" class="btn btn-default">Submit</button>
    </form>  
  </div>
  <div role="tabpanel" class="tab-pane" id="messages">...</div>
  <div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>

javascript

$('#profileform').on('submit', function() { 
  $('#formresponse').html('Your email:' + $('#exampleInputEmail1').val()); 
  return false; 
});

demo: http://www.bootply.com/1GqfQaJLoQ

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
-1

I found this solution to work best for me.

private void GooToTab(string tab)
{
      ScriptManager.RegisterStartupScript(this, this.GetType(), "MyTabCurrent", "window.location=ClientForm1" + tab + ";", false);
}

protected void btnSearchAssociato_Click(object sender, EventArgs e)
{
    GooToTab("#Associato"); // the tab link 

}
Ajean
  • 5,528
  • 14
  • 46
  • 69
Alexander Nikolov
  • 11
  • 1