I am struggling to figure out why this is not working, but I would like it so that the information from load.php is placed in the div sample but if that code is updated (say if i was pulling information from a database), only the information included in load.php would refresh - not the entire page.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
<script>
$(document).ready(function(){
var callAjax = function(){
$.ajax({
method:'get',
url:'load.php',
success:function(data){
$("#sample").html(data);
}
});
}
setInterval(callAjax,5000);
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id='sample'>100 </div>
</body>
</html>
I had a similar situation with my AJAX calls. I am not sure if your syntax is actually bad but here is how my Ajax call looks for a similar partial load.
var callAjax = function(){
$.ajax({
url: "load.php"
type: "GET",
async: true,
success: function (data) {
$("#sample").html(data);
}
});
}
};
setInterval(callAjax,5000);
I found that my Ajax started working once I added the async:true and made sure my controller was handling GET requests. I had previously forgotten that it was set to HTTPPOST only.
I hope this helps out. Not sure if it will.
cheers.
setInterval('someFunc()', 1000);
function someFunc()
{
$.ajax({
async: true,
type: "GET",
url: "www.domain.com/url",
data: data,
success: function (html) {
$("#myDiv").html(html);
}
});
}
Related
I have a PHP running on a server, and i call to it via jQuery.Ajax() but it always return to the error portion of it.
If i call the PHP address directly from my browser, i get the response i need, it only breaks in the jQuery call.
The PHP (simply saying) is this:
<?php
if(isset($_GET['getcodenode']))
{
echo json_encode
(
array
(
'itens'=>
array
(
0=>array('id'=>100,'lb'=>'300','ds'=>'300 mm'),
1=>array('id'=>105,'lb'=>'400','ds'=>'400 mm')
)
)
);
die();
}
?>
And on the javascript side i call for it like this:
<html>
<head>
<script type="text/javascript">
function loadcall(data)
{
jQuery.ajax({
async:false,
method:'POST',
crossDomain:true,
dataType:'jsonp',
url:'http://example.com/ajax.php?getcodenode',
data:{'arg':data},
success:function(result){
var ret=JSON.parse(result);
var el=jQuery('#abc');
for(en in ret.itens)
{
el.Append('<div id="item_'+en.id+'">'+en.lb+', '+en.ds+'</div>');
}
},
error:function(result){alert('Error (loadcall)');}
});
}
</script>
</head>
<body>
<div id="abc"></div>
</body>
</html>
How to read JSON objects from PHP and display in browser?
There are lots of comments on your code:
While you already getting a json return from server; you don't to parse that. Its already a json object.
You can set async:true to get a promise data
The way you loop through objects you need to do that properly. see image how to get the object path correctly.
You can use $ token instead of jQuery token; unless you purposely need that.
I am not sure if this is the best approach; but it give the needed result as explained in your question.
The code is bellow tested with some comments:
<script type="text/javascript">
loadcall("test");
// as pointed you need to call the function so it runs
function loadcall(data) {
$.ajax({
async: true,
method: 'POST',
crossDomain: true,
dataType: 'json', //your data type should be JSON not JSONP
url: 'page.php?getcodenode',
data: {
'arg': data
},
success: function(result) {
console.log(result);
// see attached image how to get the path for object
var ret = result;
var el = $('#abc');
for (en in ret.itens) {
console.log(ret.itens[en].ds);
el.append('<div id="item_' + ret.itens[en].id +
'">' + ret.itens[en].lb + ', ' + ret.itens[en].ds + '</div>');
}
},
error: function(result) {
console.log(result);
}
});
}
</script>
Open you developer tool in your browser hit F12 (In Chrome, Firefox or Edge):
Go to Console tab and find the results.
Expand the results tell you get to the object you need.
Right click and `copy property path'.
Use the object path as needed in your code.
you need to call loadcall(data)
<html>
<head>
<script type="text/javascript">
function loadcall(data)
{
jQuery.ajax({
async:false,
method:'POST',
crossDomain:true,
dataType:'jsonp',
url:'http://example.com/ajax.php?getcodenode',
data:{'arg':data},
success:function(result){
var ret=JSON.parse(result);
var el=jQuery('#abc');
for(en in ret.itens)
{
el.Append('<div id="item_'+en.id+'">'+en.lb+', '+en.ds+'</div>');
}
},
error:function(result){alert('Error (loadcall)');}
});
}
loadcall('somethingData')
</script>
</head>
<body>
<div id="abc"></div>
</body>
</html>
I've made game in phaser (JS library for games) and i now want to make the scoretable with JS/PHP. What interest me is to pass a variable from js to php to update the database. I've read many topics and all the answers lead to AJAX and this example:
function score_submitting() {
var var_data = "Hello World";
$.ajax({
url: "submit.php",
type: "GET",
data: { var_PHP_data: var_data },
});
}
But it's not working. Im sure that the function can be called, cause when I put alert there, it works. But with AJAX happens nothing. The file is in the middle, cause it comes from game:
(HTML)
(...)
<body>
<center>
<div id="gra">
<script type="text/javascript" src="functions.js"></script>
<script type="text/javascript" src="create.js"></script>
<script type="text/javascript" src="update.js"></script>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
</div>
</center>
</body>
(...)
Thanks for answers!
If you are using GET request you should make your request like that :
function score_submitting() {
var var_data = "Hello World";
$.ajax({
url: "submit.php?mydata="+var_data,
type: "GET"
});
}
Or you can use POST request if you don't want to pass your parameters in URL.
You can put success and error function for testing your code like following
you can also fetched data that is returned from ajax call as returnedData
function score_submitting() {
var var_data = "Hello World";
$.ajax({
url: "submit.php",
type: "GET",
data: { var_PHP_data: var_data },
success:function(returnedData)
{
alert('success');
},
error:function()
{
alert('Error');
},
});
}
Hello there I am totally new to ASP.NET and learning it to my own. I am good at Java J2EE (Struts2 Framework)! I know how can i update or change any control/text inside any div element using struts2 and ajax code.
My Problem
Actaully, I'm trying to do the same thing in ASP.NET just for the learning! Suppose that I have a Default.aspx page with the javascript and ajax methods as:
<head runat="server">
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script type="text/javascript">
function Change() {
$.ajax({
type: "GET",
url: "temp.aspx",
dataType: "text/html;charset=utf-8",
success: function(msg) {
$("#changer").html(msg);
}
});
}
</script>
<title>Untitled Page</title>
</head>
<body>
<div id="changer">//this is the div i want to update it using ajax
Hello Old Text
</div>
<input type="button"id="but" value="Hello Changer" onclick="Change()"/>
</body>
and suppose that I have my temp.aspx as:
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<div id="changer">
Hello New Text
</div>
</body>
I just want to know if this is possible in ASP.NET because with Java I am familiar with such an operation but I don't know why this is not working in case of ASP.NET!
Any hints or clues are favorable for me, Please don't mind for my question because I am totally new to ASP.NET but I am good at Java
Thanks in Advance!
dataType must define as html like this;
function Change() {
$.ajax({
type: "GET",
url: "temp.aspx",
dataType: "html",
success: function(msg) {
$("#changer").html(msg);
}
});
}
From jQuery Docs;
dataType (default: Intelligent Guess (xml, json, script, or html))
Type: String
Additionally, you can inspect errors using error.
function Change() {
$.ajax({
type: "GET",
url: "temp.aspx",
dataType: "html",
success: function(msg) {
$("#changer").html(msg);
},
error: function(xhr, status, err) {
console.error(status, err.toString());
}
});
}
This is not related to ASP.NET or other web frameworks. It is just related to jQuery and Javascript. jQuery didn't recognise this "text/html;charset=utf-8". If you didn't use dataType, the ajax request worked successfully. It is just verification and result is interpreted according to dataType. For example, you are returning a JSON and the mime type of the your endpoint is not json (considering its mime type is html) just changing of the dataType as "JSON" you can parse the result as object.
I wrote a little script, in first example, I set dataType as HTML and in other example, I set dataType as JSON.
You could add a generec handler called Temp.ashx wich return the new text.
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write("Hello New Text");
}
In your ajax call you need to specify you are expecting a text.
<script type="text/javascript">
function Change() {
$.ajax({
type: "GET",
url: "temp.ashx",
dataType: "text/plain",
success: function(msg) {
$("#changer").html(msg);
}
});
}
</script>
I'm trying to show data after ajax call but it was disappeared after showing
here is my code:
<script src="js/jquery.js"></script>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
$(document).ready(function(){
$(".medicine").keyup(function(){
var txt=$(this).val();
$.post("search.php",{medicine:txt},function(result){
$("#search-result").html(result);
});
});
$(document).on('click','#find', function () {
var input = $("#text").val();
var url = 'row.php';
var data = input;
$.ajax({
type: "POST",
url: url,
data: {data:data},
success: function (data) {
$(document).find('table').remove();
$("#temp_table").html(data);
}
});
});
});
</script>
first function is for search bar which is working second one also working but when data comes in success function it show for a second in temporary div and vanished
When your ajax completes, the success callback function removes all <table> elements caused by the use of the .remove() function.
$(document).find('table').remove();
Description: Remove the set of matched elements from the DOM.
If you want to clear the html content of your <table> elements instead of removing them (my guess), use .empty() instead
$.ajax({
type: "POST",
url: url,
data: {
data: data
},
success: function(data) {
$('table').empty();
$("#temp_table").html(data);
}
});
I'm calling a simple JS script to load ajax functions.... and it doesn't work... I debugged using document.write to see where the problem lied and I can see my TEST 1 but not my TEST 2...
MY HTML
<html>
<title>Ajax Infinite scroll using jQuery - InfoTuts</title>
<head>
<!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<img id='loading' src='img/loading.gif'>
<div class="masonry" >
<div id="demoajax" cellspacing="0"></div>
</div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
MY JavaScript
var ajax_arry=[];
var ajax_index =0;
var sctp = 100;
$(function()
{
$('#loading').show();
/* document.write("TEST1"); */
$.ajax(
{
/* document.write("TEST2"); */
url:"scroll.php",
type:"POST",
data:"actionfunction=showData&page=1",
cache: false,
success: function(response)
{
$('#loading').hide();
$('#demoajax').html(response);
}
});
/* MORE CODE BELOW */
my document.write TEST 1 prints on screen, but my TEST 2 can't print..
It seems it's not going in the $ajax( section of the code
Do not use document.write to debug. Browsers have a console. Use console.log and you can set break points.
And you are creating an error putting document.write in the middle of an object!!! That is a syntax error.
If you are trying to figure out why the Ajax call is not loading, add an error handler and see if it is getting called.
$('#loading').show();
console.log("loading shown");
$.ajax({
url: "scroll.php",
type: "POST",
data: "actionfunction=showData&page=1",
cache: false,
success: function(response) {
console.log("success", response);
$('#loading').hide();
$('#demoajax').html(response);
},
error: function() {
console.log("error", arguments);
}
});
You have missed to close your function;
put this }); after your ajax call.
if you got "500 (Internal Server Error)", you may have to change the Permissions of that PHP file.
try by putting document.write("TEST2"); inside success function.
Put $.ajax on document.ready function
$(document).ready(function(){
$.ajax({
/* document.write("TEST2"); */
url:"scroll.php",
type:"POST",
data:"actionfunction=showData&page=1",
cache: false,
success: function(response){
$('#loading').hide();
$('#demoajax').html(response);
}
});
});