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
}
});
});
Related
I wanted to post data using jquery and pass it to PHP variable in same PHP file/page.
$(document).ready(function() {
$('.return_type').click(function(){
ret = $(this).val();
$.ajax({
url: "http://localhost:1000/globe/retrackView.php",
type: "POST",
data: {ret: ret},
success : function(results){
alert(results);
},
});
});
});
But when I alert the result its alert the whole HTML tags.
$_POST["ret"];
and $_POST["ret"] is null
There's something that I need to revise in my syntax?
Thanks in advance!
As per your comment, ".return_type" you have used for textbox. So you should use change() instead of click() to bind events. If you use click event on textbox, it will immediately get called on click(without any value).
use change event instead of click as return_type as its textbox.
$('.return_type').change(function(){
ret = $(this).val();
$.ajax({
url: "http://localhost:1000/globe/retrackView.php",
type: "POST",
data: {ret: ret},
success : function(results){
alert(results);
},
});
});
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!
I have a table with dynamic data from database, each row consist of a text filed and 2 link (accept or reject). then if user clicks on any of these link, the row will disappear and the rest of the rows are only visible in table.
I get ID of each row with ajax by clicking on each link, however I also need to get the text-field value.
how can I get it?
I need to have in ajax cause after getting value I need to insert in database with php+sql.
this is my ajax part for link:
$('a.accept').click(function(d) {
d.preventDefault();
var parent = $(this).parent();
$.ajax({
type: 'get',
url: 'Test.php',
data: 'ajax=1&accept=' + parent.attr('id').replace('record-',''),
beforeSend: function() {
parent.animate({'backgroundColor':'#fb6c6c'},300);
},
success: function() {
parent.slideUp(300,function() {
parent.remove();
});
}
});
});
});
how can I include text filed value in it?
please comment me which I'm really in need to solve it,
Thanks
You can add manually your text to the GET request.
(snippet)
data: 'ajax=1&accept=' + parent.attr('id').replace('record-','') + '&text=VALUE',
Substitute text with the name you want to be received in PHP. Substitute VALUE with the text entered on the page that you want to grab - and don't forget to encode the value.
You will need the name of id of the textfield first. Then you could do something like this:
var textboxvalue = $('name or id of textfield').val();
Then you will need to append this value to your data string:
data: 'ajax=1&textvalue='+textboxvalue+'accept=' + parent.attr('id').replace('record-',''),
Then you can use $_GET['textvalue']; to get the value of textbox.
Use following and you're good to go. Also you had extra '});' at the end line of JS fragment. I had it removed. But make sure you give id to text fields in following pattern : text-fld-RECORD_ID where RECORD_ID is the ID of the record.
$('a.accept').click(function(d) {
d.preventDefault();
var parent = $(this).parent();
var id = parent.attr('id').replace('record-','');
//make sure that text field has ID in pattern 'text-fld-RECORD_ID'
var text_fld = $('#text-fld-'+id).val();
$.ajax({
type: 'post', // I suggest using post; get will be harmful in such occasions
url: 'Test.php',
data: {ajax:1,accept:id,text:text_fld},
beforeSend: function() {
parent.animate({'backgroundColor':'#fb6c6c'},300);
},
success: function() {
parent.slideUp(300,function() {
parent.remove();
});
}
});
});
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.
I'm trying to take values from a dropdown two boxes and send them to a PHP file which will draw an appropriate field from a mySQL database depending on the combination chosen and display it in a div without refreshing the page using AJAX. I have the second part sorted, but I'm stuck on the first part.
Here is the HTML: http://jsfiddle.net/SYrpC/
Here is my Javascript code in the head of the main document:
var mode = $('#mode');
function get() {$.post ('data.php', {name: form.him.value, the_key: #mode.val()},
function(output) {$('#dare').html(output).show();
});
}
My PHP (for testing purposes) is:
$the_key = $_POST['the_key'];
echo $the_key;
After I have it in PHP as a variable I can manipulate it, but I'm having trouble getting it there. Where am I going wrong? Thanks for your replies!
You need a callback function as well to have the server response to the POST.
$.post('ajax/test.html', function(data) {
$('.result').html(data);
});
This snippet will post to ajax/test.html and the anonymous function will be called upon its reply with the parameter data having the response. It then in this anonymous function sets the class with result to have the value of the server response.
Help ? Let me know and we can work through this if you need more information.
Additionally, $.post in jQuery is a short form of
$.ajax({
type: 'POST',
url: url,
data: data,
success: success
dataType: dataType
});
your jquery selectors are wrong:
html:
<select id="mode">
jquery selector:
$("#mode").val();
html:
<select name="player">
jquery selector:
$("select[name=player]").val();
You want to add a callback to your ajax request, its not too hard to do, here ill even give you an example:
$.ajax({
url: "http://stackoverflow.com/users/flair/353790.json", //Location of file
dataType: "josn",//Type of data file holds, text,html,xml,json,jsonp
success : function(json_data) //What to do when the request is complete
{
//use json_data how you wish to.;
},
error : function(_XMLHttpRequest,textStatus, errorThrown)
{
//You fail
},
beforeSend : function(_XMLHttpRequest)
{
//Real custom options here.
}
});
Most of the above callbacks are optional, and in your case i would do the following:
$.ajax({
url: "data.php",
dataType: "text",
data : {name: ('#myform .myinput').val(),the_key: $('#mode').val()},
success : function(value)
{
alert('data.php sent back: ' + value);
}
});
the ones you should always set are url,success and data if needed, please read The Documentation for more information.