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();
}
}
});
}
Related
I am now in javascript, I am trying to display a indictor icon when ajax starts and hide it when it finishes, below is my code:
CSS:
div.ajax-progress {
//some setting and url
}
<body>
<div class="ajax-progress"></div>
</body>
Javascript:
$('#fileToUpload').on('change', function(e) {
var file = e.target.files[0];
var formData = new FormData($('form')[0]);
imageId = cornerstoneWADOImageLoader.fileManager.add(file);
$.ajax({
url: 'loadfile.php',
type: 'POST',
data: formData,
async: false,
dataType: 'json',
timeout : 60000,
beforeSend :function(){
$(".ajax-progress").show();
}，
success: function (html) {}
$(".ajax-progress").hide();
//doing something}
});
});
but nothing happens, any idea? appreciated.
Maybe if you put $(".ajax-progress").show(); before the call of ajax $.ajax({}); and them hide it in the succes.
I don't know if that's the same to what you have in your code but you commented out the success closing bracket }
you can also use console.log() or alert() to see what's going on in your code.
Try rewriting your ajax as below:
$.ajax({
url: 'loadfile.php',
type: 'POST',
data: formData,
async: false,
dataType: 'json',
timeout : 60000,
beforeSend :function(){
//do something
}，
success: function (html) {
//doing something
}
});
$(document).ajaxStart(function() {
$(".ajax-progress").show();
});
$(document).ajaxStop(function() {
$(".ajax-progress").hide();
});
This will show and hide $(".ajax-progress") in all your ajax requests within the application.
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");
}
});
}
});
});
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(){
}
});
I am using ajax, sometimes it takes time to load all the data from my database therefore I need to find a way to display (Loading...) While the data is not yet complete. Below is my sample code, and I am looking for some event while the data is still in process.
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(data){
$('#para').html(data);
}
});
It is very simple..
before you call the ajax start your loading image..& after the success hide the image
for eg :
$.fancybox.showLoading();
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(data){
$.fancybox.hideLoading();
$('#para').html(data);
}
});
here
$.fancybox.showLoading()
is my function in which I have the property of displaying the loader,
This will be internally called whenever an ajax call is made.
$.ajaxStart(function() {
$("img#loading").show();
});
$.ajaxComplete(function() {
$("img#loading").hide();
});
HTML
<img src="../images/loading.gif" alt="wait" id="loading"/>
<div id="loading">LOADING...</div>
var loading = $("#loading");
loading.hide();
function doAjax() {
loading.show();
$.ajax({
url: "/js/beautifier.js",
success: function (data) {
loading.hide();
}
});
}
doAjax();
on jsfiddle
I do an ajax call to get a list of all elements, say Products and populate them in a table with checkboxes. Then I make another ajax call to get which products were already selected and select them. This works in all browsers except ie. Am I doing something wrong?
$.ajax({
url : "${product_category_url}",
data : {"orgID":"${globalOrganisation.id}"},
dataType : "html",
statusCode: {
401: function() {
$('.ui-tabs-panel:visible').html("${ajax_session_expired}");
}
},
success : function(data) {
$("#productCategoryContainer").html(data);
$.ajax({
url: "${get_taggedProd_url}",
data: {"questionnaireId":_questionnaireId},
dataType: "json",
success: function(data){
var productIds = data.products;
$.each(productIds,function(index,value){
var obj = $('input[name="'+value+'"]');
obj[0].checked = true
selectRow(obj[0]);
});
}
});
}
});
This is due to caching by IE.
Please try this
$.ajax({
url : "${product_category_url}",
data : {"orgID":"${globalOrganisation.id}"},
dataType : "html",
statusCode: {
401: function() {
$('.ui-tabs-panel:visible').html("${ajax_session_expired}");
}
},
success : function(data) {
$("#productCategoryContainer").html(data);
$.ajaxSetup ({
// Disable caching of AJAX responses
cache: false
});
$.ajax({
url: "${get_taggedProd_url}",
data: {"questionnaireId":_questionnaireId},
dataType: "json",
success: function(data){
var productIds = data.products;
$.each(productIds,function(index,value){
var obj = $('input[name="'+value+'"]');
obj[0].checked = true
selectRow(obj[0]);
});
}
});
}
});
and if you need more details please look into this
The thing in this code that always screws me up is trying to get the check box selected. Make sure obj[0].checked = true actually works.