jquery events and backbone - javascript

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();
}
},

Related

Checkbox select by keyword?

I have to order many files within a website, select them by marking them and send them to their respective folders, the problem is that there are more than 12,000 thousand listings of 30 items each! different formats and things that you should sort by category... manually.
Then I ask for your help to create a script that selects the files by keyword, that is, if a compressed file contains the keyword 'MacOS' because I select it and send it to its respective folder, let's see these images that will help me explain better what I wish:
Our robot friend would go through the whole section where these three elements of examples appear.
(1) I would find the keyword 'Mac.OS' - lowercase or uppercase.
(2) And it would select the matching element.
HTML of this section: (For reasons of quantity of characters I have limited the HTML, complete DEMO in JSFiddle)
<div id="FilesListContainer">
<form action="/action/Files/FilesList" autocomplete="off" id="FileListForm" method="post"> <input name="chomikName" type="hidden" value="chomikuj8ceggd">
<input name="folderId" type="hidden" value="779">
<input name="fileListSortType" type="hidden" value="Date">
<input name="fileListAscending" type="hidden" value="False">
<input name="gallerySortType" type="hidden" value="Name">
<input name="galleryAscending" type="hidden" value="False">
<input name="pageNr" type="hidden" value="1">
<input name="isGallery" type="hidden" value="False">
</form>
<div class="borderRadius tab" id="sortTab">
<ul class="borderRadius tabGradientBg">
<li class="selected" style="width:130px;">sortuj według:</li>
<li><form action="">nazwa<input name="fileListSortType" type="hidden" value="Name"><input name="fileListAscending" type="hidden" value="False"></form></li>
<li><form action="">typ pliku<input name="fileListSortType" type="hidden" value="Type"><input name="fileListAscending" type="hidden" value="False"></form></li>
<li><form action="">rozmiar<input name="fileListSortType" type="hidden" value="Size"><input name="fileListAscending" type="hidden" value="False"></form></li>
<li><form action=""><a class="selected" href="#" rel="nofollow" title="data dodania">data dodania <img alt="Malejąco" src="//x4.static-chomikuj.pl/res/7c24b1ecca.png"></a><input name="fileListSortType" type="hidden" value="Date"><input name="fileListAscending" type="hidden" value="True"></form></li>
<li style="width:30px;"><span><input type="checkbox" class="selectAllFiles" value="" name=""></span></li>
</ul>
</div>
<div id="listView" style="display: block">
<div class="filerow fileItemContainer">
<div class="fileinfo tab">
<ul class="borderRadius tabGradientBg">
<li><span>8,0 MB</span></li>
<li><span class="date">11 mar 19 5:18</span></li>
<li><span><input type="checkbox" value="6733949428" name="selectFileItem"></span></li>
</ul>
</div>
<div class="fileActionsButtons clear visibleButtons fileIdContainer" rel="6733949428" style="visibility: hidden;">
<ul>
<li><a class="showFileRating ratingBtn" href="javascript:;" title="Oceń plik"><span class="star5"></span></a></li>
<li><img alt="pobierz" src="//x4.static-chomikuj.pl/res/503435f17e.png" title="pobierz"></li>
<li class="fileCommentsAction"><img alt="komentarze" src="//x4.static-chomikuj.pl/res/d9b637b7b4.png" title="komentarze"></li>
<li class="fileActionsFacebookSend" data-url="http://chomikuj.pl/chomikuj8ceggd/fff/Excel.Data.Analysis.For.Dummies.4th.Edition,6733949428.epub" data-title="Excel.Data.Analysis.For.Dummies.4th.Edition">
<img alt="Podziel się na Facebook" src="//x4.static-chomikuj.pl/res/585911b602.gif" title="Podziel się na Facebook">
</li>
<li><a class="showFileOptions" href="#" title="opcje" rel="nofollow"><img alt="opcje" src="//x4.static-chomikuj.pl/res/e174c25b70.png" title="opcje"></a></li>
</ul>
</div>
<div onmouseover="$('.visibleArrow', this).css('visibility', 'visible')" onmouseout="$('.visibleArrow', this).css('visibility', 'hidden');" class="filename txt">
<h3>
<a class="expanderHeader downloadAction downloadContext" href="/chomikuj8ceggd/fff/Excel.Data.Analysis.For.Dummies.4th.Edition,6733949428.epub" title="Excel.Data.Analysis.For.Dummies.4th.Edition">
<span class="bold">Excel.Data.Analysis.For.Dummies.4th.Edition</span>.epub
</a>
<img alt="pobierz" class="downloadArrow visibleArrow" src="//x4.static-chomikuj.pl/res/99a19ffb28.png" style="visibility: hidden;" title="pobierz">
</h3>
</div>
<div style="clear:left;">
<div rel="Other" class="expType" style="visibility: hidden">
<a rel="highslide"></a>
</div>
<span class="filedescription" style="display: none">
</span>
</div>
<div class="clear">
</div>
</div>
<div class="filerow fileItemContainer">
<div class="fileinfo tab">
<ul class="borderRadius tabGradientBg">
<li><span>9,1 MB</span></li>
<li><span class="date">11 mar 19 5:13</span></li>
<li><span><input type="checkbox" value="6733945278" name="selectFileItem"></span></li>
</ul>
</div>
<div class="fileActionsButtons clear visibleButtons fileIdContainer" rel="6733945278" style="visibility: hidden;">
<ul>
<li><a class="showFileRating ratingBtn" href="javascript:;" title="Oceń plik"><span class="star5"></span></a></li>
<li><img alt="pobierz" src="//x4.static-chomikuj.pl/res/503435f17e.png" title="pobierz"></li>
<li class="fileCommentsAction"><img alt="komentarze" src="//x4.static-chomikuj.pl/res/d9b637b7b4.png" title="komentarze"></li>
<li class="fileActionsFacebookSend" data-url="http://chomikuj.pl/chomikuj8ceggd/fff/Ad0b3.Zii.2019-Universal.Patcher.v4.1.7.Mac.OS.X_TNT,6733945278.rar(archive)" data-title="Ad0b3.Zii.2019-Universal.Patcher.v4.1.7.Mac.OS.X_TNT">
<img alt="Podziel się na Facebook" src="//x4.static-chomikuj.pl/res/585911b602.gif" title="Podziel się na Facebook">
</li>
<li><a class="showFileOptions" href="#" title="opcje" rel="nofollow"><img alt="opcje" src="//x4.static-chomikuj.pl/res/e174c25b70.png" title="opcje"></a></li>
</ul>
</div>
<div onmouseover="$('.visibleArrow', this).css('visibility', 'visible')" onmouseout="$('.visibleArrow', this).css('visibility', 'hidden');" class="filename zip">
<h3>
<a class="expanderHeader downloadAction downloadContext" href="/chomikuj8ceggd/fff/Ad0b3.Zii.2019-Universal.Patcher.v4.1.7.Mac.OS.X_TNT,6733945278.rar(archive)" title="Ad0b3.Zii.2019-Universal.Patcher.v4.1.7.Mac.OS.X_TNT">
<span class="bold">Ad0b3.Zii.2019-Universal.Patcher.v4.1.7.Mac.OS.X_T<span class="e"> </span>NT</span>.rar
</a>
<img alt="pobierz" class="downloadArrow visibleArrow" src="//x4.static-chomikuj.pl/res/99a19ffb28.png" style="visibility: hidden;" title="pobierz">
</h3>
</div>
<div style="clear:left;">
<div rel="Other" class="expType" style="visibility: hidden">
<a rel="highslide"></a>
</div>
<span class="filedescription" style="display: none">
</span>
</div>
<div class="clear">
</div>
</div>
<div class="filerow alt fileItemContainer">
<div class="fileinfo tab">
<ul class="borderRadius tabGradientBg">
<li><span>1,40 GB</span></li>
<li><span class="date">11 mar 19 5:13</span></li>
<li><span><input type="checkbox" value="6733945277" name="selectFileItem"></span></li>
</ul>
</div>
<div class="fileActionsButtons clear visibleButtons fileIdContainer" rel="6733945277" style="visibility: hidden;">
<ul>
<li><a class="showFileRating ratingBtn" href="javascript:;" title="Oceń plik"><span class="star5"></span></a></li>
<li><img alt="pobierz" src="//x4.static-chomikuj.pl/res/503435f17e.png" title="pobierz"></li>
<li class="fileCommentsAction"><img alt="komentarze" src="//x4.static-chomikuj.pl/res/d9b637b7b4.png" title="komentarze"></li>
<li class="fileActionsFacebookSend" data-url="http://chomikuj.pl/chomikuj8ceggd/fff/Ad0b3.M3di4.3nc0d3r.CC.2019.v13.0.2-Crack.Mac.OS.X-CracksNow,6733945277.dmg(archive)" data-title="Ad0b3.M3di4.3nc0d3r.CC.2019.v13.0.2-Crack.Mac.OS.X-CracksNow">
<img alt="Podziel się na Facebook" src="//x4.static-chomikuj.pl/res/585911b602.gif" title="Podziel się na Facebook">
</li>
<li><a class="showFileOptions" href="#" title="opcje" rel="nofollow"><img alt="opcje" src="//x4.static-chomikuj.pl/res/e174c25b70.png" title="opcje"></a></li>
</ul>
</div>
<div onmouseover="$('.visibleArrow', this).css('visibility', 'visible')" onmouseout="$('.visibleArrow', this).css('visibility', 'hidden');" class="filename iso">
<h3>
<a class="expanderHeader downloadAction downloadContext" href="/chomikuj8ceggd/fff/Ad0b3.M3di4.3nc0d3r.CC.2019.v13.0.2-Crack.Mac.OS.X-CracksNow,6733945277.dmg(archive)" title="Ad0b3.M3di4.3nc0d3r.CC.2019.v13.0.2-Crack.Mac.OS.X-CracksNow">
<span class="bold">Ad0b3.M3di4.3nc0d3r.CC.2019.v13.0.2-Crack.Mac.OS.X<span class="e"> </span>-CracksNow</span>.dmg
</a>
<img alt="pobierz" class="downloadArrow visibleArrow" src="//x4.static-chomikuj.pl/res/99a19ffb28.png" style="visibility: hidden;" title="pobierz">
</h3>
</div>
<div style="clear:left;">
<div rel="Other" class="expType" style="visibility: hidden">
<a rel="highslide"></a>
</div>
<span class="filedescription" style="display: none">
</span>
</div>
<div class="clear">
</div>
</div>
<div class="smallBL" id="selectedFilesActionButtons">
<ul class="disabled">
<li class="">
<a class="button smallButton copyFilesBtn" href="javascript:;">
<img alt="Kopiuj" src="//x4.static-chomikuj.pl/res/8638d1a887.png" title="Kopiuj">
</a>Kopiuj</li>
<li class="">
<a class="button smallButton moveFilesBtn" href="javascript:;">
<img alt="Przenieś" src="//x4.static-chomikuj.pl/res/72d861f112.png" title="Przenieś"></a>Przenieś</li>
<li class="">
<a class="button smallButton deleteFilesBtn" href="javascript:;">
<img alt="Usuń" src="//x4.static-chomikuj.pl/res/4c264123ef.png" title="Usuń"></a>Usuń</li>
</ul>
<p>Zaznaczone pliki:</p>
<div class="clear"></div>
</div>
</div> </div>
(3) I would click on 'Move'
<li class="">
<a class="button smallButton moveFilesBtn" href="javascript:;">
<img alt="Przenieś" src="//x4.static-chomikuj.pl/res/72d861f112.png" title="Przenieś"></a>Przenieś</li>
(4) Wait for this window to appear
<div id="ui-tooltip-filesAction" class="ui-tooltip qtip ui-helper-reset ui-tooltip-default dialogWindow ui-tooltip-pos-c ui-draggable" tracking="false" role="alert" aria-live="polite" aria-atomic="false" aria-describedby="ui-tooltip-filesAction-content" aria-hidden="false" style="width: 261px; z-index: 15002; top: 497.333px; left: 477px; display: block; opacity: 1;"><div class="ui-tooltip-titlebar"><div id="ui-tooltip-filesAction-title" class="ui-tooltip-title" aria-atomic="true">Kopiowanie plików</div><a class="ui-state-default ui-tooltip-close ui-tooltip-icon" title="Zamknij" aria-label="Zamknij" role="button"><span class="ui-icon ui-icon-close">×</span></a></div><div class="ui-tooltip-content" id="ui-tooltip-filesAction-content" aria-atomic="true"><div style="display: block;">
<form action="/action/FileDetails/MoveFilesAction" method="post"><input id="ChomikName" name="ChomikName" type="hidden" value="chomikuj8ceggd"><input id="FolderId" name="FolderId" type="hidden" value="779"> <input type="hidden" name="Files" value="6733945277">
<input id="FolderTo" name="FolderTo" type="hidden" value="0"> <div>
<p>Jesteś w trybie przenoszenia.Aby przenieść plik do innego folderu
wystarczy w drzewie folderów Twojego Chomika kliknąć na docelowy folder.</p>
<input type="reset" class="greenButtonCSS" value="Anuluj przenoszenie">
</div>
</form></div></div></div>
(5) And finally click on the corresponding folder
<span class="newfile_s">MAC</span>
(3) It could be accessed from your class
(5) It is easy to access it by your ID
The method to select or mark checkboxes I am afraid that it has to be similar to the 'click' that is given with the mouse, I say it because selecting with the method .prop (' checked ', true) marks them but does not enable the 'Move' option:
Marked with script⚠️
Manual marked✅
Maybe a MouseEvent (' click ', is correct here, I do not have the necessary knowledge to ensure it
As I mentioned before, for questions of quantity of characters I put the HTML abbreviated, functional, but abbreviated. Now I leave a link to the full DEMO in JSFiddle
Script
Maybe, just maybe you can place the script inside this code so that you execute it every time you press the' enter 'key
If there is a better way then I accept it gladly!
document.onkeyup = function(e){
document.onkeyup = function(e){
if(e){
var key = window.event ? e.keyCode : e.which;
}else{
var key = window.event ? event.keyCode : event.which;
}
if (key == '13') {
//Code you would like to execute
}
}
}
- Final clarifications:
It would be for a Tampermonkey script
Javascript or JQuery
The idea is that when executing the script everything is marked with the chosen keyword and then clicks send that to the folder
I'm pretty new to this (it's a bit hard to
understand haha)

JS Filter Not Working

I am currently developing a landing page website for a client to display a range of products.
I have created a filter in JS to filter some products but its not working.
The two radios are tagged with Motorola and when you select the Motorola it doesn't show them?
I would appreciate any help someone can give me.
I am not the most confident with javascript
<div class="container mg-b-40">
<div class="row">
<div class="col-lg-2">
<aside class="sidebar">
<h5 class="heading-primary">Filter</h5>
<ul class="shop-filters">
<li class="filter">
<input type="checkbox" value="motorola" id="motorola">
<label for="motorola">Motorola</label>
</li>
<li class="filter">
<input type="checkbox" value="hytera" id="hytera">
<label for="hytera">Hytera</label>
</li>
<li class="filter">
<input type="checkbox" value="icom" id="icom">
<label for="icom">Icom</label>
</li>
<li class="filter">
<input type="checkbox" value="vertex" id="vertex">
<label for="vertex">Vertex</label>
</li>
<li class="filter">
<input type="checkbox" value="kenwood" id="kenwood">
<label for="kenwood">Kenwood</label>
</li>
<li class="filter">
<input type="checkbox" value="savox" id="savox">
<label for="savox">Savox</label>
</li>
</ul>
</aside>
</div>
<div class="col-lg-10">
<div class="masonry-loader masonry-loader-showing">
<div class="row products product-thumb-info-list mt-3" data-plugin-masonry data-plugin-options="{'layoutMode': 'fitRows'}">
<div class="category motorola">
<div class="col-sm-6 col-lg-12 product">
<span class="product-thumb-info">
<span class="product-thumb-info-image">
<img alt="" class="img-fluid" src="https://cdn.shopify.com/s/files/1/1148/2692/products/dp1400-01_Radio_Shop_UK_b113f82f-a13b-4ffa-93fd-612f313084ef.jpg?v=1529421291">
</span>
<span class="product-thumb-info-content">
<h4 class="heading-brand">Motorola DP1400</h4>
<div class="btn-group action-group" role="group" aria-label="Action Buttons">
Call Now
<a href="" class="btn btn-secondary btn-buy" rel=”nofollow”>Buy Now</a>
</div>
</span>
</span>
</div>
</div>
<div class="category hytera">
<div class="col-sm-6 col-lg-12 product">
<span class="product-thumb-info">
<span class="product-thumb-info-image">
<img alt="" class="img-fluid" src="https://cdn.shopify.com/s/files/1/1148/2692/products/dp1400-01_Radio_Shop_UK_b113f82f-a13b-4ffa-93fd-612f313084ef.jpg?v=1529421291">
</span>
<span class="product-thumb-info-content">
<h4 class="heading-brand">Motorola DP1400</h4>
<div class="btn-group action-group" role="group" aria-label="Action Buttons">
Call Now
<a href="" class="btn btn-secondary btn-buy" rel=”nofollow”>Buy Now</a>
</div>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(':input').change(function(evt){
var filter = $(':input:checked,select').map(function(index, el) {
return "." + el.value;
}).toArray().join("");
$(".product").hide().filter(filter).show();
});
</script>

The problem with your code is that you're hiding .product, but actual item to be hidden is .category. See below the working demo.
$(':input').change(function(evt) {
var filter = $(':input:checked, select').map(function(_, el) {
return "." + el.value;
}).toArray().join("");
$(".category").hide().filter(filter).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container mg-b-40">
<div class="row">
<div class="col-lg-2">
<aside class="sidebar">
<h5 class="heading-primary">Filter</h5>
<ul class="shop-filters">
<li class="filter">
<input type="checkbox" value="motorola" id="motorola">
<label for="motorola">Motorola</label>
</li>
<li class="filter">
<input type="checkbox" value="hytera" id="hytera">
<label for="hytera">Hytera</label>
</li>
<li class="filter">
<input type="checkbox" value="icom" id="icom">
<label for="icom">Icom</label>
</li>
<li class="filter">
<input type="checkbox" value="vertex" id="vertex">
<label for="vertex">Vertex</label>
</li>
<li class="filter">
<input type="checkbox" value="kenwood" id="kenwood">
<label for="kenwood">Kenwood</label>
</li>
<li class="filter">
<input type="checkbox" value="savox" id="savox">
<label for="savox">Savox</label>
</li>
</ul>
</aside>
</div>
<div class="col-lg-10">
<div class="masonry-loader masonry-loader-showing">
<div class="row products product-thumb-info-list mt-3" data-plugin-masonry data-plugin-options="{'layoutMode': 'fitRows'}">
<div class="category motorola">
<div class="col-sm-6 col-lg-12 product">
<span class="product-thumb-info">
<span class="product-thumb-info-image">
<img alt="" class="img-fluid" src="https://cdn.shopify.com/s/files/1/1148/2692/products/dp1400-01_Radio_Shop_UK_b113f82f-a13b-4ffa-93fd-612f313084ef.jpg?v=1529421291">
</span>
<span class="product-thumb-info-content">
<h4 class="heading-brand">Motorola DP1400</h4>
<div class="btn-group action-group" role="group" aria-label="Action Buttons">
Call Now
<a href="" class="btn btn-secondary btn-buy" rel=”nofollow”>Buy Now</a>
</div>
</span>
</span>
</div>
</div>
<div class="category hytera">
<div class="col-sm-6 col-lg-12 product">
<span class="product-thumb-info">
<span class="product-thumb-info-image">
<img alt="" class="img-fluid" src="https://cdn.shopify.com/s/files/1/1148/2692/products/dp1400-01_Radio_Shop_UK_b113f82f-a13b-4ffa-93fd-612f313084ef.jpg?v=1529421291">
</span>
<span class="product-thumb-info-content">
<h4 class="heading-brand">Hytera</h4>
<div class="btn-group action-group" role="group" aria-label="Action Buttons">
Call Now
<a href="" class="btn btn-secondary btn-buy" rel=”nofollow”>Buy Now</a>
</div>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>

on submit click button hide first tab and show next tab?

we having three tabs initially first tabs should enabled i's working fine. after click submit button second tab should be open but it's is not working.
<div class="page-content">
<div class="container-fluid">
<header class="section-header">
<div class="tbl">
<div class="tbl-row">
<div class="tbl-cell">
<h2>Company Registration Form</h2>
</div>
</div>
</div>
</header>
<section class="tabs-section">
<div class="tabs-section-nav tabs-section-nav-icons">
<div class="tbl">
<ul class="nav" role="tablist" id="myLinks">
<li class="nav-item">
<a class="nav-link active" href="#home" role="tab" data-toggle="tab">
<span class="nav-link-in">
<i class="font-icon font-icon-cogwheel"></i>
Company Registration Form
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu1" role="tab" data-toggle="tab">
<span class="nav-link-in">
<span class="glyphicon glyphicon-music"></span>
Company Social Network
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu2" role="tab" data-toggle="tab">
<span class="nav-link-in">
<i class="fa fa-product-hunt"></i>
Company Reference
</span>
</a>
</li>
</ul>
</div>
</div><!--.tabs-section-nav-->
<div class="tab-content" id="myTabs">
<div role="tabpanel" class="tab-pane fade in active show" id="home">
<form id="form" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--.tab-pane-->
<div role="tabpanel" class="tab-pane fade" id="menu1">
<form id="form" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--.tab-pane-->
<div role="tabpanel" class="tab-pane fade" id="menu2">
<form id="form" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--.tab-pane-->
</div><!--.tab-content-->
</section>
</div>
</div>
Script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$("#myTabs form").on('submit', function (e) {
e.preventDefault();
var linkHref = $(this).parents('.tab-pane').attr('id');
$('#myLinks li')
.find('a[href="#' + linkHref + '"]')
.parent()
.next()
.find('a').tab('show')
.attr('data-toggle', 'tab');
});
</script>
Pass the value
in this picture value pass to the linkHref but after click submit button hide the first tab but next tab is not opening ..
Second Image blank page
second screen shot blank page after enter submit button

Here you go with a solution https://jsfiddle.net/7baqxro0/1/
$("#myTabs form").on('submit', function (e) {
e.preventDefault();
var linkHref = $(this).parents('.tab-pane').attr('id');
$('#myLinks li a').removeClass('active');
$('#myLinks li')
.find('a[href="#' + linkHref + '"]')
.parent()
.next()
.find('a')
.tab('show')
.addClass('active')
.attr('data-toggle', 'tab');
$('a.nav-link').not('.active').css('pointer-events', 'none');
});
$('a.nav-link').not('.active').css('pointer-events', 'none');
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="page-content">
<div class="container-fluid">
<header class="section-header">
<div class="tbl">
<div class="tbl-row">
<div class="tbl-cell">
<h2>Company Registration Form</h2>
</div>
</div>
</div>
</header>
<section class="tabs-section">
<div class="tabs-section-nav tabs-section-nav-icons">
<div class="tbl">
<ul class="nav nav-tabs" role="tablist" id="myLinks">
<li class="nav-item">
<a class="nav-link active" href="#home" role="tab" data-toggle="tab">
<span class="nav-link-in">
<i class="font-icon font-icon-cogwheel"></i>
Company Registration Form
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu1" role="tab" data-toggle="tab">
<span class="nav-link-in">
<span class="glyphicon glyphicon-music"></span>
Company Social Network
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu2" role="tab" data-toggle="tab">
<span class="nav-link-in">
<i class="fa fa-product-hunt"></i>
Company Reference
</span>
</a>
</li>
</ul>
</div>
</div><!--.tabs-section-nav-->
<div class="tab-content" id="myTabs">
<div role="tabpanel" class="tab-pane fade in active show" id="home">
<form id="form" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--.tab-pane-->
<div role="tabpanel" class="tab-pane fade" id="menu1">
<form id="form" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--.tab-pane-->
<div role="tabpanel" class="tab-pane fade" id="menu2">
<form id="form" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--.tab-pane-->
</div><!--.tab-content-->
</section>
</div>
</div>
Please add your CSS to the code, intentionally I skipped it.
I've used CSS property pointer-events: none instead of disabled.
Hope this will help you.

working: https://jsfiddle.net/q6adcnLs/
you have multiple elements with same id attribute
you've misplaced .active class to .nav-link (which should be in the .nav-item)
you can use return true or return false instead of preventDefault()
UPDATE:
disable other inactive tabs https://jsfiddle.net/q6adcnLs/1/

Scrolling Page with jQuery not working

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>

don't work submit in JQuery

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.');
}
});

Categories

Resources