I am trying to insert comment using ajax. Everything works fine except the $_POST. It doesn't seem to post the data so the comment field in table is empty. Other things work fine, like inserting date. I only have problem with the ajax (no problems in php).
Anyway, here is my code:-
<head>
<script>
function su_post(id) {
$("#load_post").show(),
$("#post_submit").click(function() {
var c_post = $("#c_post").val();
var dataString = '&c_post=' + c_post;
$.ajax({
type: "POST",
url: '/script/post.php',
data: "id=post_script" + id,
cache: false,
success: function(){
$("#load_post").fadeOut();
}
})});
};
</script>
</head>
<body>
<form id="form_post" method="post" action="javascript:su_post(1)">
<label for="c_post">Post your updates/status</label>
<input type="text" name="c_post" id="c_post" />
<br /><br /><input type="submit" id="post_submit" value="Post" />
</form>
</body>
edit: since you might not have understood me; there is a problem in obtaining the value you type in the input box and posting or sending the value to post.php. When I put data: {id: post_script + id, c_post: c_post}, it the code doesn't seem to load the php file at all. (gets stuck on posting -> http://prntscr.com/10dmjt)
Thank you in advance :)
The data property in your ajax() function needs to be of Object type. Like this:
data: { id: "post_script" + id }
You also had some syntax errors, your function should look like this:
function su_post(id) {
$("#load_post").show();
$("#post_submit").click(function() {
var c_post = $("#c_post").val();
var dataString = '&c_post=' + c_post;
$.post("ajax_login.php",{ user_name:$('#username').val(),password:$('#password').val(),rand:Math.random() });
$.ajax({
type: "POST",
url: '/script/post.php',
data: { id: "post_script" + id },
cache: false,
success: function(){
$("#load_post").fadeOut();
}
});
});
}
You are calling the function javascript:su_post(1), so it would seem that your data field contains {id: "post_script1"} only. Where is your "comment" being passed to the AJAX? You don't do anything with the var dataString after assigning a value to it...
Maybe you intend to have something like this line:
data: "id=post_script" + id + dataString,
since, I think dataString contains &c_post=whatever the comment is after you did
var c_post = $("#c_post").val();
var dataString = '&c_post=' + c_post;
I do wonder whether you need some additional quoting in the dataString as well... I don't believe the $(#c_post).val() function takes care of it, so I suspect you need an escape() somewhere - or does the ajax do it for you? I guess that's where #errieman's {} comes in handy... it turns the entire thing into an object and takes case of the escaping for you. That would make the line you need:
data: {id: post_script + id, c_post: c_post}
I doubt any of this turns out to be exactly right, as I'm having to guess what you are trying to do - but I do hope one of these will give you inspiration to solve your problem.
It seems to have worked when I took out the statement $("#post_submit").click(function() and put var c_post = $("#c_post").val();var dataString = '&c_post=' + c_post; on the top.Now my code looks like this :-
function su_post(id) {
var c_post = $("#c_post").val();
var dataString = '&c_post=' + c_post;
$("#load_post").show(),
$.ajax({
type: "POST",
url: '/script/post.php',
data: {c_post:c_post},
cache: false,
success: function(){
$("#load_post").fadeOut();
}
});
};
Related
I'm using jquery datepicker on a page. Next to datepicker i have a section which will show events on mouseenter of the datepicker. I have figured out a way to get the date into the header of this section. The problem i am having is getting that variable over to the php page that will be displayed on mousenter.
Below is the page that the datepicker and events will be shown:
<div id=events>
<div id=eventcontent>
</div>
</div>
<div id=eventsheading>
<div id=headingcontent>
</div>
</div>
<div id = "datepicker">
</div>
This is the Jquery i am using to fill in the header with the date (which works), send the same variable to events.php (which doesnt work), and show events.php in the content div (which does work as when i highlight a date, hello is shown):
$(document).on('mouseenter', '.ui-datepicker-calendar .ui-state-hover', function(e){
var daynum1 = $(this).text();
var month1 = $('.ui-datepicker-month').text();
var year1 = $('.ui-datepicker-year').text();
var Date = daynum1 + " " + month1 + " " + year1;
$('#headingcontent').html(Date);
//ajax call with date information
var request = $.ajax({
url: "events.php",
type: "POST",
data: {Date: Date},
dataType: "html"
});
$.ajax({
url: "events.php",
cache: false,
success: function(html){
$("#eventcontent").append(html);
}
});
});
Below is events.php:
if(isset($_POST['Date']))
{
$date = $_POST['Date'];
echo <<<_END
<p>$date</p>
_END;
}
else
{
echo <<<_END
<p>hello!</p>
_END;
}
once i get this bit working, events PHP will be changed to select events from mysql.
To clarify, the problem i am having is getting variable date to send via ajax with this code:
//ajax call with date information
var request = $.ajax({
url: "events.php",
type: "POST",
data: {Date: Date},
dataType: "html"
});
i cant seem to find anywhere that explains how data: {...}, should be used and I'm guessing this is my problem.
Sorry if the code is just completely wrong i'm very new to learning it all and thanks for any help.
you must not use variable names which collide with inbuilt objects as #CBroe said.
and rest like this
var myDate = daynum1 + " " + month1 + " " + year1;
$('#headingcontent').html(myDate);
$.ajax({
url: "events.php",
type: "POST",
data: {myDate: myDate},
dataType: "html",
success: function(html){
$("#eventcontent").empty();
$("#eventcontent").append(html);
}
});
no need for second ajax call
Can someone please show me the correct way I can add these two lines of code
data: {name: info, me: '<?php echo $me; ?>'},
data: dataString ,
So that I can send them in a $_POST to my action.php , I have tried several ways to do this but cannot get both of them successfully to be passed on to my action_comments.php I understand I'm missing something possible when using data: below or have not correctly formatted my code . I'm a total beginner with very little experience so sorry if I lack good practice but hopefully can be better from my debugging . Thanks to anyone who helps me get passed this .
Here is complete code to give overview what Im doing
<script type="text/javascript">
$(function() {
// call the submit button ref: name
$(".submit_button").click(function() {
declare textcontent
var textcontent = $("#content").val();
//dataString = 'content' globel var
var dataString = 'content='+ textcontent;
declare info
var info = $('#name').val();
// option no text inputted
if(textcontent=='')
{
// show message if no text
alert("Enter some text..");
$("#content").focus();
}
else
{
//display text animation loading
$("#flash").show();
$("#flash").fadeIn(400).html('<span class="load">Loading..</span>');
//var info equals the string
var info = $('#content').val();
//start ajax call
$.ajax({
type: "POST",
//path to my action.php
url: "actions/action_comment.php",
//Need to undestand how to correctly format these lines so
//they are both succesful when submitted to my action_comment.php
$me is declared (not-shown here it holds integer)
data: {name: info, me: '<?php echo $me; ?>'},
// pass the string from textarea to $_POST
data: dataString ,
// I can get one or the other to work but not both
cache: true,
// feed the success my data
success: function(html){
$("#show").after(html);
document.getElementById('content').value='';
$("#flash").hide();
$("#content").focus();
}
});
}
return false;
});
});
</script>
I have my $_POST as follows in action_comment.php
echo $me = $_POST['me'];
//DATASTRING FROM TEXTAREA
echo $content= $_POST['content'];
var dataString = 'content='+ textcontent;
$.ajax({
type: "POST",
url: "actions/action_comment.php",
data: {name: info, me: '<?php echo $me; ?>',txt_data: dataString},
....
});
Cannot use data attribute multiple times in same ajax request. Within php file you can access like $_POST['txt_data'] to get textarea content and same way for other parameters;
define data attribute once and pass all the data like as shown above.
if you want to post whole form data you can use this way
var form = $('#my_form');
$.ajax( {
type: "POST",
url: form.attr( 'action' ),
data: form.serialize(),
..
..
});
I'm making an AJAX Call like this:
$( "#submit_jobs_preview" ).click(function(e) {
var postData = $('#new_job_form').serialize();
var formURL = "ajax.xxx.php";
$.ajax({
type: 'POST',
url: formURL,
data: {submit_jobs_preview: postData },
success: function(data){
alert(data);
}
});
e.preventDefault(); //STOP default actio
});
In php i echo:
echo $_POST['submit_jobs_preview'];
This $_POST shows all values i put in my form correctly like this:
new_job_city=Berlin&new_job_name=Manager etc.
But if i want a single $_REQUEST from this $_POST like this:
if($_POST['submit_jobs_preview']){
echo $city = mysql_real_escape_string($_REQUEST['new_job_city']);
}
the alert is empty.
Why is that?
UPDATE
Full return of data:
XHR Loaded (autocomplete.php - 200 OK - 105.99994659423828ms - 354B) VM2106:3
new_job_city=Halle&new_job_job=Flugbegleiter&new_job_other_job=&job_zielgruppe=Auszubildende&new_job_phone=4921663965439&new_job_email=kleefeld%40dsc-medien.de&new_job_detailhead=F%C3%BCr+unser+zentrales+Marketing+mit+Sitz+in+der+Hauptverwaltung+in+der+City+von+D%C3%BCsseldorf+suchen+wir+zum+n%C3%A4chstm%C3%B6glichen+Termin+eine%2Fn&new_job_time=Vollzeit&teilzeit_std=&new_job_tasks=&new_job_profile=&new_job_advantage=&new_job_creatorId=1&new_job_creationDate=1390569795&new_job_scope=Airport+Service&new_job_niederlassung=7&new_job_active=0
You don't need to use {submit_jobs_preview: postData } if it is not necessary. I will give you another hint. Use following ajax;
$( "#submit_jobs_preview" ).click(function(e) {
var postData = $('#new_job_form').serialize();
var formURL = "ajax.xxx.php";
$.ajax({
type: 'POST',
url: formURL,
data: postData,
success: function(data){
alert(data);
}
});
e.preventDefault(); //STOP default actio
});
and on php side;
if($_POST['new_job_city']){
echo $city = mysql_real_escape_string($_REQUEST['new_job_city']);
}
In this case you can use field names directly.
Another hint:
You can put a hidden value on your form like,
<input type="hidden" name="submit_jobs_preview" value="true"/>
and js side will be same as above in my answer, and in php side you can check like;
if($_POST['submit_jobs_preview']){
echo $city = mysql_real_escape_string($_REQUEST['new_job_city']);
}
As you can see, you can send your post value as hidden field and make your check
$_POST['submit_jobs_preview'] holds a string and nothing else so you just can't access it that way. Use parse_str() to unserialize $_POST['submit_jobs_preview']. That way you can access its properties.
$_POST['submit_jobs_preview']['new_job_city']
im trying to pass on the id attribute to the file.php, but its giving me 0 every time, when i try to insert it into the database, the javascript and the html is provided!
$(function() {
$(".follow").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$.ajax({
type: "POST",
url: "file.php",
data: info,
success: function(){}
});
$("#follow"+I).hide();
$("#remove"+I).show();
return false;
});
});
html file:
<div id="follow1"><span class="follow_b"> Follow </span></div>
p.s. it deos insert the value in the database
file.php:
<?php
$id =$_POST['id'];
msql_insert.........
?>
It may not matter in this case, but the ID of an element is not supposed to start with a number.
I'm kinda new to jQuery but understand it for the most part. My problem is that when my ajax call which refreshes the entire div is done, all my dynamically created forms don't work. If you try and submit them, the event doens't work properly and just tries to do a normal form submit. I have all the other items such as links bound using the .live() which seem to work great. Just the form dies.
How do I rebind the dynamically created forms after the ajax call? They all have id of formname_id. I tried to use bind but it doesn't work as below. Any help is appreciated.
Here is the code
jQuery(document).ready(function(){
jQuery("form[id^='commentform_']").each(function(){
var id = parseInt(this.id.replace("commentform_", ""));
jQuery(this).bind('submit', function(e) {
var action = jQuery('#action_' + id).attr('value');
var act_id = ('1');
jQuery.ajax({
type: "POST",
url: "ajax/modify.php",
data: "action="+ action +"& act_id="+ act_id,
success: function(response){
jQuery('#CommentsContainer_' + id).html(response);
jQuery('#commentform_' + id)[0].reset();
}
});
return false;
});
});
});
Try doing something like this:
jQuery("form[id^='commentform_']").live('submit',function(){
var id = parseInt(this.id.replace("commentform_", ""));
var action = jQuery('#action_' + id).attr('value');
var act_id = ('1');
jQuery.ajax({
type: "POST",
url: "ajax/modify.php",
data: {"action": action, "act_id": act_id},
success: function(response){
jQuery('#CommentsContainer_' + id).html(response);
jQuery('#commentform_' + id)[0].reset();
}
});
return false;
});
No need to loop over the forms to bind to them. If you can use delegate instead of live do so.
Why don't you over-ride the normal form submit:
function addNewitem() {
$('#new_item_form').submit(function() {
$.get("includes/ItemEdit.php", {
newItem: true
},
function(msg) {
isNewItem = true;
$("#new_item").hide();
$('#item_list').hide();
$("#item_edit").html( msg );
$("#item_edit").show();
editActiveEvent();
});
return false;
});
}
Don't forget to return false. or do a .preventDefault
I have gotten this to work adding the event in the function call and using event.preventDefault(); BUT of course only in FF. Doesn't work in IE7..
jQuery("form[id^='commentform_']").live('submit',function(event){
var id = parseInt(this.id.replace("commentform_", ""));
var action = jQuery('#action_' + id).attr('value');
var act_id = ('1');
jQuery.ajax({
type: "POST",
url: "ajax/modify.php",
data: {"action": action, "act_id": act_id},
success: function(response){
jQuery('#CommentsContainer_' + id).html(response);
jQuery('#commentform_' + id)[0].reset();
}
});
event.preventDefault();});
But IE7 still tries to sumbit the action. arrgggh.. Anything I'm doing wrong??