Jquery: I am using left side panel(angular js) and on click on the button list i want to change the content on the right side which is a div tag without page reload.
<div id="container"></div>
I am using 3 jsp pages which should be replaced in the container on the button click.These 3 jsp pages are linked through href.
<a class="click" href="Home" rel="http://localhost:8080/Dummy/Status.jsp">Home</a>
<a class="click" href="about" rel="http://localhost:8080/Dummy/dummy2.jsp">About</a>
<a class="click" href="Contact" rel="http://localhost:8080/Dummy/dummy3.html">Contact</a>
Problems I am facing: When it is a simple html
(ex <p>hello world</p>)
it loads the content perfectly but when I load my jsp page which is developed using angular js it gives me a WARNING: Tried to load angular more than once,and the website doesnt respond.
This is my jquery to load content:
$('.click').click(function(e){
e.preventDefault();
var targetUrl = $(this).attr('rel');
$.ajax({
url: targetUrl,
type: "GET",
success:function(){
$('#container').load(targetUrl);
return false;
},
error:function (){
alert("testing error");
}
});
});
My concern: Do i need to use ng-route to use this functionality. Your help will be appreciated. Please advice.