My question: How do I auto-submit my ACTIVE tab's form using jquery/javascript?
I'm using bootstrap.
Tabs example :
<ul class="nav nav-pills-homepage" id="tabsMenuID">
<li role="presentation" class="active">content1</li>
<li role="presentation">content2</li>
</ul>
In every tab I have a form to submit.
JS file :
function autoSubmit(){
setTimeout(function(){
$('getActivetabHere').(GETactiveTab'sSubmitButton).trigger('click');
},597000);
}
If there's an easier way to submit, I wouldn't like to trigger form's submit button.
Thanks in advance.
I do not think you need to look up the tab, the form should be visible (unless for some reason you hide it on the active tab)
$('form:visible').submit();
You can get the id of active tab, then using that find out the form and trigger the submit event
var tab=$('#tabsMenuID li.active a').attr('href');
$(tab).find('form').submit();
Use jQuery to find the tab that is active and submit the containing form
$('a[data-toggle=tab]').each(function(){
if(($this).parent().hasClass('active')){
($this).find('form').submit();
}
});
Related
I have a HTML & javascript custom made attribute that will show a popup containing message when a button is clicked.
Button to click :
<a data-deploy-menu="menu-sheet-tutorial-1" href="#">Tap Here to open</a>
The sheet/popup that opens :
<div id="menu-sheet-tutorial-1" class="menu-wrapper">
<div class="content">
<h4>Hello, I'm action sheet!</h4>
Close
</div>
</div>
The data-deploy-menu="menu-sheet-tutorial-1" is what firing the event to open the sheet.
And, this is what happens when the button is clicked in javascript.
$('a[data-deploy-menu]').on( "click", function(){
var menu_ident = $(this).data('deploy-menu');
$('#'+menu_ident).addClass('active-menu');
$('.fade-bg').addClass('active-fade'));
});
And, this is what happens when the close button is clicked
$('.close-menu').on('click', function(){
$('.menu-wrapper').removeClass('active-menu'));
$('.fade-bg').removeClass('active-fade'));
});
The problem i'm facing is that I'm not able to fire this event without a button click.
So, using angularJS, I want to fire this sheet automatically when the form is submitted or when a particular condition is true.
AngularJS has a directive calls ngSubmit who could be provided with an expression like a function. Here is te documentation:
https://docs.angularjs.org/api/ng/directive/ngSubmit
I have two empty anchor links <a href="#"> that are used to create tabs. Please take a look at my jsFiddle:
https://jsfiddle.net/MrSnrub/cuuy5cbp/
The problem is that the user goes to the very top of the page when going from tab to tab. I would use jQuery-UI's tabs, but I have the same HTML element for each tab, and think jQuery-UI's tabs force you to have different HTML elements in each tab.
I want to use these tabs further down my page, and making the user scroll down after every tab switch is not user-friendly. How do I fix this?
UPDATE: If I click on "Tab 1" to activate it, I shouldn't be able to hit the Tab key on my keyboard and Tab 2 is now highlighted.
Use <a href="javascript:void(0)">.
https://jsfiddle.net/obybyvds/
Here's an explanation of why that works
You can use href="#/". It should prevent this behavior from happening.
You could set the href to javascript:;
Tab 1
Or keep the href="#" and simply event.preventDefault() on click using this JavaScript:
[].forEach.call(document.querySelectorAll("[href='#']"), function(el) {
el.addEventListener("click", function(e){
e.preventDefault();
}, false);
});
jsFiddle
or in jQuery:
$(document).on("click", "[href='#']", function(e) {
e.preventDefault();
});
I want to change the active bootstrap tab on the click of another button.
I have tried add id's to the tabs li and write custom jquery code.
$('#emailNotify').click(function () {
$('#notify').addClass('active').attr('aria-expanded','true');
$('#myacc').removeClass('active').attr('aria-expanded','false');
});
This code works fine on first click but it doesn't change back when I tried to click My Account tab again.
Markup:
<ul class="content-list museo_sans500">
<li>Change Password</li>
<li><a id="emailNotify" data-toggle="tab">Change Email Notifications</a></li>
<li>Change Profile Picture</li>
</ul>
You can change the active tab on the click event button with that:
$('#changetabbutton').click(function(e){
e.preventDefault();
$('#mytabs a[href="#second"]').tab('show');
})
Here's a JSFiddle with an example:
http://jsfiddle.net/4ns0mdcf/
You should use twitter-boostrap way to change between tabs:
$('#myTab a:first').tab('show'); // Select first tab
$('#myTab a:last').tab('show'); // Select last tab
or
$('#notify').tab('show'); // show notification tab
I have a hidden link and a button.
I want when users click on the button they will go to the link.
Why I'm not just show the link so users can click through the link because I don't want users see the link that appear at the bottom of browser.
<a id="stack" href="http://stackoverflow.com/"></a>
<button id="goTo">Stackoverflow</button>
Is it possible?
Maybe like this :
$(document).ready(function(){
$("#goTo").on('click',function(e){
e.preventDefault();
window.location = $("#stack").attr('href');
});
});
Add simple jquery to relay the click on the button. You can leave the a link out.
$("#goTo").click(function(){
window.location = "http://stackoverflow.com/";
}
I have a webpage which contains one section called 'answer'. The 'answer' section should be hidden until users click the 'show-answer' hyper link.
So I use JQuery toggle command to achieve this:
$('.show-answer').toggle(function() { show_answer ...} ,
function() {hide_answer ...} )
It works well by itself.
However, I got a problem when I add another form on the same page. When the form is submitted, I redirect it to this page with an anchor "#xxx" appended in the end.
Then I found that the toggle function got triggered unexpectedly. Basically, if the 'answer' section is hidden before the form submitted, it becomes visible after the browser is redirected to the page.
May be using a click handler will help you
$(document).ready(function(){
$('.answer').on('click', function(e){
e.preventDefault();
$('.show-answer').toggle('show');
//Or use the following
//$('.show-answer').slideToggle();
});
});
A fiddle is here.