Develop Reference

How to show another html in div content

I have one fixed left side menu bar with 5 menus in layout.html page. each li contains separate html file.I am loading .body-content from external HTML.My doubt is when I click on menu list, regarding content should be displayed inside of body content.But in my code its navigating to new page. I know that is because of I gave directly file path to href.
can anyone tell me how to change Only .body-content data at the time of href is clicked?
layout.html
<ul class="nav main-menu">
<li class="dropdown" ng-repeat="parent in menu">
<a href="home.html" class="dropdown-toggle">
<i class="fa fa-tachometer"></i>
<span class="hidden-xs">Dashboard</span>
</a>
</li>
<li class="dropdown" ng-repeat="parent in menu">
<a href="usermanagement.html" class="dropdown-toggle">
<i class="fa fa-calendar"></i>
<span class="hidden-User Management</span>
</a>
</li>
</ul>
<div id="content">
<div class="body-content">
</div>
</div>
home.html
<h2>Sample content</h2>
<p>This HTML tutorial contains hundreds of HTML examples.
With our online HTML editor, you can edit the HTML, and click on a button to view the result.</p>
usermanagement.html
<h2>Sample content</h2>
<p>jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn.</p>

Just use the following jquery (ajax) function to load the html of another page in given div, you can also call this on page onload or any event.
$(function() {
$(".dropdown > a").click(function(e){
$( ".body-content" ).load( "usermanagement.html", function() {
alert( "page content has been loaded" );
});
});
}
It seems that you are using AngularJS in your code, you can also use the ng-include to load html page content as following way,
<div class="body-content" ng-include="usermanagement.html"></div>

What are you looking for is AJAX. Use ajax() method preferably because load() is actually deprecated, and get()/post() methods mentionated by the other users can be specified in ajax()(by default is GET).
You will also need html() to set the content of the div and preventDefault() method to stops the default action of the anchor from happening:
$(document).ready(function(){
$(".dropdown > a").click(function(e){
e.preventDefault()
var val = $(this).attr("href")
$.ajax({
url: val,
success: function(result){
$(".body-content").html(result);
}
});
});
});

You could use $.get() to get the data and html() to add it to your div.
$.get( "file.html", function( data ) {
$('.body-content').html( data );
});
To make your menu dynamic, I suggest to bind a function to all the anchors inside .main-menu:
$(function() {
$('.main-menu a').on('click', function(e) {
e.preventDefault(); /* prevent the link from opening */
var url = $(this).attr('href'); /* get the url */
$.get( url, function( data ) {
$('.body-content').html( data );
});
});
});

jquery .click() function on specific attribute, returns multiple elements

I have a problem with jquery and the .click() function, when clicking on a <li data-link-url="..."> element, that shares the data-link-url attribute.
This is my HTML structure:
<nav class="fullListHover">
<ul>
<li class="oneHub">
<ul>
<li data-link-url="... /templateA.html">
<ul>
<li data-link-url="... /templateB.html"></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
And this is my jquery click() function:
<script type="text/javascript">
$("[data-link-url]").click(function(){
window.location.href=$(this).attr("data-link-url")
});
</script>
When I click on the li-tag with ".../templateB.html" I get redirected to ".../templateA.html".
So I debugged the whole thing and logged the $(this) variable. When I clicked on ".../templateB.html" the output was:
.../templateB.html
.../templateA.html
It seems like, the .click() function runs a second time.
How can I select just the templateB or prevent the click function to run a second time ?
P.S.: I hope my question is understandable. English isn't my primary language.

Your issue is because you have nested li elements with the data-link-url attribute, hence the click handler is invoked once for each element in the hierarchy as the event bubbles up the DOM. To fix this, call stopPropagation() in the event handler:
$("[data-link-url]").click(function(e) {
e.stopPropagation();
window.location.href = $(this).data('link-url');
});

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.

Click button with hide and show

Need get this fixed as I've been trying for a month. Can you look at my website for the button that doesn't work?
http://www.insightenergy.eu/about-us.php
What is wrong with it?

try the following code to expand or minimize the container.
$('.expander').click(function(){
if(condition){
$('.expander').next().show();
}
else{
$('.expander').next().hide();
}});

You need to attach an event to your buttons, and when I debug I get nothing on click.
Looking at your web I think you maybe need something like that:
Your HTML structure is similar to this one:
HTML
<ul class="blog-post-full-list">
<li >
<div >0</div>
<div class="expandible">Content</div>
</li>
<li >
<div >1</div>
<div class="expandible">Content</div>
</li>
<li >
<div >2</div>
<div class="expandible">Content</div>
</li>
<li >
<div >3</div>
<div class="expandible">Content</div>
</li>
</ul>
So in your code you can use the JQuery function toggle:
JS
$(".blog-post-full-list>li").on('click',function(){
/*
*The object this is the li you've clicked on
*The jQuery function toggle swiches the display ON OFF
*The number 300 means the duration of the animation. If you don't
* want to animate it just remove the parametter
*/
$(this).find(".expandible").toggle(300);
})
http://jsfiddle.net/vzkUL/2/
You can add it into a JS file or inline in your code as follows:
<script>
//JQuery onReady
$(function(){
$(".blog-post-full-list>li").on('click',function(){
//The object this is the li you've clicked on
//The jQuery function toggle swiches the display ON OFF
//The number 300 means the duration of the animation. If you don't want to animate it just remove the parametter
$(this).find(".expandible").toggle(300);
})
});
</script>

preventDefault() on an <a> tag

I have some HTML and jQuery that slides a div up and down to show or hide` it when a link is clicked:
<ul class="product-info">
<li>
YOU CLICK THIS TO SHOW/HIDE
<div class="toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
$('div.toggle').hide();
$('ul.product-info li a').click(function(event){
$(this).next('div').slideToggle(200);
}
My question is: How do I use preventDefault() to stop the link acting as a link and adding "#" to the end of my URL & jumping to the top of the page?
I can't figure out the right syntax, I just keep getting an error saying
preventDefault() is not a function.

Try something like:
$('div.toggle').hide();
$('ul.product-info li a').click(function(event) {
event.preventDefault();
$(this).next('div').slideToggle(200);
});
Here is the page about that in the jQuery documentation

Set the href attribute as href="javascript:;"
<ul class="product-info">
<li>
YOU CLICK THIS TO SHOW/HIDE
<div class="toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>

It's suggested that you do not use return false, as 3 things occur as a result:
event.preventDefault();
event.stopPropagation();
Stops callback execution and returns immediately when called.
So in this type of situation, you should really only use event.preventDefault();
Archive of article - jQuery Events: Stop (Mis)Using Return False

1 - Easy way:
Click Me
2 - using void(0):
Click Me
3 - Using preventDefault():
Click Me
4 - Yet another way of doing this in Javascript using inline onclick, IIFE, event and preventDefault():
Click Me

Alternatively, you could just return false from the click event:
$('div.toggle').hide();
$('ul.product-info li a').click(function(event){
$(this).next('div').slideToggle(200);
+ return false;
});
Which would stop the A-Href being triggered.
Note however, for usability reasons, in an ideal world that href should still go somewhere, for the people whom want to open link in new tab ;)

This is a non-JQuery solution I just tested and it works.
<html lang="en">
<head>
<script type="text/javascript">
addEventListener("load",function(){
var links= document.getElementsByTagName("a");
for (var i=0;i<links.length;i++){
links[i].addEventListener("click",function(e){
alert("NOPE!, I won't take you there haha");
//prevent event action
e.preventDefault();
})
}
});
</script>
</head>
<body>
<div>
<ul>
<li>Google</li>
<li>Facebook</li>
<p id="p1">Paragraph</p>
</ul>
</div>
<p>By Jefrey Bulla</p>
</body>
</html>

<ul class="product-info">
<li>
YOU CLICK THIS TO SHOW/HIDE
<div class="toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
Use
javascript:void(0);

After several operations, when the page should finally go to <a href"..."> link you can do the following:
jQuery("a").click(function(e){
var self = jQuery(this);
var href = self.attr('href');
e.preventDefault();
// needed operations
window.location = href;
});

Why not just do it in css?
Take out the 'href' attribute in your anchor tag
<ul class="product-info">
<li>
<a>YOU CLICK THIS TO SHOW/HIDE</a>
<div class="toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
In your css,
a{
cursor: pointer;
}

If stopping the propagation of the event doesn't bother you, just use
return false;
at the end of your handler. In jQuery it prevents the default behaviour and it stop the event bubbling.

You can make use of return false; from the event call to stop the event propagation, it acts like an event.preventDefault(); negating it. Or you can use javascript:void(0) in href attribute to evaluate the given expression and then return undefined to the element.
Returning the event when it's called:
...
Void case:
...
You can see more about in: What's the effect of adding void(0) for href and 'return false' on click event listener of anchor tag?

In Javascript you can use it
window.event.preventDefault();
It works in my case. write the above line into your function.