Ajax: Posting dynamic ajaxed content - javascript

I am trying to write the content of a div to a new html file. The content of the div is being generated by ajax itself, so when I try to post the contents to a new file, all that is being written to the file is the raw html. Is there a way to write the div contents of the 'ajaxed in' content?
This is my ajax code:
$("#getSource").on('click', function(){
headerURL = $(".header-code").attr('data-url');
$.ajax({
url: headerURL,
data: "function=showCode",
success: function(data){
$('code #mainCode').append(data);
}
});
var bufferId =$("#mainCode").html();
$.ajax({
type : "POST",
url : "postCode.php",
data: {id : bufferId},
dataType: "html",
success: function(data){
alert("ok");
}
});
});
my php code:
$handle = fopen("test.html", 'w+');
$data = $_POST['id'];
if($handle) {
if(!fwrite($handle, $data )) {
echo "ok";
}
}
the end result of whats being written in test.html:
<div id="mainCode"></div>
when I really need:
<div id="mainCode">
[dynamic content that is added by the user via ajax]
</div>

You also can use a deffered object returned by $.ajax to run second ajax request after the first one:
headerURL = $(".header-code").attr('data-url');
$.ajax({
url: headerURL,
data: "function=showCode",
success: function(data){
$('code #mainCode').append(data);
}
}).done(
function() {
var bufferId =$("#mainCode").html();
$.ajax({
type : "POST",
url : "postCode.php",
data: {id : bufferId},
dataType: "html",
success: function(data){
alert("ok");
}
});
}
)

Issue second AJAX call after first call appends content. Change JavaScritp code to:
$("#getSource").on('click', function(){
headerURL = $(".header-code").attr('data-url');
$.ajax({
url: headerURL,
data: "function=showCode",
success: function(data){
$('code #mainCode').append(data);
// second ajax call
var bufferId =$("#mainCode").html();
$.ajax({
type : "POST",
url : "postCode.php",
data: {id : bufferId},
dataType: "html",
success: function(data){
alert("ok");
}
});
}
});
});

Related

How to get return text from php file with ajax?

I am making a call with ajax to a php file. All I want to do is get a value back from the php file to test it with javascript. I have tried many many things, but can only get undefined (from the below code).
How can I get "hello" returned from the php file to my javascript?
jQuery.ajax({
type: "POST",
url: "the_file_to_call.php",
data: {userid: group_id_tb},
success: function(data) {
var the_returned_string = jQuery(data).html();
alert(the_returned_string)
}
});
The PHP file:
<?php
echo '<div id="id-query-result>"';
echo "hello";
echo "</div>";
You can change the code inside PHP like this
<?php
$queryResult = '<div id="id-query-result">hello</div>';
echo json_encode(['html' => $queryResult]);
Then, change your ajax call
jQuery.ajax({
type: "GET",
url: "the_file_to_call.php",
data: {userid: group_id_tb},
dataType: 'json',
success: function(data) {
var the_returned_string = data.html;
alert(the_returned_string);
}
});
$.ajax({
type: "POST",
url: "the_file_to_call.php",
data: {userid: group_id_tb},
success: function(data) {
$('body').append(data);
var text = $('#id-query-result').text();
alert(text);
$('#id-query-result').remove()
}
});
Why not just append the HTML response of your php file then get the text accordingly. You can then remove it after.
There are two changes to be done:
Change the type to "GET" since you directly call the PHP File.
remove the wrapped jQuery method inside the success function and add .html as an attribute
jQuery.ajax({
type: "GET",
url: "the_file_to_call.php",
data: {userid: group_id_tb},
success: function(data) {
var the_returned_string = data.html
alert(the_returned_string)
}
});

print ajax result in another page without page refresh

The below shown is AJAX code where fetches data from database and prints the data inside the div with id display. in this case, my code is working perfectly
But my requirement is to print the data in another page without refreshing the SECOND PAGE
To make it clear please check the two images
IMAGE1 :
IMAGE2 :
I used this below Ajax query for my requirement
'$(document).ready(function(){
displayFromDatabase();
displayaddress();
});
function displayFromDatabase(){
$.ajax({
url:"query.php",
type: "POST",
async: false,
data: {"display":'1'},
success: function(data){
$('#display').html(data);
}
});
}
Do as following :
$(document).ready(function(){
displayFromDatabase();
displayaddress();
});
function displayFromDatabase(){
$.ajax({
url:"query.php",
type: "POST",
async: false,
data: {"display":'1'},
success: function(data){
//$('#display').html(data);
var newWindow = window.open("", "new window", "width=200, height=100");
//write the data to the document of the newWindow
newWindow.document.write(data);
}
});
}
This Might Be Helpful
$(document).ready(function(){
displayFromDatabase();
displayaddress();
});
function displayFromDatabase(){
$.ajax({
url:"query.php",
type: "POST",
async: false,
data: {"display":'1'},
success: function(data){
//$('#display').html(data);
var win=window.open('about:blank');
with(win.document)
{
open();
write(data);
close();
}
}
});
}

Call JSON inside AJAX success

I want to call a json data inside my AJAX success. I'm still new on manipulating json and AJAX. Can somebody help me on how to access my json data which is from another URL? And I want to compare the id to the JSON data. Here's my code so far:
function getCard(id){
$.ajax({
type: "GET",
data: "id=" + id,
success: function(data){
#call JSON data here from another URL
# Is it possible to call another AJAX here?
}
});
}
This code will work for you
$.ajax({
url: "url",
method: "post",
data: "id=" + id,
success:function(data) {
// success goes here
$.ajax({
url: "url",
async:false,
method: "post",
data: "id=" + id,
success:function(json) {
JSON.parse(json);
// compare data and json here
},
error: function(){
// error code goes here
}
});
},
error: function(){
// error code goes here
}
});
yes Zuma you can call another Ajax inside Success function of Ajax call. Below is the example:
$.ajax({
type: "post",
url: url1,
data: data1,
success: function(data){
$.ajax({
type: "post",
url: url2,
data: data2,
success: function(data){
});
});
});
function getCard(id){
$.ajax({
type: "Get",
url: "发送请求的地址",
data: "id=" + id,
success: function(data){
#call JSON data here from another URL
# if success,you can call another AJAX.
# Is it possible to call another AJAX here?
# yes!
}
});
}

My ajax code is not send value to other php page?

My ajax code is not send value to other php page??
I want to delete value coming from database ajax code get id that come from database but not sent to other php page where delete code.
<script type="text/javascript">
function deleteBox(id){
if (confirm("Are you sure you want to delete this record?")){
var dataString = id;
$.ajax({
type: "POST",
url: "del.php",
data: dataString,
cache: false,
success: function(){
}
});
}
}
</script>
try below code:
var dataString = id;
$.ajax({
type: "POST",
url: "del.php?datastring="+id,
//data: dataString,
cache: false,
success: function(){
}
});
or
var dataString = id;
$.ajax({
type: "POST",
url: "del.php",
data: {datastring:id},
cache: false,
success: function(){
}
});
send data with parameter name and value not only value, like this
data: {'id':dataString},
please correct this in ajax call. you can pass the data from one page to another page using data. like data : {var1:value1,var2:value2,var3:value3}
$.ajax({
type: "POST",
url: "del.php",
data: {dataString: dataString},
cache: false,
success: function(){
}
});

Do something after window load

I'm doing a (simple) ajax call on window load:
$(window).load(function () {
$.ajax({
url: someUrl,
type: "get",
dataType: "",
success: function(data) {
...........
How can I do something, for instance a function or event after this ajax proces is finished. The problem is I have to append something to the data recieved by the ajax call. But I can't append on window load because the data is still being processed.
Put it in the success handler of the ajax call:
$(window).load(function () {
$.ajax({
url: someUrl,
type: "get",
dataType: "",
success: function(data) {
// do whatever you want with data
}
});
});
You can call that in the success callback function of Ajax request
success: function(data) {
myFunction() ; // If function
$('#elementID').click() // If you want to trigger a click event
}
You may use the
`$(document).ready`
So it will be similar to this:
$(document).ready(function(){
$.ajax({
url: someUrl,
type: "get",
dataType: "",
success: function(data) {
//Your code should be here
After
success: function(data) {
for (var ii = 0; ii < data.length; ii++){
building html here
}
your code here
}
you want to enter in your functions within the success function for the ajax call but before the call is complete.
You could also do
$.ajax({
url: someUrl,
type: "get",
dataType: "",
context: document.body
}).done(function() {
// do whatever when is done
onCompleteFunction();
});
this should execute your request when page is just loaded.
$(function(){
$.ajax({
url: someUrl,
type: "get",
dataType: "",
success: function(data) {
// do whatever you want with data
}
});
});
or you can do:
$(function(){
$.ajax({
url: someUrl,
type: "get",
dataType: "",
complete: function(data) {
// do whatever you want with data
}
});
});

Categories