ajax and javascript issue - functions not firing or firing mutiple times - php

I have put together an ajax powered chat/social network with jquery, PHP - but am having problems with the javascript.
I have a js file in the main page which loads the php in a div container, the js file is underneath the div. But only one function for posting a msg seems to work but the others do not.
I have tried including the js file with the dynamically loaded php at the end of the ajax load the functions work fine but am getting mutiple entries of the same message/comment.
I am pretty sure its not the PHP as it seems to work fine with no ajax involvment. Is there a way to solve this?
this is the function that works fine:
$("#newmsgsend").click(function(){
var username = $("#loggedin").html();
var userid = $("#loggedin").attr("uid");
var message = $("#newmsgcontent").val();
if(message == "" || message == "Enter Message..."){
return false;
}
var datastring = 'username=' + username + '&message=' + message + '&uid=' + userid;
//alert(datastring);
$.ajax({
type: "POST",
url: "uploadmsgimage.php",
data: datastring,
success: function(data){
document.newmessage.newmsgcontent.value="";
//need to clear browse value too
$('.msgimage').hide('slow');
$('#addmsgimage').show('slow');
$(".usermsg").html(data);
$("#control").replaceWith('<input type="file" name="file"/>');
$(".msgimage").remove();
}
});
});
And this is one of them that does not work:
//like btn
$(".like").click(function(){
var postid = $(this).attr("pid");
var datastring = 'likeid=' + postid;
$.ajax({
type: "POST",
url: "addlike.php",
data: datastring,
success: function(data){
$(".usermsg").html(data);
}
});
});

From your post, I'm guessing that each message has a "Like" button, but you have 1 main submit button. When messages load dynamically, you have to assign the .like to each one when they come in, otherwise it will only be assigned to the existing messages.
The problem, from what I gather (and this is a guess) would probably be fixed using live so jQuery will automatically assign the click function to all messages including dynamically loaded messages; so instead of:
$(".like").click(function(){
Try this:
$(".like").live('click', function(){
If that doesn't solve the problem, then I'm probably not understanding what it is.

Related

Make ajax call to send data onclick event in div

I have a div, which shows Rate me section. i.e. Five stars. When the user click on it, the rating value gets prompted.
<div class="rateit bigstars" id="rateit99" data-rateit-starwidth="32" data-rateit-starheight="32" onclick="alert($('#rateit99').rateit('value'))">
</div>
In here rather than an alert, I want to make an ajax call, which sends(post data) Rated value to data.php file.
How can it be done?
I don't understand what's on your HTML code, but i can understand what you are trying to achieve.
First clean your HTML code to make it easier to read for the purpose.
Here is an example of how you can receive the data and pass it using ajax
// Use the id of your trigger element
$('#submit').click(function() {
// Make your datastring (you can get other values with var a = $('#id').val();
var dataString = 'value1='+ value1 + '&value2=' + value2 ;
$.ajax({
type: "POST",
url: "data.php",
data: dataString,
cache: false,
success: function(data)
{
// handle the result
}
});
});

jquery Live update after a Live call

Having some serious troubles with making a Live update after a Live call. The event is added to the dBase, but I don't seem to get to change the contents of the changed.
As you can see, we have a unique div id in which we want the confirmation to show (being: '#yvr_add'+id).
Just to be clear: this takes place within a
"live('click',function()"
. Tried everything so far (even live reloading divs), but I just don't get it running.
Yes sir (#Ohgodwhy),
This is the code, passing two vars: a YouTube videoId and a personal videobookID on our server.
$('.yt_add_vid').live('click',function(){
var addItem = $(this).attr('id');
var selectVal = $('#album'+addItem + ' :selected').val();
var dataString = 'ytid='+ addItem + '&bookid=' + selectVal;
$.ajax({
type: "POST",
url: "/xxx/do_my_update.php",
cache: false,
data: dataString,
success: function(data){
$('#yvr_add'+ytid).html('added your entry.');
},
error : function(data) {
alert('Dude, stay focussed now!');
}
});
});
fixed it with the return of
success: function(data){...
you can do anything after that.
Thanks for the respones guys!

Get response from ajax post form call when using data which is displayed using AJAX

I have a dropdown box, and when it changed, i will display a table containing information in the database using JQuery. Now that one is working good. In the same time, I want to apply the "edit in place" to that table. When I clicked a row, then I am able to change the value of the row,however, the data is not change when I submit the new value. I have to refresh my page and then the value will be updated. I suspect it is because of the table which is called using JQuery. But here is the codes. I am using this function to display the table of information:
function loadData(page){
var dataString = "";
dataString = "page="+page;
$.ajax({
type: "POST",
url: "load_data.php",
data: dataString,
success: function(msg){
$("#container").ajaxComplete(function(event, request, settings)
{
$("#container").html(msg);
});
}
});
}
I am using this code to apply "edit in place" which is currently working, but the only thing which is not working is when I want to reload the table with the new value.
$(".edit_tr").live('click',function(){
var ID=$(this).attr('id');
$("#first_"+ID).hide();
$("#first_input_"+ID).show();
var first=$("#first_input_"+ID).val();
}).live('change', function(){
var ID=$(this).attr('id');
var first=$("#first_input_"+ID).val();
var dataString = 'id='+ ID +'&thename='+first;
var initName = $("#hidden_first_input_"+ID).val();
$.ajax({
type: "POST",
url: "edit_page.php",
data: dataString,
cache: false,
success: function(html){
alert(html); // the alert is not coming. even put any process, nothing happen
}
});
});
But the values is updating into the database. I have to refresh, and call the table one more time using JQuery then the value will be updated. Or I can click the paging, then it will be correct. ANy idea why is this happening? Thank you in advance!

Comparing HTML with Javascript

So I was wondering something.
In a IM/chat website I'm making, I have it check the database every 10 seconds or so to see if any new data has come in. And also, when the user posts a new comment, it automatically sends it to the database and adds it to the comment list without reloading. But it loads all the comments each time.
I was wondering if its possible to add an effect to the new comment (such as fading in) without doing that to all the old comments as well.
function update(){
oldhtml = $('#listposts');
$.ajax({
type: "POST",
data: "",
url: "update.php",
success: function(msg){
$("#listposts").html(msg);
$('.comment_date').each(function(){
$(this).text('[' + prettyDate($(this).text())+']');
if(oldhtml == )
});
}
});
}
var intervalID = window.setInterval(update, 10000);
That's my update code. Here's my post code:
$("#postbutton").click(function () {
if(!$('#post').val()==""){
$.ajax({
type: "POST",
data: "data=" + $("#post").val(),
url: "post.php",
success: function(msg){
$("#listposts").html(msg);
$('.comment_date').each(function(){
$(this).text('[' + prettyDate($(this).text())+']');
});
}
});
$("#post").val("");
}
});
I'm also using prettyDate, as you can see. But that has nothing to do with this problem.
So as the title states, I was gonna try to save the current html in a variable (oldhtml) and then load the new stuff. Then I would compare the two and just use the new comment to fade in. Am I way out there? Am I missing the point?
Oh and please don't down vote me just cause I missed an obvious solution. I thought you're supposed to use it if I don't explain well, which I think I did.
You can do this in your success handler:
var $dv = $('<div />').css('display', 'none').html(msg);
$("#listposts").append($dv);
$dv.fadeIn();
Of course you can use a <span> instead of <div> depending on your needs.
Similar to Blaster's...
$('<div />').html(msg).appendTo('#posts').hide().fadeIn();

jQuery/Ajax - Click to reveal

I want to basically create a link which says:
Click here to show contact information
Upon clicking it, it will ping a script via an ajax request, the ajax request will look up the user table where the ID is what is contained in the alt tag, it will return a certain field from the database and then the div will change from this link, to a contact number.
I'm sure some of you have seen this done before, for example:
Click to see persons phone number
They click it, and it changes to their phone number.
How would I go about doing this? I want to do it using ajax instead of having the phone number in the source code, because that really defeats the purpose of them having to click to reveal if bots can get it from the source code.
Thanks :)
Somethign along the lines of
$("#reveal").click(function(){
$.get('getphoneNumber.php',{id:$(this).attr('alt')}, function(data) {
$('#reveal').html(data);
});
});
with a php script called getphoneNumber.php that accepts a get parameter of id
Try this one
$('#reveal').click(function () {
var th = $(this);
$.get('/get-the-phone-number', { id: th.attr('alt') }, function (response) {
th.text(response);
});
});
Also, I'd recommend you put the id number inside a data-contact-id attribute and access it via th.data('contact-id') instead of using the alt attribute. Ignore me if you have other reasons to do this.
$("#reveal").live('click',function(event) {
var link = $(this).attr('alt');
var dataString = 'alt=' + link ;
$.ajax({
type: "POST",
url: "url",
cache:false,
data: dataString,
success: function(data){
this.href = this.href.replace(data);
}
});
}
Click here to show contact information
<div id="myHiddenDiv"></div>
$("#reveal").click(function(){
$.get("test.php", { id: $(this).attr("alt") },
function(data){
$("#myHiddenDiv").html(data);
$("#myHiddenDiv").show();
});
});
This example works assuming you've only got one of these "plugins" on your site, if you'll have multiple, use this:
Click here to show contact information
<div class="myHiddenDiv"></div>
$(".reveal").click(function(){
var divSelector = $(this).next("div");
$.get("test.php", { id: $(this).attr("alt") },
function(data){
divSelector.html(data);
divSelector.show();
});
});

Categories