jQuery .ajax error handling - javascript

I'm trying to use jQuery.ajax() to retrieve an html code snippet from table_snippet.html and then replace the element in my html code. My error handler in jQuery.ajax() is being executed instead of the desired success handler.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Table</title>
<link href="address-data-file.css" type="text/css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="ajax_goodness.js" type="text/javascript"></script>
</head>
<body onload="func()">
<div id="div_id">
<p>Use AJAX to retrieve the file table-snippet.html and then replace the div with the contents of that file.</p>
</div>
</body>
</html>
function func(){
jQuery.ajax({
type: "GET",
url: "table_snippet.html",
dataType: "html",
success: function(data){
$("#div_id").html(data);
},
error: function(){
alert("fail");
}
});
}

$(function () {
$.ajax({url:"table_snippet.html",success:function(result){
$("#div_id").html(result);
}});
});

Related

HTML button not calling function

this is my 1st javascript attempt and I'm getting the following in the chrome console:
"Uncaught ReferenceError: test1 is not defined."
I'm trying to send an Ajax request via onclick button event and display the data in the document. However, due to the error, I've scoped back to hello-world just for a debug attempt. Pardon this kind of question as I know its very elementary.
Any help is appreciated. Thanks for your time!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="test1()">Click Here</button>
<p id="Data"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
function test1(){
alert("Hello, World");
/* $.ajax({
url: Target_URL,
headers: {
'Accept':'application/json',
'authorization', 'Bearer ' + vToken
},
method: 'GET'
// dataType: 'json',
// data: YourData,
success: ajaxCall = data
}); */
}
</script>
</body>
</html>
You used only one script tag for loading jquery and for your method - that will not work... "If a script element has a src attribute specified, it should not have a script embedded inside its tags." here a working solution:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="test1()">Click Here</button>
<p id="Data"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
function test1(){
alert("Hello, World");
/* $.ajax({
url: Target_URL,
headers: {
'Accept':'application/json',
'authorization', 'Bearer ' + vToken
},
method: 'GET'
// dataType: 'json',
// data: YourData,
success: ajaxCall = data
}); */
}
</script>
</body>
</html>
You can't place your javascript code in same <script> tag where you linked an external file (it shouldn't be included in <script src="..."> function </script>). Your test1 function should be separated from scr javascript tag. Try this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">/<script>
<script> your javascript function should be here </script>
Hope this will solve your problem.
Put the JavaScript in the head of your document, and separate out the script for including jquery and your actual code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
function test1(){
alert("Hello, World");
}
</script>
</head>
<body>
<button onclick="test1()">Click Here</button>
<p id="Data"></p>
</body>
</html>
You haven't placed your javascript method in proper javascript tag, separately place javascript method and javascript src, please check below for more clarification:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
function test1() {
alert("Hello, World");
}
/* $.ajax({
url: Target_URL,
headers: {
'Accept':'application/json',
'authorization', 'Bearer ' + vToken
},
method: 'GET'
// dataType: 'json',
// data: YourData,
success: ajaxCall = data
}); */
</script>
</head>
<body>
<button onclick="test1()">Click Here</button>
<p id="Data"></p>
</body>
</html>
First off, you need to declare your JavaScript function before you call it.
Change to this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" />
<script>
function test1(){
alert("Hello, World");
}
</script>
<button onClick="test1()">Click Here</button>
<p id="Data"></p>
</body>
</html>

Passing form variable to php using JSON

I am using the following code and I need to access the input value of the form textbox from php. The form is not submitted to server directly through the form tag. The button is calling a JS function. I need to access the input textbox called stName from the php code. How can I pass this info to php and access it from there? Thank you.
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.4.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.mobile-1.4.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script charset="utf-8" type="text/javascript">
function connect()
{
$.ajax({
url:'hostname/reply.php',
headers:{"Content-Type": "application/json"},
type:'POST',
data:$(this),
dataType:'JSON',
error:function(jqXHR,text_status,strError){
alert(strError);},
timeout:60000,
success:function(data){
$("#result").html("");
for(var i in data){
$("#result").append("<li>"+data[i]+"</li>");
}
}
});
}
</script>
</head>
<body>
<center><b>My Students</b></center>
<center>
<form method="POST">
<input type="text" value="John" name ="stName" />
<input onclick="connect()" type="button" value="showStudents" />
</form>
</center>
<center><b>Results</b></center>
<ul data-role="listview" id="result"></ul>
</body>
</html>
serialize the form data ..
change your connect function to this
function connect()
{
$.ajax({
url:'hostname/reply.php',
headers:{"Content-Type": "application/json"},
type:'POST',
data:$('form').serializeArray(),
dataType:'JSON',
error:function(jqXHR,text_status,strError){
alert(strError);},
timeout:60000,
success:function(data){
$("#result").html("");
for(var i in data){
$("#result").append("<li>"+data[i]+"</li>");
}
}
});
}
or simply you can compress your code like this ..
function connect()
{
$.post('hostname/reply.php', $('form').serialize(), function(data){
$("#result").html("");
for(var i in data){
$("#result").append("<li>"+data[i]+"</li>");
}
}
});
}
You need to use the Sterilize Function. data:$( "form" ).serialize()
For Reverence to the function: http://api.jquery.com/serialize/
I also just found this StackOverflow that talks about how to structure the ajax request if you are having problems. Submit form using AJAX and jQuery

getjson jquery doesn't work in phonegap android

I'm trying to retrieve json data from local server in my phonegap android app.
I've put a submit input to get data.I am using the method $.ajax in jquery to do that.
My problem is that when i click the submit, nothing is displayed but the page is refreshed.
I don't see how to fix this.
Could you please help me? Thanks in advance.
(ps: the json returned is correct and i've changed the access in config.xml)
Here is the full code :
<!DOCTYPE html>
<html>
<head>
<title>Application test</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
<link href="css/jquery.mobile-1.0rc1.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.4.js"></script>
<script src="js/jquery.mobile-1.0rc1.min.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('#testform').submit(function(){
$('#content').html("<b>Chargement...</b>");
$.ajax({
url: "http://localhost/projects/api/getAllCategorie.php"
}).done(function(data){
$("#content").html('<p> ID: ' + data.categories[0].id + '</p>');
log('erreur');
}).fail(function(){
alert("Erreur!!");
$("#content").html('erreur');
log('erreur');
});
return false;
};
</script>
</head>
<body>
<img src= "css/images/logo-annuaire-mayotte.png">
<ul data-role="listview" data-filter="true" data-filter placeholder="Rechercher..." data-inset="true">
<li>Restaurants</li>
<li>Bâtiments</li>
<li>Numéros utiles</li>
</ul>
<form id='testform'>
<div><input type="submit" id="driver" value="Synchronisation" /></div>
</form>
<div id="content">
</div>
</body>
</html>
If you want to connect to your localhost php file use port number(working for me) or IP address of your actual system like this
http:// localhost:8080/projects/api/getAllCategorie.php,(for emulator)
http:// 10.0.2.2/projects/api/getAllCategorie.php
Close your document ready function
$(document).ready(function(){
$('#driver').click(function(event){
event.preventDefault(); // To prevent default action of the form
$('#content').html("<b>Chargement...</b>");
$.ajax({
url: "http://localhost:8080/projects/api/getAllCategorie.php",
dataType:"json",
beforeSend:function(){
alert("Request is going to send now");// place your loader
},
success:function(data){
$("#content").html('<p> ID: ' + data.categories[0].id + '</p>');
log('erreur');
},
error:function(xhr, status, error){
alert(xhr.responseText);
$("#content").html('erreur');
log('erreur');
}
});
return false;
});
});
HTMl : Replace your form tag with this input tag
<div><input type="button" id="driver" value="Synchronisation" /></div>

Jquery code to get data from http

I would like to know what can I do to show a list into a html page using jquery.html and $getJson,
I have a server.js running on http:localhost:8080/list and I want to show the list between html tags
the html code
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
jQuery
<script src="jquery.js"></script>
<script>
$.get( "http://localhost:8080/clubs", myCallBack );
</script>
</body>
</html>
The myCallBack is where you define a function which can take the data as a parameter.
$.get("http://localhost:8080/clubs", function (data) {
$("#myDiv").html(data);
});
HTML
<div id="myDiv"></div>
The jQuery Documentation for jQuery.get() includes the following example:
$.get("ajax/test.html", function(data) {
$(".result").html(data);
alert("Load was performed.");
});

Update page and url without reloading

How can i update a webpage and url without reloading the web page. I saw this at SoundCloud and i want to use this at my own project.
This is an idea of what i want:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/jquery.min.js"></script>
</head>
<?php
$url = $_SERVER['REQUEST_URI'];
if (url == /login){
include 'php/login.php';
echo"<script>
$(document).ready(function() {'
history.pushState(null, null, '/login')
});
</script>"
}
if (url == /home){
include 'php/home.php'
echo"<script>
$(document).ready(function() {'
history.pushState(null, null, '/home')
});
</script>"
}
?>
</html>
the problem is, when i enter www.mydomain.com/home for example i get (of course) a server error that the file not exists. How can i fix this problem?
Try window.location.hash=your_hash_string in JavaScript
That file doesnt exist. Error occur when some php script on ur server is utilizing those file locations.
Try something like this:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/jquery.min.js"></script>
</head>
<body>
<div id="navigation">
<ul>
<li>Login</li>
<li>Home</li>
</ul>
</div>
<div id="content"></div>
</body>
<script type="text/javascript">
function _load_content(url) {
$("#content").slideUp("slow", function() {
$("#content").html('<p align="center">Loading...</p>');
}
$.ajax({ type: "get", url: url,
success: function(response) {
$("#content").html(response);
$("#content").slideDown("slow");
},
error: function() {
alert("An error occured");
}
});
}
$(document).ready(function() {
_load_content("php/home.php");
});
</script>
</html>
NOTE: This is the very basic function I made... You should really learn jQuery AJAX.

Categories