I have a link that posts to a url (ajax). Then I want to hide the entire li.
HTML
<li>Product Name Delete</li>
JQUERY
$(function(){
$(".del").click(function () {
var link = $(this).attr('href');
$.post(link, function() {
$(this).parent().slideUp();
return false;
});
event.preventDefault();
});
});
The this-keyword in the success-handler passed to $.post does not refer to the anchor element, so your code won't work. You can easily fix this by saving a reference to the li-element outside the success-handler:
$(function(){
$(".del").click(function () {
var link = $(this).attr('href');
var li = $(this).parent();
$.post(link, function() {
li.slideUp();
return false;
});
event.preventDefault();
});
});
Related
In my wordpress site I'm loading my posts via ajax.
But for some reason every other post the page chooses to refresh instead of loading through ajax.
So when I click on Next, the next post loads in perfectly. Then in the second post when I click Next again the page refreshes.
Any ideas why it only refreshes every second post?
JS:
jQuery(document).ready(function() {
jQuery('.arrows a').click(function() {
var url = jQuery(this).attr('href');
jQuery('#main-content').html('<h4>Loading...</h4>').load(url+ ' #main-content');
return false;
});
});
jQuery(document).ready(function() {
var clickHandler = function() {
var url = jQuery(this).attr('href');
jQuery('#main-content').html('<h4>Loading...</h4>').load(url+ ' #main-content', function() {
jQuery('.arrows a').click(clickHandler);
});
return false;
};
jQuery('.arrows a').click(clickHandler);
});
Delegate the click so that you aren't removing the element with the click handler.
For jQuery >= 1.7, use on.
jQuery(document).ready(function() {
jQuery('#main-content').on('click', '.arrows a', function(e) {
e.preventDefault();
var url = jQuery(this).attr('href');
jQuery('#main-content').html('<h4>Loading...</h4>').load(url+ ' #main-content');
});
});
For jQuery 1.4.2-1.7, use delegate instead of on.
jQuery(document).ready(function() {
jQuery('#main-content').delegate('.arrows a', 'click', function(e) {
e.preventDefault();
var url = jQuery(this).attr('href');
jQuery('#main-content').html('<h4>Loading...</h4>').load(url+ ' #main-content');
});
});
I want to pass blank value on single click function and want to redirect on double click.
Here my code for HTML
Code for j-query
$(function () {
var clicker = $('#Nav a');
$(this).click(function () {
$(this).attr('href', '');
});
clicker.dblclick(function () {
window.location = $(this).attr("href");
});
}
kindly suggest how i can pass same attribute value for two different function or any other way to do that.
You can use e.preventDefault() to prevent redirection on single click:
$(function () {
var clicker = $('#Nav a');
clicker.click(function (e) {
e.preventDefault();
});
clicker.dblclick(function () {
window.location = $(this).attr("href");
});
})
Also, note that $(this) of your click function is not map to any element at this moment. Since you've assigned var clicker = $('#Nav a') then you can use clicker.click instead.
Fiddle Demo
I want to bind a jquery function on a click of a anchor link tag, but do not know how it can be bind, i am using ASP.net MVC with Ajax and want to show data with the help of Ajax. Please give some suggestions to bind the below function on a link click.. Thanks..
$(document).ready(function(){
$("a.ShowTable").click(function(e){
var url=this.href;
$get(url,{},function(data){
$('#dtable').html(data)
)};
e.preventDefault();
});
<ul>
#foreach(var item in Model)
{
<li>#item.Id<li>
}
</ul>
This is your fixed code: {be aware, i'm not your browser's console...}
$(document).ready(function () {
$("a.ShowTable").click(function (e) {
var url = this.href;
$.get(url, {}, function (data) {
$('#dtable').html(data);
});
e.preventDefault();
});
});
first add jQuery file on your script
then write below code
$(document).ready(function(){
$(document).on("click","a.ShowTable,"function(e){
e.preventDefault();
var url=this.href;
$get(url,{},function(data){
$('#dtable').html(data)
});
});
});
you can use bind
$(document).ready(function(){
$( "a.ShowTable" ).bind( "click", function() {
var url=this.href;
$get(url,{},function(data){
$('#dtable').html(data)
});
e.preventDefault();
});
});
$(document).ready(function(){
$("a.ShowTable").click(function(e){
var url=$(this).attr(href);
$.get(url,{},function(data){
$('#dtable').html(data)
)};
e.preventDefault();
});
<ul>
#foreach(var item in Model)
{
<li><a href='#Url.Action("Index","Home",new {id=item.Id})' class='ShowTable'>#item.Id</a><li>
}
</ul>
So i'm trying to make a section fade out before following a link like so
<a class="fadelink" href="path/to/file">Hello</a>
<script type="text/javascript">
$("a.fadelink").click(function(e){
e.preventDefault();
$("#content").fadeTo(400,0,function(){
window.location.href = $(this).attr("href");
});
});
</script>
Problem is, jQuery keeps returning me with "undefined" and 404's the redirect.
Your $(this) in $(this).attr("href") is pointing to $("#content") which is wrong. Move it into the right scope:
$("a.fadelink").on("click", function( evt ) {
evt.preventDefault();
var goTo = $(this).attr("href"); // get href value of `this` anchor
$("#content").fadeTo(400, 0, function() {
window.location = goTo; // Now you can use it
});
});
You're referring to the wrong this. The href attribute is present on the anchor, not the #content element.
$("a.fadelink").click(function(e){
e.preventDefault();
var that = this;
$("#content").fadeTo(400,0,function(){
window.location.href = $(that).attr("href");
});
});
My code (the html page):
<nav>
<ul>
<li id="homeLink">Home</li>
<li id="rekenLink">Rekenmachine</li>
<li id="bakkerLink">Parkeergarage</li>
<li id="garageLink">Bij de bakker</li>
<ul>
</nav>
The javascript/jquery behind it:
$(function () {
$("ul").click(function () {
// here I want to get the clicked id of the li (e.g. bakkerLink)
});
});
How do I do that?
Use the .on() method with signature $(common_parent).on(event_name, filter_selector, event_listener).
Demo: http://jsfiddle.net/gLhbA/
$(function() {
$("ul").on("click", "li", function() {
// here I want to get the clicked id of the li (e.g. bakkerLink)
var id = this.id;
alert(id);
});
});
Another method is to bind the event to li instead of ul:
$(function() {
$("li").click(function() {
// here I want to get the clicked id of the li (e.g. bakkerLink)
var id = this.id;
alert(id);
});
});
Use jQuery on() instead of click and pass li as selector.
$(function() {
$("ul").on('click', 'li', function() {
//Here this will point to the li element being clicked
alert(this.id);
});
});
on() reference - http://api.jquery.com/on/
$(function() {
$("li").click(function() {
alert(this.id);
});
});
edit: jsfiddle link
Handle the click event of the <li> instead of the <ul>.
You can then get this.id.
Use the event's target (The anchor that was clicked) and then grab its parent's id:
$(function() {
$("ul").click(function(e) {
alert(e.target.parentNode.id);
});
});
JSFiddle
here is one of the way to do. Make sure your using the latest jquery file.
$("ul li").on('click', function() {
console.log($(this).attr("id"));
});
You may try
$(function () {
$("li").click(function () {
var id = $(this).attr("id");
alert(id);
});
});
or
$(document).ready( function() {
$("li").click(function () {
var id = $(this).attr("id");
alert(id);
});
});