We Keep Coding

Refresh div content after click link

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

jquery not resetting menu navigation trigger

Currently I have this script that allows a button to open and close a menu whilst also changing it's class to do a little animation state change depending on open/close,... simple but effective.....
$(document).ready(function () {
var $navToggle = $('.nav-toggle');
$(".navbtn").click(function () {
if($navToggle.hasClass('active')){
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
$(this).addClass('active');
}
else{
$('#menu').multilevelpushmenu('expand');
$navToggle.addClass('active');
$(this).removeClass('active');
}
});
within the menu is a list with some options (standard) and when one is clicked it performs the following script based on its tag in the list... here's the html and js for that....
html
<li>
<i class="fa fa-briefcase"></i>Who are Musability?
</li>
JS
$('.fa-briefcase').parent().on('click', function () {
$("#colorscreen").remove();
$( '#menu' ).multilevelpushmenu( 'collapse' );
$("body").append('<div id="colorscreen" class="animated"></div>');
$("#colorscreen").addClass("fadeInUpBig");
$('.fadeInUpBig').css('background-color', 'rgba(13,135,22,0.1)');
$(".tile-area-main").css({width: "720px"}).load("content.html");
$('.nav-toggle').removeClass('active');
$(this).addClass('active');
});
all functions work great separately but when i introduce the functions for the button click fa-briefcase it wont allow me to open the menu again why is this ?
... on another note (therefore probably a new question at another time) this code is repetitive for all buttons and wonder if there is a way of standardizing the stuff that is repeated into one big function ? not sure about how i would go about it but it isn't the focus of this question , although any advice greatly recieved.

What does your content.html file contain?
Because if it contains other JavaScript it could be messing with it.
i.e.
Instead of $(".tile-area-main").load("content.html");
Try $(".tile-area-main").load("content.html#div");
Where #div is the div with the contents you want to load() in
EDIT: Just noticed your comments, seems like you've fixed it yourself, but glad my method worked :)

jQuery : other links inside div element link

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

Keep the hover state on the last clicked menu item

I have added a nice (jquery + css) navigation menu to my website, but there's a small problem. When I click on a menu item, the light blue box jumps back to the first item, and I would like the box to stay on the clicked item, but I have no clue how to make it happen.
Here's an example: http://jsfiddle.net/Stylock/ta8g4/
In that example, it actually works how I want, but on my website it doesn't work for some reason. Any help would be much appreciated.

You could add a class to the item like .selected
And in your css you apply the same style to the .selected than the :hover
http://api.jquery.com/addClass/
Or you cloud also modify the css using jQuery. But the first solution is more flexible.
Edit: Use the callback function to add/remove class, after your effect

This might be a solution to the right direction:
Onclick check if the menu already has a classname to get the background changed
remove that class from there
Add the class where you clicked
some minor css changes are needed and u will have solved it
have a great day

you can add a class when other page loads like to add on all pages like
this is bad one
<script type="text/javascript">
$(window).load(function () {
$("#index").toggleClass("highlight");
});
$(window).unload(function () {
$("#index").toggleClass("highlight");
});
</script>
site i used this at http://www.hoteloperaindia.com/
or like this short one to add this to master page
<script>
$(function () {
var loc = window.location.href; // returns the full URL
if (location.pathname == "/") {
$('#home').addClass('active');
}
if (/index/.test(loc)) {
$('#home').addClass('active');
}
if (/about/.test(loc)) {
$('#about').addClass('active');
}
if (/accommodation/.test(loc)) {
$('#accommodation').addClass('active');
}
if (/gallery/.test(loc)) {
$('#gallery').addClass('active');
}
if (/tariff/.test(loc)) {
$('#tariff').addClass('active');
}
if (/facilities/.test(loc)) {
$('#facilities').addClass('active');
}
if (/contact/.test(loc)) {
$('#contact').addClass('active');
}
});
</script>
site where i used this one http://rtshotel.in/
change it with your code

Window onhashchange not working

I have a web page that contains two articles. Upon loading this page, jQuery is used to hide the two articles and slide down the first one. User can click on the navigation tab to view the second article. Then go back to the first article by clicking the back button using the onhashchange event. The following is my HTML code:
<nav>
<a href='#1'>Article 1</a>
<a href='#2'>Article 2</a>
</nav>
<article id=1>
The first article.
</article>
<article id=2>
The second article.
</article>
And here is the javascript code:
function change(hash)
{
$('article:visible').slideUp();
if(hash != '')
{
$(hash).slideDown();
}
else
{
$('article').first().slideDown();
}
}
$('nav a').click(function(){
var id = $(this).attr('href');
change(id);
});
$('article').hide();
change(location.hash);
window.onhashchange = change(location.hash);
What was observed is that the page remains on the second article despite clicking the back button. I am using firefox 12.0 browser and don't know what is causing it not to work. Any help is appreciated. Thanks.

You might want to try:
window.onhashchange = change;
//and read location.hash in the change function instead
function change(){
var hash = location.hash;
...
}
or
window.onhashchange = function(){
change(location.hash);
}
window.onhashchange = change(location.hash);
If my JS ain't rusty, this fails because
calls change()
functions that have no return return undefined
you are assigning undefined to window.onhashchange - which is wrong because you're supposed to assign a function to an event.