update and retrieve updated values without page refresh - php

Question

I have a profile page which updates the username, email, firstname and last name. I want to update and show the updated values in the same form without refreshing.
I use the below jQuery code to update the data but how can I retrieve the updated values after the submit is success
$(document).ready(function() {
$("#send").submit(function() {
var formData = new FormData($(this)[0]);
$.ajax({
url: 'http://localhost/form/index.php/mail/send',
type: 'POST',
data: formData,
async: false,
success: function(data) {
if (data == 'true') {
alert("success");
} else {
alert("error!");
}
},
error: function(data){
alert("Something went wrong!");
},
});
return false;
});

Answer 1

Try some thing like this:
from your ajax url page return an array like:
$response['errCode'] = 0;
$response['content'] = // your updated content
echo json_encode($response);
in your js code you will get it in response like:
var data = JSON.parse(response);
if(data['errCode'] == 0)
{
// update content
}

Answer 2

You don't have to retrieve anything from database if you have successfully updated the database. On successful update in your database you just return true or false back to ajax success point. If it returns true then just set username, email, firstname and last name to the text box by using jquery $("#email").val('abc#abc.com'); that's it!!
There is .val() method
GET $("#txtEmail").val()
SET $("#txtEmail").val("something")

Answer 3

Please give
return true;
statement in your jquery code after
success: function(data) {
if (data == 'true') {
//place here return true; and remove this alert statement.
}
and in your html portion,add like this on your html elements
<input name="name" id="name" value="<?php echo set_value('name'); ?>" class=" field_style-2" type="text" maxlength="20" required/>
This is just an example.you can change your html code with your own id,name and value attribute.I think this is helpful.Otherwise please share yoyur html code

Answer 4

After if(data == 'true') { add this below two lines.
$("#div_id").html('');
$("#div_id").html(data);
Now do three things,
1. Add the div tag before start your form. And close that div tag after close of form tag. Give the div id #div_id
2. Copy the full form code and paste below the Update SQL.
3. Change if(data == 'true') to if(data != '').
Logic:-
Using JQuery it will hit the url for update the database. Then It will load the form in the response of the jquery post. If first make the $div_id empty, then load the response data into that div id. And if the data load successfully then with out refresh the page, the updated value will display.
Note: I already use this thing in my project. And it's working fine.