Prestashop v1.6 default-bootstrap theme, product-list.tpl file.
I have a button add to cart and div with some smarty code:
<a class="ajax_add_to_cart_button" href="....">
<div id="div1">{if $added}Added{else}not added{/if}</div>
Now when I click to link I want to only refresh div content.
I already try some code finding in stack but my knowledge is still not enought.
What I try and it is not work:
$(document).on('click', '.ajax_add_to_cart_button', function() {
$("#div1").load() /*also $("#div1").load("#div1")*/
});
and:
$("#div1").load(location.href + " #div1");
and few more.
EDIT, also this is not work for me:
$(function(){
$(document).on('click', '.ajax_add_to_cart_button', function(e) {
e.preventDefault();
$("#div1").load($(this).attr("href")); /*and this: $("#div1").load($(this).attr("href #div1"));*/
return false
});
});
EDIT2: When I try this code is half working
$(document).ready(function(){
$(".ajax_add_to_cart_button").click(function(){
$("#div1").html("result reloaded successfully");
});
});
why half? Because text is display but only in first product, and it is no matter which one product I click, and also I try switch html() to load() or refresh() but then is not working.
EDIT3
$(document).ready(function(){
var productid = "{product.id_product}"
$(".ajax_add_to_cart_button").click(function(){
$("#div1" + productid).html("result reloaded successfully");
});
});
<div id="div1{product.id_product}">{if $added}Added{else}not added{/if}</div>
It is display info in all product, all container in product have now different id.
try following and check if it works..
$(function(){
$(document).on('click', '.ajax_add_to_cart_button', function(e) {
e.preventDefault();
$("#one").load($(this).attr("href"));
return false.
});
});
I noticed you have wrong class in your selector. please check that too.
Mmm... I see... I guess your problem is that you use the same id for all the products. The DOM 'should' have a unique ID for one element, try another way, maybe a simple class as a selector, you couldn't use the same id for all that elements :)
For example (I'm assuming that your div have mybeautifuldiv class):
$(document).ready(function(){
$(".ajax_add_to_cart_button").click(function(){
$(".mybeautifuldiv").html("result reloaded successfully");
});
});
If you're trying to do this when there is a list of products (category page etc.) then you need to target a proper div. And you might not want to use id but class in your div.
<div class="my-custom-div">{if $added}Added{else}not added{/if}</div>
Is this div inside 'add to cart' anchor?
If it is then you need to target it:
$(document).ready(function(){
$(".ajax_add_to_cart_button").click(function() {
$(this).find('.my-custom-div').html('Content updated!');
});
});
If it is not then you can traverse to parent div of product and find your custom div inside it. For example in a category page of a default prestashop theme:
$(document).ready(function(){
$(".ajax_add_to_cart_button").click(function() {
$(this).closest('.product-container').find('.my-custom-div').html('Content updated!');
});
});
Related
I'm trying to sort the list with this jPList library.
The problem is that the library does it with a select option, that I don't like. I'm trying to use a button to order my list.
Here on my JsFiddle you can see a demo I created, my list is bigger, but similar:
http://jsfiddle.net/Danny182/wsauumra/3/
I'm using the function .html to insert inside the html the code they use on this page to sort the list.
If I put manually inside the #sos div it works, but doing it with the button click and .html doesn't.
Can someone help me?
$('.sortName').click(function () {
$('#sos').html('<div class="hidden" data-control-type="default-sort" data-control-name="sort" data-control-action="sort" data-path=".title" data-order="asc" data-type="text"> clicked </div>');
});
SOLVED:
using this code works, I had to recall the function after clicking the button:
http://jsfiddle.net/Danny182/wsauumra/4/
$('#demo').jplist({
itemsBox: '.list',
itemPath: '.list-item',
panelPath: '.jplist-panel'
});
$('.sortName').click(function () {
$('#sos').html('<div class="hidden" data-control-type="default-sort" data-control-name="sort" data-control-action="sort" data-path=".title" data-order="asc" data-type="text"> clicked </div>');
$('#demo').jplist({
itemsBox: '.list',
itemPath: '.list-item',
panelPath: '.jplist-panel'
});
});
$('#main_div').on('click',".sortName", function() {
$('#sos').html(' clicked ');
});
Im kind of new to javascript, and I have tried for several hours now to make this fadeIn function to work.
First of all, look at my code here.
I have also included the following in my header:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
This is how I want the page to work,
When a user enters the site, the home selection will fadein
The menu is based on <ul> and <li> itmes for categories and in each category we have different comapnies. Each category have a <a href="category-id"> and each company have a <a href='company-id'> to the div tag made later in the body.
A user should be able to switch between the menu options, and each time the time should fade in.
So the problem as you see in my code, it works on page load, but I cant choose anything from the menu.
Any suggestions would be helpful
If I understood correctly you wanted it to function something like this :
$('#menu a').click(function () {
$("#content div").hide(); //Hide all content
var id = $(this).attr('href');
$(id).fadeIn(); // Show content for current tab
});
You didn't need this line (it is deleting the id) :
$("#menu li").attr("href", ""); //Reset id's
This is line I don't even know what it's for:
$(this).parent().attr("href", "current"); // Activate this google parent!
If you want to add a class to the current active menu item, use something like
$(this).parent().addClass('active');
Also you don't need to add '#' because you already had that in you href atrribute:
$($(this).attr('href')).fadeIn(); // Show content for current tab
You can check what kind of id you're getting by alerting it or logging it :
var id = $(this).attr('href');
alert(id);
$(id).fadeIn();
Are you sure with this line of Code?
$("#menu li").attr("href", "");
You do not override your ID here. You remove your link href.
you are resetting the "href" attribute. Thus, when you try to make a fadeIn the "href" attribute value is changed to "current".
Those two lines:
$("#menu li").attr("href", ""); //Reset id's
....
$('#' + $(this).attr('href')).fadeIn();
are wrong because $(this).attr('href') is equal to "" (empty string)
also you made a mistake because you did
$("#content div:last").fadeIn(); // Show first tab content
but the command and what you expect are not coherent. Here you are using fadeIn on the last tab content instead of the first.
You can try something like this: http://jsfiddle.net/546Jn/4/
$(document).ready(function () {
$("#content div").hide();
$("#content div:first").fadeIn(); // Show first tab content
$('#menu a').click(function () {
$("div#content div").hide(); // Hide all pages
$('div' + page).fadeIn(); // Show content for current tab
});
});
How do I separate with all the icons still in the div element?
Basically, inside div, I have 4 things to click. The last was made to link for the whole div element click. The middle elements were for specific icon clicks. But now, for specific icon clicks, I want the clicks to connect to their own links. For example, if one clicks github png , it should go to github link, but now the google div link overwrites it. For whatever I click, I only connect to one link, which I do not intend.
Thanks
<script type="text/javascript">
$(document).ready(function(){
$(".Apps").click(function(){
window.open($(this).find("a").last().attr("href"));
return false;
});
});
</script>
<div class="Apps">
<p><b>Web Dev Project 3</b><br><i>(coming soon)</i></p>
<a href="https://github.com/" target="blank">
<img src="https://github.com/apple-touch-icon-114.png" width="30" height="30"/></a>
<a href="http://google.com" target="blank">
<img id="logo" src="http://cclub.slc.engr.wisc.edu/images/Under-Construction.gif" width="30" height="30"/></a>
</div>
There's really no such concept as an <a> being "connected with" a containing element. Instead of that, why not just catch "click" events on the <div> and filter out ones that aren't on the icons:
$('div.Apps').on("click", ":not(a img)", function() {
window.location = "http://google.com";
});
The way your markup is done, it's hard to tell how there'll be screen area that's not icons inside the container, but presumably you've got padding/margins or something.
Exclude the anchors:
$(".Apps").click(function(e){
if (! $(e.target).closest('a').length ) {
window.open($(this).find("a").last().attr("href"));
return false;
}
});
If I were you I would assign different ids for the div and the a link, then inside the a specific link instructions just prevent the default behaviour of the click;
$(´#aLinkId´).on(´click´, function(){
event.preventDefault();
event.stopPropagation();
window.open(whatever here);
});
$(´#aDivId´).on(´click´, function(){
window.open(other whatever here);
});
I this what you are looking for?
http://jsfiddle.net/gespinha/WPsbb/2/
$(document).ready(function () {
$(".Apps").click(function () {
window.open($(this).find("a").last().attr("href"));
return false;
});
$(".Apps > a").click(function () {
window.open($(this).attr("href"));
return false;
});
});
Will try to explain what i mean :)
I have two hidden divs that opens with jquery, they both works quite good... when I'm using them separated... But if I open the div when the other one is open, the first one keeps being open in the background... I would like that one to close.
Is there an if else function i can use ?
This is what i have so far.
$(document).ready(function(){
$(".contactDiv").hide();
$(".show_hide_contact").show();
$('.show_hide_contact').click(function(){
$(".contactDiv").slideToggle();
});
});
$(document).ready(function(){
$(".loginDiv").hide();
$(".show_hide_login").show();
$('.show_hide_login').click(function(){
$(".loginDiv").slideToggle();
});
});
I have created a jsfiddle to show some more.
http://jsfiddle.net/h2Hfg/
Just slide the other div too:
$('.show_hide_contact').click(function() {
$(".contactDiv").slideToggle();
$(".loginDiv").slideUp();
});
$('.show_hide_login').click(function(){
$(".loginDiv").slideToggle();
$(".contactDiv").slideUp();
});
Very nice of you to include the jsFiddle :)
I am not sure there is a function exactly that does that but you can do it manually. Check it out
$(document).ready(function(){
$(".contactDiv").hide();
$(".loginDiv").hide();
$(".show_hide_contact").show();
$(".show_hide_login").show();
$('.show_hide_contact').click(function(){
$(".loginDiv").hide();
$(".contactDiv").slideToggle();
});
$('.show_hide_login').click(function(){
$(".contactDiv").hide();
$(".loginDiv").slideToggle();
});
});
Found out how to.
I just added the hide function to the divs.
$('.show_hide_contact').click(function(){
$(".contactDiv").slideToggle();
$(".loginDiv").hide(); /* there is hiding prev opened tag*/
});
Im trying to fade out a DIV when clicking a link within the DIV itself. Here is my code:
$(".hideinfo").click(function () {
var parentLink = $(this).parent().parent();
$(parentLink).fadeTo("slow", 0);
});
The reason I'm not specifying the ID directly is because I want to use this to fade out multiple DIVs with different ID's.
The above code was returning the ID when I setup an alert but not fading the DIV out or anything else I tried to so... any help here would be appreciated. The HTML is:
<div id="First-Block" class="item">
<p>text here</p>
<p>Back</p>
</div>
Thank you!
You should use fadeOut("slow") instead.
Try changing your code to:
$(".hideinfo").click(function () {
var parentLink = $(this).parent().parent();
$(parentLink).fadeOut("slow");
});
To improve this even further you can shorten your code to:
$(".hideinfo").click(function() {
$(this).closest(".item").fadeOut("slow");
});
Just to mention as well that by clicking on an anchor it will jump to the top of the page using #. I would take a look at .preventDefault()
You can also check out the API here -> http://api.jquery.com/fadeOut/
Use fadeOut() instead since your primary goal is to affect the overall visibiltity not a given opacity.
jsBin demo
$(".hideinfo").click(function( e ){
e.preventDefault(); // prevent default anchor link behavior
$(this).closest('.item').fadeTo(400, 0);
});
Additionally try to wrap the above into a document ready :
$(function(){
// code here.
});