I tried every thing which i using but ajax did not display the output in div BUT AJAX working fine.. is there any solution i could display result in div?
Tested in Firebug its display the reponse in XHR but display in DIV
Please solve me problem as soon as possible.
$(document).ready(function(){
$("#signup_form").click(function() {
// we want to store the values from the form input box, then send via ajax below
var name = $('#name').attr('value');
var email = $('#email').attr('value');
var passwords = $('#passwords').attr('value');
var passwords2 = $('#passwords2').attr('value');
var usernames = $('#usernames').attr('value');
var txt = $.ajax({
type: "POST",
url: "register.php",
data: "usernames=" + usernames + "& passwords="+ passwords + "& passwords2=" + passwords2 +"& email=" + email +"& name=" + name,
success: function(data){
//$('#messages').hide(function(){$('div.success').fadeIn();});
$('#messages').val(data);
}
});
return false;
});
});
My Dive
<div id="messages"> Message Display </div>
Thanks,
Try:
$('#messages').html(data);
.val is for textboxes as such.
Related
I am building a cms in php and inserting large content in database, for that i am using text editor. But when i give blank space inb front of paragraph or i write something on new line its not getting inserted in mysql table. I am giving muy code below...
<script>
$(function() {
$("#btn-submit").click(function() {
var content =document.aboutform.descr.value = $('#editor').html();
var title=$("#title").val();
var id=$("#id").val();
//var active = $('input[name=make_active]:checked').val();
var dataString ='title1='+title+'&content1='+content+'&id1='+id;
//alert(id);
//alert(id);
//alert(firstname);
// Returns successful data submission message when the entered information is stored in database.
//var dataString = 'title1=' + title + '&content1=' + content;
//alert(dataString);
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "../admin/update_about.php",
data: dataString,
cache: false,
success: function(response) {
$("#status").html(response);
},
});
//closes ajax call
return false;
});
//closes button click
});
</script>
And this is php code
$title = $_POST['title1'];
$content = mysql_real_escape_string($_POST['content1']);
$id = $_POST['id1'];
$sql="UPDATE about_us SET title='".$title."',content='".$content."' WHERE about_id= ".$id;
$result=$conn->query($sql);
I've been trying different options for over a week now and nothing seems to work. What makes this slightly more complicated is that I have multiple forms on the page that all need to be tied to this same submit function. They all have different IDs.
The following is a simplified version of my jQuery:
$('form').on('submit', function(form){
var data = $(this).serialize();
$.ajax({
type: 'POST',
cache: false,
url: 'inc/process.php',
data: data,
success: function(){
// The following fires on first AND second submit
console.log("Updates have successfully been ajaxed");
}
});
return false;
});
I have also tried using $('form').submit() with the same results.
Relevant sections of process.php:
$query = 'UPDATE pop_contents
SET ';
$id = $_POST['content_id'];
/* to avoid including in MySQL query later */
unset($_POST['content_id']);
$length = count($_POST);
$count = 0;
foreach($_POST as $col => $value){
$value = trim($value);
$query .= $col."='".escapeString($value);
// don't add comma after last value to update
if(++$count != $length){ $query .= "', "; }
// add space before WHERE clause
else{ $query .= "' "; }
}
$query .= 'WHERE id='.$id;
$update_result = $mysqli->query($query);
After much hair pulling and swearing, I've solved the problem.
TinyMCE editor instances do not directly edit textareas, so in order to submit the form, I needed to first call tinyMCE.triggerSave() from the TinyMCE API. So, the working code looks like this:
$('form').on('submit', function(form){
// save TinyMCE instances before serialize
tinyMCE.triggerSave();
var data = $(this).serialize();
$.ajax({
type: 'POST',
cache: false,
url: 'inc/process.php',
data: data,
success: function(){
console.log("Updates have successfully been ajaxed");
}
});
return false;
});
I was confused when i pass the Ajax String data via tinyMce ..but it is not save to database with php...then i use the
tinyMCE.triggerSave();
event.preventDefault();
then fine.........
$("#save").click(function() {
tinyMCE.triggerSave();
event.preventDefault();
var data = $(this).serialize();
var position = $("#position").val();
var location = $("#job_location").val();
|
|
|
|
var end_date = $("#end_date").val();
var dataString = '&position='+ position + '&job_location=' + location + '&job_category=' + category + '&job_des=' + job_des +'&job_res='+ job_res + '&job_requ='+ job_requ + '&start_date='+ start_date + '&end_date='+ end_date;
alert(dataString);
$.ajax({
type: "POST",
url: "regis.php",
data: dataString,
success: function(data){
}
});
return false;
});
i believe the problem is that you don't prevent the default action of the form. try this
$('form').bind( 'submit', function(event) {
event.preventDefault(); // added
console.log("Binding"); // changed to console.log
$.ajax({
type: "POST",
url: "inc/process.php",
data: $(this).serialize(),
success: function() {
console.log("Your updates have successfully been added."); // changed to console.log
}
});
});
Another neat trick to go along with this is setting the progress state on the tinymce editor, giving you a very simple way to add a loading icon. This article in the TinyMCE docs explains how to do that.
Also from that article, using ed.setContent() will allow you to set the text showing in the editor. I used it to blank the editor, but only after a successful post.
i have an easy ajax script which sending data to php file with no problem
index.php
<script type="text/javascript">
$(function() {
$('#submit').click(function() {
$('#container').append('<img src="img/loading.gif" alt="Currently Loading" id="loading" />');
var name = $('#name').val();
var email = $('#email').val();
var comments = $('#comments').val();
$.ajax({
url: 'submit_to_db.php',
type: 'POST',
data: 'name=' + name + '&email=' + email + '&comments=' + comments,
success: function(result) {
$('#response').remove();
$('#container').append('<p id="response">' + result + '</p>');
$('#loading').fadeOut(500, function() {
$(this).remove();
});
}
});
return false;
});
});
</script>
with in the same page i have another form which needed to be submitted so i don't know how to do it without no conflict with in this function i already use ?
btw it won't processed with in the same php file it will use another file
I don't see what's the point. What kind of problems do you have in submitting more than one form? You're referencing elements by id.
Note that you really should change your code to intercept the $('#form-id').submit(), not the $('#submit').click event, because a form could be submitted also with enter key, or via javascript callbacks, not only using the submit button.
In your code what is the problem in doing something like this
$(function() {
$('#other-form-id').submit(function() {
$.ajax({
url: 'other-php-script.php',
type: 'POST',
data: 'name=' + name + '&email=' + email + '&comments=' + comments,
success: function(result) {
// your success handling
}
});
return false;
});
});
This is going to work as far as Dom ID are unique across the document.
BTW I strongly advise you to use this wonderful plugin to manage ajax form to keep your js code cleaner and simple. With that your code could be rewritten as:
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
$('#response').remove();
$('#container').append('<p id="response">' + result + '</p>');
$('#loading').fadeOut(500, function() {
$(this).remove();
});
});
});
I have a form that requires a physical address. Once the user enters the full address, I have a button that says "Verify address". I want to be able to click that button, trigger an ajax call that will call a file in the server which will get the longitude and latitude of that address, then return to the form with those coordinates, and display a div with them. Dont worry about figuring out the coordinates. Im just trying to figure out the whole ajax call and jquery display upon response from the server. Thanks
So, I did this to have things working:
$(document).ready(function() {
//if verify button is clicked
$('#verify').click(function () {
var address = $('input[name=address]');
var city = $('input[name=city]');
var state = $('input[name=state]');
var zip = $('input[name=zip]');
var country = $('select[name=country]');
//organize the data for the call
var data = 'address=' + address.val() + '&city=' + city.val() + '&state=' + state.val() + '&zip=' + zip.val() + '&country=' + country.val();
//start the ajax
$.ajax({
url: "process.php",
type: "GET",
data: data,
cache: false,
success: function (html) {
//alert (html);
if (html!='error') {
//show the pin long and lat form
$('.form2').fadeIn('slow');
} else alert('Error: Your location cannot be found');
}
});
//cancel the submit button default behaviours
return false;
});
});
process.php returns the longitude and latitude back in a variable as: "longitude,latitude". How do I access that data back in the front end so I can populate the form fields with it? Thanks a lot for the great responses.
I hope this is helpful. This would be a generic AJAX call to a php page:
$.ajax({
type: "POST",
url: "scripts/process.php",
data: "type=query¶meter=" + parameter,
success: function (data) { //Called when the information returns
if(data == "success"){
//Success
} else {
//Fail
}
},
error: function () {
//Complete failure
}
});
The jQuery function you need is jQuery.get().
You can find other details here: http://api.jquery.com/category/ajax/
Sorry for the scarce details but you haven't provided source code.
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.