jQuery: hijack a link and find its parent - javascript

I know how to hijack a link in jQuery, and I know how to find an element's parent, but I can't seem to combine the two. I have multiple divs, each of which contains a link. I want to hijack the link and update the parent div's content.
<div class="container-1">
Add content
</div>
<div class="container-2">
Add content
</div>
Here's what I have with jQuery:
$(function() {
$(".pager A").live("click",
function() {
$.get($(this).attr("href"),
function(response) {
$(this).parent().attr("id").replaceWith(response); // This is wrong
});
return false;
});
});
The line with the "This is wrong" comment doesn't have what I want for $(this). It appears to contain the result from the previous expression, not the element I selected (".pager A").
How can I do this?
Bonus question: Visual Studio complains that ".get is a reserved word and should not be used as an identifier". What exactly is the problem?
EDIT: Sorry, I meant <div id="container-1">, not <div class="container-1">. Ditto for the 2nd div.

Try saving the reference to the current execution context where it points to the anchor to refer to later in the callback:
$(function() {
$(".pager A").live("click",
function() {
var el = this;
$.get($(el).attr("href"),
function(response) {
$(el).parent().html( response ); // is this what you want? .attr('id') would return a string and you can't call jQuery methods on a string.
});
return false;
});
});

First of all:
$(function() {
$(".pager A").live("click",
function() {
var $link = $(this);
$.get($(this).attr("href"),
function(response) {
$link.parent().attr("id").replaceWith(response); // This is wrong
});
return false;
});
});
You shouldn't use $(this) in callback function.
And the second - your link's parent element doesn't have id attribute. If you want to replace it's content use something like html() or text()

Related

using jquery 'this' to condense code

I try not to ask questions, but I can't figure out what should be very easy. I'm building a site for practice briannabaldwinphotography.com. I'm just trying to condense this so that I could just click on an anchor and it smooth scrolls to a <section> with an id the same name as the anchor. Ex: the 'about' li anchor has an href of #section_three and will scroll to the <section> with an id of section_three. I tried like 10 different variations and it won't work for me. Sort of what I'm looking for would be $(this).attr("href").offest().top}....etc. Here is the code I want to condense. Thanks.
$(function() {
$("[href='#section_three']").on("click", function() {
$("html body").animate({"scrollTop":$("#section_three").offset().top}, 1000);
return false;
});
$("[href='#section_two']").on("click", function() {
$("html body").animate({"scrollTop":$("#section_two").offset().top}, 1000);
return false;
});
$("[href='#section_four']").on("click", function() {
$("html body").animate({"scrollTop":$("#section_four").offset().top}, 1000);
return false;
});
$("[href='#section_one']").on("click", function() {
$("html body").animate({"scrollTop":$("#section_one").offset().top}, 1000);
return false;
});
});
If you use the attribute starts with selector (^=) you can get all elements with an href beginning with "#section_", bind a handler to those, then within the handler use this.href to get the href of the particular element that was clicked:
$(function() {
$("[href^='#section_']").on("click", function() {
$("html body").animate({"scrollTop" : $(this.href).offset().top}, 1000);
return false;
});
});
Note that this.href does the same job as $(this).attr("href"), but more efficiently: no need to create a jQuery object to access a property of the element that you can get to directly.
Since the href in each case matches the target element it makes it fairly simple
$("[href^='#section']").on("click", function() {
var targetSelector = $(this).attr('href');
$("html body").animate({"scrollTop":$(targetSelector).offset().top}, 1000);
return false;
});
If those elements have a common class or better path through parent class and tags you could improve the initial selector performance

How to edit an event trigged by an anchor from inside of a $.get() function?

I'm trying to make a script that, when you click on an anchor, a $.get function will get the anchor's href and then the href will be removed, but I cannot edit anything about the anchor from inside de get element. Example:
// make anchor disappear for example (doesn't work)
$('.belovedanchor').click(function(e) {
$.get($(this).attr('href')).done(function() {
$(this).hide();
});
});
// make an anchor disappear using a function (doesn't work too)
$('.belovedanchor').click(function(e) {
function do() { $(this).hide(); };
$.get($(this).attr('href')).done(function() {
do();
});
});
I don't understand why $(this) change to work with the $.get function istead of the .click event.
How would you guys do it?
You have a couple problems. Edit: Only one problem -- I now see from your comment below that belovedanchor is not the actual selector in your code.
First, your jQuery selector for the click event handler is most likely incorrect. Change $('belovedanchor') to $('.belovedanchor') or $('#belovedanchor') depending if the anchor is identifiable by either class or element ID respectively.
Second, this in the do callback function does not refer to the anchor. In JavaScript, scope is set at the function level, so anytime you declare a new function, this will refer to that new scope.
Do this instead:
$('belovedanchor').click(function(e) {
var anchor = $(this);
function do() { anchor.hide(); };
$.get($(this).attr('href')).done(function() {
do();
});
});
Simplified:
$('belovedanchor').click(function(e) {
var anchor = $(this);
$.get(anchor.attr('href')).done(function() {
anchor.hide();
});
});
This may work properly
$('.belovedanchor').click(function() {
var selectedancor = $(this);
var myurl = $(this).attr('href');
$.get(myurl, function() {
selectedanchor.hide();
});
});

How to change content of a specific div that has data-attribute?

I want to know how I can change the content of a specific div that has data attribute.
I am using a click event and .html
I have many div elements as follows:
<div class"name-of-class" data-user-id="ID">Content that changes</div>
I already have the ID variable to identify what div I need to change
$('.name-of-class').click( function() {
$('.name-of-class').html('new content');
}
So, I want to use the data attribute data-user-id inside the click function to specify exactly what div I need to change.
I hope I am making myself clear, if not, I will try to explain myself better.
You can use Attribute Equals Selector [name="value"].
$('.name-of-class').click( function() {
$('[data-user-id="id"]').html('new content');
}
Edit, based on comments, to pass variable
$('.name-of-class').click( function() {
$('[data-user-id="'+ idVariable +'"]').html('new content');
}
Use this:
HTML:
<div class="name-of-class" data-user-id="ID">Content that changes</div>
jQuery:
$('.name-of-class').click( function() {
$(this).html('new content');
});
You can use Attribute Equals Selector [name="value"]
$('.name-of-class').click( function() {
$('.name-of-class[data-user-id="id"]').html('new content');
}
EDIT
As per comment
$('.name-of-class').click( function() {
$('.name-of-class[data-user-id="' + useridvariable +'"]').html('new content');
}

Identify the a tag

Need to identify each of these 'a' tag in div and bind an onclick event.I have binded the same.I need to append some text below the clicked 'a' tag.But when i tried with my code it binds to all the 'a' tag in the div.How can i specify the 'a' tag which i have clicked.I can make changes to the content in div using jquery.can't modify the content in 'a' tag.
<div class="people_rt_link2">
2011<br><br>
2008<br><br>
</div>
$(document).ready(function() {
var timesClicked = 0;
$('.people_rt_link2 a').bind('click', function() {
jQuery.post("<?php bloginfo('template_directory'); ?>/test.php", data, function(response) {
alert('Got this from the server: ' + response);
//this response should to binded to the clicked a tag
//$(this).after('<div>'+response+'</div>');
});
timesClicked++;
if (timesClicked >= 1) {
$(this).unbind();
}
});
});
Use this to refer to the clicked <a>. Example using jQuery:
$('div.people_rt_link2 a').click(function(){
$(this).unbind('click');
var that = this;
$.post('somepage.php', function(data){
$(that).after(data);
});
return false;
});
Example
Let me know if that's not exactly what you were trying to achieve.
Theres lots of ways to specify the a tag you want to append text too.. first child.. first of type.. but mostly you just append an id to the tag and let javascript handle it..
$("people_rt_link2 a.YourClass").bind("click", function({do stuff}));
http://www.w3schools.com/tags/tag_a.asp
try something like this:
$("people_rt_link2 a").bind("click", foo(<!--Put here all your code you want to be executed -->));

jquery simple swap p element?

Given a p element like so:
<p>Something</p> I want to, when the user mouses over it, we have, instead <p>go here</p>
After hovering if the mouse leaves the p area, return to the previous:
<p>Something</p> state.
Can I have a simple example of something like this?
Thanks a lot,
MEM
Or a simple modification of Ken Redler's original that uses .data() to keep track of things:
$('p#someID').hover(
function() {
var $this = $(this);
$this.data('orig', $this.html()).html('go here');
},
function() {
var $this = $(this);
$this.html($this.data('orig')).removeData('orig');
}
);
http://www.jsfiddle.net/ambiguous/FhET2/1/
Updated: As #Phrogz points out, I missed part of the sense of the question. The suggestions of capturing state with a closure or using data() are good ones, but here's another way (with an amusing number of moving parts):
$(document).ready( function(){
$('p#someID').hover(
function() { // on mouseEnter
$(this)
.contents()
.wrap('<span class="hide"/>') // wrap 'n' hide
.end() // back to 'this'
.append('Fascinating Link!'); // add link
}, function() { // on mouseLeave
$(this)
.find('a')
.remove() // kill the anchor
.end() // back to 'this'
.find('span.hide') // the wrapper
.contents() // the wrapped
.unwrap(); // kill the wrapper, leaving its contents
});
});
This assumes a style like so:
span.hide {
display: none;
}
Updated example: http://www.jsfiddle.net/redler/HAGzH/1/
$('p#IDHERE').hover(
function(){ // on mouseEnter
$(this).contents().replaceWith('go here');
},
function(){ // on mouseLeave
$(this).contents().replaceWith("something");
}
);
This will replace all text

Categories