Why not load my external content in a HTML wih jquery? - javascript

I have a HTML page with a vertical menu. I would like to click on a menu item to open between div tag content item.
This is the HTML
<div id="navigation">
<ul id="list-links">
<li ><a id="pollo" href="">Pollo</a></li>
<li><a id="tacchino" href="">Tacchino</a></li>
<li><a id="prodotti" href="">Prodotti</a></li>
</ul>
<div id="contentPro">
</div>
</div>
And this the JS:
$('#list-links li a' ).click(function(){
$clicked = $(this);
var idToLoad = $clicked.attr("id")
var url=idToLoad+'.html';
$('#contentPro').load(url);
});
Why the external HTML don't load between DIV tag??thanks

Wrap your code inside ready event like
$(document).ready(function(){
$('#list-links li a' ).click(function(e){
e.preventDefault();
$clicked = $(this);
var idToLoad = $clicked.attr("id")
var url=idToLoad+'.html';
$('#contentPro').load(url);
});
});

When you click on anchor tag <a> page gets redirected. You have to stop that action using event.preventDefault();
Here is the updated code
$('#list-links li a' ).click(function(event){
event.preventDefault();
$clicked = $(this);
var idToLoad = $clicked.attr("id")
var url=idToLoad+'.html';
$('#contentPro').load(url);
});
If the problem is not solved then you should check whether the path for pollo.html, tacchino.html and prodotti.html is correct?

Related

.load() not working on ul li click

here is my code
$(document).ready(function(){
$("#work").click(function(){
$("#container").load("about/work.html");
});
$("#profile").click(function(){
$("#container").load("profile.html");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a id="work" href="">work</a></li>
<li><a id="profile" href="">profile</a></li>
</ul>
<div id="container"></div>
when i click on work or profile requested page just flashes in container div and sometime stays in but if i run same script on button click it loads page without any problem. How can i make it work with li ?
Add event.preventDefault
$(document).ready(function(){
$("#work").click(function(event){
event.preventDefault(); //changed here
$("#container").load("about/work.html");
});
$("#profile").click(function(event){
event.preventDefault(); //changed here
$("#container").load("profile.html");
});
});
There are 2 things to be changed here.
1) Try not leaving your href value empty. If you do then the browser will redirect to the same page. Give it a value # if possible href="#"
2) There is preventDefault() function missing from your <a> click event
$(document).ready(function(){
$("#work").click(function(e){
e.preventDefault();
$("#container").load("about/work.html");
});
$("#profile").click(function(e){
e.preventDefault();
$("#container").load("profile.html");
});
});
try to on click
$(document).ready( function() {
$("#work").on("click", function() {
$("#container").load("about/work.html");
});
});

Changing the website-url to http://my.url#menuitem on click on menu item?

I'm writing a small website where I already implemented a JavaScript code to change to content of a div if an item in the menu bar is clicked. I know have the problem, that if someone refreshes the website, they are at the start-page again. I want to change this so the name of the menu item is added to the url with a # in front of it. Wikipedia does this in some way if you click on an item in the content-overview of an article.
My question is now how I can achieve this?
This is my current JavaScript code:
$(function() {
$('#menu ul li a').on('click', function(e) {
e.preventDefault();
var page = $(this).attr('href');
$('#content').load(page);
});
});
And this the menu part of my HTML:
<div id="menu">
<ul>
<li>Über mich</li>
<li>Kinesiologie</li>
<li>Körbler Symbole</li>
<li>Energiearbeit</li>
<li>Ernährungsberatung</li>
<li>Diätberatung</li>
<li>Food Coach</li>
<li>Heilkräuterberater</li>
<li>Heilkräuterprodukte</li>
<ul>
<li>Salben</li>
<li>Öle</li>
<li>Pflege</li>
<li>Bad/Dusche</li>
<li>Allerlei</li>
</ul>
</ul>
</div>
And sorry for the bad description, I have absolutely no idea how to call this.
You can try this:-
At first add an attribute in the menu.
<div id="menu">
<ul>
<li data-btn-name="ueber_mich">Über mich</li>
<li data-btn-name="kinesiologie">Kinesiologie</li>
</ul>
</div>
At the time of clicking on the menu change the location hash of the page
$(function() {
$('#menu ul li a').on('click', function(e) {
e.preventDefault();
var page = $(this).attr('href');
window.location.hash = $(this).attr('data-btn-name');
$('#content').load(page);
});
});
At the time of opening the page first time, load the content depending on the hash.
$('document').ready(function(){
if(window.location.hash){
$('#content').load('./content/'+window.location.hash+'.html');
}
})
you can simply use this if text name is same as file name:
$(function() {
$('#menu ul li a').on('click', function(e) {
e.preventDefault();
var page = $(this).attr('href');
window.location.hash = $(this).text();// if you want to show text of the li
console.log($(this).text());
$('#content').load(page);
});
});

Get id of element when click ( php, jquery, ajax, javascript )

I'm sorry, this is my first project and I'm learning a lot. So if someone can help me, I will be grateful.
I have this sidebar on my project, which contains rss links. I have to use ajax so each time when user click on any rss link, feeds will appear on screen.
This is my code for sidebar:
<div class="col-md-3">
<div class="well" style="width:300px; bottom: 0; top: 50px; position: fixed;">
<div id="sidebar-wrapper" style="overflow-y: scroll; overflow-x: scroll; height: 100%;">
<ul class="list-unstyled">
<li class="nav-header">
<a href="#" data-toggle="collapse" data-target="#userMenu">
<h5><b>Subscriptions </b><i class="glyphicon glyphicon-chevron-down"></i></h5>
</a>
<ul class="list-unstyled collapse in" id="userMenu">
<li><a id="id_1" href="#">Sub_1</a></li>
<li><a id="id_2" href="#">Sub_2</a></li>
<li><a id="id_3" href="#">Sub_3</a></li>
<li><a id="id_4" href="#">Sub_4</a></li>
<li><a id="id_5" href="#">Sub_5</a></li>
<li><a id="id_6" href="#">Sub_6</a></li>
<li><a id="id_7" href="#">Sub_7</a></li>
</ul>
</li>
</ul>
</div>
</div>
There is any chance to get id for each link when any of those links are clicked ?
Or I have to write a different function where to use ajax for each id ?
Can someone show me how to use ajax on this only once, not seven times ?
I have a div in my body tag : div id="changebodywithaxaj" and I want to change it with properly feeds for each link.
Thank you in advance.
You can get the ID by this way, for more details and ajax part, check this fiddle, good luck.
http://jsfiddle.net/ea51y1j5/
$("#userMenu").children('li').click( function() {
var rssId = $(this).children('a').attr('id');
});
Attach a click event listener to the li a elements; in the click handler you can get the id of the element click from the id property of this this.id. Then you can use that id as data in your ajax call. Also, pass the event object, e, and call e.preventDefault() to prevent the click from trying to follow the link -- in your case it would jump upto the top.
$('li a').on('click', function(e) {
e.preventDefault();
var Id = this.id;
// use id in ajax call
});
Just retrieve the value on click by using the $('clickedEl').attr('id')
link to jsfiddle -> http://jsfiddle.net/6ov1ydzv/
If I underestand correctly, you want to add a click event to all the links:
$('#userMenu a').on("click", ajaxCall);
and in the click event get the id of the clicked element and call an ajax function to paint the feeds on the screen:
function ajaxCall(){
var id = $(this).attr('id');
$.ajax({
url: "url",
data: { id : id },
success: paintFeedsOnScreen
})
}
It's that or I'm missing something?
How about this?
$('ul.list-unstyled').on('click', 'a', function() {
var ID = this.id;
//use the ID for your ajax call...
});
Even better, you could also use the element id since you have one, as below:
$('#userMenu').on('click', 'a', function() {
You can try this
$('li a').click(function(){
var id = this.id;
$.ajax({
url: // your url goes here
data:{id:id},
success: function(result){
}
});
});
So if you only want the ID from the link click on you can do:
$("#userMenu li a").on("click", function(){
var id = this.id;
// This is where you can do what ever with your id from that element.
return false; // This is so that it won't follow the link you're clicking and reload the page
// when you don't want to.
});
But perhaps you actually want the href from the link you click. Since it's a link you want to follow (with ajax) any way? You'd pretty much do the same thing:
$("#userMenu li a").on("click", function(){
var href = $(this).attr('href');
// do your ajax stuff here perhaps. With href as a link in your ajax call.
return false;
});
Add this code as a JS script on the page :
$("#userMenu a").click(function() {
$("#changebodywithajax").html(updateRSSWithID($(this).attr('id')));
});
Where updateRSSWithID(IDGoesHere) is a function that takes in the ID of the element and returns the appropriate body of text that corresponds to it.

How do direct links to tabs (made with JS) using #anchors?

I have site with some info-tabs based on a template. Tabs have some anchors example.com/#convey, but when I try to use direct link to some tab using #anchor - nothing happens, because the tabs are using JS.
JS:
/* fading the content in using a sub-menu */
$('.content-fade-menu a').click(function(){
var href = $(this).attr('href');
var target = $('.content-fade').find(href);
$('.content-fade-menu a').removeClass('active');
$(this).addClass('active');
$('.content-fade .content-fade-panel').hide();
$(target).fadeIn('fast');
return false;
});
HTML of menu:
<ul class="sub-menu content-fade-menu">
<li>Personal Injury</li>
<li>Employment</li>
</ul>
HTML of one non-active tab and one active tab:
<div class="content-fade">
<div class="content-fade-panel" id="pi" style="display: none;">
Non-active tab
</div>
<div class="content-fade-panel" id="employment" style="display: block;">
Active tab
</div>
</div>
What do I need to do, to make links, like example.com/#anchor, work?
Ok, I've found the answer.
//Take #anchor from url and find right block
var loc = window.location.hash;
if (loc != "") {
var href = loc;
var target = $('.content-fade').find(href);
//Unactivate first tab
$('.content-fade-menu a').removeClass('active');
//Activate right tab
$('.content-fade-menu a[href="'+href +'"]').addClass('active');
$('.content-fade .content-fade-panel').hide();
$(target).fadeIn('fast');
//Scroll to the h3 of the activated block
var zagolovok = $(target).find('h3');
$('html, body').animate({scrollTop: $(zagolovok).offset().top}, 300);
}
That's all.

jquery relative a href="#" remove display block

<li><b>Arbeiten</b></li>
This is the link. When i click this it change the id of the div(#section17) from display none to block.
<li><b>Feiern</b></li>
Now if i click on a other link(#section15) it should change the display:block from #section17 to display:none again and the link(#section15) to display block
The page doesnt reload just the url change a little bit.
Can anyone help me?
<script type="text/javascript">
$("a").click(function () {
var addressValue = $(this).attr("href");
$(addressValue).css("display","block");
});
</script>;
DEMO: http://jsfiddle.net/gvee/qba7e/
HTML
<ul>
<li><b>section 17</b>
</li>
<li><b>section 18</b>
</li>
<li><b>section 19</b>
</li>
</ul>
<div id="sections-container">
<div id="section17">section 17</div>
<div id="section18">section 18</div>
<div id="section19">section 19</div>
</div>
JQuery
$('a').click(function (e) {
// Prevent jumping to anchor
e.preventDefault();
// Hide all other sections
$('#sections-container > div').css('display', 'none');
// Show only one we want
var addressValue = $(this).attr('href');
$(addressValue).css('display', 'block');
});
You have to cancel the link's default behaviour:
$("a").click(function (event) {
event.preventDefault();
var addressValue = $(this).attr("href");
$(addressValue).css("display","block");
});
your code should be like this
<script type="text/javascript">
function HideShow(ctrl) {
var addressValue = $(ctrl).attr("href");
$(addressValue).css("display", "block");
}
</script>
<li><b>Arbeiten</b></li>
<li><b>Feiern</b></li>
If you give all sections a class of sectionClass then hide all elements with this class and show the relevant one on click you should be in business.
$("a").click(function (e) {
e.preventDefault();
var addressValue = $(this).attr("href");
$(".sectionClass").hide();
$(addressValue).show();
});

Categories

Resources