Using jQuery post - javascript

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

Ajax loading properly only every other WP post

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');
});
});

How to pass attribute value on double click using jquery

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

Binding a jquery function to an event

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>

Navigate to href when animation ends

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");
});
});

returning clicked li class in an ul javascript/jquery

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);
});
});

Categories