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);
},
});
});
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!
I have this for loop in jquery
$(document).ready(function() {
for(i=0; i<counter; i++)
{
dataCounter = i;
$.ajax({
url: 'file.php',
dataType: 'json',
data: dataCounter,
error: function(){
alert('Error loading XML document');
},
success: function(data){
$("#contents").html(data);
}
});
}
});
And then I want to bring in my dataCounter into the file.php as a variable and have it change each time so I can get different records in mysql in file.php, am I doing this right? How would the php portion look like? I know how pass variables to a php file with this method if I had a form, but I don't have a get or a post form to work with. Also, my variables are going to change.
Can someone help me? Thank you!
While I don't recommend running an ajax query inside of a loop, I am wiling to explain the data option for $.ajax(). Ideally, you pass an object as the data option, and it is translated by jQuery into a query string where each object property name is a key and its value is the value:
data: {
count: dataCounter
}
becomes
?count=1
in the query string of the ajax request if datacounter is equal to 1.
In PHP you would access it as $_GET['count'].
data needs to be a key-value pair, not just a value as you have it here. Try something like: (not tested)
$.ajax({
url: 'file.php',
dataType: 'json',
data: ({dataCounter : dataCounter}),
error: function(){
alert('Error loading XML document');
},
success: function(data){
$("#contents").html(data);
}
});
ok, i have these two input fields where a user puts in two twitter names. When the submit button is pressed, both names should be send to a .php file with the POST method that checks if both usernames exsist on twitter.
Sending and receiving the answer for one value already works, but how can i also add the second? I already have this:
<script type="text/javascript">
function checkUsername()
{
$.ajax({
type: 'POST',
url: 'tu.php',
**data: {'user1' : $('#user1').val() },** //how to append user2?
dataType: "json",
success: function(data){
$('#uitslag').html(JSON.stringify(data));
$('#user1text').html(data['user1']);
$('#user2text').html(data['user2']);
}
});
}
</script>
the fields in the form:
<td><input type="text" name="user1" id="user1"/></td>
<td><input type="text" name="user2" id="user2" /></td>
and this is how the values should be able to be cathed in the .php:
$user1 = $_POST['user1'];
$user2 = $_POST['user2'];
So the question really is: how can I append the second username to the above jQuery POST function?
p.s. I am starting with javascript and jQuery, how do you guys work with this as no error messages are shown ever.. is there an environment/programm where I get debugging help with javascript?
data: {
'user1' : $('#user1').val(),
'user2' : $('#user2').val()
},
It's a simple enough extension-- just follow the same pattern.
<script type="text/javascript">
function checkUsername()
{
$.ajax({
type: 'POST',
url: 'tu.php',
data: {
'user1' : $('#user1').val(),
'user2' : $('#user2').val()
},
dataType: "json",
success: function(data){
$('#uitslag').html(JSON.stringify(data));
$('#user1text').html(data['user1']);
$('#user2text').html(data['user2']);
}
});
}
</script>
That said, jQuery does also have a .serialize() function that you could apply on the containing form, which automatically serializes the whole form. This could prove useful for you.
EDIT: It's worth mentioning that the jQuery selectors above look on the id for the name "user1" (etc.), whereas the PHP script expects the form elements' name to be "user1" (etc.). Here you have them as the same thing.
A more reliable jQuery selector that would allow you to always use the name in both jQuery and PHP is simply to use an attribute selector in jQuery:
$('input[name="user1"]').val()
This will catch any <input> element with the name attribute set to "user1".
You're probably looking for serialize. Your code would look something like this:
function checkUsername()
{
$.ajax({
type: 'POST',
url: 'tu.php',
data: $("#your_form").serialize(),
dataType: "json",
success: function(data){
$('#uitslag').html(JSON.stringify(data));
$('#user1text').html(data['user1']);
$('#user2text').html(data['user2']);
}
});
}
If you're sure you don't want serialize you could try this:
data: {'user1' : $('#user1').val(), 'user2' : $('#user2').val() }
As for your PS, check out Firebug and Webkit developer tools.
You actually don't even need the serialize function. If you just select your form, all form elements will be passed. This way if you just add another form element, like another textbox, it will all be passed in your ajax call.
function checkUsername()
{
$.ajax({
type: 'POST',
url: 'tu.php',
data: $("#your_form"),
dataType: "json",
success: function(data){
$('#uitslag').html(JSON.stringify(data));
$('#user1text').html(data['user1']);
$('#user2text').html(data['user2']);
}
});
}
how to sanitize user inputs that you gather by jquery .val() so you can write it in a dataString... in the example you see below when user writes
if some text that contains & the rest
of the comment doesn't seem to work
fine because it counts the rest as an
other variable to POST..
is there a sanitaziation or
serialization code? jQuery's
sanitize() function works on forms but
i want something that i can use
directly use on strings...
var id = $("some_id_value_holder_hidden_field").val();
var comment = $("#sometextarea").val();
var dataString = "id=" + id + "&comment=" + comment;
$.ajax({
type: "POST",
url: "write_comment.php",
data: dataString,
dataType: "json",
success: function(res) {
// Success
},
error: function(xhr, textStatus, errorThrown) {
// Error
}
});
Any suggestion will be much appreciated
Regards
Since you're using jquery, you can use the included Form plugin to serialize the array.
serialize() - Creates a url string from form fields (eg, someEle=someVal&anotherEle=anotherVal)
serializeArray() - Returns a key/value array of all the form elements (useful to know)
$.ajax({
url : 'write_comment.php',
type : 'post',
data : $('#form-element').serialize(),
success : function(data)
{
alert('yay!');
}
});
Edit: Edited to remove incorrect escape() part.
there is a built-in encodeUriComponent that does exactly what you're looking for. Besides that, you can provide an object in "data" field, in which case url encoding will be handled by jquery. In your example:
$.ajax({
type: "POST",
url: "write_comment.php",
data: { id: id, comment: comment},
etc...