Google Apps Dad Joke Script - JSON parse error "Unexpected token: < " - javascript

I'm trying to pull a joke from the dad joke API using this GAS JSON guide yet am running into a parse error when I try to get a JSON object.
The error happens when I call JSON.parse(dadJokeText);
The first fix I've tried was publishing my app for public, anonymous use (may have been an auth issue), that didn't work.
Tried reformatting my code using this suggestion, still same error.
I do not have any experience using JSON, sorry that this is a dupe post, haven't had success trying to learn from the other questions.
Thanks in advance
function getJoke() {
var url = "https://icanhazdadjoke.com/";
var options = {
"contentType" : "application/json"
}
// make a GET request to the dad joke API
var dadJokeJSON = UrlFetchApp.fetch(url);
var dadJokeText = dadJokeJSON.getContentText();
var dadJokeObject = JSON.parse(dadJokeText);
var joke = dadJokeObject.value['joke'];
// log the joke that you retrieved
Logger.log(joke);
}
edit: this is the value of dadJokeText, looks like the HTML for the page
[18-12-10 12:06:11:690 EST] <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta name="description" content="The largest collection of dad jokes on the internet" />
<meta name="author" content="C653 Labs" />
<meta name="keywords" content="dad,joke,funny,slack,alexa" />
<meta property="og:site_name" content="icanhazdadjoke" />
<meta property="og:title" content="icanhazdadjoke" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://icanhazdadjoke.com/j/7UnjNRfapzd" />
<meta property="og:description" content="Why should you never trust a pig with a secret? Because it's bound to squeal." />
<meta property="og:image:url" content="https://icanhazdadjoke.com/j/7UnjNRfapzd.png" />
<meta property="og:image:secure_url" content="https://icanhazdadjoke.com/j/7UnjNRfapzd.png" />
<meta property="og:image:secure_url" content="https://icanhazdadjoke.com/static/smile.png" />
<meta property="og:image:type" content="image/png" />
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="#icanhazdadjoke">
<meta name="twitter:title" content="icanhzdadjoke">
<meta name="twitter:description" content="Why should you never trust a pig with a secret? Because it's bound to squeal.">
<meta name="twitter:image" content="https://icanhazdadjoke.com/static/smile.png">
<meta name="twitter:url" content="https://icanhazdadjoke.com/j/7UnjNRfapzd" />
<link rel="canonical" href="https://icanhazdadjoke.com/j/7UnjNRfapzd">
<link rel="amphtml" href="https://icanhazdadjoke.com/j/7UnjNRfapzd/amp">
<title>icanhazdadjoke</title>
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/static/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/static/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/static/manifest.json">
<link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#1fc8db">
<link rel="shortcut icon" href="/static/favicon.ico">
<meta name="msapplication-config" content="/static/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="/static/dist/style.css?55f4ea12">
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "WebSite",
"url": "https://icanhazdadjoke.com/",
"name": "icanhazdadjoke",
"description": "The largest collection of dad jokes on the internet",
"potentialAction": {
"#type": "SearchAction",
"target": "https://icanhazdadjoke.com/search?term={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "Organization",
"url": "https://icanhazdadjoke.com/",
"logo": "https://icanhazdadjoke.com/static/smile.png",
"name": "icanhazdadjoke",
"description": "The largest collection of dad jokes on the internet",
"email": "support#icanhazdadjoke.com"
}
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({google_ad_client: "ca-pub-3200991035275362", enable_page_level_ads: true});
</script>
</head>
<body>
<nav class="nav has-shadow">
<div class="container">
<div class="nav-left">
<a class="nav-item is-brand" href="/">
<img src="/static/smile.svg" alt="icanhazdadjoke logo" />
<span class="subtitle pushhalf--left">
icanhazdadjoke
</span>
</a>
</div>
<span id="nav-toggle" class="nav-toggle">
<span></span>
<span></span>
<span></span>
</span>
<div id="nav-menu" class="nav-right nav-menu">
<a class="nav-item is-tab" href="/">
<span class="icon is-small">
<i class="fa fa-random"></i>
</span>
<span class="pushquarter--left">
Random joke
</span>
</a>
<a class="nav-item is-tab" href="/search">
<span class="icon is-small">
<i class="fa fa-search"></i>
</span>
<span class="pushquarter--left">
Search jokes
</span>
</a>
<a class="nav-item is-tab" href="/submit">
<span class="icon is-small">
<i class="fa fa-pencil-square-o"></i>
</span>
<span class="pushquarter--left">
Submit new joke
</span>
</a>
<div class="nav-item">
<a href="/slack-add" style="height:40px; max-width:139px">
<img alt="Add to Slack" height="40" width="139" src="https://platform.slack-edge.com/img/add_to_slack.png" style="width:139px; height:40px; max-height: 40px" srcset="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack#2x.png 2x" />
</a>
</div>
<div class="nav-item">
<a class="button" target="_blank" href="https://www.amazon.com/Brett-Langdon-icanhazdadjoke/dp/B01N6CQ3NZ/" style="background-color: #ffffff; color: #5ebfe4; border-radius: 6px; font-weight: 500; height:40px; width:139px; max-width:139px">
<img src="/static/alexa-logo.png" style="margin-left: -0.5em;">
Add to <strong style="margin-left: 0.25em">Alexa</strong>
</a>
</div>
</div>
</div>
</nav>
<section class="section">
<div class="container">
<div class="level">
<div class="level-left">
<div class="content level-item">
<h1>Random dad joke:</h1>
</div>
</div>
<div class="level-right">
<a class="button is-primary level-item" href="/">
<span class="icon is-small">
<i class="fa fa-random"></i>
</span>
<span>
New joke
</span>
</a>
</div>
</div>
<div class="content">
<div class="card">
<div class="card-content">
<p class="subtitle">Why should you never trust a pig with a secret? Because it's bound to squeal.</p>
</div>
<footer class="card-footer">
<a class="card-footer-item" href="/j/7UnjNRfapzd">
<span class="icon is-small">
<i class="fa fa-chain"></i>
</span>
<span class="pushquarter--left">
Permalink
</span>
</a>
<a class="card-footer-item" target="_blank" href="https://twitter.com/intent/tweet?url=https://icanhazdadjoke.com%2Fj%2F7UnjNRfapzd%2Famp&text=Check+out+this+%23dadjoke&via=icanhazdadjoke">
<span class="icon is-small">
<i class="fa fa-twitter"></i>
</span>
<span class="pushquarter--left">
Share on Twitter
</span>
</a>
</footer>
</div>
</div>
<div class="content pushwhole--top">
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3200991035275362" data-ad-slot="5324903139" data-ad-format="auto"></ins>
</div>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="columns">
<div class="column is-5">
<div class="content">
<p>
<strong>icanhazdadjoke.com</strong> by C653 Labs.
</p>
<p>
<i>icanhazdadjoke.com</i> is the largest selection of dad jokes on the internet.
Now supporting many different integrations to ensure you can access the dad jokes that you need wherever you are.
</p>
</div>
</div>
<div class="column is-3"></div>
<div class="column is-2">
<aside class="menu">
<ul class="menu-list">
<li>Contact</li>
<li>Twitter</li>
<li>Slack app</li>
<li>Alexa skill</li>
<li>Discord bot</li>
<li>HipChat plugin</li>
<li>Twist integration</li>
</ul>
</aside>
</div>
<div class="column is-2">
<aside class="menu">
<ul class="menu-list">
<li>About</li>
<li>API</li>
<li>Random joke</li>
<li>Search jokes</li>
<li>Submit new joke</li>
</ul>
<

Nowhere in your "fetch" call do you set the "Accept" header to "application/json" as required by the API in order to get the response formatted as JSON.
You do set a variable called options in your code, but as far as I can see you never use it for anything. And in any case it sets the wrong header - needs to be "Accept", not "ContentType" - actually it should be "Content-Type" to be correct, but even then, Content type tells the server what type of data you are sending, not what kind you would like back in return.
I would expect you need to make your request like this:
var url = "https://icanhazdadjoke.com/";
var options = {
method: 'GET',
headers: {
"Accept" : "application/json"
}
};
// make a GET request to the dad joke API
var dadJokeJSON = UrlFetchApp.fetch(url, options);
See https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch for documentation on the Fetch API in JavaScript

Related

How to crawl the content of the page?

I hope to climb this page, but I don't know why I can't climb it successfully.
I see a nice Web Page, I want to get it, Facebug555
I have no Python background!
I found this script on the Internet, but I don't quite understand how to use this script. May I ask how you should use this script? Or tell me how to learn Python. I think Python is very simple and interesting.
If you can help me, I will be very funny, this thing I have been distressed for a lot of days, please big gods, teach me ok
This is my code: Please help me!!!
header = {
'Accept': 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
'Accept-Encoding': 'gzip, deflate, br',
'Accept-Language': 'zh-CN,zh;q=0.9',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
'Cookie': 'BIDUPSID=272A32E33F3DEA7C13D80C8EF8BB2040; PSTM=1628126145;,
'Host': 'mbd.baidu.com',
'Pragma': 'no-cache',
'Referer': 'https://facebug555.com',
'sec-ch-ua': '" Not A;Brand";v="99", "Chromium";v="100", "Google Chrome";v="100"',
'sec-ch-ua-mobile': '?0',
'sec-ch-ua-platform': '"Windows"',
'Sec-Fetch-Dest': 'image',
'Sec-Fetch-Mode': 'no-cors',
'Sec-Fetch-Site': 'same-site',
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36'}
page_html = requests.get(url='https://facebug555.com/blog', headers=header).text
this result:
<html lang="zh-CN" data-mode="light"><head>
<title>fb账号购买,fb账号,facebook账号购买,fb账号出售,投号玩家</title>
<script charset="utf-8" src="https://hmcdn.baidu.com/static/tongji/plugins/UrlChangeTracker.js"></script><script src="https://hm.baidu.com/hm.js?b2e95e2b202d58ac7eea516a181efdc0"></script>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
<meta name="keywords" content="fb账号购买,fb账号,脸书账号,facebook账号购买,投号玩家">
<meta name="description" content="fb账号购买,fb账号,脸书账号,facebook账号购买,投号玩家">
<meta name="author" content="投号玩家">
<meta http-equiv="x-dns-prefetch-control" content="on">
<meta name="site" content="https://www.facebug555.com/blog">
<meta property="og:image" content="">
<meta property="og:description" content="fb账号购买,fb账号,脸书账号,facebook账号购买,投号玩家">
<meta property="og:type" content="website">
<meta property="og:locale" content="zh_CN">
<meta property="og:site_name" content="fb账号购买,fb账号,facebook账号购买,fb账号出售,投号玩家">
<meta property="og:url" content="https://www.facebug555.com/blog">
<meta property="og:title" content="首页 – fb账号购买,fb账号,facebook账号购买,fb账号出售,投号玩家">
<meta property="twitter:partner" content="ogwp">
<link rel="shortcut icon" size="32x32" href="">
<link rel="canonical" href="https://www.facebug555.com/blog">
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
<link rel="apple-touch-icon" sizes="180x180" href="">
<meta name="generator" content="Halo 1.5.1">
<script type="application/ld+json">{
"#context": "http://schema.org/",
"url": "https://www.facebug555.com/blog",
"#type": "BreadcrumbList",
"itemListElement": [{
"#type": "ListItem",
"position": 1,
"name": "fb账号购买",
"item": "https://www.facebug555.com/"
},{
"#type": "ListItem",
"position": 2,
"name": "fb账号购买 博客",
"item": "https://www.facebug555.com/blog"
}]
}</script>
<div id="Joe">
<header class="joe_header">
<div class="joe_header__above">
<div class="joe_container joe_header_container">
<i class="joe-font joe-icon-caidan joe_header__above-slideicon"></i>
<a title="fb账号购买,fb账号,facebook账号购买,fb账号出售,投号玩家" class="joe_header__above-logo" href="https://www.facebug555.com/blog">
<img style="border-radius:4px" src="/upload/2022/02/%E6%8A%95%E5%8F%B7%E7%8E%A9%E5%AE%B6-25169996d5064acb960b5ddc15d13507.png" onerror="this.src='/themes/FaceBugBlog/source/img/logo.png'" alt="fb账号购买,fb账号,facebook账号购买,fb账号出售,投号玩家">
</a>
<nav class="joe_header__above-nav">
<a class="item" href="https://www.facebug555.com" target="_self" title="玩家官网">玩家官网</a>
<a class="item current" href="/blog" target="_self" title="首页">首页</a>
<a class="item" href="/blog/categories" target="_self" title="分类">分类</a>
</nav>
<form class="joe_header__above-search" method="get" action="https://www.facebug555.com/blog/search">
<input maxlength="16" autocomplete="off" placeholder="请输入关键字..." name="keyword" value="" class="input" type="text">
<button type="submit" class="submit" aria-label="搜索按钮"><i class="joe-font joe-icon-search"></i></button>
<span class="icon"></span>
<nav class="result">
<a href="/blog/archives/1020" title="科技快讯【2022年04月28日】" class="item">
<span class="sort">1</span>
<span class="text">科技快讯【2022年04月28日】</span>
</a>
<a href="/blog/archives/1019" title="Facebook的流量高效转化策略" class="item">
<span class="sort">2</span>
<span class="text">Facebook的流量高效转化策略</span>
</a>
</div>
<img width="100%" height="150" class="joe_header__slideout-image" src="/upload/2022/02/facebug-d57a054a38a94005b37f4b98d524486c.png" alt="侧边栏壁纸">
<div class="joe_header__slideout-author">
<img width="50" height="50" class="avatar lazyloaded" data-src="/upload/2022/02/telegram-16744a2dabef42b081f5abaa6c1c1573.png" src="/upload/2022/02/telegram-16744a2dabef42b081f5abaa6c1c1573.png" onerror="this.src='/upload/2022/02/telegram-16744a2dabef42b081f5abaa6c1c1573.png'" alt="博主头像">
<div class="info">
<a class="link" href="https://www.facebug555.com/blog" rel="noopener noreferrer nofollow">投号玩家</a>
<p class="motto joe_motto">一个在facebook江湖闯荡的骨灰级玩家</p>
<li>
<a class="link panel in" href="#" rel="nofollow">
<span>栏目</span>
<i class="joe-font joe-icon-arrow-right"></i>
</a>
<ul class="slides panel-body panel-box panel-side-menu" style="display: block;">
<li>
<a class="link" href="https://www.facebug555.com" title="玩家官网">玩家官网</a>
</li>
<li>
<a class="link current" href="/blog" title="首页">首页</a>
</li>
<li>
<a class="link" href="/blog/categories" title="分类">分类</a>
<div class="joe_header__searchout">
<div class="joe_container">
<div class="joe_header__searchout-inner">
<form class="joe_header__above-search-mobile" method="get" action="https://www.facebug555.com/blog/search">
<input maxlength="16" autocomplete="off" placeholder="请输入关键字..." name="keyword" value="" class="input" type="text">
<button type="submit" class="submit">
搜索</button>
</form>
</div>
</div>
</div>
<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-3464px, 0px, 0px);"><div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-next" data-swiper-slide-index="4" style="width: 866px;">
<a class="item" href="/blog/archives/1020" rel="noopener noreferrer nofollow">
<img width="100%" height="100%" class="thumbnail lazyloaded" data-src="/upload/2022/04/6a144a3d1c844aa8976e7b80ace9c040.png" src="/upload/2022/04/6a144a3d1c844aa8976e7b80ace9c040.png" alt="科技快讯【2022年04月28日】">
<div class="title">科技快讯【2022年04月28日】</div>
<i class="joe-font joe-icon-zhifeiji"></i>
</a>
</div>
<p>
2022 ©投号玩家
</body></html>
But if I make a post request, I get the following message
<html>
<head><title>403 Forbidden</title></head>
<body>
<center><h1>403 Forbidden</h1></center>
<hr><center>cloudflare</center>
</body>
</html>
it can't get the page code from post request
bug get request can get it
how ? why?
Why????

How can i change the content of a modal without closing it?

I have a modal that opens up when i click a button, the thing is that i have 2 buttons that open the same modal but with different contents, so if i click the same button when the modal is opened, it'll close. That's workin' fine, what i wanna do, and can't do, is change the content of the modal without closing it when i click the button that doesn't opened it. Can anyone help me with this? That's the code i'm using:
HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/style.css">
<title>EA - Need for Speed Test Page</title>
</head>
<body>
<header>
<nav class="menu-togglers is-visible">
<ul>
<li class="dropdown-toggler account" id="account"><i class="far fa-user"></i></li>
<li class="dropdown-toggler help" id="help"><i class="fas fa-question"></i></li>
<li><i class="fas fa-gamepad"></i></li>
</ul>
</nav>
<!--menu-togglers-->
<div class="dropdown-menu is-not-collapsed" id="dropdown-menu">
<img id="close-dropdown" class="dropdown-toggler" src="assets/x-lg.svg">
<div class="account-container menu-container opacity-0">
<div id="account-item" class="menu-content">
<a href="">
<img src="assets/connectEA.svg" alt="">
<p>Sign In</p>
</a>
</div>
<!--account-item-->
<div id="account-item" class="menu-content">
<a href="">
<img src="assets/createAccountEA.svg" alt="">
<p>Create Account</p>
</a>
</div>
<!--account-item-->
</div>
<!--account-container-->
<div class="help-container menu-container opacity-0">
<div id="help-item" class="menu-content">
<a href="">
<img src="assets/originIcon.svg" alt="">
<p>Verify my Origin Login</p>
</a>
</div>
<!--help-item-->
<div id="help-item" class="menu-content">
<a href="">
<img src="assets/linkAccount.svg" alt="">
<p>Link my Origin to my PSN ID</p>
</a>
</div>
<!--help-item-->
<div id="help-item" class="menu-content">
<a href="">
<img src="assets/rescueCode.svg" alt="">
<p>How do I redeem a Code?</p>
</a>
</div>
<!--help-item-->
<div id="help-item" class="menu-content">
<a href="">
<img src="assets/errorIcon.svg" alt="">
<p>I can't play online!</p>
</a>
</div>
<!--help-item-->
</div>
<!--account-container-->
</div>
<!--dropdown-menu-->
</header>
<!--header-->
<div style="height: 2000px;"></div>
<script src="js/hideHeader.js"></script>
<script src="js/setMenus.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EA - Need for Speed Test Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.css" integrity="sha512-NDcw4w5Uk5nra1mdgmYYbghnm2azNRbxeI63fd3Zw72aYzFYdBGgODILLl1tHZezbC8Kep/Ep/civILr5nd1Qw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.modalDialog{
width: 90%;
position: fixed;
left: 50%;
right: 0;
margin: 0 auto;
top: 50%;
background: white;
transform: translate(-50%,-50%);
padding: 50px;
max-width: 600px;
border: 1px solid black;
color: black;
}
.modalcont{font-size:16px; color:black;}
</style>
</head>
<body>
<header>
<div class="button">
<a class="modalopen" href="javascript:void(0);" datacontent="testingone">modal open</a>
</div>
</header>
<!--header-->
<footer>
<div id="openModal" class="modalDialog" style="display:none;">
<div>
X
<div class="modalcont">testingone</div>
button one
button two
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
jQuery(document).ready(function(){
jQuery('.modalopen').on('click',function(){
var sun = jQuery(this).attr('datacontent');
jQuery('#openModal').show(500);
jQuery('#openModal .modalcont').html(''+sun+'');
//alert(sun);
});
jQuery('.btn').on('click',function(){
var sun = jQuery(this).attr('datacontent');
//alert(sun);
jQuery('#openModal .modalcont').html(sun);
//alert(sun);
});
jQuery('.close').on('click',function(){
jQuery('#openModal').hide(500);
jQuery('#openModal .modalcont').html();
});
});
</script>
</body>
</html>

SideBar No display in Ipad

Good Day,
Question I have already try to apply all the fixes for Ipad to get the menu working, Like onclick="" and cursor: pointer;, I already check that the Jquery is working by putting: $(document).ready(function(){alert("We accessed the Javascript"); }); It works in every device, but in Ipad does not work at all, does not recognise the click and does not change the style class either.
I use as blueprint this example, then I customise it, so it has not been change that much.
SlideMenu
Here is the big code, sorry :S:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
class="no-js">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge; IE=11; IE=10; IE=9; IE=8; IE=7, chrome=1"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title>BBVA</title>
<!-- BOOTSTRAP STYLES-->
<link href="${request.contextPath}/assets/css/bootstrap.css" rel="stylesheet" media="all" />
<!-- BBVA fonts -->
<link href="${request.contextPath}/assets/css/style2.css" rel="stylesheet" media="all" />
<!--SCRIPTS-->
<!---Apple Safari iPad and iPhone Meta Tags-->
<meta name="viewport" content="width=device-width"/>
<meta name="viewport" content="initial-scale=1.0"/>
<meta name="viewport" content="width=992, initial-scale=1, user-scalable=no"/><!--width is pixels, range 200 to 10000-->
<meta name="format-detection" content="telephone=no"/> <!--disables automatic detection of possible phone numbers-->
<meta name="apple-mobile-web-app-capable" content="yes"/><!--specifies full-screen mode-->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/><!--specify full-screen mode first-->
</f:facet>
<!-- Custom BBVA Theme create by: Alejandro Daza -->
<link href="${request.contextPath}/assets/css/style.css" rel="stylesheet" media="all" />
<script src="${request.contextPath}/assets/js/bootstrap.min.js"></script>
<script src="${request.contextPath}/assets/js/modernizr.custom.js"></script>
<script src="${request.contextPath}/assets/js/style1.js"></script>
<script src="http://192.168.0.3:1337/vorlon.js"></script>
<script src="${request.contextPath}/assets/js/classie.js"></script>
</h:head>
<h:body>
<script>
$(document).ready(function(){
//Check if the current URL contains '#'
if(document.URL.indexOf("#")==-1){
// Set the URL to whatever it was plus "#".
url = document.URL+"#";
location = "#";
//Reload the page
location.reload(true);
}
});
</script>
<div class="container pagina">
<div class="col-md-1 col-lg-1 menu2">
<div class="col-md-4 information nopaddingleft nopaddingright">
<ul class="information_menu">
<li class="active" data-id="1"><i class="icon-home_icon"></i></li>
<li data-id="2"><a id="showmenu1" onclick="" ><i class="icon-menu_icon"></i></a></li>
<div class="spacing"></div>
<li data-id="3"><i class="icon-settings_icon"></i></li>
<li data-id="4"><i class="icon-help_icon"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></i></li>
</ul>
</div>
<!-- Sidebar -->
<div class="menunivel1 menunivelleft1" id="menunivel1">
<ul class="information_menunivel1">
<li class="active" data-id="1"><a href="#">
<img src="../assets/img/perfil.png" style=" width: 35%; position: absolute; left: 13px;top: 13px;" />
<ul class="menuPerfil">
<li>
Luci Santodomingo
</li>
<li>
Gerente
</li>
<li>
Oficina Calle 123
</li>
<li>
Bogotá
</li>
</ul>
</a></li>
<li><a id="showmenu2" href="#" onclick="" ><p>Gestion comercial <span class="icon-forward_icon flechas"></span></p></a></li>
<li><p>Cartera de clientes <span class="icon-forward_icon flechas"></span></p></li>
<li><p>Oportunidades comerciales <span class="icon-forward_icon flechas"></span> </p></li>
<li><p>Portal de desarrollo comercial <span class="icon-forward_icon flechas"></span> </p></li>
<li><p>Portal MIS <span class="icon-forward_icon flechas"></span></p></li>
<li><p>Alerta de fuga</p></li>
</ul>
<!-- Sidebar -->
<div class="menunivel2 menunivelleft2" id="menunivel2">
<ul class="information_menunivel2">
<li class="active">
<a href="#">
<ul class="menuPerfil">
</ul>
</a>
</li>
<li ><a id="showmenu3" href="#" onclick=""><p>Citas para hoy <span class="icon-forward_icon flechas"></span></p></a></li>
<li><p>Agenda <span class="icon-forward_icon flechas"></span> </p></li>
<li data-id="4"><p>Reclamos <span class="icon-forward_icon flechas"></span> </p></li>
</ul>
<!-- Sidebar -->
<div class="menunivel3 menunivelleft3" id="menunivel3">
<ul class="information_menunivel3">
<li class="active" data-id="1">
<a href="#">
<ul class="menuPerfil">
</ul>
</a>
</li>
<li><p>Propia</p></li>
<li><p>Mis Ejecutivos </p></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Page Content -->
<div class="col-md-11 col-lg-11 contenedorderecha clearfix">
<div class="row contenedorModulos clearfix">
<h:form id="principalForm">
<ui:insert name="content"/>
</h:form>
</div>
</div>
</div>
<script>
//<![CDATA[
var menunivel1 = document.getElementById('menunivel1'),
menunivel2 = document.getElementById('menunivel2'),
menunivel3 = document.getElementById('menunivel3');
$("#showmenu1").click(function(){
classie.toggle(this, 'active');
classie.toggle(menunivel1, 'menu1open');
});
$("#showmenu2").click(function(){
classie.toggle(this, 'active');
classie.toggle(menunivel2, 'menu2open');
});
$("#showmenu3").click(function(){
classie.toggle(this, 'active');
classie.toggle(menunivel3, 'menu3open');
});
//]]>
</script>
</h:body>
</f:view>
</html>
As you can see I am using xhtml, I dont know if that is related with the issue, or if is any primefaces query that is interfering with the on file jquery.
I have been with this issue for more than 2 weeks, I have the webpage on a local server, for security reason I will provide you with the link by chat or email If you want to take a complete look at it.
sorry, my english is not that great.
Some jquery functions in the web will not work the same way in IPAD or any other device.
Try this
$('selector').on('click touchstart', function() {
});
$("#showmenu1").on('click touchstart', function(){
classie.toggle(this, 'active');
classie.toggle(menunivel1, 'menu1open');
});

Angular.js loading without reference?

I'm working on reverse engineering a User Interface that is functioning minus a few bugs. It was coded in HTML, CSS, and JavaScript and pulls data via a REST API. The UI is set up in a Windows environment.
When I was looking through the index.html home page for the UI, there is quite a bit of Angular.js used in the interface, yet the script that calls angular.js is commented out. I'm confused about how angular.js could run on the server without being called. Is there some way to reference or parse angular.js on a server without referencing it in the HTML without calling it like you normally would?
I'm confused. Any ideas would be helpful. I included the index.html file below:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<meta http-equiv="cache-control" content="no-cache, no-store"/>
<meta http-equiv="expires" content="-1"/>
<meta http-equiv="pragma" content="no-cache"/>
<link rel="icon" href="content/images/favicon.png"/>
<!--<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js"></script>-->
<!--<script src="/js/app.js"></script>-->
<link rel="stylesheet" type="text/css" href="content/icomoon/style.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="content/css/bootstrap.css?0.0.0.164">
<link rel="stylesheet" type="text/css"
href="bower_components/bootstrap-dialog/dist/css/bootstrap-dialog.min.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="bower_components/jquery-ui/themes/base/jquery-ui.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="bower_components/angular-ui-grid/ui-grid.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="bower_components/spectrum/spectrum.css?0.0.0.164">
<link rel="stylesheet" type="text/css"
href="custom_components/eonasdan-bootstrap-datetimepicker/css/bootstrap-datetimepicker.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="bower_components/slick-carousel/slick/slick.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="bower_components/slick-carousel/slick/slick-theme.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="custom_components/loader-display/loadDisplay.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="content/css/keyboard.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="content/css/noty.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="custom_components/ladda-bootstrap/ladda-themeless.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="content/css/daikin_mis_hmi.css?0.0.0.164">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!-- if logged in-->
<button ng-if="!isHideMainControls" type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">ToggleNav</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" ng-click="goHome()">
<img src="content/images/logo.png">
</a>
<span ng-if="!isHideMainControls" class="visible-xs visible-sm" alarm-indicator></span>
<span ng-if="!isHideMainControls" class="visible-sm" dm-keyboard-widget></span>
<span ng-if="!isHideMainControls" class="visible-xs visible-sm" network-mode></span>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="hidden-xs hidden-sm"><span
ng-if="!isHideMainControls" network-mode></span></li>
<li class="hidden-xs hidden-sm">
<span ng-if="!isHideMainControls" alarm-indicator></span>
<div dm-keyboard-widget></div>
</li>
<!-- if logged in-->
<li class="divider-vertical hidden-xs hidden-sm"></li>
<li ng-class="{'display-none': !isApplicationLoaded}" class="display-none">
<div ng-cloak class="logged-in-user-info" data-toggle="">
<div class="user-name">
{{sessionUser.firstName}} {{sessionUser.lastName}}
</div>
<div ng-if="!isHideMainControls" ng-hide="sessionUser.isGuest" class="log-out">
<a ng-click="logout();" href="#"><span class="glyphicon glyphicon-log-out"></span>{{generalLabels.genlogout}}</a>
</div>
<div ng-show="sessionUser.isGuest" class="log-out">
<a ui-sref="login" href="#"><span class="glyphicon glyphicon-log-out"></span>{{generalLabels.genlogin}}</a>
</div>
</div>
</li>
<li class="visible-xs visible-sm dropdown">
<ul class="submenu" ng-include src="'views/shared-templates/main-menu-items.html'">
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="main-wrapper">
<dm-main-menu class="hidden-block-xs hidden-block-sm"></dm-main-menu>
<div style="display: none" id="appFailedLoadMessage"></div>
<div class="wrap-loader" ng-hide="isApplicationLoaded">
<div id="load-background" class="show-background">
<div class="loading-display">
<img class="ajax-loader" src="custom_components/loader-display/img/ajax-loader.gif">
<br>
<div class="display-none">
<img src="content/images/noty/ErrorMessageBackground.png" width="1" height="1" alt=""/>
<img src="content/images/noty/SuccessBackground.png" width="1" height="1" alt=""/>
<img src="content/images/noty/accept.png" width="1" height="1" alt=""/>
<img src="content/images/noty/error_ico.png" width="1" height="1" alt=""/>
<img src="content/images/noty/wrong.png" width="1" height="1" alt=""/>
<img src="content/images/control-buttons/on_off1.png" width="1" height="1" alt=""/>
<img src="content/images/control-buttons/on_off2.png" width="1" height="1" alt=""/>
<img src="content/images/control-buttons/switcher1.png" width="1" height="1" alt=""/>
<img src="content/images/control-buttons/switcher2.png" width="1" height="1" alt=""/>
</div>
<span></span>
</div>
</div>
</div>
<!-- BreadCrumbs go here-->
<div ng-if="!isHideMainControls" class="breadcrumbs">
<div class="container">
<div ncy-breadcrumb></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div ui-view></div>
</div>
</div>
</div>
</div>
<i class="icon-arrow-up icon-large"></i> {{generalLabels.gentop}}
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4 hidden-xs visible-sm visible-md visible-lg text-center-xxs text-center-xs text-left-sm text-left-md text-left-lg">
<!-- Easter Egg - footer double click show current viewport size and version -->
<span class="js-ui-version" style="display:none"></span>
<span class="js-viewport-size" style="display:none"></span>
</div>
<div ng-class="{'display-none': !isApplicationLoaded}"
class="display-none col-sm-4 hidden-xs visible-sm visible-md visible-lg text-center-sm text-center-md text-center-lg">
<a target="_blank" ng-href="{{daikinAppliedLink.url}}">{{daikinAppliedLink.text}}</a>
</div>
<div ng-class="{'display-none': !isApplicationLoaded}"
class="display-none col-sm-4 visible-xs hidden-sm hidden-md hidden-lg text-center-xxs text-center-xs">
<a target="_blank" ng-href="{{daikinAppliedLink.url}}">{{daikinAppliedLink.text}}</a>
</div>
<div class="col-sm-4 visible-xs hidden-sm hidden-md hidden-lg text-center-xxs text-center-xs">
<!-- Easter Egg - footer double click show current viewport size and version -->
<span class="js-ui-version" style="display:none"></span>
<span class="js-viewport-size" style="display:none"></span>
</div>
</div>
</div>
</div>
<script src="../bower_components/fastclick/lib/fastclick.js?0.0.0.164"></script>
<script src="bower_components/requirejs/require.js"></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function () {
FastClick.attach(document.body);
//todo workaround fixes the problem with selecting a date on the calendar
FastClick.prototype._needsClick = FastClick.prototype.needsClick;
FastClick.prototype.needsClick = function (target) {
if ($(target).parents('.bootstrap-datetimepicker-widget').length > 0) {
return true;
}
return FastClick.prototype._needsClick.call(this, target);
};
}, false);
}
var scriptsLoadTimeoutSeconds = 60;
require.config({
waitSeconds: scriptsLoadTimeoutSeconds,
baseUrl: './js',
urlArgs: '0.0.0.164'
});
require(["./main"]);
DisplayAppNotLoadedMessage = function () {
document.getElementById('load-background').style.display = 'none';
var errorMessageBlock = document.getElementById('appFailedLoadMessage');
errorMessageBlock.style.display = 'block';
errorMessageBlock.innerHTML = 'The system may be either busy or not currently running, please verify status locally at the System Manager PC or try again later. If the problem persists, refer to IM 1224 for more detailed troubleshooting procedures.';
};
// show error message in case of any resources are not loaded
LoadTimeoutId = setTimeout(function () {
DisplayAppNotLoadedMessage();
}, (scriptsLoadTimeoutSeconds + 30) * 1000);
</script>
</body>
</html>
I figured it out. The index.html file was calling Require.JS, which allows you to asynchronously load your scripts to the home page, but creates some issues in tracking dependencies. It's a JavaScript framework that basically allows you to load up an entire folder of JavaScript files asynchronously.

Doesn't work the onclick event in my Phonegap app

my name is Borja and i just started programming with PhoneGap and my first issue is related with the non-existent executing of .js files. This is my index.html code :
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no">
<link href="css/jquery.mobile-1.4.3.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/jquerymobile.nativedroid.css" />
<link rel="stylesheet" href="css/jquerymobile.nativedroid.light.css" id='jQMnDTheme' />
<link rel="stylesheet" href="css/jquerymobile.nativedroid.color.green.css" id='jQMnDColor' />
<link rel="stylesheet" href="css/custom.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/index.js"></script>
</head>
<body>
<div data-role="page" data-theme='b'>
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='b'>
<i class='fa fa-bars'></i>
<h1>Ejemplos de Funciones Nativas</h1>
</div>
<div data-role="content">
<div class='inset'>
<ul data-role="listview" data-inset="false" data-icon="false" data-divider-theme="b">
<li data-role="list-divider">Funciones Nativas <span class="ui-li-count">2</span></li>
<li><a href="#Camara">
<img src="http://www.alfa-klebstoffe.com/fileadmin/icons/059270-3d-glossy-blue-orb-icon-people-things-camera.png">
<h2>Camara</h2>
<p>Prueba de Ejecucion de Camara en dispositivo movil</p>
<p class="ui-li-aside"><strong>Hacer foto , Guardar Foto</strong></p>
</a></li>
<li><a href="#GPS">
<img src="https://cdn3.iconfinder.com/data/icons/sphericalcons/128/satellite.png">
<h2>GPS de android</h2>
<p>Prueba de Ejecucion del GPS del movil</p>
<p class="ui-li-aside"><strong>Probar GPS</strong></p>
</a></li>
<li><a href="#GoogleMaps">
<img src="https://cdn2.iconfinder.com/data/icons/google-ios-7-app-icons/120/google_maps.png">
<h2>Google Maps</h2>
<p>Pruebas sobre la app de Google Maps de android</p>
<p class="ui-li-aside"><strong>Geolocalizacion</strong></p>
</a></li>
<li><a href="#Conexion">
<img src="http://static.iconsplace.com/icons/preview/purple/wifi-256.png">
<h2>Internet</h2>
<p>Comprobacion conexion Internet del movil</p>
<p class="ui-li-aside"><strong>WIFI,3G</strong></p>
</a></li>
</ul>
</div>
</div>
</div>
<div id="Camara" data-role="page" data-theme='b'>
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='b'>
<i class='fa fa-bars'></i>
<h1>Distintos Usos de camara</h1>
</div>
<div data-role="content">
<div class='inset'>
<!-- <a data-role="button" href="" onclick="capturePhoto();">Capturar Foto</a><br>
<a data-role="button" href="" onclick=" capturePhotoEdit();"> Capturar Foto Editable</a><br>
<a data-role="button" href="" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</a><br>
<a data-role="button" href="" onclick="getPhoto(pictureSource.SAVEDPHOTOLIBRARY);">From PhotoAlbum</a><br>
<img id="smallImage" style="display:none;width:60px;height:60px;" src="" /> -->
<form>
<button data-role="button" onclick="prueba();return false;" ><i class='lIcon fa fa-refresh'></i>Refrescar Personal</button>
</form>
</div>
</div>
</div>
</div>
<script src="js/jquery.mobile-1.4.3.min.js"></script>
</body>
Like you can see, in the Camara data-role page (the last one) i added a onclick event in the button, with the next code:
function prueba(){
alert("Carlos limpiate los zapatos");
}
-
When I open the app and I press button, the applicacions returns to the home...so my app can't read the javascripts functions and i dont know what is the reason, so i need help.
Thanks so much,
Borja
did you to call alert("Carlos limpiate los zapatos"); directly on the onclick event
if it work, may be there is a problem with the js file.

Categories