I am having problems deleting a list item li from it's parent ul. Normally I would do the following:
$(this).closest('li').remove();
or
$(this).parent().remove();
As the list items are appended to the page via a form I think there is a problem with the this usage.
My code that appends the li is as follows:
$(document).on('click', '.add_section', function(){
var section_title=$('.section').val();
var menu_type=$('.menu_type_sel').val();
var rest_id=$('body').data('rest_id');
var menu_id=$('body').data('menu_id');
var error=false;
if(section_title=="")
{
$('.error_box13').eq(2).html("<p>Please Add a Section Title</p>");
$('.error_box13').eq(2).show(300);
error=true;
return;
}
var data="section="+section_title+"&rest_id="+rest_id+"&menu_id="+menu_id+"&menu_type="+menu_type;
$.ajax({
type:"POST",
url:"includes/write_section.php",
data:data,
success:function(html){
if(html!="x")
{
var app_section="";
app_section="<li class='hover' id='menu_"+html+"'>"+section_title+" <a href='javascript:void(0);' class='delete_section' data-id='"+html+"'>[x]</a></li>";
$(app_section).appendTo('#sortme');
$('.section').val("");
}
}
});//end ajax
});
To remove the li so far I have:
$(document).on('click', '.delete_section', function(){
var delete_id=$(this).data('id');
var data="id="+delete_id;
alert(data);
$.ajax({
type:"POST",
url:"includes/delete_section",
data:data,
context:this,
success:function(html){
if(html!="X")
{
$(this).closest('li').remove();
return false;
}
}
});//end ajax
});
I have added the context: bit as a trial but this still does not delete the li.
Try the old var that = this trick.
$(document).on('click', '.delete_section', function(){
var delete_id=$(this).data('id');
var data="id="+delete_id;
var that = this;
$.ajax({
type:"POST",
url:"includes/delete_section",
data:data,
context:this,
success:function(html){
if(html!="X")
{
$(that).closest('li').remove();
return false;
}
}
});//end ajax
});
Just noticed my stupid error:
The url is missing its .php therefore there is no returned code.
Related
I am using ajax to load the page. But when my page load I have jQuery on the loaded page template that is not working . If i refresh the page then it start working.
I am using ready function as:
jQuery(document).ready(function() {
jQuery('#tabs li a:not(:first)').addClass('inactive');
jQuery('.tab-content').hide();
jQuery('.tab-content:first').show();
jQuery('#tabs li a').click(function() {
var t = jQuery(this).attr('id');
if (jQuery(this).hasClass('inactive')) {
jQuery('#tabs li a').addClass('inactive');
jQuery(this).removeClass('inactive');
jQuery('.tab-content').hide();
jQuery('#' + t + 'C').fadeIn('slow');
}
});
});
But it not showing any alert when i click on the page link and page is loaded using ajax without refresh.
How i can make the jquery workable please help
I have to load two function at the success of the ajax call only one of them is wokring not both of them at the same time:
$.ajax({
url: url,
success:
function(data){
$('#tabs li a:not(:first)').addClass('inactive');
$('.tab-content').hide();
$('.tab-content:first').show();
$('#tabs li a').click(function(){
var t = $(this).attr('id');
if($(this).hasClass('inactive')){
$('#tabs li a').addClass('inactive');
$(this).removeClass('inactive');
$('.tab-content').hide();
$('#'+ t + 'C').fadeIn('slow');
}
});
}
function(data, textStatus, jqXHR){
alert("working");
},
error: function(jqXHR, textStatus, errorThrown){
document.location.href = url;
return false;
}
How it could be possible?
Please use the success function to find whether the functionality is executing successfully or not,
$(document).ready(function (){
$.ajax({
jQuery('#tabs li a:not(:first)').addClass('inactive');
jQuery('.tab-content').hide();
jQuery('.tab-content:first').show();
jQuery('#tabs li a').click(function() {
var t = jQuery(this).attr('id');
if (jQuery(this).hasClass('inactive')) {
jQuery('#tabs li a').addClass('inactive');
jQuery(this).removeClass('inactive');
jQuery('.tab-content').hide();
jQuery('#' + t + 'C').fadeIn('slow');
}
});
success: function(this) {
alert(this);
}
});
});
I got is i have laoded my Jquery in a new function on ajaxSuccess as follows and it works perfectly
jQuery(document).ready(function(){
jQuery(document).ajaxSuccess(function() {
jQuery('#tabs li a:not(:first)').addClass('inactive');
jQuery('.tab-content').hide();
jQuery('.tab-content:first').show();
jQuery('#tabs li a').click(function(){
var t = jQuery(this).attr('id');
if(jQuery(this).hasClass('inactive')){
jQuery('#tabs li a').addClass('inactive');
jQuery(this).removeClass('inactive');
jQuery('.tab-content').hide();
jQuery('#'+ t + 'C').fadeIn('slow');
}
});
});
<script type="text/javascript">
$(document).ready(function() {
var page = 0;
$(window).scroll(function () {
if ($(document).height()-$(document).height()*0.2 <= $(window).scrollTop() + $(window).height()) {
$.ajax({
type: "POST",
url: "/",
dataType: "json",
data: { 'page' : page, 'csrfmiddlewaretoken': '{{csrf_token}}'},
success: function(data) {
obj1 = JSON.parse(data.fulldata);
var newHTML = '<a href = "" >somecode</a>';
$(".newdata").append(newHTML);
},
error: function(data) {
// alert("error")
}
});
}
}
});
</script>
i have readed this link for dynamically added elements, that we must bind the function to one of it's parents
...but no success
i am not pasting the entire code here. suppose code is correct and working fine. only when i am clicking the loaded element its not working..
Thanks in advance
full code
Guys What I am trying to do is load a page on navigation click with ajax and put some delay in it loading
when nothing is clicked I want load home page following loading animation with jquery and a delay with PHP code
and if something on nav is clicked I want to load that particular file
but this code don't seem to be working
var res = {
loader: $('<div />', {class: 'loader' } ),
container: $('.content')
};
$(document).ready(function(){
$.ajax({
url: 'templates/delay.php',
beforeSend, function(){
res.container.append(res.loader);
},
success, function(){
res.container.find(res.loader).remove();
$('.content').load('templates/pages/home.php');
}
});
$('ul#nav_a li a').click(function(){
$.ajax({
url: 'templates/delay.php',
beforeSend, function(){
res.container.append(res.loader);
},
success, function(){
res.container.find(res.loader).remove();
var page=$(this).attr('href');
$('.content').load('templates/pages/'+page+'.php');
return false;
});
});
}
});
I will not discuss the code itself, but just improve it.
Try this code and tell me if you get what you want : ( comments inside the js code )
$(document).ready(function(){
$.ajax({
url: 'templates/delay.php',
// old code : beforeSend,
beforeSend: function(){
res.container.append(res.loader);
},
// old code : success,
success: function(){
res.container.find(res.loader).remove();
$('.content').load('templates/pages/home.php');
}
// beforeSend and success are keys with functions as values that's why we use ":" and not ","
// the "," comma is used to separate ajax settings
});
$('ul#nav_a li a').click(function(){
var page = $(this).attr('href');
$.ajax({
url: 'templates/delay.php',
// old code : beforeSend,
beforeSend: function(){
res.container.append(res.loader);
},
// old code : success,
success: function(){
res.container.find(res.loader).remove();
$('.content').load('templates/pages/'+page+'.php');
// old code
// return false;
// });
// we close our ajax.success function
}
})
// old code
// }
// return false is used to prevent browser to run the a href that's why we use it in the a.click function and not inside the ajax block
return false;
})
})
var res = {
loader: $('<div />', {class: 'loader' } ),
container: $('.content')
};
$(document).ready(function(){
res.container.append(res.loader);
$('.content').load( "templates/pages/home.php", function() {
res.container.find(res.loader).remove();
});
$('ul#nav_a li a').click(function(){
var page=$(this).attr('href');
$('.content').load( 'templates/pages/'+page+'.php', function() {
res.container.find(res.loader).remove();
});
});
}
});
Just copy and paste it.
I am stuck as to how fade in and out images when changing the attr src using jquery and json. I have got the image changing correctly but would like to add the fading transition.
Any help and suggestions would be very appreciated.
Below is my code
function(){
$j(".screenshots ul li#screen1").show();
$j(".items div a").click(function (event) {
var id = $j(this).attr("href");
//$j(".screenshots ul li img").fadeOut();
$j.ajax({
url: "/?func=square_images/get_json&IMAGE_ID="+id,
dataType: "json",
success: function(data) {
$j("#screen1 img").attr("src", data.medium_medium_src);
}
});
event.preventDefault();
});
}
You can try this within you success function
success: function(data) {
$j("#screen1 img").fadeOut(100, function() {
$(this).attr('src', data.medium_medium_src).load(function() {
$(this).fadeIn();
});
})
}
Why is my jQuery having an error when I put this line in?
<script type="text/javascript">
$(function(){
$(".arrowbutton").click(function(){
id = $(this).attr('rel');
$.ajax({
type:"POST",
url:"/upvote",
data:{'id':id},
beforeSend:function() {
},
success:function(html){
$(this).hide();
}
});
return false;
});
});
</script>
When I remove $(this).hide(); it's fine. But, I want it to hide!!!
Because this doesn't refer to you arrow button, but it refers to the AJAX Request object.
$(".arrowbutton").click(function(){
var that = this;
var id = $(this).attr('rel');
$.ajax({
type:"POST",
url:"/upvote",
data:{'id':id},
beforeSend:function() {
},
success:function(html){
$(that).hide();
}
});
return false;
});
jQuery calls your success function more or less like this:
handleSuccess: function( s, xhr, status, data ) {
// If a local callback was specified, fire it and pass it the data
if ( s.success ) {
s.success.call( s.context, data, status, xhr );
}
// Fire the global callback
if ( s.global ) {
jQuery.triggerGlobal( s, "ajaxSuccess", [xhr, s] );
}
},
The first argument of the call method sets the this keyword in the success function to s.context
Because $(this) doesn't return what you think it does in the success callback. You could use a closure:
$(function(){
$('.arrowbutton').click(function(){
var button = $(this);
$.ajax({
type: 'POST',
url: '/upvote',
data: { id: this.rel },
beforeSend:function() {
},
success:function(html) {
button.hide();
}
});
return false;
});
});
$(this) is referring to the Ajax request, not the surrounding button.
Try using a closure like so:
<script type="text/javascript">
$(function(){
$(".arrowbutton").click(function(){
var arrowbutton = $(this);
id = $(this).attr('rel');
$.ajax({
type:"POST",
url:"/upvote",
data:{'id':id},
beforeSend:function() {
},
success:function(html){
arrowbutton.hide();
}
});
return false;
});
});
</script>
"this" does mean this in all situations, because you are inside a new function that is the new this.
Check this tutorial out to learn all the different ways you can deal with it:
http://justin.harmonize.fm/index.php/2009/09/an-introduction-to-javascripts-this/