I have JSON in URL and I am showing the total length of JSON array, but not showing the length of an object. Please view the code and correct the code.
$(document).ready(function () {
$.ajax({
url: "/hehe/GetAllBus",
data: "",
type: "GET",
dataType: "json",
success: function (dataBus1) {
loaddataBus(dataBus1);
},
error: function () {
alert("Failed! Please try again.");
}
});
});
function myFunction() {
var fruits = dataBus1;
document.getElementById("demo12").innerHTML = fruits.length;
}
Print the length of array
<code>
<body onload="myFunction()">
<p id="demo12"</p>
</body>
</code>
change:
success: function (dataBus1) {
loaddataBus(dataBus1);
},
...
function myFunction() {
var fruits = dataBus1;
document.getElementById("demo12").innerHTML = fruits.length;
}
to:
success: function (dataBus1) {
myFunction(dataBus1);
},
...
function myFunction(dataBus1) {
var fruits = dataBus1;
document.getElementById("demo12").innerHTML = fruits.length;
}
You forget to close the p tag (missing symbol '>' after "demo12")
<code>
<body onload="myFunction()">
<p id="demo12"></p>
</body>
</code>
$(document).ready(function () {
$.ajax({
url: "/hehe/GetAllBus",
data: "",
type: "GET",
dataType: "json",
success: function (dataBus1) {
loaddataBus(dataBus1);
},
error: function () {
alert("Failed! Please try again.");
}
});
});
function loaddataBus(fruits) {
document.getElementById("demo12").innerHTML = fruits.length;
}
You don't even need the onload on body:
<body>
<p id="demo12"></p>
</body>
Try this. In your code you have written ajax inside ready event which will fire after onload so data is not available.
function myFunction() {
$.ajax({
url: "http://mysafeinfo.com/api/data?list=englishmonarchs&format=json",
data: "",
type: "GET",
dataType: "json",
success: function(dataBus1) {
var fruits = dataBus1;
document.getElementById("demo12").innerHTML = dataBus1.length;
},
error: function() {
alert("Failed! Please try again.");
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<code>
<body onload="myFunction()">
<p id="demo12"</p>
</body>
</code>
If your using jQuery, which it looks like, there is a easier and faster way:
Using $.getJSON.
JS (can be in <head> or in <body> :
<script>
$(document).ready(function(){
$.getJSON("/hehe/GetAllBus", function(data){
$('#demo12').html(data.length);
});
});
</script>
HTML:
<body>
<p id="demo12"></p>
</body>
For more feedback:
$(document).ready(function(){
$.getJSON("/hehe/GetAllBus", function(){
console.log("fetched json");
})
.done(function(data){
$('#demo12').html(data.length);
});
.fail(function(){
console.log("error");
});
});
Related
I am getting unexpected token error from below code and not sure which part have gone wrong
<script>
function delete(n){
alert("This is Called");
if (confirm("Are you sure?")) {
$.ajax({
url: 'functions/delete.php',
type: 'POST',
data: {id: n},
success: function(response) {
console.log(response);
alert('This Works');
}
});
} else {
}
}
</script>
Re-name your function and get rid of the <script> tag if the code is in an external script. Check out below for example:
function deleteFn() {
alert("This is Called");
if (confirm("Are you sure?")) {
alert('This Works');
//Make AJAX call here
}
}
deleteFn();
delete is reserved word in JavaScript, you need to rename "delete" function.
And I would split the code on small peaces and test them separately.
Here is a working example (https://next.plnkr.co/edit/BwG70k3cNQf9sy3A) and the same code below. It does the same as you wanted but without alerts and confirm popups, and I put different URL, it returns response:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button onclick="remove('7')">Run POST Request</button>
<div id="result"></div>
<pre id="data"></pre>
<script>
function remove(n){
$.ajax({
url: 'https://httpbin.org/post',
type: 'POST',
data: {id: n},
success: function(response) {
//console.log(response);
$('#result').html('POST request was successfull:');
$('#data').html(JSON.stringify(response, null, '\t'));
}
});
};
</script>
</body>
</html>
Im am using Microsoft Edge in the scenario.
I as able to successfully do a single function with a ajax syntax with this code:
<script>
document.getElementById("inputEventID").onchange = function () { myFunction() };
function myFunction() {
$.ajax({
type: 'post',
url: 'webFetchMax.php',
data: {
eventID: form.eventID.value
},
success: function (response) {
$('#divSlots').html(response);
}
});
}
</script>
However when I insert addition functions with their on ajax inside the function I am receiving $ is not defined error function monitorOccupy() as shown below:
<script>
document.getElementById("inputEventID").onchange = function () { myFunction() };
monitorOccupy();
monitorAvail();
function monitorOccupy() {
$.ajax({
type: 'post',
url: 'webFetchMax.php',
data: {
eventID: form.eventID.value
},
success: function (response) {
$('#oSlots').html(response);
},
complete: function() {
setTimeout(monitorOccupy,1000);
}
});
}
function monitorAvail() {
}
function myFunction() {
$.ajax({
type: 'post',
url: 'webFetchMax.php',
data: {
eventID: form.eventID.value
},
success: function (response) {
$('#divSlots').html(response);
}
});
}
</script>
I have no idea my is this error is showing up on my console.
Call these functions as below
$(document).ready(function(){
monitorOccupy();
MonitorAvail();
});
Before posting this question the only jQuery file in my html file was jquery.min.js
<script scr="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
After inserting another jquery.min.js file my problem is solved. This is what it looks now:
<script scr="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
I have code that creates the body of a html-file.
I create it with JQuery.
The code is as followed:
SCRIPT JS
$(document).ready(function(){
homePage();
});
function homePage(){
$.ajax({
url: "http://events.restdesc.org/",
type: "GET",
dataType:'json',
success: function (response) {
var data = response;
var html = $("<h1></h1>").text(data.title);
var br = $("<br>");
var eventbtn = $('<input />', {
type : 'button',
id : 'eventbutton',
value : 'Events',
on : {
click: getevents(data.events)
}
});
html.append(br,eventbtn).appendTo($("body"));
},
error: function(error){
console.log("the page was not loaded", error);
},
});
}
function getevents(url){
console.log(url);
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="script.js"></script>
</head>
</body>
</html>
The function homePage is directly called when you open the index.html.
It does work, I see a header and a button, however the code is automatically triggers, it prints the url in the console. But when I click on it, it doesn't print it in the console.
How do I need to change my code in order to get a button that only prints the given url when I click on the button?
Try setting data-url attribute and then access it using $(this):
function homePage(){
$.ajax({
url: "http://events.restdesc.org/",
type: "GET",
dataType:'json',
success: function (response) {
var data = response;
var html = $("<h1></h1>").text(data.title);
var br = $("<br>");
var eventbtn = $('<input />', {
type : 'button',
id : 'eventbutton',
value : 'Events',
});
eventBtn.addClass('dynamic-btn');
eventbtn.data('url', data.events);
html.append(br,eventbtn).appendTo($("body"));
},
error: function(error){
console.log("the page was not loaded", error);
}
});
}
$(document).on('click', '.dynamic-btn',
function (e) {
console.log($(this).data('url'));
});
Add click function to the button after it has already been appended to the body:
function homePage(){
$.ajax({
url: "http://events.restdesc.org/",
type: "GET",
dataType:'json',
success: function (response) {
var data = response;
var html = $("<h1></h1>").text(data.title);
var br = $("<br>");
var eventbtn = $('<input />', {
type : 'button',
id : 'eventbutton',
value : 'Events',
on : {
click: getevents(data.events)
}
});
html.append(br,eventbtn).appendTo($("body"));
eventbtn.click(getevents(data.events));
},
error: function(error){
console.log("the page was not loaded", error);
}
});
}
$(document).ready(function(){
homePage();
});
function homePage(){
$.ajax({
url: "http://events.restdesc.org/",
type: "GET",
dataType:'json',
success: function (response) {
var data = response;
var html = "<h1>"+data.title+"</h1>";
html += "<br>";
html += '<input type="button" id="eventbutton" value="Events"/> ';
$("body").append(html);
$('input').click(function(){
getevents(data.events);
});
},
error: function(error){
console.log("the page was not loaded", error);
},
});
}
function getevents(url){
console.log(url);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
i am appending a div using ajax and alnog with that div a function (it's a time ago function) the function needs to be called as soon as the div is appended I've tried all possible solutions but none works
my function (located in processor.php page)
<script>
$(document).ready(function () {
$('.post_the_stat').click(function(event) {event.preventDefault();
$.ajax({
type: "POST",
url: "addition_life_text.php",
data: 'final_text='+ fin_text +'&priv='+ priv + '&post_time='+post_time ,
success: function(data) {
$(".main_container").prepend(data);
}
})
})
})
</script>
the function
<script>
function ago()
{
//codeblock
}
</script>
my question:how do i call the function ago as soon as the ajax was success is appended.ive tried window.onLoad etc...
<script>
$(document).ready(function () {
$('.post_the_stat').click(function(event) {event.preventDefault();
$.ajax({
type: "POST",
url: "addition_life_text.php",
data: 'final_text='+ fin_text +'&priv='+ priv + '&post_time='+post_time ,
success: function(data) {
$(".main_container").prepend(data);
ago();
}
})
})
})
</script>
Please try above. Hopefully this will work
Try this
success: function(data) {
$(".main_container").prepend(data).go();
}
})
Basic profile view comes from index.cs.asp?Process=ViewB_Profile.
When users click on edit profile, dialog box opens to edit the basic profile.
But I want the edit form to replace basic profile view data.
How can I do it, is there a plugin for it?
Thank you very much!
edited!
<script type="text/javascript">
$(document).ready(function() {
$(function V_Basic_Profile() {
$.ajax({
type: "GET",
url: "content/profile/index.cs.asp?Process=ViewB_Profile",
success: function(data) {
$("#B_Profile").append(data);
},
error: function (data) {
$("#B_Profile").append('.');
}
});
});
$(function E_Basic_Profile() {
$.ajax({
type: "GET",
url: "content/profile/index.cs.asp?Process=ViewB_Profile",
success: function(data) {
$("#B_Profile").append(data);
},
error: function (data) {
$("#B_Profile").append('.');
}
});
});
});
It would be fairly trivial to toggle two different divs in jQuery:
<div id="profile">
...
</div>
<form id="profileForm">
...
</form>
<script>
// ...
success: {
$('#profileForm').html(data).show();
$('#profile').hide();
}
// ...
</script>
Edit: Try this
<div id="profile_view">Loading...</div>
<div id="profile_form" style="display:none; ">Loading...</div>
Edit Profile
<script>
function loadProfileView()
{
$.get("content/profile/index.cs.asp?Process=ViewB_Profile", function(html) {
$('#profile_view').html(html).show();
$('#profile_form').hide();
});
}
function loadProfileForm()
{
$.get("content/profile/index.cs.asp?Process=EditB_Profile", function(html) {
$('#profile_form').html(html).show();
$('#profile_view').hide();
});
}
$(loadProfileView);
</script>