I have this code http://codepen.io/anon/pen/JdNdXd which lets me pick wheels, tiers etc. The thing I want to do is when I get to the last div, where the description of an items is displayed, I have a button and I want to make it when that button is clicked its text is added in the bellow div called Cart, this works as a shoping cart. If you pick Farovi then Original and then Devil eyes you can see that you get text with product name, its code and price, the second line has a button, so I want when I press that button that item gets added to the cart in the div bellow. Is this possible and how can I delte one of products from shopping cart if I want.
Tried a few diferent codes but could not to get it working, last one I tried is append function but could not get it working. This bellow is just example of append function, I did not use this one in my code
$( ".container" ).append( $( "h2" ) );
Try this way:
Form your HTML like this:
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked" id="menu">
<li>Felge
</li>
<li>Gume
</li>
<li>Branici
</li>
<li>Farovi
</li>
</ul>
</div>
<div id="cart"></div>
And JavaScript like this:
function addToCart(item) {
var cart = document.getElementById("cart");
$("#cart").append("<p><a class='cartitem' href='#' onclick='removeFromCart(this)'>" + item.innerHTML + "</a></p>");
$('.cartitem').click(function (e) {
$(e.target).remove();
});
}
function removeFromCart(ele) {
$("#cart").remove(ele);
}
$(function () {
$('.item').click(function () {
addToCart(this);
});
});
See it running here: http://jsfiddle.net/8npoj1nq/
Related
I have this code:
<input id="ville" placeholder="Enter a city">
<ul class="suggestions">
<li data-vicopo="#ville">
<strong data-vicopo-code-postal></strong>
<span data-vicopo-ville></span>
</li>
</ul>
<script src="https://vicopo.selfbuild.fr/api.js"></script>
$(document).on('click', '.suggestions li', function () {
$('#ville').val(
$(this).find('[data-vicopo-code-postal]').text()
);
});
When I click on my chosen city, the list of suggested cities do not disapear. What easy fix can I do so that when clicking, the display of suggestions close or hide?
Thanks
Insert the below code to always show the suggestions list after you have hidden with .hide().
The user can click back into the input field and start typing which will then show the list again, or by clicking on it.
$('#ville').on('click keyup', function() {
$('.suggestions').show();
})
Consider the following code:
$('#calendar-dates').on('click', 'td', function() {
retrieve_availability(date, function(data) { //ajax callback
$appointments = data;
window.appointments = $appointments;
$(".appointments").hide().fadeIn();
timetable();
range($appointments);
});
}
$('.appointments').on('click', 'li', function() {
//do something
$(".confirm").unbind().bind('click', function() {
//do something
}
}
and the html structure
<div class="appointments">
<ul class="appointment_list">
// <li> tags are appended dynamically
</ul>
<div class="actions">
Apply
Cancel
</div>
</div>
What i want is when, the user clicks the confirm button, to close the whole appointments list. Because now everytime i click on the <td> element under the #calendar-dates the <li> tags get appended to the previously appended <li> tags
i need something of a reset
To remove content in an element, use .empty():
$(".appointment_list").empty();
I have a dropdown-menu and 2 btns(AP,SP) in the same row.
I chose Geary, Mia on the drop-down menu, I want to reset it to ClassView when I press on a different btn.
Note: ClassView is my default selection.
HTML
for dropdown-menu
<div id="dd" class="wrapper-dropdown-1" tabindex="1"> <span>Class View </span>
<ul class="dropdown">
<li><a id="class-view" href="#">Class View</a></li>
<li><a id="student#1" class="student" href="#">Geary, Mia</a></li>
</ul>
</div>
Below is what I have now :
Fiddle
Any hints ?
You can try
$("#btn-assignment").click(function(){
$(".dropdown li").eq(0).trigger("click");
});
This will trigger 'click' onto the first LI element, which should reselect it
I attached this event to the 'Assignment Performance' button
http://jsfiddle.net/2v57wnys/1/
Thanks to #Sushil and #emmaaaah for get me thinking at the right direction.
I'm sure that there is more than 1 way to accomplish this such task, but here how I did mine. I
Create
a function called : classViewReset()
function classViewReset() {
$student.removeClass('active');
$classView.removeClass('active');
$('#dd').find('span').text('Class View');
}
Call it back
on all my onClick(); functions.
$btnAssignment.click(function(e) {
e.preventDefault();
classViewReset(); //<----------------- Call
imgLoader({btn: $btnAssignment, });
});
Now my dropdown-menu is reset properly as I wanted. See it live : here
I have a dynamically created 3 options list which are attached at the end of a table row. I want to hide or disable Edit and Copy options if certain conditions are not met when page loads. How can i do this using either jQuery of JavaScript.
<div class="btn-group ewButtonGroup open">
<button class="dropdown-toggle btn btn-small" data-toggle="dropdown" href="#">Options <b class="caret"></b></button>
<ul class="dropdown-menu ewMenu">
<li><a class="ewRowLink ewView" data-caption="View" href="teamsview.php?showdetail=&TeamID=1">View</a></li>
<li><a class="ewRowLink ewEdit" data-caption="Edit" href="teamsedit.php?TeamID=1">Edit</a></li>
<li><a class="ewRowLink ewCopy" data-caption="Copy" href="teamsadd.php?TeamID=1">Copy</a>
</li>
</ul>
</div>
I have tried the following code which deosnt work.
<script>
$(document).ready(function() {
var Week_Check = $('#ewRowLink ewView span').text();
if ( Week_Check > 10) {
$('.ewRowLink ewView').hide();
}
});
</script>
You have a bad jQuery selector. If you want to hide an element having both of those classes you want to go this way:
$('.ewRowLink.ewView').hide();
By using $('.ewRowLink ewView').hide(); you basically state: hide all ewView (?) elements that are inside other elements having ewRowLink class.
You can use .off() to unbind the event:
$('.ewEdit, .ewCopy').off('click');
or if you want to hide:
$('.ewEdit, .ewCopy').hide();
Yet you need to mention on what condition you want to do this.
<script>
$(document).ready(function() {
var Week_Check = $('#ewRowLink, #ewView').find('span').html();
if ( Week_Check > 10) {
$('.ewRowLink, .ewView').hide();
}
});
</script>
I am designing a simple jquery live search function within a widget on a site i'm developing. I have borrowed some code I found and it is working great. The problem is though that instead of using a list like this:
<ul>
<li>Searchable Item 1</li>
<li>Searchable Item 2</li>
etc
I am using a list like this:
<ul>
<li>
<a href="#">
<div class="something>
<img src="something.jpg">
<p>Searchable Item 1</p>
</div>
</a>
</li>
etc.
As you can see the text I want to search is in the p tag. The functions I have used are searching all the other stuff (a href, div, img) and matching text found in those tags as well as the item within the p tag. Sorry if my explanation is a bit confusing but I will show you an example of the code here:
//includes im using
<script type="text/javascript" src="js/jquery-1.7.min.js" ></script>
<script type="text/javascript" src="js/quicksilver.js"></script>
<script type="text/javascript" src="js/jquery.livesearch.js"></script>
//document ready function
$(document).ready(function() {
$('#q').liveUpdate('#share_list').fo…
});
//actual search text input field
<input class="textInput" name="q" id="q" type="text" />
//part of the <ul> that is being searched
<ul id="share_list">
<li>
<a href="#">
<div class="element"><img src="images/social/propellercom_icon.jpg… />
<p>propeller</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="element"><img src="images/social/diggcom_icon.jpg" />
<p>Digg</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="element"><img src="images/social/delicios_icon.jpg" />
<p>delicious</p>
</div>
</a>
</li>
</ul>
also here is the jquery.livesearch.js file I am using
jQuery.fn.liveUpdate = function(list){
list = jQuery(list);
if ( list.length ) {
var rows = list.children('li'),
cache = rows.map(function(){
return this.innerHTML.toLowerCase();
});
this
.keyup(filter).keyup()
.parents('form').submit(function(){
return false;
});
}
return this;
function filter(){
var term = jQuery.trim( jQuery(this).val().toLowerCase() ), scores = [];
if ( !term ) {
rows.show();
} else {
rows.hide();
cache.each(function(i){
var score = this.score(term);
if (score > 0) { scores.push([score, i]); }
});
jQuery.each(scores.sort(function(a, b){return b[0] - a[0];}), function(){
jQuery(rows[ this[1] ]).show();
});
}
}
};
I believe the problem lies here:
var rows = list.children('li'),
cache = rows.map(function(){
return this.innerHTML.toLowerCase();
});
it is just using whatever it finds between the li tags as the search term to compare against the string entered into the text input field. The search function actually does work but seems to find too many matches and is not specific as I am also using a quicksilver.js search function that matches terms that are similar according to a score. When I delete all the other stuff from the li list (a href, img, div, etc) the search function works perfectly. If anyone has any solution to this I would be really greatful, I have tried things like:
return this.children('p').innerHTML but it doesn't work, I'm ok with PHP, C++, C# etc but totally useless with javascript and Jquery, they're like foreign languages to me!
In the jquery.livesearch.js file I believe you can replace this line:
var rows = list.children('li'),
with:
var rows = list.children('li').find('p'),
This should make it so the livesearch plugin will only search the paragraph tags in your list.
You will need to change the .show()/.hide() lines to reflect that you are trying to show the parent <li> elements since you are now selecting the child <p> elements:
Change:
rows.show();//1
rows.hide();//2
jQuery(rows[ this[1] ]).show();//3
To:
rows.parents('li:first').show();//1
rows.parents('li:first').hide();//2
jQuery(rows[ this[1] ]).parents('li').show();//3