Focus lost with jAlert plugin - javascript

I'm calling jAlert with this function
$('.stcommentdelete').live("click",function() {
var ID = $(this).attr("id");
var dataString = 'com_id='+ ID;
jConfirm('Oled sa kindel, et tahad kustutada??', '', function(r){
if(r==true){
$.ajax({
type: "POST",
url: "delete_comment_ajax.php",
data: dataString,
cache: false,
success: function(html){
$("#stcommentbody"+ID).slideUp();
}
});
}
});
});
If i have for example 15 comments and i would delete last comment, it scrolls up. But i need that it stays focused on this place where i delete comment.
Omerimuni

I found what was wrong in my script. I called this script from link like a href="#". I remove href="#" and it works. :D Sry for bother u guys ;)

Related

Form submitting to wrong function when changing class dynamically

I'm sure there's a simple explanation for this but I haven't been able to find the right words to use when searching for answers.
When users fill out the form .InvoiceForm it submits via Ajax. After it's submitted remove the .InvoiceForm class and add .UpdateInvoice. When a user submits a .UpdateInvoice form it explains that they are about to make a change and they have to click to say "Yes I want this to be updated".
The issue is that unless I refresh the page so that the form is loaded with the .UpdateInvoice form, I don't get the confirmation which means it's still submitting as a .InvoiceForm form. Is there anything I can do to fix this?
Edit to show code:
Code that runs if there's no record
$('.InvoiceForm').submit(function(e) {
$.ajax({
url: $(this).attr('action'),
type: 'POST',
cache: false,
dataType: 'json',
context: this,
data: $(this).serialize(),
beforeSend: function() {
$(".validation-errors").hide().empty();
},
success: function(data) {
$(this).removeClass('InvoiceForm');
$(this).addClass('UpdateInvoice');
$(this).find('.btn').val('Update');
$(this).find('.id').val(data.invoice_id);
$(this).find('.btn').removeClass('btn-default');
$(this).find('.btn').addClass('btn-danger');
$(this).find('.AddRow').removeClass('hide');
$(this).find('.invoiceDetails').html(data.returnedData);
$(this).parent().next().find('.grade').focus();
}
});
return false;
};
Code that runs if there is a record being updated
$('.UpdateInvoice').submit(function(){
var r = confirm("Are you sure you want to make this update?");
if (r == true) {
$.ajax({
url: $(this).attr('action'),
type: 'POST',
cache: false,
dataType: 'json',
context: this,
data: $(this).serialize(),
beforeSend: function() {
$(".validation-errors").hide().empty();
},
success: function(data) {
alert('This row has been updated');
$(this).find('.total').html(data);
}
});
} else {
}
return false;
});
The function for .UpdateInvoice doesn't run unless I refresh the page.
Thanks for your help.
You bind a click event on '.UpdateInvoce' before it even being created, hence it'll not work. I think you need to use .live() in order to make it works. See document here: jQuery's live()
HTML:
<button id="click_me" class="new">Click Me</button>
<div class="result" />
Script:
$(function () {
$('.new').click(function (e) {
$('.result').text("Im new !");
$(this).removeClass("new");
$(this).addClass("update");
// Bind UpdateInvoice's click event on the fly
$('.update').live(bindUpdate());
});
function bindUpdate() {
$('.update').click(function (e) {
$('.result').text("Update me !");
});
}
});
jsfiddle's demo

Hide a div when ajax returns nothing

I have an ajax function that loads 1 news at time everytime the user clicks on "load more".
It works like a facebook pagination.
The problem is: when it reachs the end of my database, it doesn't load anything else so I would like to remove the link "load more" when it happens but I couldn't do it.
Here's my JS function:
function loadNews(pageLimit){
var dataString = 'pageLimit='+ pageLimit;
$.ajax({
type: "POST",
url: "ajaxnovidades.php",
data: dataString,
cache: false,
success: function(result){
$("#maisnews").hide();
$("#maisupdates").append(result);
}
});
}
loadNews('0');
I have tried to check if result is empty (result=="") and then hide() the #maisnews div, which is the one with the "load more" link but it doesn't work...
Any help?!
Try this:
if ( ! $.trim(result).length ) $('#maisnews').hide();
You can try something like:
function loadNews(pageLimit){
var dataString = 'pageLimit='+ pageLimit;
$.ajax({
type: "POST",
url: "ajaxnovidades.php",
data: dataString,
cache: false,
success: function(result){
if($.trim(result).length==0){
//$(element).hide()
$("#maisnews").hide();
}else{
$("#maisupdates").append(result);
}
}
});
}
loadNews('0');

replacing something else after ajax request?

i have this html:
cancel
when the user clicks cancel, i want to remove the hyperlink and i want to replace this with an image i.e.
$.ajax({
context:this,
type: "POST",
url: "actions/cancel.php",
data: "id=" + the_id,
cache: false,
success: function() {
$(this).remove;
// add image
thanks :))
Try:
success: function() {
$( "a#cancel_3" ).replaceWith( "<img...>" );
}
You'll have to fill in the HTML in the replaceWith function with whatever you want to replace the link with. is just a placeholder I used.
How about:
$(this).css('display', 'none').after('<img>');

merging two small pieces of jquery codes

Following are two pieces of jquery code. First one prints a text message when clicked on a link, and the second slides down a div when click on a link. I want to merge second code into first one, so that when I click the link, it displays the message (as the first code does), and also slides down the #votebox (as done in second code, and show content in that.
I will be very thankful for any help.
$("a.vote_up").click(function(){
the_id = $(this).attr('id');
$("span#votes_count"+the_id).fadeOut("fast");
$.ajax({
type: "POST",
data: "action=vote_up&id="+$(this).attr("id"),
url: "votes.php",
success: function(msg)
{
$("span#votes_up"+the_id).fadeOut();
$("span#votes_up"+the_id).html(msg);
$("span#votes_up"+the_id).fadeIn();
//Here, I want to slide down the votebox and content div (from code below).
}
});
});
The following code slides down votebox div and displays content in it, I want to include that in the above code.
$("a.vote_up").click(function(){
var id=$(this).attr("id");
var name=$(this).attr("name");
var dataString = 'id='+ id + '&name='+ name;
//I want to include this votebox in above code.
$("#votebox").slideDown("slow");
$("#flash").fadeIn("slow");
$.ajax({
type: "POST",
url: "rating.php",
data: dataString,
cache: false,
success: function(html){
$("#flash").fadeOut("slow");
//and want to use this div as well.
$("#content").html(html);
}
});
});
Thanks for any help.
Simple way is to define a seperate function for voteDown and call it from the success function:
e.g
$("a.vote_up").click(function(){
the_id = $(this).attr('id');
$("span#votes_count"+the_id).fadeOut("fast");
$.ajax({
type: "POST",
data: "action=vote_up&id="+$(this).attr("id"),
url: "votes.php",
success: function(msg)
{
$("span#votes_up"+the_id).fadeOut();
$("span#votes_up"+the_id).html(msg);
$("span#votes_up"+the_id).fadeIn();
var that = this;
voteDown.call(that);
}
});
});
function voteDown()
{
var id=$(this).attr("id");
var name=$(this).attr("name");
var dataString = 'id='+ id + '&name='+ name;
$("#votebox").slideDown("slow");
$("#flash").fadeIn("slow");
$.ajax({
type: "POST",
url: "rating.php",
data: dataString,
cache: false,
success: function(html){
$("#flash").fadeOut("slow");
//and want to use this div as well.
$("#content").html(html);
}
});
}
Edit: Corrected the JS for Votedown function.

variable declaration in ajax

Hi I need to write an ajax function to reload the content in a div of my Free marker tool page
the Div contains a question with yes or no radio buttons and when the user picks yes and click the submit button the page should reload and as I am very new to ajax I wrote something like this PLEASE LET ME KNOW IF THE FORMAT I WROTE IN CREATING A VARIABLE IS RIGHT OR WRONG AND PLEASE LET ME KNOW IF I WROTE ANY SYNTAX ERRORS THANKS
<script type="text/javascript">
function submitOptIn() {
$('optInError').hide();
dataString = $('#partnerOptIn').serialize();
$.ajax({
data: dataString,
timeout: 30000,
type: "POST",
var newHtml = "<h4>Thank you</h4>
<p>We appreciate your time to respond to our request.</p>";
success: function(html){
$('#optInContent').html(newHtml);
},
success: function(html){
$('#optInContent').html(html);
},
error: function(){
$('#optInError').show();
}
});
}
</script>
Move the newHTML declaration to inside of the success function:
success: function(html){
var newHtml = "<h4>Thank you</h4><p>We appreciate your time to respond to our request.</p>";
$('#optInContent').html(newHtml);
},
For one, you should declare your newHtml variable inside the success function, not before it:
success: function(html){
var newHtml = "<h4>Thank you</h4><p>We appreciate your time to respond to our request.</p>";
$('#optInContent').html(newHtml);
},

Categories