Develop Reference

Jquery ajax clear before reload

I know this is a topic discussed here many times, but none of the solution of the site have helped me....
I'm having two nav items and both of them load two different PHP files by using jquery ajax. I'm using jquery mobile.
My problem is that whenever i click on the other nav item the other one doesn't clear itself, so basically i get div on top of div.
I've tried .html(""); but hasn't worked for me so far.
HTML:
<div id="tabs">
<ul>
<li><a class="classloader1">Upcoming</a></li>
<li><a class="classloader2">History</a></li>
</ul>
</div>
<div id="content"></div>
JS:
$(".classloader1").click(function(){
$("#content").load("get.php");
})
$(".classloader2").click(function(){
$("#content").load("history.php");
})

I would try a different tab structure like
<div id="tabs">
<ul>
<li><a class="classloader one">Upcoming</a></li>
<li><a class="classloader two">History</a></li>
</ul>
</div>
where both elements share the classloader class name. Then I would use jQuery .html() to load the content but returning the specific file depending on the clicked tab like :
$(".classloader").on("click", function (event) {
var file = $(event.target).hasClass("one") ? "get.php" : "history.php";
$("#content").html(function () {
return $(this).load(file);
});
});
If you have more than two tabs, you could use a switch statement to set the value of the file var.
See DEMO
UPDATE : see DEMO using jQuery mobile.

How do I get angular.js to not over-ride another libraries functionality in regards to links?

I am trying to incorporate this script from the Uikit library which helps organize images based on type. (Clicking on the nav above the images, will group them based on a specific type of your choosing) That link demonstrates how it should work. Now if you go to the page I am developing, you'll see the links seem to jump to another page.
I have tried to glean from this link how to handle links but it seems to circle around in page links.
Any suggestions?
UPDATE 11.15.2015
I found this article which illustrates an approach on how to integrate a jQuery plugin in your Angular environment.
HTML:
<ul class="uk-subnav uk-subnav-pill" switcher="{connect:'#switcher-content'}">
<li class="uk-active"><a href="#" >All</a></li>
<li><a href="#" >Logo</a></li>
<li><a href="#" >Web</a></li>
<li><a href="#" >App</a></li>
</ul>
JS:
rustyApp.directive('switcherContent', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
$(element).toolbar(scope.$eval(attrs.switcherContent));
}
};
});
But alas it didn't work. Clicking the sifter, still redirects me to the home page.

You can try adding the target="_self" attribute to your <a> tags to bypass angular routing. Second suggestion would be try getting the photo library to make those links out of <button> tags instead of <a> tags.

Tripadvisor widget fails to load on ajax page loading

I am trying to add a Tripadvisor widget (rave) to my page which is loaded via Ajax.
Here is the widget code:
<div id="TA_cdsscrollingravewide869" class="TA_cdsscrollingravewide">
<ul id="1NcDZBZ" class="TA_links 8dTZRew">
<li id="ZweVlS" class="3cqMCWiB">Read 37 reviews of <a target="_blank" href="http://www.tripadvisor.com/Restaurant_Review-g188590-d946177-Reviews-Bond-Amsterdam_North_Holland_Province.html" onclick="ta.cds.handleTALink($cdsConfig.getMcid()); return true;">Bond</a></li>
</ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=cdsscrollingravewide&uniq=869&locationId=946177&lang=en_US&border=true&shadow=true&backgroundColor=white"></script>
Only when the page loads the first time it's get rendered. But after an ajax load it doesn't.
I tried to use jQuery's getScript function but it doesn't help. Even manually deleting the added script en link nodes from the head before executing the script again doesn't help.
Can anyone help me fixing this please?

The solution:
$.getScript('//www.tripadvisor.fr/WidgetEmbed-selfserveprop?nreviews=6&uniq=&iswide=true&locationId=' + tid + '&rating=true&popIdx=true&border=false&writereviewlink=true&lang=fr', function() {
if (typeof(window.taValidate) != 'undefined') {
window.taValidate();
}
});

Perhaps the html iframe is a method.
ex.
<iframe src="tripadvisor.php" scrolling="no" frameborder="0"></iframe>
tripadvisor.php
<div id="TA_cdsscrollingravewide869" class="TA_cdsscrollingravewide">
<ul id="1NcDZBZ" class="TA_links 8dTZRew">
<li id="ZweVlS" class="3cqMCWiB">Read 37 reviews of <a target="_blank" href="http://www.tripadvisor.com/Restaurant_Review-g188590-d946177-Reviews-Bond-Amsterdam_North_Holland_Province.html" onclick="ta.cds.handleTALink($cdsConfig.getMcid()); return true;">Bond</a></li>
</ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=cdsscrollingravewide&uniq=869&locationId=946177&lang=en_US&border=true&shadow=true&backgroundColor=white"></script>

A far from optimal solution which I had to adopt in a similar scenario was based on the following logic:
Invoke the tripavisor script just once and load the widget inside an hidden html element on whathever page the user lands (so the page is not rendered by an ajax request).
When the page where you want the widget placed is called by ajax, if the request is successfully completed, check if the widget is already in DOM, clone it and inject or append it to the ajax generated piece of html.

I found another solution. If you have the widget HTML on the page, or if you added it via jQuery to the page, e.g. this one:
<div id="TA_cdsscrollingravewide869" class="TA_cdsscrollingravewide">
<ul id="1NcDZBZ" class="TA_links 8dTZRew">
<li id="ZweVlS" class="3cqMCWiB">Read 37 reviews of <a target="_blank" href="http://www.tripadvisor.com/Restaurant_Review-g188590-d946177-Reviews-Bond-Amsterdam_North_Holland_Province.html" onclick="ta.cds.handleTALink($cdsConfig.getMcid()); return true;">Bond</a></li>
</ul>
</div>
you can execute this script below, and it will load the widget:
$.getScript("https://www.tripadvisor.com/WidgetEmbed-cdsscrollingravewide", function(){
if (typeof(window.taValidate) != 'undefined') {
window.taValidate();
}
});
Please note that for example in my case the widget class is TA_cdsratingsonlynarrow, so
for me the script URL looks like this:
https://www.tripadvisor.com/WidgetEmbed-cdsratingsonlynarrow

Cannot redirect to any website - jQuery

i'am beginning with jQuery and really need help. I have image with hover, which show two buttons - edit and delete. And after click on gallery-edit button i just need redirect to any website. But it doesnt have any effect. This is my code:
<ul class="thumbnails galler">
<li id="image-1" class="thumbnail">
<a style="background:url({$basePath}/images/products/item1.jpg)" title="Sample Image 1" href="{$basePath}/images/products/item1.jpg"><img class="grayscale" src="{$basePath}/images/products/item1.jpg" alt="Sample Image 1"></a>
</li>
</ul>
<script type="text/javascript">
//gallery controlls container animation
$('ul.galler li').hover(function(){
$('img',this).fadeToggle(1000);
$(this).find('.gallery-controls').remove();
$(this).append('<div class="well gallery-controls">'+
'<p><i class="icon-edit"></i> <i class="icon-remove"></i></p>'+
'</div>');
$(this).find('.gallery-controls').stop().animate({
'margin-top':'-1'
},400,'easeInQuint');
});
//gallery edit
$('.thumbnails').on('click','.gallery-edit',function(e){
$.get(this.href);
return false;
});
</script>

$.get does not redirect, it does an ajax request for the url provided. You should use location.href = {url} instead.

If you know the href, you can use native javascript to do this instead.
window.location.href = //insert url here;
But the problem with your code is that you are trying to retrieve the href through the this keyword. The this keyword refers to the event, not the actual anchor element you're trying to reference. To get the link, you want to use e.currentTarget.href instead.
EDIT: For some stupid reason, I didn't notice you were also using $.get. That function is not useful for what you want. Just use the native properties provided by the Window object to redirect the browser, as I and at least one other poster has shown you above.

Keep added class with JQuery through pages refresh

I have the following JQuery Code concerning my tabs :
$("#onglet>ul>li").click(function(){
$("#onglet ul li").removeClass('Selectionne').addClass("OngletPrincipal");
$(this).removeClass().addClass('Selectionne');
$(this).unbind('mouseenter mouseleave');
it works, but as soon as I click on a tab which leads me to another page, the tab gets its original class.... so its appearance finally doesn't change..
<div id="onglet">
<ul >
<li class="OngletPrincipal">
Accueil
</li>
<li class="OngletPrincipal">
Catalogue
</li>
<li class="OngletPrincipal">
Nous
</li>
<li class="OngletPrincipal">
Contacts
</li>
<li class="OngletPrincipal">
Espace client
</li>
</ul>
</div>
how I am supposed to keep the tab with the "Selectionne" class ?
....
thankkkkkk you !

If you are loading a new static page, and the selected tab is just a link to that page, why isn't the selected tab hard coded into each page? If your serving your pages dynamically, why isn't the server set the selected class when it generates the page? It looks like these tabs are navigating between a set of static html pages, so I'm not sure why you need to set this class after the page loads using JavaScript.
But, if there is some reason I'm missing for setting this after page load you could look into using jquery address or some other history type plugin to persist the tab selection in the url so that you can parse it after the page loads, something like http://fake.com/foo.html#/tab1. Or, without the plugin you could just check which page you selected on load and set the tab that way:
$(document).ready(function(){
var loc = window.location.toString();
var page = loc.substring(
loc.lastIndexOf('/',0) + 1,
loc.length);
$('#onglet>ul>li>a[href$="' + page + '"]').parent().addClass('Selectionne');
});

If you completely reload/load the page in the href, it's another page, hence everything is reloaded and your by js added classes are back to the initial classes.
You will have to remember it serverside, or pass it in a url parameter that you parse in js and see what is requested, activating the class on the right li.
Or dynamically load the content and stay on the same page.