I have this code code of submit form:
$('.nav_step ul li').live('click', function(event){
$( "#"+where_it ).submit();
event.preventDefault();
});
HTML
<div class="row nav_step">
<ul>
<li class="first">
<a href="/~162/appsite/requirement/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">1</span> Requirements
</span>
</span>
</span>
</a>
</li>
<li class="">
<a href="/~162/appsite/profile/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">2</span> Profile
</span>
</span>
</span>
</a>
</li>
<li class="">
<a href="/~162/appsite/assets/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">3</span> Assets
</span>
</span>
</span>
</a>
</li>
<li class="active">
<a href="/~162/appsite/liability/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">4</span> Liabilities
</span>
</span>
</span>
</a>
</li>
<li class="">
<a href="/~162/appsite/third/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">5</span> Third Parties
</span>
</span>
</span>
</a>
</li>
<li class="">
<a href="/~162/appsite/compliance/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">6</span> Compliance
</span>
</span>
</span>
</a>
</li>
<li class="">
<a href="/~162/appsite/document/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">7</span> Documents
</span>
</span>
</span>
</a>
</li>
<li class="last">
<a href="/~162/appsite/document/result.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">8</span> Submit
</span>
</span>
</span>
</a>
</li>
</ul>
</div>
<form class="form-vertical" id="client-liability-form" action="/~162/appsite/liability/update.html" method="post">
<div style="display:none"><input type="hidden" value="ccc127985bc916e7ee507b4a238173097edf2338" name="YII_CSRF_TOKEN"></div> <fieldset>
<div class="large-15 columns button_holder">
<div class="indent_holder_2">
<strong class="btn_previous movePrev">Previous</strong>
<strong class="btn_save moveSave">Save</strong>
<strong class="btn_next moveNext">Next</strong>
</div>
</div>
<div id="itemsHolder" class="liability">
<div class="large-15 columns box_bg_holder_2 iner_2 liabilityBlock" rel="0">
<div class="indent_holder">
<div class="row indent_5">
<div class="large-3 columns">
<div class="row_label_2">
<label></label>
</div>
<div class="row_input">
<select class="select_box_2 selectLiability" name="ApplicationLiability[0][item_type]" id="ApplicationLiability_0_item_type">
<option value="0" selected="selected">Property Loan</option>
<option value="1">Credit Card</option>
<option value="2">Car Lease</option>
<option value="3">Personal Loan</option>
<option value="4">Other</option>
</select><span class="required_field_text" id="ApplicationLiability_item_type_em_" style="display: none"></span>
</div>
</div>
<div class="large-3 columns">
<div class="row_label">
<label for="ApplicationLiability_address">Address</label> </div>
<div class="row_input">
<input class="input_box_2" name="ApplicationLiability[0][address]" id="ApplicationLiability_0_address" type="text" maxlength="255"><span class="required_field_text" id="ApplicationLiability_address_em_" style="display: none"></span>
</div>
</div>
<div class="large-6 columns">
<div class="row_label_2">
<label></label>
</div>
<div class="row_input top_margin">
<div class="row_input_4">
<span class="ownership_text" rel="0">Ownership</span>
</div>
<div class="row_input_4">
<strong class="hint_holder iner">
Monthly Payment
</strong>
<input class="input_box_2 maskMoney monthly_payment" name="ApplicationLiability[0][monthly]" id="ApplicationLiability_0_monthly" type="text" value="$ 0"><span class="required_field_text" id="ApplicationLiability_monthly_em_" style="display: none"></span>
</div>
<div class="row_input_4">
<strong class="hint_holder">
Limit
</strong>
<input class="input_box_2 maskMoney limit" name="ApplicationLiability[0][limit]" id="ApplicationLiability_0_limit" type="text" value="$ 0"><span class="required_field_text" id="ApplicationLiability_limit_em_" style="display: none"></span>
</div>
<div class="row_input_4">
<strong class="hint_holder">
Balance
</strong>
<input class="input_box_2 maskMoney balance" name="ApplicationLiability[0][balance]" id="ApplicationLiability_0_balance" type="text" value="$ 0"><span class="required_field_text" id="ApplicationLiability_balance_em_" style="display: none"></span>
</div>
</div>
</div>
<div class="large-3 columns indent_top">
<strong class="btn_delete liability">Delete</strong>
<strong class="btn_add_more liability"><a>Add More</a></strong>
</div>
</div>
<div class="row">
<div class="large-3 columns">
<div class="row_label_2">
</div>
</div>
<div class="large-3 columns">
<div class="row_input_2">
<div class="row_label">
<label class="line" for="ApplicationLiability_bsb">BSB</label> </div>
<div class="row_input">
<input class="input_box_2" name="ApplicationLiability[0][bsb]" id="ApplicationLiability_0_bsb" type="text" maxlength="255"><span class="required_field_text" id="ApplicationLiability_bsb_em_" style="display: none"></span>
</div>
</div>
<div class="row_input_2">
<div class="row_label double_width iner">
<label for="ApplicationLiability_account_number">Account Number</label> </div>
<div class="row_input">
<input class="input_box_2" name="ApplicationLiability[0][account_number]" id="ApplicationLiability_0_account_number" type="text" maxlength="255"><span class="required_field_text" id="ApplicationLiability_account_number_em_" style="display: none"></span>
</div>
</div>
</div>
<div class="large-3 columns">
</div>
</div>
<div class="ownership_block" style="display: none;">
<div class="row indent_5">
<div class="row_label">
Tom Tomas </div>
<div class="row_input">
<input type="text" value="50" name="Ownership[0][118][percent]" id="Ownership_0_118_percent"><span>%</span>
<input type="hidden" value="118" name="Ownership[0][118][applicant_id]" id="Ownership_0_118_applicant_id"> </div>
</div>
<div class="row indent_5">
<div class="row_label">
Tom Tomas </div>
<div class="row_input">
<input type="text" value="50" name="Ownership[0][125][percent]" id="Ownership_0_125_percent"><span>%</span>
<input type="hidden" value="125" name="Ownership[0][125][applicant_id]" id="Ownership_0_125_applicant_id"> </div>
</div>
<div class="row indent_5">
<div class="row_label">
</div>
<div class="row_input">
<input type="text" value="0" name="Ownership[0][126][percent]" id="Ownership_0_126_percent"><span>%</span>
<input type="hidden" value="126" name="Ownership[0][126][applicant_id]" id="Ownership_0_126_applicant_id"> </div>
</div>
<input type="submit" value="Save" class="btn_save">
</div>
</div>
</div> </div>
<div class="large-15 columns box_bg_holder">
<div class="indent_holder iner">
<div class="row">
<div class="large-6 columns">
<div class="row_label_2">
<label for="ApplicationLiability_monthly_exp">What are your current Monthly expenses?</label> </div>
</div>
<div class="large-6 columns">
<div class="row_input">
<div class="row_input_4 none">
<strong class="total_price"></strong>
</div>
<div class="row_input_4">
<input class="input_box_2 maskMoney monthly_payment" name="ApplicationLiability[0][monthly_exp]" id="ApplicationLiability_0_monthly_exp" type="text" value="$ 0"><span class="required_field_text" id="ApplicationLiability_monthly_exp_em_" style="display: none"></span>
</div>
<div class="row_input_4 none">
<strong class="btn_help_box">
help
<span class="help_box">There Will Be any written comment</span>
</strong>
</div>
</div>
</div>
<div class="large-1 columns">
</div>
</div>
</div>
</div>
<div class="large-15 columns box_bg_holder_2 iner_4">
<div class="indent_holder">
<div class="row">
<div class="large-6 columns">
<div class="row_label_2">
<label></label>
</div>
</div>
<div class="large-6 columns">
<div class="row_label_2">
<label></label>
</div>
<div class="row_input">
<div class="row_input_4">
<strong class="total_price">Total:</strong>
</div>
<div class="row_input_4">
<strong class="hint_holder iner">
Monthly Payment
</strong>
<strong class="total_price" id="monthly_payment_result">
$ 0 </strong>
</div>
<div class="row_input_4">
<strong class="hint_holder">
Limit
</strong>
<strong class="total_price" id="limit_result">
$ 0 </strong>
</div>
<div class="row_input_4">
<strong class="hint_holder">
Balance
</strong>
<strong class="total_price" id="balance_result">
$ 0 </strong>
</div>
</div>
</div>
<div class="large-3 columns indent_top">
</div>
</div>
</div>
</div>
<div class="large-15 columns box_bg_holder">
<div class="indent_holder iner" style="padding-left: 0;">
<div class="large-9 columns">
<div class="row_label">
<label for="ApplicationLiability_comment">Income details (if any):</label> </div>
<div class="row_input">
<textarea class="textarea_box_2" name="ApplicationLiability[0][comment]" id="ApplicationLiability_0_comment"></textarea><span class="required_field_text" id="ApplicationLiability_comment_em_" style="display: none"></span>
</div>
</div>
<div class="large-3 columns"></div>
</div>
</div>
<div class="large-15 columns button_holder">
<div class="indent_holder_2">
<strong class="btn_previous movePrev">Previous</strong>
<strong class="btn_save moveSave">Save</strong>
<strong class="btn_next moveNext">Next</strong>
</div>
</div>
</fieldset>
<input id="moveType" type="hidden" value="save" name="moveType"> </form>
With event.preventDefault(); links does not work after clicking, without event.preventDefault(); i can't see error message after validation and form is submitted but error message i can't see and page reload without notify user about errors.
If i am use this code for detect errors, form does'n submit and it not work.
$( "#"+where_it ).submit(function( event ) {
alert( "Handler for .submit() called." );
});
where_it
this is id of form - work fine.
UPDATE: I want what form submit if is errors users notify about it, if not errors i am go to link.
UPDATE1 When i am use this code
$( "#"+where_it ).submit(function(event)
{
event.preventDefault();
if( /* no error */)
{
$( "#"+where_it ).submit();
}else{
alert( "error." );
}
});
I will have just redirect. Not submit form and not any errors. Handler for .submit() not work. This is strange.
UPDATE2
$(document).ready(function(){
$('.nav_step ul li').on('click', function(event){
$( "#"+where_it ).submit(function( event ) {
alert( "Handler for .submit() called." );
});
$( "#"+where_it ).submit();
event.preventDefault();
});
});
In this code works all. But if all good i am can't redirected after click event coz event.preventDefault(); not allow it. If this is remove i can't see error message after validation. i think possible solution is do something this if success redirect(url: this .nav_step ul li a). But i don't know how do it.
You need to use event.preventDefault() but you should submit the form manually after everything was ok. $( "#"+where_it ).submit();.
something like this:
$('form').submit(function(event)
{
event.preventDefault();
if( /* no error */)
{
$('form').submit();
}
});
This is a simple demo you can check it out and change your code.
HTML:
<form>
<input type='text' id='name' name='name'>
<input type='text' id='last_name' name='name'>
<input type='submit' id='send' value='SEND'>
</form>
<span></span>
JS:
$('form').on('submit', function(event)
{
event.preventDefault();
if($('#name').val() != '' && $('#last_name').val() != '')
{
// here you can submit the form
alert('submitted');
//$('form').submit();
}
else
{
$('span').text('fill the textboxes.');
}
});
Related
I am new in Vue.js. I have a question about how to render a large amount of HTML in vue.js template.
So i put a HTML in my template thats like a 500 lines of plain HTML. And when i do
npm run dev
the compiling is to slow, or don't finish the compiling.
<template>
<div class="m-grid m-grid--hor m-grid--root m-page">
<mobile-menu-partial></mobile-menu-partial>
<header-partial></header-partial>
<div>HTML goes here</div> <------
<footer-partial></footer-partial>
</div>
</template>
So is there an easy way to make that? I searched everything but could not find any site for that question.
This is my HTML.
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--hor-desktop m-grid--desktop m-body">
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver m-container m-container--responsive m-container--xxl m-page__container">
<div class="m-grid__item m-grid__item--fluid m-wrapper">
<div class="section-contacts">
<!-- CONTACTS -->
<div class="m-content">
<div class="m-portlet">
<div class="m-portlet__body m-portlet__body--no-padding">
<div class="row m-row--no-padding m-row--col-separator-xl">
<div class="col-xl-6">
<div class="standard-widget">
<div class="m-widget14">
<div class="widget_header_menu margin-bottom-10">
<div class="m-widget14__header">
<h3 class="m-widget14__title">Grups</h3>
<span class="m-widget14__desc">3 groups</span>
</div>
<div class="m-widget14__header_menu">
<button type="button" class="btn btn-accent btn-md m-btn m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="modal" data-target="#createGroupModal"><i class="la la-plus"></i></button>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="form-group m-form__group">
<input class="form-control form-control-search m-input" autocomplete="off" type="text" name="" value="" placeholder="Search...">
</div>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="m-scrollable">
<div class="m-list-timeline m-list-timeline--skin-light">
<div class="m-list-timeline__items no-timeline">
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="standard-widget">
<div class="m-widget14">
<div class="widget_header_menu margin-bottom-10">
<div class="m-widget14__header">
<h3 class="m-widget14__title">Contacts</h3>
<span class="m-widget14__desc">5 contacts</span>
</div>
<div class="m-widget14__header_menu">
<button type="button" class="btn btn-accent btn-md m-btn m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="modal" data-target="#createContactModal"><i class="la la-plus"></i></button>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="form-group m-form__group">
<input class="form-control form-control-search m-input" autocomplete="off" type="text" name="" value="" placeholder="Search...">
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col">
<div class="m-scrollable">
<div class="m-list-timeline m-list-timeline--skin-light">
<div class="m-list-timeline__items no-timeline">
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user2.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Benson John</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user1.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Clark Anna</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user4.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Grohl Dave</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user3.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Porter Ella</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user5.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Wood Kelly</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Please help. Thanks.
There are many ways to define a template in Vue. For big templates I suggest to use X-Templates. Define a component referring template by id.
Vue.component('my-checkbox', {
template: '#checkbox-template',
data() {
return {
checked: false,
title: 'Check me'
}
},
methods: {
check() {
this.checked = !this.checked;
}
}
});
And define a template in your html file with appropriate id. Example:
<script type="text/x-template" id="checkbox-template">
<div class="checkbox-wrapper" #click="check">
<div :class="{ checkbox: true, checked: checked }"></div>
<div class="title"></div>
</div>
</script>
More and Source.
New to javascript, trying to create a simple program that scrolls to the div when navigation item is clicked. However, its not working, I can't figure out why.
Here is the snippet :
$(document).ready(function() {
alert("asda");
setBindings();
});
function setBindings() {
$("nav a").click(function(e) {
// stops the a tags for working.. i.e. clicking to another page. Functions stops the functionality.
var sectionID = e.currentTarget.id + "Section";
alert('button id ' + sectionID);
$("html body").animate({
scrollTop: $("#" + sectionID).offset().top
}, 1000)
})
})
}
<nav class="clearfix">
<div class="logo-container">
<i><h2><b>DELIVERY MOTION</b></h2></i>
</div>
<ul class="clearfix">
<li><a id="delivery" href="#">Delivery</a></li>
<li><a id="about" href="#">About Us</a></li>
<li>Services</li>
<li>FAQ</li>
<li>Contact</li>
<li>Login</li>
</ul>
Menu
</nav>
<div id="deliverySection">
<h1> Order anything from anywhere in Karachi instantly at your doorstep. </h1><hr>
<div id='fee-estimate-box'>
<form id='fee-estimate-form' action="#">
<legend id='delivery-text'>Delivery Fee Calculator</legend>
<span>FROM </span> <input type="text" name="firstname" value="PICKUP ADDRESS">
<span>TO </span> <input type="text" name="lastname" value="DROP ADDRESS">
<span>ESTIMATED FEE </span> <input type="text" name="estimated-fee" value="0.00 PKR">
<input class='btn-submit' type="submit" value="BOOK NOW!">
</form>
</div>
<div id='silver-bar'>
<img src='img/red-car.png' alt='fast deliver'>
</div>
</div>
<div id="aboutSection">
<h2> How it works </h2>
<div class="container">
<div class="row">
<div class="col-sm-2" id="infobox">
<img src='img/map-icon.png' width="50px" height="50px">
<h3> Search </h3>
<h4>Select pickup address </h4>
</div>
<div class="col-sm-2">
<br><br>
<img src='img/arrow-up.png' width="50px" height="50px" class='arrows-img'>
</div>
<div class="col-sm-2" id="infobox">
<img src='img/delivery-icon.png' width="50px" height="50px" class="order-icon-img">
<h3> Order</h3>
<h4>Make a booking online </h4>
</div>
<div class="col-sm-2">
<br>
<img src='img/arrow-down.png' width="50px" height="50px" class='arrows-img'>
</div>
<div class="col-sm-2" id="infobox">
<img src='img/truck-icon.png' width="50px" height="50px">
<h3> Delivered</h3>
<h4>Instant courier delivery</h4>
</div>
</div>
</div>
</div>
At first I thought the problem was with my jquery, however its working fine. The links to javascript is correct too. I've tried rechecking the animate function but I can't pin point the issue. Any ideas?
$("html body") has to be replaced by $("html,body") for the scroll to trigger.
You also had an error in your javascript, one more '})'at the end.
Now that's fine. Check your console for such errors, or use snippets, as in your question.
$(document).ready(function() {
// alert("asda");
setBindings();
});
function setBindings() {
$("nav a").click(function(e) {
var sectionID = e.currentTarget.id + "Section";
// alert('button id ' + sectionID+ $("#" + sectionID).offset().top);
$("html,body").animate({
scrollTop: $("#" + sectionID).offset().top
}, 1000);
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="clearfix">
<div class="logo-container">
<i><h2><b>DELIVERY MOTION</b></h2></i>
</div>
<ul class="clearfix">
<li><a id="delivery" href="javascript:;">Delivery</a></li>
<li><a id="about" href="javascript:;">About Us</a></li>
<li>Services</li>
<li>FAQ</li>
<li>Contact</li>
<li>Login</li>
</ul>
Menu
</nav>
<div id="deliverySection">
<h1> Order anything from anywhere in Karachi instantly at your doorstep. </h1><hr>
<div id='fee-estimate-box'>
<form id='fee-estimate-form' action="#">
<legend id='delivery-text'>Delivery Fee Calculator</legend>
<span>FROM </span> <input type="text" name="firstname" value="PICKUP ADDRESS">
<span>TO </span> <input type="text" name="lastname" value="DROP ADDRESS">
<span>ESTIMATED FEE </span> <input type="text" name="estimated-fee" value="0.00 PKR">
<input class='btn-submit' type="submit" value="BOOK NOW!">
</form>
</div>
<div id='silver-bar'>
<img src='img/red-car.png' alt='fast deliver'>
</div>
</div>
<div id="aboutSection">
<h2> How it works </h2>
<div class="container">
<div class="row">
<div class="col-sm-2" id="infobox">
<img src='img/map-icon.png' width="50px" height="50px">
<h3> Search </h3>
<h4>Select pickup address </h4>
</div>
<div class="col-sm-2">
<br><br>
<img src='img/arrow-up.png' width="50px" height="50px" class='arrows-img'>
</div>
<div class="col-sm-2" id="infobox">
<img src='img/delivery-icon.png' width="50px" height="50px" class="order-icon-img">
<h3> Order</h3>
<h4>Make a booking online </h4>
</div>
<div class="col-sm-2">
<br>
<img src='img/arrow-down.png' width="50px" height="50px" class='arrows-img'>
</div>
<div class="col-sm-2" id="infobox">
<img src='img/truck-icon.png' width="50px" height="50px">
<h3> Delivered</h3>
<h4>Instant courier delivery</h4>
</div>
</div>
</div>
</div>
Try this one, for the scrolling.
$('#your_image_for_the_scroll').click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
});
This image could appear after user does scroll down a bit:
$(window).scroll(function () {
if ($(this).scrollTop() >= 20) { // If page is scrolled more than 20px
$('#your_image_for_the_scroll').fadeIn(200);
} else {
$('#your_image_for_the_scroll').fadeOut(200);
}
});
Mostly it is because of the typo. There is an extra ) & } at the end of the function
I Have created a JSFIDDLE and it is working here
As pointed by OP It's working without javascript. We all should have been more clever about this, as anchors are common.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="clearfix">
<div class="logo-container">
<i><h2><b>DELIVERY MOTION</b></h2></i>
</div>
<ul class="clearfix">
<li><a id="delivery" href="#">Delivery</a></li>
<li><a id="about" href="#">About Us</a></li>
<li>Services</li>
<li>FAQ</li>
<li>Contact</li>
<li>Login</li>
</ul>
Menu
</nav>
<div id="deliverySection">
<h1> Order anything from anywhere in Karachi instantly at your doorstep. </h1><hr>
<div id='fee-estimate-box'>
<form id='fee-estimate-form' action="#">
<legend id='delivery-text'>Delivery Fee Calculator</legend>
<span>FROM </span> <input type="text" name="firstname" value="PICKUP ADDRESS">
<span>TO </span> <input type="text" name="lastname" value="DROP ADDRESS">
<span>ESTIMATED FEE </span> <input type="text" name="estimated-fee" value="0.00 PKR">
<input class='btn-submit' type="submit" value="BOOK NOW!">
</form>
</div>
<div id='silver-bar'>
<img src='img/red-car.png' alt='fast deliver'>
</div>
</div>
<div id="aboutSection">
<h2> How it works </h2>
<div class="container">
<div class="row">
<div class="col-sm-2" id="infobox">
<img src='img/map-icon.png' width="50px" height="50px">
<h3> Search </h3>
<h4>Select pickup address </h4>
</div>
<div class="col-sm-2">
<br><br>
<img src='img/arrow-up.png' width="50px" height="50px" class='arrows-img'>
</div>
<div class="col-sm-2" id="infobox">
<img src='img/delivery-icon.png' width="50px" height="50px" class="order-icon-img">
<h3> Order</h3>
<h4>Make a booking online </h4>
</div>
<div class="col-sm-2">
<br>
<img src='img/arrow-down.png' width="50px" height="50px" class='arrows-img'>
</div>
<div class="col-sm-2" id="infobox">
<img src='img/truck-icon.png' width="50px" height="50px">
<h3> Delivered</h3>
<h4>Instant courier delivery</h4>
</div>
</div>
</div>
</div>
I Try to getting the text form same div on button click event.
Here is my HTML Markup:
<div class="flights">
<div class="flight-box">
<div class="row">
<div class="col-sm-3">
<div class="flight-info">
<div class="left-i">
<img src="img/sp_trans.gif" class="airlogowidth airsprite airlogo A4">
<div class="flight-no">SG-264</div>
</div>
<div class="right-i">
<div class="name">Air India</div>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="flight-duration">
<div class="row">
<div class="col-sm-4">
<div class="events">
<span class="text">Depart</span>
<span class="time">12:30 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Arrive</span>
<span class="time">03:10 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Duration</span>
<span class="time">1h 40m </span>
<span class="route">No Stop</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="fare-price">
<div class="row">
<div class="col-sm-6">
<span class="f-price">3999</span>
</div>
<div class="col-sm-6">
<div class="book-action">
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-danger btn-book" name="booknow">Book Now</button>
<button type="button" class="btn text-primary btn-more-1" name="details">View More...</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flight-footer">
<div class="row">
<div class="col-sm-3">
<div class="refund-status">
<span>Refundable</span>
</div>
</div>
<div class="col-sm-3">
<div class="fare-role">
Fare rules
</div>
</div>
<div class="col-sm-3">
<div class="baggage-info">
Baggage Information
</div>
</div>
<div class="col-sm-3">
<div class="itinerary-info">
Flight itinerary
</div>
</div>
</div>
</div>
<div class="flight-itinerarySummary" style="display: none;">
<div class="row">
<div class="col-sm-12">
<h2>Agartala → Bangalore <small>22 Nov 2015</small></h2>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i><abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
<div class="connector weak">
<small class="layOver">Layover : 5h 20m</small>
</div>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i><abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
</div>
</div>
</div>
</div>
I want "flight-no" div html i.e SG-264 on 'btn-book' on Click.
I try as follows, but return 'undefine' -
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('div.flight-info').parent('div.left-i').html();
alert(flightNo);
});
Note that in the page have many rows with 'flights' class.
Anyone help me?
The issue with your current code is that the .flight-info element is not a direct parent of .btn-book, it's a sibling of one of the parents. This is why the .flight-info selector on closest() returns nothing.
The easiest way to achieve what you require is to use closest() to get the nearest common parent of both elements, in this case .flight-box, then use find() and text() to get the flight number. Try this:
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('div.flight-box').find('.flight-no').text();
alert(flightNo); // = SG-264 given your example
});
Example fiddle
you need to use .find() with .closest() and div.left-i is children of div.flight-info not parent()
use it like this
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('.flight-box').find('div.left-i .flight-no').html();
alert(flightNo);
});
DEMO
I'm using jQuery dialog to gather the informations from users then append to my desired div. This function works very well, but when comes to edit/update my contents, I have no ideas how to do.
Front-Ends HTML
<li class="description_panel">
<a id="editPanel" href="#"></a>
<a id="closeBtn" href="#" class="closeButton"></a>
<div class="panel_title">
<h2>**Subscribe Here!**</h2>
</div>
<div class="panel_img">
<img width="320px" src="link_to_img_url"/>
</div>
<div class="panel_description">
<p>My paragraph 1</p>
<p>My paragraph 2</p>
</div>
</li>
Edit Panel
<div id="edit-dialog-form" title="Edit Panel">
<form id="formUpdatePanel">
<div class="form-group">
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>Panel title::</h5>
<input style="margin-bottom:20px;" id="updatePanelTitle" class="form-control input-lg" name="title" placeholder="Panel Title" type="text"></input>
</div>
</div>
</div>
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>URL to image: </h5>
<input style="margin-bottom:20px;" id="updatePanelImageURL" class="form-control input-lg" name="imageURL" placeholder="Link to Image URL" type="text"></input>
</div>
</div>
</div>
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>Panel description:</h5>
<textarea id="updatePanelDescription" rows="5" cols="50" style="width:312px"></textarea>
</div>
</div>
</div>
</div>
</form>
</div>
JQuery
$('#editPanel').click(function(){
editDialog.dialog("open");
});
var editDialog = {...};
function updateDialog {
}
How to retrieve all the inputs values and textarea value and display in the dialog input box and update/overwrite the contents again.
I am having issues with an events firing twice when clicked, what I am trying to open a div that is collapsable on the click of a link and then close again on a second click. The problem is that the link is one of many with the same class and the same functionality on the page. And what happens is the open event happens immediately followed by the close event,
I am not sure why this is happening, as I am identifying the clicked element using,
e.currentTarget();
but it seems to be getting confused as to what element is getting clicked.
Here is my code,
Open the div
itemTab: function(e) {
var clicked = $(e.currentTarget),
clickedTab = clicked.data("tab");
clicked.parent().parent().parent().find(".action-btn").css({
"width" : "0px",
"display" : "none"
});
clicked.parent().find("div.action-btn").show().animate({
"width" : "28px"
}, 250);
//clicked.closest(".item-tabs").find("li#active").attr("id", "");
clicked.closest(".item-tabs").find("li.active").removeClass("active");
clicked.closest(".items-tabs").find("li.active").removeClass("active");
clicked.parent().addClass("active").attr("id", "active");
clicked.closest(".item-tabs").find(".tab-content.active").removeClass("active");
clicked.closest(".item-tabs").find("." + clickedTab).addClass("active");
clicked.closest(".item-tabs").find(".close").css("visibility", "visible");
e.preventDefault();
},
close the div
closeTab: function(e) {
var clicked = $(e.currentTarget).parent(),
clickedTab = clicked.data("tab");
clicked.closest(".item-tabs").find(".tab-content.active").slideUp(500, function() {
clicked.closest(".item-tabs").find(".tab-content.active").removeClass("active");
});
clicked.removeClass("active");
e.preventDefault();
},
The HTML
<article class="item">
<header class="active">
<h1>
<span class="expander"></span>
<span class="item_name editable">New Item</span>
<span class="js-complete-item complete-item ">=</span>
<span class="fileinputbar-button js-open-adder-form add-item-task">+</span>
<ul class="floating-menu">
<span class="tip"></span>
<li class="js-add-new-task add-new-task">Add Task</li>
<li class="js-add-new-item add-new-item">Add Item</li>
</ul>
<span class="tasks meta">
<span class="js-task-count">6 / 6 tasks</span>
<span class="js-completion-status"></span>
</span></h1>
<div class="inline-edit item" style="display: none;">
<form action="/projects/items/edit/71" method="post" accept-charset="utf-8" id="item_name" class="inline_edit edit_item_name" novalidate="novalidate">
<p>
<input type="text" name="item_name" value="New Item" class="item_name">
</p>
<p>
<input type="submit" name="submit" value="Update">
<a class="cancel" href="#">Cancel</a>
Delete
</p>
</form>
</div>
<div class="percentage_bar" title="0% Complete" style="background-color: #18fbc5; width: 0%;">0% Complete</div>
</header>
<div class="item_content" style="display: block;">
<div class="item-tabs">
<ul class="tab-links">
<li class="active" id="active"><div></div>Description<div></div></li>
<li class="" id="active"><div></div>Tasks<div></div><div class="action-btn js-add-tasks" style="width: 0px; display: none;"></div></li>
</ul>
<div class="tab-content description active">
<span class="item_description editable">
<p class="add-text js-add-item-description">
<span class="faded">No Description, Click to add</span>
</p>
</span>
<div class="inline-edit js-item-description-edit" style="display: none;">
<form action="/projects/items/edit_description/71" method="post" accept-charset="utf-8" id="item_description" class="inline_edit edit_item_description" novalidate="novalidate">
<p>
<textarea autofocus="" name="item_description" class="edit_item_description"></textarea>
<!--<input type="text" name="item_description" value="" class="edit_item_description"> -->
</p>
<p>
<input type="submit" name="submit" value="Update">
<a class="cancel" href="#">Cancel</a>
</p>
</form>
</div>
</div>
<div class="tab-content tasks"><article class="task-list">
<header>
<h1 class="tasks active">
<span class="js-task-header">Tasks</span>
<span class="fileinputbar-button js-open-task-adder-form list-header-add">+</span>
</h1>
</header>
<div class="tasks active">
<span class="toggle-header">
<div class="labels">
<ul>
<li>Active<i class="close-label"></i></li>
<li>Complete<i class="close-label"></i></li>
</ul>
</div>
<input id="user-search-query" type="text" name="task_search" value="" placeholder="Filter" class="required file-search">
</span><div class="new-task js-new-task" style="display: none;">
<form action="" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;">
<p>
<textarea autofocus="" name="task_name" class="item task_name_edit js-task-adder-input" title="Add New Task (Press Enter to add)" placeholder="New task name..."></textarea>
<input type="submit" name="submit" value="Update" class="js-task-adder-input-submit">
<a class="cancel" href="#">Cancel</a>
<span class="instruction-task-add">Press Enter to add, or shift enter to add a new line</span>
</p>
</form>
</div>
<ol class="tasks active"><div name="dasdsadas" task_id="129" id="129" item="New Item" item_id="71" creator="simonainley" created_by="1" created_on="2013-09-26T14:39:23+01:00" completion_date="1999-11-30T01:00:00+00:00" completed="active" parent_id="71" parent_type="item" project_id="12">
<li class="">
<h5><span class="task_name editable">dasdsadas</span>
<form action="/tasks/edit/129" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;"> <p>
<textarea name="task_name" class="task_name_edit">dasdsadas</textarea>
<input type="submit" name="submit" value="Update"> <a class="cancel" href="#">Cancel</a>
delete </p>
</form>
<div style="clear:both"></div>
</h5>
<div class="meta">
<span>Created by Me <time datetime="2013-09-26T14:39:23+01:00" title="2013-09-26T14:39:23+01:00">5 days ago</time>
</span>
<span class="path">
[ <span class="item">New Item</span>
]
</span>
</div>
<div class="update">
active
</div>
</li>
</div><div name="sdasdas" task_id="127" id="127" item="New Item" item_id="71" creator="simonainley" created_by="1" created_on="2013-09-25T16:26:07+01:00" completion_date="1999-11-30T01:00:00+00:00" completed="active" parent_id="71" parent_type="item" project_id="12">
<li class="">
<h5><span class="task_name editable">sdasdas</span>
<form action="/tasks/edit/127" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;"> <p>
<textarea name="task_name" class="task_name_edit">sdasdas</textarea>
<input type="submit" name="submit" value="Update"> <a class="cancel" href="#">Cancel</a>
delete </p>
</form>
<div style="clear:both"></div>
</h5>
<div class="meta">
<span>Created by Me <time datetime="2013-09-25T16:26:07+01:00" title="2013-09-25T16:26:07+01:00">6 days ago</time>
</span>
<span class="path">
[ <span class="item">New Item</span>
]
</span>
</div>
<div class="update">
active
</div>
</li>
</div><div name="New Sub Item Task 2" task_id="124" id="124" item="New Item" item_id="71" creator="simonainley" created_by="1" created_on="2013-09-25T09:43:00+01:00" completion_date="1999-11-30T01:00:00+00:00" completed="active" parent_id="71" parent_type="item" project_id="12">
<li class="">
<h5><span class="task_name editable">New Sub Item Task 2</span>
<form action="/tasks/edit/124" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;"> <p>
<textarea name="task_name" class="task_name_edit">New Sub Item Task 2</textarea>
<input type="submit" name="submit" value="Update"> <a class="cancel" href="#">Cancel</a>
delete </p>
</form>
<div style="clear:both"></div>
</h5>
<div class="meta">
<span>Created by Me <time datetime="2013-09-25T09:43:00+01:00" title="2013-09-25T09:43:00+01:00">6 days ago</time>
</span>
<span class="path">
[ <span class="item">New Item</span>
]
</span>
</div>
<div class="update">
active
</div>
</li>
</div><div name="New Sub Item Task 1" task_id="123" id="123" item="New Item" item_id="71" creator="simonainley" created_by="1" created_on="2013-09-25T09:42:48+01:00" completion_date="1999-11-30T01:00:00+00:00" completed="active" parent_id="71" parent_type="item" project_id="12">
<li class="">
<h5><span class="task_name editable">New Sub Item Task 1</span>
<form action="/tasks/edit/123" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;"> <p>
<textarea name="task_name" class="task_name_edit">New Sub Item Task 1</textarea>
<input type="submit" name="submit" value="Update"> <a class="cancel" href="#">Cancel</a>
delete </p>
</form>
<div style="clear:both"></div>
</h5>
<div class="meta">
<span>Created by Me <time datetime="2013-09-25T09:42:48+01:00" title="2013-09-25T09:42:48+01:00">6 days ago</time>
</span>
<span class="path">
[ <span class="item">New Item</span>
]
</span>
</div>
<div class="update">
active
</div>
</li>
</div>
</ol>
</div>
</article></div>
</div>
<article class="item">
<header class="active">
<h1>
<span class="expander"></span>
<span class="item_name editable">New Item Sub Item</span>
<span class="js-complete-item complete-item ">=</span>
<span class="fileinputbar-button js-open-adder-form add-item-task">+</span>
<ul class="floating-menu">
<span class="tip"></span>
<li class="js-add-new-task add-new-task">Add Task</li>
</ul>
<span class="tasks meta">
<span class="js-task-count">2 / 2 tasks</span>
<span class="js-completion-status"></span>
</span></h1>
<div class="inline-edit item" style="display: none;">
<form action="/projects/items/edit/" method="post" accept-charset="utf-8" id="item_name" class="inline_edit edit_item_name" novalidate="novalidate">
<p>
<input type="text" name="item_name" value="New Item Sub Item" class="item_name">
</p>
<p>
<input type="submit" name="submit" value="Update">
<a class="cancel" href="#">Cancel</a>
Delete
</p>
</form>
</div>
<div class="percentage_bar" title="0% Complete" style="background-color: #18fbc5; width: 0%;">0% Complete</div>
</header>
<div class="item_content" style="display: block;">
<div class="item-tabs">
<ul class="tab-links">
<li class=""><div></div>Description<div></div></li>
<li class="active" id="active"><div></div>Tasks<div></div><div class="action-btn js-add-tasks" style="width: 28px; display: block;"></div></li>
</ul>
<div class="tab-content description">
<span class="item_description editable">
<p class="add-text js-add-item-description">
<span class="faded">No Description, Click to add</span>
</p>
</span>
<div class="inline-edit js-item-description-edit" style="display: none;">
<form action="/projects/items/edit_description/" method="post" accept-charset="utf-8" id="item_description" class="inline_edit edit_item_description" novalidate="novalidate">
<p>
<textarea autofocus="" name="item_description" class="edit_item_description"></textarea>
<!--<input type="text" name="item_description" value="" class="edit_item_description"> -->
</p>
<p>
<input type="submit" name="submit" value="Update">
<a class="cancel" href="#">Cancel</a>
</p>
</form>
</div>
</div>
<div class="tab-content tasks active"><article class="task-list">
<header>
<h1 class="tasks active">
<span class="js-task-header">Tasks</span>
<span class="fileinputbar-button js-open-task-adder-form list-header-add">+</span>
</h1>
</header>
<div class="tasks active">
<span class="toggle-header">
<div class="labels">
<ul>
<li>Active<i class="close-label"></i></li>
<li>Complete<i class="close-label"></i></li>
</ul>
</div>
<input id="user-search-query" type="text" name="task_search" value="" placeholder="Filter" class="required file-search">
</span><div class="new-task js-new-task" style="display: none;">
<form action="" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;">
<p>
<textarea autofocus="" name="task_name" class="item task_name_edit js-task-adder-input" title="Add New Task (Press Enter to add)" placeholder="New task name..."></textarea>
<input type="submit" name="submit" value="Update" class="js-task-adder-input-submit">
<a class="cancel" href="#">Cancel</a>
<span class="instruction-task-add">Press Enter to add, or shift enter to add a new line</span>
</p>
</form>
</div>
<ol class="tasks active"><div id="130" name="A new task!" task_id="130" item="New Item" item_id="71" creator="simonainley" created_by="1" created_on="2013-09-26T14:40:17+01:00" completion_date="1999-11-30T01:00:00+00:00" stage="New Item Sub Item" stage_id="74" completed="active" parent_id="74" parent_type="item" project_id="12">
<li class="">
<h5><span class="task_name editable">A new task!</span>
<form action="/tasks/edit/130" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;"> <p>
<textarea name="task_name" class="task_name_edit">A new task!</textarea>
<input type="submit" name="submit" value="Update"> <a class="cancel" href="#">Cancel</a>
delete </p>
</form>
<div style="clear:both"></div>
</h5>
<div class="meta">
<span>Created by Me <time datetime="2013-09-26T14:40:17+01:00" title="2013-09-26T14:40:17+01:00">5 days ago</time>
</span>
<span class="path">
[ <span class="item">New Item</span>
/ <span class="stage"> New Item Sub Item</span> ]
</span>
</div>
<div class="update">
active
</div>
</li>
</div><div id="128" name="Boom!" task_id="128" item="New Item" item_id="71" creator="simonainley" created_by="1" created_on="2013-09-25T17:18:49+01:00" completion_date="1999-11-30T01:00:00+00:00" stage="New Item Sub Item" stage_id="74" completed="active" parent_id="74" parent_type="item" project_id="12">
<li class="">
<h5><span class="task_name editable">Boom!</span>
<form action="/tasks/edit/128" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;"> <p>
<textarea name="task_name" class="task_name_edit">Boom!</textarea>
<input type="submit" name="submit" value="Update"> <a class="cancel" href="#">Cancel</a>
delete </p>
</form>
<div style="clear:both"></div>
</h5>
<div class="meta">
<span>Created by Me <time datetime="2013-09-25T17:18:49+01:00" title="2013-09-25T17:18:49+01:00">6 days ago</time>
</span>
<span class="path">
[ <span class="item">New Item</span>
/ <span class="stage"> New Item Sub Item</span> ]
</span>
</div>
<div class="update">
active
</div>
</li>
</div>
</ol>
</div>
</article></div>
</div>
</div><!-- item_content:end -->
</article></div><!-- item_content:end -->
</article>
The Events
events : {
"click .item-tabs li:not(.active) a": "itemTab",
"click .item-tabs li.active": "closeTab",
}
Is there are reason why the event is running the open and close event straight after one another?
Try this to find out which element is clicked:
console.log($(e.currentTarget));
console.log($(e.target));
This should output clicked HTML element to the console.
Check isDefaultPrevented before executing you code might solve your problem for Example:
closeTab: function(e) {
if(!e.isDefaultPrevented()) { // Add this condition to both functions
var clicked = $(e.currentTarget).parent(),
clickedTab = clicked.data("tab");
clicked.closest(".item-tabs").find(".tab-content.active").slideUp(500, function() {
clicked.closest(".item-tabs").find(".tab-content.active").removeClass("active");
});
clicked.removeClass("active");
e.preventDefault();
}
},