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!
Related
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
}
});
});
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!
TL;DR at bottom of post
I am building an application for mobile OS. This is the relevant code:
var pageId;
$(document).ready(function(){
var output = $('#output');
$.ajax({
url: 'http://dev.123456789.co.uk/db.php',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
$.each(data, function(i,item){
var linkedPage = '<h2>'+item.eventName+'</h2>'
+ '<p>Description: '+item.description+'</p><p>Type: '
+ item.type+'</p><p id="pageid">'+item.id+'</p>';
output.append(linkedPage);
pageId = $('#pageid').html();
localStorage.setItem("pageId", pageId);
});
},
error: function(){
output.text('There was an error loading the data.');
}
});
});
Basically, the code goes to a PHP file stored on our dev server and returns data from the database, in this case its eventName, description, type and id, the id being the id of the row in the database (primary key).
In each iteration it outputs the correct item.id at: '+item.id+''.
However, when you go to click each link to take you to the new page localStorage.setItem -> pageId is always the same, so it always equals 1, the first id in the database. However I need it so that when you click the link it takes you to the correct ID for each iteration.
As far as I am aware I cannot do a get/post because the application cannot read PHP because it is for a smartphone, so the data handling on the device is through javascript/data sent from JSON (and structure with HTML); any ideas?
EDIT: displaySinglePost.html:
var pageId;
$(document).ready(function(){
pageId = localStorage.getItem("pageId");
document.write("pageid: " +pageId);
var output = $('#output');
localStorage.clear();
$.ajax({
url: 'http://dev.xxxxxxx.co.uk/single.php',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
$.each(data, function(i,item){
var dataOut = '<h2>'+item.eventName+'</h2>'
+ '<p>Description: '+item.description+'</p><p>Type: '
+ item.type+'</p>';
output.append(dataOut);
});
},
error: function(){
output.text('There was an error loading the data.');
}
});
});
Too Lazy; Didn't Read:
However, when you go to click each link to take you to the new page localStorage.setItem -> pageId is always the same, so it always equals 1, the first id in the database. However I need it so that when you click the link it takes you to the correct ID for each iteration.
As far as I am aware I cannot do a get/post because the application cannot read PHP because it is for a smartphone, so the data handling on the device is through javascript/data sent from JSON (and structure with HTML); any ideas?
Do you mean to set the local storage item "pageID" on every iteration, like on your first example? You may be overwriting the value of it on every iteration(the last iteration would have an item.id of 1).
However, if you want to create a link for each id you should try:
var dataOut = '<h2>'+item.eventName+'</h2>'
+ '<p>Description: '+item.description+'</p><p>Type: '
+ item.type+'</p>';
And have php handle the id via $_GET on page.php
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();
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.