I want to load json data from js file (url:'myTurorials.json' throwing error so I used .js,)
Please give me solution, thanks in advance.
code from 'myTurorials.js' file is as bellow
`[
{"display": "JavaScript Tutorial", "url":"http://www.w3schools.com/js/default.asp"},
{"display": "HTML Tutorial", "url":"http://www.w3schools.com/html/default.asp"},
{"display": "CSS Tutorial", "url": "http://www.w3schools.com/css/default.asp"}
]`
code from 'myTurorials.js' ends here
$(document).ready(function(){
$.ajax({
type : 'GET',
url : 'myTutorials.js',
dataType : 'json',
contentType : 'application/json',
success: function (response) {
alert('success');
},
error : function(){
alert('error');
},
complete : function(){
//init();
}
});
});
function init(){
myFunction(myArray);
}
function myFunction(arr) {
var out = "";
var i;
for(i = 0; i < arr.length; i++) {
out += '' + arr[i].display + '<br>';
}
document.getElementById("id01").innerHTML = out;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>HTML5 responsive website tutorial</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Baumans' rel='stylesheet' type='text/css'/>
<script>
</script>
<style>
</style>
<!-- my files -->
<script src="jquery.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="id01"></div>
</body>
</html>
Related
I am trying to learn how to use an API in Laravel and show json results in my view. This is a sample code I have made but nothing is showing. The API is with values because when I try it in Postman, it returns json results.
<html>
<head>
<meta charset="utf-8">
<title>Item Manager</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<div class="container">
<ul id="items" class="list-group">
</ul>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function (){
getItems();
function getItems(){
$.ajax({
url:'https://www.boredapi.com/api/activity'
}).done(function (items){
let output = '';
$.each(items, function (key, activity){
output += '<li class="list-group-item">' +
'<strong>${activity.text}</strong>${text.body}' +
'</li>'
});
});
}
});
</script>
</body>
</html>
I suspect it might have a problem with the key tags i am trying to call. I am trying to make the call from blade not needed from the controller.
json returned from the API:
{
"activity": "Write a list of things you are grateful for",
"type": "relaxation",
"participants": 1,
"price": 0,
"link": "",
"key": "2062010",
"accessibility": 0
}
Here is the completed code.
<html>
<head>
<meta charset="utf-8">
<title>Item Manager</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<div class="container">
<ul id="items" class="list-group">
</ul>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function (){
getItems();
var output = '';
function getItems(){
$.ajax({
url:'https://www.boredapi.com/api/activity'
}).done(function (items){
let output = '';
$.each(items, function (key, activity){
output += '<li class="list-group-item">' +
'<strong>'+key+'</strong>' + activity +
'</li>'
});
$("#items").append(output);
});
}
});
</script>
</body>
</html>
try adding this:
$.ajax({
url:'https://www.boredapi.com/api/activity',
type: "GET",
},
Also console.log() your result might be helpful.
I'm using summernote component and what I want to do is I want to stop the user from adding characters if the text area is pre filled, but I couldn't figure out how to stop typing event. I tried this and it worked for me
$(document).ready(function() {
$('#summernote').summernote({
callbacks: {
onKeydown: function(e) {
if(e.keyCode > 64)
{
e.target.blur();
}
}
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Summernote Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.js"></script>
</head>
<body>
<div class="container mt-3">
<div class="inner-container">
<div id="summernote1">
Hello Summernote ! please enter text.
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#summernote1').summernote({
callbacks: {
onKeydown: function(e) {
if(e.keyCode > 0)
{
e.preventDefault();
}
}
}
});
});
</script>
</body>
</html>
I simply added this code in my html page and it worked for me.
$(document).ready(function() {
$('#summernote1').summernote({
callbacks: {
onKeydown: function(e) {
if(e.keyCode > 0)
{
e.preventDefault();
}
}
}
});
});
I want that every time the "plato" button is pressed (there are several because I create them inside a loop) this function is executed
"$ ('# plato'). click (function ()" but I have observed that this code is only executed when the first button is pressed. With the others it is not executed.
menu.php:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="estilos.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="ajax.js"></script>
</head>
<body>
<?php
$restaurante=$_GET['restaurante'];
chdir(getcwd()."/".$restaurante);
$id_fichero= #fopen("menus.txt","r") or die("<B>El fichero no se pudo abrir");
?>
<?php
while (!feof($id_fichero))
{
if(($linea=trim(fgets($id_fichero,256),"\n\r"))!=false)
{
echo("<button type='button' class='accordion'>".$linea."</button>");
echo("<div class='panel'>");
$id_fichero2= #fopen($linea.".txt","r") or die("<B>El fichero no se pudo abrir");
while (!feof($id_fichero2))
{
if(($linea2=trim(fgets($id_fichero2,256),"\n\r"))!=false)
{
echo("<button type='button' id='plato' name='plato'>".$linea2."</button><br>");
echo("<input type='hidden' id='nombrePlato' name='nombrePlato' value='".$linea2."'>");
}
}
echo ("</div>");
}
}
?>
<div id="carrito">
</div>
<script src="collapsible.js"></script>
</body>
</html>
ajax.js
$(document).on('ready',function(){
$('#plato').click(function(){
alert("I'm here");
var url = "anadirCarrito.php";
$.ajax({
type: "POST",
url: url,
data: $('#platos').serialize(),
success: function(data)
{
$('#carrito').html(data);
}
});
});
});
I have a modal dialog which has a form. When a user clicks the submit button on the dialog, I want the form to be submitted, and it works fine. But problem is after submitting the form the dialog is not closing and after refreshing only data is added into the grid.
Here is my dialog box
$(document).ready(function(){
$("#dialog-form").dialog({
autoOpen : false,
height : 400,
width : 800,
modal : true,
title: "Currency Details",
close : function() {
$(this).dialog("close");
}
});
});
Here is my ajaxSubmit
function saveCurrencyAjax() {
var str = $("#enumCurrency").serialize();
$.ajax({
type : "POST",
url : "../currency/saveEnumCurrency.action",
data : str,
success : function(response) {alert("success call");
$('#dialog-form').dialog('close');
$('#currencyGrid').flexReload();
},
error : function(e) {
alert('Error: ' + e);
}
});
};
This is my Controller
#RequestMapping( value="/currency/saveEnumCurrency.action", method=RequestMethod.POST)
public ModelAndView saveEnumCurrency(#ModelAttribute EnumCurrency enumCurrency, Errors errors) throws Exception {
ModelAndView mvc = null;
try{
List<EnumCurrency> enumCurrencys = new ArrayList<EnumCurrency>();
enumCurrencys.add(enumCurrency);
List<EnumCurrency> enumCurrencyList =enumCurrencyService.create(enumCurrencys);
mvc = new ModelAndView("setup/enumCurrencyList");
} catch (Exception e) {
e.printStackTrace();
}
return mvc;
}
My jsp page is here....
<%# include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Currency </title>
<link rel="stylesheet" type="text/css" media="all"
href="<c:url value='/styles/style.css'/>" />
<link rel="stylesheet" type="text/css" media="all"
href="<c:url value='/scripts/jquery/css/jquery.ui.all.css'/>" />
<link rel="stylesheet" type="text/css" media="all"
href="<c:url value='/scripts/jquery/css/flexigrid.css'/>" />
<link rel="stylesheet" type="text/css" media="all"
href="<c:url value='/scripts/jquery/css/flexigrid.pack.css'/>" />
<script type="text/javascript" src="<c:url value='/scripts/script.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/scripts/jquery/flexigrid.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/scripts/jquery/flexigrid.pack.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/scripts/jquery/jquery-ui.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/scripts/jquery/jquery.ui.core.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/scripts/jquery/jquery.validate.js'/>"></script>
<script src="../scripts/setup/enumCurrencyList.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#dialog-form").dialog({
autoOpen : false,
height : 400,
width : 800,
modal : true,
title: "Currency Details",
close : function() {alert("close....jsp");
$(this).dialog("close");
}
});
});
function submitForm() {
validation part is here........
};
function saveCurrencyAjax() {
var str = $("#enumCurrency").serialize();
$.ajax({
type : "POST",
url : "../currency/saveEnumCurrency.action",
data : str,
success : function(response) {alert("success call");
$('#dialog-form').dialog('close');
alert("after close.....jsp");
$('#currencyGrid').flexReload();
alert("gridcall");
},
error : function(e) {
alert('Error: ' + e);
}
});
};
</script>
</head>
<body>
<div id="dialog-form" ></div>
<fieldset>
<div id="currencyGrid" />
</fieldset>
</body>
</html>
Any help would be appreciated.Thanks in advance.
i finished my app but when i test it on the other internet browsers, there was a problem
i will add my code. i couldnt see the error.as i said it works on opera but not in firefox :/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2011/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '199193070140222', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/tr_TR/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}
());
function lget(idd){
FB.api('/'+idd, function(response) {
document.getElementById(idd+"_a").innerHTML ="<a href='" + response.link + "' id='"+idd+"_und' style='color:#12566C;font-size:14px;' onmouseover=document.getElementById('"+idd+"').style.textDecoration=underline; onmouseout=document.getElementById('"+idd+"').style.textDecoration=none; target='_blank'><b>" + response.name + "</b></a>";
});
}
</script>
<div style="padding-left:6px;"><center>
<div id="525864081_a" ></div>
<script type="text/javascript">
lget(525864081);
</script>
<div id="534018674_a" ></div>
<script type="text/javascript">
lget(534018674);
</script>
</div>
</body>
</html>
You are loading the Facebook JS SDK in async mode and thus the FB object is not ready when you call it inside lget, the async loading occurs after your calls to lget and even after the onload event in Firefox.
Try not loading the code asynchronously and note that it is working fine
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2011/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({appId: '199193070140222', status: true, cookie: true, xfbml: true});
function lget(idd){
FB.api('/'+idd, function(response) {
document.getElementById(idd+"_a").innerHTML ="<a href='" + response.link + "' id='"+idd+"_und' style='color:#12566C;font-size:14px;' onmouseover=document.getElementById('"+idd+"').style.textDecoration=underline; onmouseout=document.getElementById('"+idd+"').style.textDecoration=none; target='_blank'><b>" + response.name + "</b></a>";
});
}
</script>
<div style="padding-left:6px;"><center>
<div id="525864081_a" ></div>
<script type="text/javascript">
lget(525864081);
</script>
<div id="534018674_a" ></div>
<script type="text/javascript">
lget(534018674);
</script>
</div>
</body>
</html>
if you want to see the execution order try something like this
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2011/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body onload="console.log('onload event'); false;">
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '199193070140222', status: true, cookie: true, xfbml: true});
console.log('FB object ready');
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/tr_TR/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
console.log('This executed first');
}
());
function lget(idd){
console.log('lget - ' + idd);
};
</script>
<div style="padding-left:6px;"><center>
<div id="525864081_a" ></div>
<script type="text/javascript">
lget(525864081);
</script>
<div id="534018674_a" ></div>
<script type="text/javascript">
lget(534018674);
</script>
</div>
</body>
</html>
this is the output you'll get in Firefox
This executed first
lget - 525864081
lget - 534018674
onload event
FB object ready