I'm currently using AJAX for live submit a post which is then appended to a list. The problem I am having is when I submit a post more than once, AJAX overwrites the previous posts submitted.
var data = $("#form_write_post").serialize();
$.ajax({
type: "POST",
url: $("#form_write_post").attr("action"),
data: data,
beforeSend: function() {
$("ul.timeline").prepend("<img class='textarea_ajax_loading' src='img/ajax-loader.gif' style='margin: 0 auto; display: block;' />");
},
complete: function() {
$('.textarea_ajax_loading').remove();
},
success: function () {
//var successCount = successCount++;
$("ul.timeline").prepend('<li class=ajax_post></li>').fadeIn();
$("ul.timeline .ajax_post").load("ajax_post.php").fadeIn();
//$('ul.timeline').prepend(wall_post);
//console.log("success");
return false;
}
});
How can I achieve a new post after each submission?
Thanks
I'm not sure that I fully understand your problem, but when you say "AJAX overwrites the previous posts submitted" I assume the problem is on the front-end right?
From the code I see, it might be because you prepend a new <li class=ajax_post></li> and then you select all the li with this class and load something in all of them.
If you want to load something only in the latest li, change the selector to
$("ul.timeline .ajax_post:first").load("ajax_post.php").fadeIn();
to select only the first post.
you're inserting the new content into every child of the same class. instead of using classes you should be using IDs: declare count outside your Ajax call and then do the following.
success: function () {
count = count++;
$("ul.timeline").prepend('<li class=ajax_post id="post'+count+'"></li>').fadeIn();
$("#post"+count).load("ajax_post.php").fadeIn();
Related
im newbie that newbie learn here...
i want add some event from loaded part dynamically but it return to 1 id
so i problem with innerHTML+= and call with ajax like this..
$.ajax({
url: 'getuser.php',
type: 'POST',
data: {
id_user: id_user
},
success: function(data) {
listuser.innerHTML+=data;
}
});
then with getuser.php i got result like this
<div id="listuser">
<button id="1" class="pickmember">Member1</button >
<button id="2" class="pickmember">Member2</button>
</div>
so when i call a function
$(".pickmember").click(function(){
var id_user=$(this).attr('id');
alert('u pick member'+id_user);
});
when i call it,, it always return to last added to innerhtml, and cant detect member2 when click,, there is solution to this?
use .on() instead of .click()
$(".pickmember").on('click', function () {
var id_user = $(this).attr('id');
alert('u pick member' + id_user);
});
more information --> jQuery $(".class").click(); - multiple elements, click event once
I have two dropdown lists and on selecting the data I used ajax to send it to a php file where I retrieved a table and send the whole table contents as per my query fields and I display it via
jQuery("div#tablecontent").html(returnval);
But now i want to edit, delete the table view I displayed and I tried to get the class of the row I returned. But couldn't please guide me in how to get the class of the field I returned as whole table.
EDIT : Adding the code i ve done
jQuery(document).ready(function(){
jQuery("#select1").change(function(){
jQuery.ajax({
type: "POST",
url: "<?php echo $base_url;?>?q=search/won",
error: function(returnval) {
alert("Failure");
},
success: function (returnval) {
// alert(returnval);
jQuery("select#fileds_content").html(returnval)
//alert("Sucess");
}
})
//
jQuery("#fileds_content").change(function(){
if(jQuery(this).val()){
var datawon = jQuery(this).val();
jQuery.ajax({
type: "POST",
url: "<?php echo $base_url;?>?q=getbases/won",
data:{ datawon : datawon},
error: function(returnval) {
// alert(returnval);
// alert("Failure");
},
success: function (returnval) {
// alert(returnval);
jQuery("div#tablecontent").html(returnval);
//alert("Sucess");
}
})
I am not entirely sure what you actually want to do, but from what I understood is that you cannot select a newly created element by its class. In that case, you cannot select a newly created elements because js does not know about it yet, thus, you can use something like .ajaxComplete(), this will make sure to run a function After an ajax call got completed.
Basically, I've got a form that submits a post to my wordpress blog depending what's in the form. When submitted, it hides the form from the page using ajax (as below). This works only when I have 1 form on the page.
What I am trying to do is make multiple forms work the same way on a page... Each one hides only itself when it's submitted.
contact_form is the DIV ID of the singular form that works
I added <div id="form'.$formnumber.'"> to the html page, so now there are multiple forms with IDs of form1, form2, form3, etc. form_no is the number on the end that gets sent to this script.
I don't know ajax/javascript very well - How do I make it work on multiple divs? Here's what I have at the moment (I've simplified as much as possible). Thanks!
$(".button").click(function() {
var form_no = $("input#form_no").val();
}
...further down the page...
$.ajax({
type: "GET",
url: "mypage.php",
data: dataString,
success: function() {
$('#contact_form').html("<div id='message'></div>");
$('#message').html("")
.append("")
.hide()
.fadeIn(1500, function() {
});
}
});
return false;
This does the job:
$(".button").click(function() {
var form_no = $("input#form_no").val();
$('#form' + form_no).hide();
});
I've built star button to use it like "starred items". I have the code running. but i have a problem.
When i click on star it becomes a starred item and and the star image changes.
But when i click again to unstar, it just doesn't work. i need to refresh the page to unstar it.
Also even the first step doesn't work for chrome.
add star codes:
jquery
$(function() {
$(".yildiz").click(function() {
var id = $(this).attr("id");
var dataString = 'id='+id ;
var parent = $(this).parent();
$.ajax({
type: "POST",
url: "yildizekle.php",
data: dataString,
cache: false,
success: function toggle()
{
$('.yildizbutton'+id).animate({
src:"star-icon.png",
class:"yildizsizbutton"+id,
},0);
}
});
return false;
});
});
php:
<img class="yildizsizbutton'.$row['id'].'" border="0" src="star-icon.png" alt="Yildizi kaldir" width="16" height="16" />
remove star
$(function() {
$(".yildizf").click(function() {
var id = $(this).attr("id");
var dataString = 'id='+id ;
var parent = $(this).parent();
$.ajax({
type: "POST",
url: "yildizsil.php",
data: dataString,
cache: false,
success: function toggle()
{
$('.yildizsizbutton'+id).animate({
src:"star-icon-f.png",
class:"yildizbutton"+id,
},0);
}
});
return false;
});
});
php:
<img class="yildizbutton'.$row['id'].'" border="0" src="star-icon-f.png" alt="Yildiz ekle" width="16" height="16" />
To add the star, do something similar to this:
$("#"+id).find("img").attr("src", "star-icon.png");
To remove:
$("#"+id).find("img").attr("src", "sstar-icon-f.png");
You shouldn't use animate in the way you are using it at all. I also used the ID of the container, then found the image inside of it, instead of putting together that class like you were doing. That's just personal preference, though...the main takeaway is to use attr("src") to set the src of an image in jQuery.
EDIT: Here is a full solution that should work.
$(function() {
$(".star").click(function() {
var id = $(this).attr("id");
if($(this).hasClass("starred")) {
$.post("yildizekle.php", {id: id}, function(resp) {
$(this).removeClass("starred").find("img").attr("src", "star-icon-f.png");
});
}
else {
$.post("yildizsil.php", {id: id}, function(resp) {
$(this).addClass("starred").find("img").attr("src", "star-icon.png");
});
}
return false;
});
});
Notice that we are using a class to track whether or not the element is already starred. This means in your PHP you will need to add the starred class to any elements that are already starred when the page loads. Also, I used $.post instead of $.ajax since it is a simpler way of doing the same thing.
There are a few problems in your code, and both of the answers here are relevant and both are correct. Being as green as you are, I'd say you are on the road to learning well.
I'd use a separate class for ALL of the stars, one that doesn't relate to if its starred or unstarred. Maybe something like 'star'. :) You need to refresh the page to un-star it is because you never actually change it on the FRONT-end to be starred. If you use a tool like firebug of WebKit's Web inspector, you'll see that the class of the link is still "yildiz".
I'm not going to give you a complete answer because I'd be robbing you of an awesome learning experience here. Here are some pointers:
Remember which objects your click() events are connected to: $(".yildizf") and $(".yildiz")
When you click on an item, does it actually change class so that jQuery knows it's different? Essentially, you are 'starring' the same item over and over again because you never allow jQuery to see it as something it needs to un-star
If you use a 'star' class in addition to the other class (like <a class="star yildiz" ...>), then you can attach your click event to $('a.star'), and figure out in THERE if you should be starring or unstarring the item.
I hope this all makes sense.
You've defined the click event to both star and un-star the item. In the event you need to look at the current state of the item then decide if you want to star or un-star it. you need to branch inside your click event.
I have a dilemma that just seems beyond my abilities at the moment!
I have a group of connected sortables using the class 'biglist'.
What I want to do is bind #biglist 's sortreceive callback (which is made whenever a list receives an element from another) to take the 'boxnum' value of the element (which signifies which list its coming from) and perform an UPDATE query changing the id's boxnum value from say 5(list it came from) to 7 (list its been dragged to) so that the state persists.
So the exchange would happen like so (roughly)
$( "#biglist" ).bind( "sortreceive", function(event, ui) {
ajax call to boxchange.php
create vars to represent elements 'boxnum' value and 'box moved to' value
});
Then inside boxchange.php ->
$id = $_POST['id']
$box = $_POST['boxnum']
->update query SET boxid to new boxid WHERE id = posted ID of element
I hope this makes sense. It seems like a pretty slick way to make my program work!
Any help is greatly appreciated.
EDIT:
Just cleaned up the function to see if there are any changes that need to be made to it (which I know there are, because it looks sloppy) This function would need to be copied/altered for each sortable separately but it'd totally make the program work at least!
function ReceiveTwo()
{
$('#sortable2').bind('sortreceive', function(event, ui)
{
boxnum = $(this).attr('boxnum');
id = $(this).attr('id');
$.ajax
({
url: "boxchange.php",
type: "POST",
data: boxnum, id,
success : function(feedback)
{
$('#data').html(feedback)
}
})
});
$('#sortable2').sortable("refresh");
});
$('#sortable2').bind('sortreceive', function(event, ui) {
$.ajax({
url: "boxchange.php",
type: "POST",
beforesend: function(){
boxnum = $(this).attr('boxnum');
id = $(this).attr('id');
},
data: {'boxnum': boxnum, 'id': id},
success : function(feedback) {
$('#data').html(feedback),
}
});
});
beforesend is the event that fires before the ajax call. I believe here you could set your properties to accomplish what you want.
I think the way you want to send your Javascript data to your server-side PHP script is using a Javascript associative array, like so:
$.ajax({
url: "boxchange.php",
type: "POST",
data: {'boxnum': boxnum, 'id': id},
success: function(data,status) { ... }
Your "boxchange.php" script would then be able to access those variables via $_POST['boxnum'] and $_POST['id'].
I think that was your goal, but I'm not entirely sure...