In my custom WordPress theme, I placed my Cart icon in the header.php, where with other things I placed it in an <li class="user-cart">. I placed the db Query within this <li> and with the "Add to Cart" button I'm trying to reload the <li> so that it can query again and show the updated count of the products added.
On AJAX success I can do it using:
success: function (data) {
$('.user-cart').load(window.location.href + ' .user-cart');
}
When I'm clicking on the Add to Cart button, it's reloading the <li> with the update count(), but it's taking another <li> within the parent <li>, like:
<li class="user-cart">
<li class="user-cart">
<span class="user-cart-icon"></span> 15
</li> <!-- cloned li -->
</li> <!-- parent or original li -->
But the good part is that, the cloned <li> loads only once, on the first click after a page reload, then all the count comes within the second <li>.
What's the wrong part in my code? I don't want any duplicate <li> — just want to reload the <li class="user-cart">.
You should try like this
success: function (data) {
$('.user-cart').load(window.location.href + ' .user-cart a');
}
P.S what does that response data contain? I would prefer to use that to update the count, without making an additional request to server
Related
I've have a menubar item with the name Activity which on hover prints Items and Lists. The code belonging to the menubar item Activity is shown below:
<li>
<section>
<div style="width:100%;">
<?=$ab_string['activity']; ?>
</div>
<div class="sm">
<div class="span">
<ul>
<li><?=$ab_string['items'];?></li> // Line A for dropddown Items
<li><?=$ab_string['lists'];?></li> // Line B for dropdown Lists
</ul>
</div>
</div>
</section>
</li>
On doing hover to Activity menubar item, it shows dropdown Items and Lists. On clicking dropdown Items, I am seeing the blank page.
Problem Statement: I am wondering what changes I need to make at Line A so that it doesn't show blank page on clicking Items.
<?=$ab_string['items'];?>
<?=$ab_string['lists'];?>
Put the variable to the href, and using $_GET['data'] to retrieve the value.
I am using Material Design Light without any other framework like Angular or android. Just plain old PHP, Jquery, MDL min css and js.
Simple menu
<button id="lang-switcher" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class="material-icons">language</i>
</button>
<ul id="lang-switcher-items" class="mdl-menu mdl-js-menu mdl-menu--top-left" for="lang-switcher">
<li class="mdl-menu__item">EN English</li>
<li class="mdl-menu__item">RU Русский</li>
<li class="mdl-menu__item">UK Українська</li>
<li class="mdl-menu__item">PL Polski</li>
</ul>
Menu item click must run js function like setLanguage(language)
How do i create listener for "mdl-menu__item" click? Should i use Jquery .click(function()) for every li, or is any other ways for using mdl-menu like select element?
Use jquery's click event and bind it with the class. Also define an ID for your li elements so that you can get to know which element was clicked. look at the following example
$(".mdl-menu__item").click(function(){
var id = $(this).attr("id");
alert(id+"was clicked");
})
To demonstrate i have created a jsfiddle
I'm using jquery address to track changes with the browsers nav buttons and have hit a bump in the road. The plugin works great for simple html links but I have a dropdown menu that is triggering an address change when the parent node is clicked. The drop down menu looks like this:
<li id="messages"><a href="#" class="drop" >Messages</a>
<div class="drop2columns dropcontent">
<div class="col_2">
<ul>
<li><a id="msgs_received" href="#msgs_received">Inbox</a></li>
<li><a id="msgs_sent" href="msgs_sent">Sent</a></li>
</ul>
</div>
</div>
</li>
When I click the "Messages" portion to trigger my dropdown the location is getting set to "/" (I would assume because my href="#")
Is there a way to ignore this onclick event?
I've been thinking about creating an onClick event that gets/sets the same URL so it doesn't trigger jqueries address change method. This seems more like a hack then a solution though. Any thoughts?
In your JS, try this:
$("#messages").bind("click", function(e){
e.preventDefault();
});
I've been beating my head against my desk for the last two days over this one. I'm making an app that displays info from a db, the title/link, thumbnail, and time saved wrapped in an unordered list, like so: http://blog.madebycraig.com/images/full.jpg
What I'm trying to do is have a minimize button on the element, toggling the thumbnail and time saved on and off: http://blog.madebycraig.com/images/minimized.jpg I can accomplish this, but it's all or nothing. I click one minimize button, and everything goes. How can I contain it to just toggle items with a certain class name that are children of the div that the minimize button is in? I've tried .parent(), .child(), .next(), .prev(). I've thrown everything at it that I know. Now I turn to you, kind sirs (or madams). What am I doing wrong? Here's the ul I'm trying to run it on.
echo'
<li class="bookmarkContainer">
<img class="thumb" src="images/placeholder.png" />
<div class="title">'.$row['title'].'</div>
<div class="dt toggle">'.relativeTime($row['dt']).'</div><br />
<a class="collapse" href="#">hide</a>
<a class="delete" href="?delete='.$row['id'].'" id="'.$row['id'].'">Delete Bookmark</a>
</li>';
You can do it using .closest() and .find() like this:
$(".collapse").click(function() {
$(this).closest('.bookmarkContainer').find('.toggle').toggle();
});
If you have lots of these, or they are changing via ajax (seems like a search-resulty thing), use .live() or .delegate() like this:
$(".collapse").live('click', function() {
$(this).closest('.bookmarkContainer').find('.toggle').toggle();
});
//or...
$("#ulID").delegate('.collapse', 'click', function() {
$(this).closest('.bookmarkContainer').find('.toggle').toggle();
});
I'm working on a project for an MMO "guild" that gives members of the guild randomly generated tasks for the game. They can "block" three tasks from being assigned.
The lists will look something like this:
<ul>
<li class="blocked">Task that is blocked</li>
<li class="blocked-open">Click to block a task</li>
<li class="blocked-open">Click to block a task</li>
</ul>
The blocked-open class means they haven't chosen a task to block yet. The blocked task means they've already blocked a task. When they click the list item, I want this to appear:
<ul class="tasks-dropdown no-display">
<li><h1>Click a Task to Block</h1></li>
<ul class="task-dropdown-inner">
<?php
//output all tasks
foreach($tasks as $task) {
echo '<li class="blocked-option"><span id="'.$task.'">'.$task.'</span></li>';
}
?>
<br class="clear" />
</ul>
</ul>
I don't quite know how, when the user clicks the .blocked-open line-item, to show that dropdown under only the one they clicked.
My jQuery looked like this before I became confused.
$("li.blocked-open").click(function() {
$("ul.no-display").slideToggle("900");
});
$(".blocked-option span").click(function() {
var task = $(this).attr('id');
alert("You have blocked: " + task);
location.reload(true);
});
I tested it by putting the dropdown under a line item in the code, and it worked fine, but when I have more than one dropdown in the code, clicking on one line item toggles all the dropdowns. I'm not sure what to do. :-p.
Your problem is caused because you currently have no way of uniquely identifying which dropdown you want to appear and that links it with the item you've clicked.
An easy way, but not very flexible, would be to assign a simple numerical id to each "blocked" or "blocked-open" item. Then give each dropdown an id of something like eg dropdown_1. Then adjust your code to something like this:
$("li.blocked-open").click(function() {
var id = $(this).attr("id");
$("#dropdown_"+id).slideToggle("900");
});
I haven't tested this, but it should work... I think :)