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.
Related
I have a series of links on my page, each link has a unique id: library_vid_link-UNIQUE_ID. When clicked, I want to show a popup which shows information unique to that link.
For each link, I have a hidden popup, which, when clicked, the popup is displayed. The popup also has a unique id: less_preview_popup-UNIQUE_ID (the unique id for the link and popup both match).
Here is a sample of my html code:
<a href="#" class="library_vid_link" id="library_vid_link-801">CLICK HERE FOR MORE INFO
</a>
<div class="lesson_preview_popup" id="lesson_preview_popup-801">
THIS IS THE POPUP
</div>
<a href="#" class="library_vid_link" id="library_vid_link-802">CLICK HERE FOR MORE INFO
</a>
<div class="lesson_preview_popup" id="lesson_preview_popup-802">
THIS IS THE POPUP 2
</div>
Here is the jquery i'm currently using:
jQuery('.library_vid_link').click(function( event ) {
event.preventDefault();
$('.lesson_preview_popup').css('top', '25%');
$('body').addClass('no-scroll');
});
The issue I'm having is that when I click on a link, ALL the popups show, not just the one that relates to the link clicked. Is there a way to target the popup that belongs to the link clicked?
Use the data-attribute:
<a data-popup="lesson_preview_popup_801" ....
And
$("#"+$(this).data("popup")).show().css('top', '25%');
Using $(this).next() instead, assumes that the div to show is the next sibling of the link
Change this:
$('.lesson_preview_popup').css('top', '25%');
into this:
$(this).next().css('top', '25%');
Alternatively, save the ID (e.g. 801) in a new attribute, like this:
<a data-id="801" ...
Then, call the popup like this:
jQuery('.library_vid_link').click(function( event ) {
event.preventDefault();
var thisId = $(this).attr("data-id"); //get "801"
$('#lesson_preview_popup-' + thisId).css('top', '25%'); //construct the ID and call the popup by its ID
$('body').addClass('no-scroll');
});
Jquery .next() select next sibling of element. Use it like bottom example
$('.library_vid_link').click(function( event ) {
event.preventDefault();
$(this).next().show().css('top', '25%');
$('body').addClass('no-scroll');
});
$('.library_vid_link').click(function( event ) {
//event.preventDefault();
$(this).next().show().css('top', '25%');
//$('body').addClass('no-scroll');
});
.lesson_preview_popup {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="library_vid_link" id="library_vid_link-801">CLICK HERE FOR MORE INFO
</a>
<div class="lesson_preview_popup" id="lesson_preview_popup-801">
THIS IS THE POPUP
</div>
<a href="#" class="library_vid_link" id="library_vid_link-802">CLICK HERE FOR MORE INFO
</a>
<div class="lesson_preview_popup" id="lesson_preview_popup-802">
THIS IS THE POPUP 2
</div>
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");
});
});
hello i have jquery tabs and want to access them from url using # but know know how can I full fill with it
requirement is mywebsite.com/#show_page1 will show the page 1 content
and if access from mywebsite.com/#show_page2 will show the page 2 content
here is the my js code
$(window).load(function(){
$(document).ready(function(){
$("#nav_tabbed a").click(function(){
var id = $(this).attr('id');
id = id.split('_');
$("#menu_container div").hide();
$("#menu_container #show_"+id[1]).fadeIn();
// remove classes from all
$("a").removeAttr("style");
// add class to the one we clicked
$(this).css("background-color","#1aaede");
// stop the page from jumping to the top
return false;
});
$("#menu_container #show_page1").show();
});
});
and html i have is
<div id="nav_tabbed">
<a id="show_page1" style="background-color:#1aaede;">Page 1</a> <a id="show_page2">Page 2</a>
</div>
<div id="menu_container">
<div id="show_page1">
<!-- content here -->
</div>
<div id="show_page2">
<!-- content here -->
</div>
</div>
location.hash; will give you the hash value added in the addressbar and you can use it the way you need to. My suggestion is added below.
What seems to me you want to hightlight your link with the hash located in the browser's addressbar and respective div you want to show. If this is what you want to implement then you can try this with slight changes in the markup and js:
CSS:
.active {
color:red;
}
#menu_container div {
display:none;
}
HTML:
<div id="nav_tabbed">
<a href="#show_page1" class='active'>Page 1</a> <!--This lets you add hash in the addressbar-->
Page 2
</div>
<div id="menu_container">
<div id="show_page1" style='display:block;'>Page 1</div>
<div id="show_page2">Page 2</div>
</div>
JS:
$(function () {
// below works for hash added in the browser.
var hash = location.hash;
if(hash.length){
$('#nav_tabbed a').removeClass('active');
$('#menu_container div').hide();
$('#nav_tabbed a[href*="' + hash + '"]').addClass('active');
$('#menu_container div[id*="' + hash.slice(1) + '"]').show();
}
$(document).scrollTop(0);
// below works for click of the anchors
$('#nav_tabbed a').click(function(e){
e.preventDefault();
$(this).addClass('active').siblings('a').removeClass('active');
$('#menu_container div').hide();
$('#menu_container div[id*="'+this.getAttribute('href').slice(1)+'"]').show();
});
});
A sample fiddle.
your posts shows a little confusion on the topic.
so first for explanation:
there are two meanings of a #
in a url, the # is a reference to the location hash.
in jquery, the # is a reference to an element id.
you want to use the hash change in this case.
first of all... why do you wrap the window.load around the dom.ready event?
as far, as i understood, jquery's dom ready fires when the dom is ready, jquerys window.load fires, after all images, iframes, plugins etc. have been loaded. so a dom.ready inside a window.load is kind of unnecessary ...
next: ID's have to be unique - you can't give your anchor the same id as the assigned div!
so let's get down to business - the html:
<div id="nav_tabbed">
Page 1
Page 2
</div>
<div id="menuContainer">
<div id="page1" class="contentTab activeTab">123</div>
<div id="page2" class="contentTab">456</div>
</div>
we use activeLink and activeTab classes to determine which tab is currently open
the css just sets the background of the activeLink:
.activeLink {
background-color:#1aaede;
}
the js:
$(window).load(function(){
$(".contentTab:gt(0)").hide(); //on initial load, we hide all content tabs, despite the first one
$("#nav_tabbed a").click(function () { //the click handler for the navigation only toggles the class to change the background color
$(".activeLink").removeClass("activeLink");
$(this).addClass("activeLink");
})
if(location.hash) //here we check, if there already is a location hash set onload and then change to the desired tab
{
$(".activeTab").hide();
$(location.hash).show().addClass("activeTab");
}
});
//our hashchange event handles the loading of the desired tabs:
window.onhashchange = function () {
if(location.hash!=null) //this checks, wether the hashchange event has been fired, due to a deletion of the hash via url
{
$(".activeTab").hide().removeClass("activeTab"); //hide the current tab
$(location.hash).show().addClass("activeTab"); //show the clicked tab
}else //and per default show the first tab
{
$(".activeTab").hide().removeClass("activeTab"); //hide the current tab
$(".contentTab:first").show().addClass("activeTab"); //show the clicked tab
}
};
http://jsfiddle.net/ex46ndg1/3/
I have 3 or so button in my page which i need to show a social icon when user clicks on those links.
I used this jQuery
$('.one').on('click', function() {
$('.smenu').not($(this).next()).removeClass('share')
$(this).next().toggleClass('share');
});
<div id="sharing_area">
<ul class='smenu'>
<li class="facebook"><a target="_blank" onclick="return windowpop(this.href, 545, 433)" href="https://www.facebook.com/sharer/sharer.php?u=http://youtu.be/<? echo $id_3 ?>"><i class="icon-facebook"></i></a></li>
</ul>
<span class="one">Share</span>
</div>
I keep getting error, but i don't know what i'm doing wrong.
Can you guys help me out?
Here is my DEMO
There is no .next() element for the span you are clicking! Your UL is before the span, so you need prev():
http://jsfiddle.net/TrueBlueAussie/5dsrk470/5/
$('.one').on('click', function() {
console.log('click');
$('.smenu').not($(this).prev()).removeClass('share')
$(this).prev().toggleClass('share');
});
If you want to remove the class on clicking the links add this delegated event handler:
$(document).on('click', 'a', function(){
$('.smenu').removeClass('share')
});
Looks like you confused prev and next methods:
var $smenu = $('.smenu');
$('.one').on('click', function () {
$smenu.removeClass('share');
$(this).prev().toggleClass('share');
});
Demo: http://jsfiddle.net/5dsrk470/6/
As I typed this question I noticed similar question but my approach is different. I did read them but not what I am trying to do, however I did get some ideas.
I have three links (anchor tags) on my page, I am using JQuery to toggle a class between the links based on the link the user clicks. The link becomes active when clicked and I added Cookies to remember the user action.
What I really want to do is set the first link or the link with, example: ID equals one; to be the default. I want the same class (activeLink) which I am using to make the links active to apply to the default. When others are click, the class is than removed and the clicked link becomes active.
That's what I don't know how to do.
My page is a single page.
HTML:
<ul class="yeahBaby">
<li><a id="one" href="#/">Make me default</a></li>
<li><a id="two" href="#/">Example</a></li>
<li><a id="three" href="#/">Example</a></li>
</ul>
JQUERY:
$(document).ready(function() {
var idActive = $.cookie('cookieActive');
if (idActive) {
$('#'+idActive).addClass('activeLink');
}
$('.yeahBaby li a').click(function() {
var id = $(this).attr('id');
$(".yeahBaby li a").removeClass("activeLink");
$(this).addClass("activeLink");
$.cookie('cookieActive', id); //Save anchor id as cookie
$.cookie('cookieActive', id, { expires: 10000});
});
});
CSS:
<style type="text/css">
.activeClass{
color: #999;
}
</style>
Thanks everyone!!
Set the link with id="one" as default in your HTML.
<ul class="yeahBaby">
<li><a id="one" href="#/">Make me default</a></li>
<li><a id="two" href="#/">Example</a></li>
<li><a id="three" href="#/">Example</a></li>
</ul>
Then in jQuery:
// Upon loading the page set default .activeLink
$(window).load(function() {
// If cookie exists
if( $.cookie('active') !== null ) {
// Add .activeLink to last the class in cookie
$.cookie('active').addClass('activeLink');
} else {
// Else set on default
$('#one').addClass('activeLink');
}
});
// Bind click event to each anchor in your list
$('.yeahBaby li a').bind('click', function(e) {
// Remove .activeLink class from current active link
$('.activeLink').removeClass('activeLink');
// Add .activeLink to the link just clicked
$(this).addClass('activeLink');
// Create cookie
$.cookie('active', $(this));
return false;
});
See it in action here: JSFiddle
-- Update --
See above for addition cookies using the jQuery $.cookie plugin.