:) Hello everyone
I have a little problem there, I'm currently trying to work on Linked open data and for that, I have to do a small website which could display the informations of my choice.
The thing is that i don't know how to display the datas using javascript...
Here is my code :
<!DOCTYPE html>
<html lang="fr">
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="scripts/jquery.sparql.js"></script>
<script src="scripts/encode.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Manga project - Mangas and anime directory</title>
<meta name="description" content= "directory on Manga project : manga or anime actuality, multimedia, J-Music, asian culture, video games, fans and autors..." />
<meta name="keywords" content="Manga, anime, video manga, animated manga, directory" />
<meta name="google" content="nositelinkssearchbox">
<!-- Facebook Meta Tags -->
<meta property="og:title" content="Manga Project">
<meta property="og:url" content="#">
<meta property="og:description" content="directory on Manga project : manga or anime actuality, multimedia, J-Music, asian culture, video games, fans and autors...">
<meta property="og:image" content="petitIcone.png">
<meta property="og:site_name" content="manga-news.com">
<meta property="og:type" content="article" />
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary">
<meta name="twitter:image:src" content="petitIcone.png">
<meta name="twitter:site" content="#manga_project">
<meta name="twitter:creator" content="#manga_project">
<meta name="twitter:domain" content="#">
<meta name="twitter:title" content="Manga Projet - Manga and anime directory">
<meta name="twitter:description" content="Directory on Manga-project : Actuality about manga, anime, multimedia, J-music, asian culture, videogames and authors...">
<meta name="msapplication-TileImage" content="mn144.png">
<meta name="msapplication-TileColor" content="#ff7c00">
<link rel="stylesheet" href="style.css" type="text/css" media="projection, screen"/>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-2575586-1']);
_gaq.push(['_setAllowAnchor', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript">
window.___gcfg = {lang: 'fr'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</head>
<body style="background-color:#3c5977;">
<header class="headroom">
<div id="header_top">
<div class="container">
<div id="logo">
<a href="accueil.html" title="Mangas - Annuaire manga..">
<img src="test.gif" alt="manga" width="279" height="43"/><span>Manga project</span></a>
</div>
<div id="topsearch">
<form id="search-form" action="index.php/recherche/" method="get">
<input type="text" value="Search" id="q_search" name="q" alt="chercher"/>
<input type="submit" class="submit" id="searchMain" value=""/>
</form>
</div>
<div class="clear"></div>
</div><!-- /.container -->
</div><!-- /#header_top -->
<div id="header_bottom">
<div class="container">
<div id="blockmenu">
<nav>
<ul>
<li class="dropdown">
<a id="menuHomepage" href="../accueil.html" class="actu" title="Actu">Homepage</a>
</li>
<li class="dropdown">
Mangas
<div class="drop-menu" role="menu">
<div class="block-1-3">
<ul>
<li>Shônen
<li>Shôjo</li>
<li>Kodomo</li>
<li>Seinen</li>
<li>Josei</li>
<li>Young Seinen</li>
</ul>
</div>
</div>
</li>
<li class="dropdown">
Anime
<div class="drop-menu" role="menu">
<div class="block-1-3">
<ul>
<li>Shônen
<li>Shôjo</li>
<li>Kodomo</li>
<li>Seinen</li>
<li>Josei</li>
<li>Young Seinen</li>
</ul>
</div>
</div>
</li>
<li class="dropdown">
Video games
<div class="drop-menu" role="menu">
<div class="block-1-3">
<ul>
<li>All video games</li>
<li>Consoles</li>
<li>Developpers</li>
<li>Video games editors</li>
</ul>
</div>
</div>
</li>
<li class="dropdown">
Asian cinema
<div class="drop-menu" role="menu">
<div class="block-1-3">
<ul>
<li>Every asian movies</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div><!-- /.container -->
</div><!-- /#header-bottom -->
</header>
<div id="page">
<div id="bangeante"><a class="external-link" href="redirection.php?go=574" rel="nofollow" ><img src="http://www.manga-news.com/public/banners/TOYOURETERNITY.jpg" alt="Actualité manga" width="1600" height="1400"/></a></div>
<div id="global" class="container " >
<div id="contentWrapper">
<div id="dummy"></div>
<div id="content">
<div class="entryPage" id="annuaire">
<div id="main">
<h2 class="entryTitle">Mangas, series :</h2></br>
<div class="boxed entries large" id="new-volumes">
</div>
<div>
<div id="alphablock"><ul class="alphaLink"><li>#</li><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li><li>H</li><li>I</li><li>J</li><li>K</li><li>L</li><li>M</li><li>N</li><li>O</li><li>P</li><li>Q</li><li>R</li><li>S</li><li>T</li><li>U</li><li>V</li><li>W</li><li>X</li><li>Y</li><li>Z</li></ul></div>
<form id="planningFilter" action="" method="get" />
</form>
<p id="test"></p>
<script type="text/javascript">
$(function () {
// declaration
// to form the SPARQL query structure by using javascript. The data’s can be retrieved from the online link specified in the where condition
$.sparql("http://dbpedia.org/sparql")
.prefix("rdfs", "http://www.w3.org/2000/01/rdf-schema#")
.select(["?label"])
.where("<http://dbpedia.org/resource/Tim_Berners-Lee>", "rdfs:label", "?label")
.execute(function success(data) { //The returned result in JSON format.
//To initialize the dropdownlist control with retrieved JSON values.
$('#dropDown').ejDropDownList({
dataSource: [data][0],
//We retrieve the JSON values with label field. So we map the label value to dropdownlist text field.
fields: { text: "label" }
});
</script>
<div class="control">
<div class="ctrllabel"> DropDownList Control Rendered with SPARQL Query </div>
<br />
<input type="text" id="dropDown" />
</div>
<div id="footer">
<div id="ban970250">
<ins data-revive-zoneid="23" data-revive-target="_blank" data-revive-id="5180bced55ed2e8ebc8789ceb4c84ee1"></ins>
<script async src="//www.manga-news.com/adservermn/www/delivery/asyncjs.php"></script></div>
<div id="footer-links">
<ul>
<li>Welcome page | </li>
<li><a href="index.php/nous" >Who are we ?</a> | </li>
<li>Contact us</li>
</ul>
</div>
<p class="copyrights">Every datas and illustrations are under © Copyright, they are the propriety of their authors and editors.</p>
<div class="clearer"></div>
<p>
</p>
</div>
</div>
</div> <!--end contentWrapper -->
</div> <!--end global-->
</div> <!--end page -->
<script src="js/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
editor_selector : "mce",
plugins : "style",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,separator,undo,redo,separator,cleanup,separator,bullist,numlist,separator,styleselect",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_styles : "Normal=normal;Spoiler=spoiler",
theme_advanced_toolbar_location : "bottom",
theme_advanced_toolbar_align : "left"
});
</script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
editor_selector : "mce2",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,separator,undo,redo,separator,cleanup,separator,bullist,numlist",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "bottom",
theme_advanced_toolbar_align : "center"
});
</script>
<script type='text/javascript'><!--//<![CDATA[
var ox_u = 'http://www.manga-news.com/adservermn/www/delivery/al.php?zoneid=21&target=_blank&layerstyle=simple&align=center&valign=middle&padding=2&closetime=0&padding=2&shifth=0&shiftv=0&closebutton=t&backcolor=FFFFFF&bordercolor=000000';
if (document.context) ox_u += '&context=' + escape(document.context);
document.write("<scr"+"ipt type='text/javascript' src='" + ox_u + "'></scr"+"ipt>");
//]]>--></script>
<script type="text/javascript">
$(function(){
$('#comment-form :radio.star').rating();
});
</script>
<!--
</body>
</html>
thank you very much :)
Related
I'm currently working with news API and trying to populate different category (i.e sports, science, business etc) under different heading on the same page of the website, but failed to do so. Here I tried to use template literal, as first created a template literal in the api named category and initiated it using let. So there are two sections "Trending Blogs" and "You May Like" so here I wanna show two different category in the two different section respectively. Here I'm attaching the code in the following.
Here is the code in html
`<!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.0" />
<link rel="stylesheet" href="/styles/utils.css" />
<link rel="stylesheet" href="/styles/navbar.css" />
<link rel="stylesheet" href="/styles/body.css" />
<script
src="https://kit.fontawesome.com/e582ecfb98.js"
crossorigin="anonymous"
></script>
<title>Document</title>
</head>
<body>
<!-- <h1>This is a blog site</h1> -->
<!-- Navbar starts from here -->
<nav class="navigation max-width-0 m-auto">
<div class="middle">
<b> Blogsite</b>
</div>
<div class="left">
<ul>
<li><a class="header-elements" href="./index.html">Home</a></li>
<li><a class="header-elements" href="./about.html">About</a></li>
<li><a class="header-elements" href="./contact.html">Contact</a></li>
</ul>
</div>
<div class="right">
<input type="text" placeholder="Article Search" />
<button class="btn"><i class="fa fa-magnifying-glass"></i></button>
</div>
</nav>
<!-- Navbar ends -->
<!-- body starts -->
<div class="content max-width-1 m-auto">
<h1 class="land-heading">Welcome to Blogsite</h1>
<p class="intro">
Atameo allows travellers to capture their trips in a completely new way.
It records your route, adds your photos, videos and music and turns your
adventures into your personal travel profile. Have all your travel
experiences in one place and find out more about your travel style by
diving into your personal travel statistics: How far did you travel last
year? What’s the highest point you have been to? How much of the world
have you seen? Inspire others to go out and explore, while getting
inspired by some of the most daring journeys of our time. Explore.
Capture. Inspire.
</p>
<hr />
<h1 class="land-heading">Trending Blogs</h1>
<div class="blog-section" id="blog-section">
</div>
<h1 class="land-heading">You may like</h1>
<div class="blog-section" id="blog-section2">
</div>
<h1 class="land-heading">Categories</h1>
<div class="blog-section" id="category">
<div class="r1c1 block">
<a href=""
><img
class="img"
src="https://www.nomadicmatt.com/wp-content/uploads/2022/07/parisnm3.jpeg"
alt="img"
/>
<p class="blog-title">NM+ Weekly Update: Europe Edition</p></a
>
</div>
</div>
</div>
<!-- Body ends -->
<!-- Footer starts -->
<div class="footer m-auto">
<label for="">Feedback</label>
<input type="text" class="" placeholder="First Name" />
<input type="text" placeholder="e-mail" />
<button type="submit" class="btn btn-foot">Send Feedback</button>
</div>
<div class="m-auto copyright">
<p>copyright 2022 #md_arif</p>
</div>
<!-- Footer ends -->
<script src="./scripts/app.js"></script>
</body>
</html>
`
Here is the code of vanilla-js
console.log("Here we go");
let blogSection = document.getElementById("blog-section");
let blogSection2 = document.getElementById("blog-section2");
function generateCards(e) {
const newXHRRequest = new XMLHttpRequest();
// let source = 'the-times-of-india';
let apikey = '75da3b7678de41fcb76359935aabdc3d'
let category = '';
newXHRRequest.open(
"GET",
`https://newsapi.org/v2/top-headlines?country=in&category=${category}&pagesize=3&apiKey=${apikey}`,
true
);
newXHRRequest.getResponseHeader("content-type", "application/json");
newXHRRequest.onload = function () {
if (this.status === 200) {
let myCards = JSON.parse(this.responseText);
console.log(myCards);
let articles = myCards.articles;
// console.log(articles);
let itemsHtml = "";
articles.forEach((element) => {
// console.log(articles);
// category="sports";
console.log(element);
let items = `<div class="r1c1 block">
<a href="${element["url"]}" target="_blank"><img class="img" src=${element["urlToImage"]} alt="img">
<p class="blog-title">${element["title"]}</p></a>
</div>`;
itemsHtml += items;
});
blogSection.innerHTML = itemsHtml;
blogSection2.innerHTML = itemsHtml;
} else {
console.log("Some error occured");
}
};
newXHRRequest.send();
}
generateCards();
I'm new at jquery and javascript so this might be a very simple question. I get an error that I cannot understand and it comes up every time a function is runned in my .js-file.
At the moment my .js-file simply has this as a way to find what the problem is:
$(document).ready(function(){
$(".title-link").css("color", "#ccc");
$('.title-link').click(function(){
var check = "I work";
alert(check);
});
});
The title-link changed color without any problem, so the .js-file is located by my HTML-file. I also have the latest CDN for my jquery in the HTML-file in script-tags.
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
How does it come that when I click an element with title-link class on my browser, the page just reloads - or crashes(?)? When inspecting the page, I see it switch from my .js-file to jquery.min.js:formatted after passing each row in my function and points to these rows below:
while ((o = i.handlers[n++]) && !u.isImmediatePropagationStopped())
u.rnamespace && !1 !== o.namespace && !u.rnamespace.test(o.namespace) || (u.handleObj = o,
u.data = o.data,
void 0 !== (r = ((S.event.special[o.origType] || {}).handle || o.handler).apply(i.elem, s)) && !1 === (u.result = r) && (u.preventDefault(),
u.stopPropagation()))
}
return c.postDispatch && c.postDispatch.call(this, u),
u.result
Why does this happen and what can I do to have my code run as intended? ATM I cannot use my javascript file due to the page reloading everytime a function has been used. Many thanks for any help
EDIT: this is the HTML-page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script type="text/javascript" src="./js/tentaJs.js"></script>
<link rel="stylesheet" href="./css/main.css">
<title>Tenta index</title>
</head>
<body>
<div class="container">
<header>
<div class="header-top">
<div class="loggavänster">
<h1>Kurslitt Lund</h1>
</div>
<nav class="navbar">
<li><a class="meny-link active"
href="index.html">Säljes</a></li>
<li><a class ="meny-link" href="buy.html">Köpes</a>
</li>
<li><a class = "meny-link"
href="annonce.html">Annonsera</a></li>
</nav>
</div>
<div class="logo">
<h1>Kurslitteratur köpes</h1>
</div>
</header>
<main>
<div class = "article">
<div class="article-container">
<img src="./images/bok.jpg" alt="bok">
<p>TITEL: titel </p>
<p>Pris:</p>
<p>ISBN:</p>
<p>Säljare:</p>
Tele: 00000000</p>
<p class = "comment-text">Kommentar från säljare: <br>
jag är en kommentar
</p>
</div>
</div>
<div class = "article">
<div class="article-container">
<img src="./images/bok.jpg" alt="bok">
<p>TITEL</p>
<p>Pris:</p>
<p>ISBN:</p>
<p>Säljare:</p>
Tele: 00000000</p>
</div>
</div>
<div class = "article">
<div class="article-container">
<img src="./images/bok.jpg" alt="bok">
<p>TITEL</p>
<p>Pris:</p>
<p>ISBN:</p>
<p>Säljare:</p>
Tele: 00000000</p>
</div>
</div>
</main>
<footer>
<p>Kurslitt i Lund;</p>
<p>Email: info#kil.se <br>
Tele: 00000000</p>
</footer>
</div>
</body>
</html>
$(document).ready(function(){
$(".title-link").css("color", "#ccc");
$('.title-link').click(function(e){
e.preventDefault();
var check = "I work";
alert(check);
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<title>Tenta index</title>
</head>
<body>
<div class="container">
<header>
<div class="header-top">
<div class="loggavänster">
<h1>Kurslitt Lund</h1>
</div>
<nav class="navbar">
<li><a class="meny-link active"
href="index.html">Säljes</a></li>
<li><a class ="meny-link" href="buy.html">Köpes</a>
</li>
<li><a class = "meny-link"
href="annonce.html">Annonsera</a></li>
</nav>
</div>
<div class="logo">
<h1>Kurslitteratur köpes</h1>
</div>
</header>
<main>
<div class = "article">
<div class="article-container">
<img src="./images/bok.jpg" alt="bok">
<p>TITEL: titel </p>
<p>Pris:</p>
<p>ISBN:</p>
<p>Säljare:</p>
Tele: 00000000</p>
<p class = "comment-text">Kommentar från säljare: <br>
jag är en kommentar
</p>
</div>
</div>
<div class = "article">
<div class="article-container">
<img src="./images/bok.jpg" alt="bok">
<p>TITEL</p>
<p>Pris:</p>
<p>ISBN:</p>
<p>Säljare:</p>
Tele: 00000000</p>
</div>
</div>
<div class = "article">
<div class="article-container">
<img src="./images/bok.jpg" alt="bok">
<p>TITEL</p>
<p>Pris:</p>
<p>ISBN:</p>
<p>Säljare:</p>
Tele: 00000000</p>
</div>
</div>
</main>
<footer>
<p>Kurslitt i Lund;</p>
<p>Email: info#kil.se <br>
Tele: 00000000</p>
</footer>
</div>
</body>
</html>
I have a partial view where I want to reload certain <div> tag based on successful response. I am using .filter to get specific tag but it is not working. Based on other stack-overflow articles and google, this should work but not in my case.
My objective is, out of AJAX response, extract specific div tag and reload the view.
AJAX:
$.ajax(
{
url: '/MyUrl',
success: function(response)
{
updateOrderStatusContent(response);
}
});
this.updateOrderStatusContent = function (markup) {
alert("markup " + markup); // This returns HTML.
var $response = $(markup); // Creating jQuery object from HTML response.
// Option-1 = Get text
var getSpecificText = $response.filter('#delivery-status-update').text();
alert(getSpecificText); // This is empty.
// Option-2 = Get HTML
var getSpecificHtml = $response.filter('#delivery-status-update').html(); // to get HTML
alert(getSpecificHtml); // This is empty.
// Option-3 = Here I tried output the content of #delivery-status-update in new <div> which is also not working.
$('#delivery-status-updated').html(jQuery(markup).find('#delivery-status-update').html());
};
markup output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='UTF-8' />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content='IE=Edge' http-equiv='X-UA-Compatible' />
<script src="/Scripts/S2/console.js"></script>
<!--[if IE]> <script src="/Scripts/S2/html5.js"></script>
<script src="/Scripts/S2/json2.js"></script>
<![endif]-->
<title></title>
<link href="/Content/S2/menu.css" rel="stylesheet" />
<link href="/content/themes/stwo/jquery-ui.css" rel="stylesheet" />
<link rel="shortcut icon" type="image/x-png" href="/Branding/Snapfinger/favicon.png" />
<link rel="apple-touch-icon" href="/Branding/Snapfinger/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="/Branding/Snapfinger/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="/Branding/Snapfinger/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="/Branding/Snapfinger/touch-icon-ipad-retina.png">
<link rel="stylesheet" href="/Branding/Snapfinger/Snapfinger.css" />
<!--[if IE]><link rel="stylesheet" href="/Branding/Snapfinger/ie.css" /> <![endif]-->
</head>
<body>
<header class="header" id="header"> Skip to content
<div class="header-wrapper">
<div class="logo" id="logo" aria-label="Zaxby's logo" itemscope itemtype="https://schema.org/Organization" tabindex="0"> <img itemprop="logo" alt="Zaxby's logo" src="/api/content/image/119/7/200/200"></div>
<input type="hidden" id="restaurantId" value="9018" />
<input type="hidden" id="menuType" />
<input type="hidden" id="unitNumber" value="198" />
<input type="hidden" id="currentUtcTime" value="2018-04-24T19:27:29.2451514Z" />
<div class="restaurant-info">
<h1 class="title" id="title">Zaxby's</h1>
<meta itemprop="brand" content="Zaxby's" />
<meta itemprop="menu" content="https://local.kiofc.com/o/Restaurant/9018" /> <span itemprop="geo" itemscope itemtype="https://data-vocabulary.org/Geo"><meta itemprop="latitude" content="34.0756282" /><meta itemprop="longitude" content="-84.6527738" /> </span>
<div class="restaurant-name" itemprop="name">Zaxby's</div>
<div class="store-name" itemprop="name">ACWORTH_00198</div>
<ul id="restaurant-address" class="address" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<li class="street" itemprop="streetAddress" tabindex="0">3511 BAKER RD</li>
<li class="city" itemprop="addressLocality" tabindex="0">ACWORTH</li>
<li class="state" itemprop="addressRegion" tabindex="0">GA</li>
<li class="zip" itemprop="postalCode" tabindex="0">30101</li>
<li class="country" itemprop="addressCountry" tabindex="0">US</li>
</ul><a title="View location on google maps" class="map" itemprop="map" target="_blank" href="https://maps.google.com/maps?client=gme-snapfinger&channel=SnapfingerMobileViewMap&oi=map&q=3511+BAKER+RD,+ACWORTH,+GA+30101"> View Map </a>
<div class="phone" itemprop="telephone"> <a title="Call 678-574-0400" href="tel://678-574-0400">678-574-0400</a></div>
<input type="hidden" id="LocationDescription" value="ACWORTH - BAKER RD" />
</div>
</div>
</header>
<div class="page" id="delivery-status-bar">
<div class="content">
<section class="delivery-status" id="delivery-status-bar-section">
<div id="delivery-status-update">
<h3 class="summary-title">Delivery Status</h3>
<div id="order-id">
<h3 class="summary-title" tabindex="0">Order Confirmation : 97140987</h3></div>
<ol class="progress-tracker" data-progress-tracker-steps="4">
<li class="progress-tracker-done">Received</li>
<li class="progress-tracker-done">Kitchen</li>
<li class="progress-tracker-todo">In Transit</li>
<li class="progress-tracker-todo">Delivered</li>
</ol>
</div>
</section>
</div>
</div>
<footer class="footer" id="footer">
<div id="copyright-version">
<div id="copyright-info" tabindex="0"> © Copyright 2018 Tillster, Inc. All rights reserved.</div>
<div id="version-info" tabindex="0"> v 1.0.0.21003</div>
</div>
</footer>
<input id="concept-key" name="concept-key" type="hidden" value="Snapfinger" />
<input id="concept-id" name="concept-id" type="hidden" value="-1" />
<input id="is-vanity-url" name="is-vanity-url" type="hidden" value="False" />
<input id="is-on-premise" name="is-on-premise" type="hidden" value="False" />
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-ui-1.11.1.js"></script>
<script src="/Scripts/S2/modernizr2.7.1.js"></script>
<script src="/Scripts/S2/jquery.lazyload.min.js"></script>
<script src="/Scripts/jquery/getscriptonce/jquery.getscriptonce.js"></script>
<script src="/Scripts/handlebars.js"></script>
<script src="/Scripts/S2/utility.js"></script>
<script src="/Scripts/S2/loginRegister.js"></script>
<script src="/Scripts/S2/analytics.js"></script>
<script src="/Scripts/S2/orderStatus.js"></script>
<div id="dialog">
<p id="dialog-message"></p><img id="dialog-image" alt="dialog message" src="#" /></div>
<noscript>
<iframe src="//www.googletagmanager.com/ns.html?id=GTM-PC8WMW" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<script>
(function(w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'//www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-M84GGD');
</script>
<script type="text/javascript">
s$.analytics.getOrderLevelData("pageLoad")
</script>
</body>
</html>
What am I missing here? Do I need to create another partial view to achieve what I want?
Basically you need to use .find() instead of .filter().
var markup = '<!DOCTYPE html><html lang="en"><head> <title></title></head><body><header class="header" id="header"> </header><div class="page" id="delivery-status-bar"><div class="content"><section class="delivery-status" id="delivery-status-bar-section"><div id="delivery-status-update"><h3 class="summary-title">Delivery Status</h3><div id="order-id"><h3 class="summary-title" tabindex="0">Order Confirmation : 123</h3></div><ol class="progress-tracker" data-progress-tracker-steps="4"><li class="progress-tracker-done">Received</li><li class="progress-tracker-done">Kitchen</li><li class="progress-tracker-done">In Transit</li><li class="progress-tracker-todo">Delivered</li></ol></div></section></div></div><footer class="footer" id="footer"></footer></body></html>';
var $response = $(markup); // Creating jQuery object from HTML response.
var $delivery = $response.find('#delivery-status-update');
var getSpecificText = $delivery.text(); // to get text
var getSpecificHtml = $delivery.html(); // to get HTML
console.log(getSpecificText);
console.log(getSpecificHtml);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I am a refactoring code for a website I am making and I am trying to use Flexslider jQuery plugin instead of AnythingSlider plugin I was originally used. I downloaded the plugin and followed the directions on the website (Flexslider website) for how to get started with the plugin. However, the pictures in the ul class "slides" are still in a list form and don't appear as a slideshow. Here is my current code:
$(document).ready(function(){
/*
alert('Our JavaScriipt is working!');
console.log('Our Javascript is working!');
console.warn('A dire warning!');
console.error('ERMAGERD AN ERROR!');
*/
var modalContainer = $("#modal-container");
var hideModal = function() {
modalContainer.hide();
};
var showModal = function() {
modalContainer.show();
};
var modalShowButton = $("#modal-show");
modalShowButton.on("click", showModal);
var modalCloseButton = $("#modal-hide");
modalCloseButton.on("click", hideModal);
$(document).on("keyup", function(evt) {
evt = evt || window.event;
if (evt.keyCode === 27) {
hideModal();
}
});
var handleNewsletterSignup = function(evt) {
evt.preventDefault();
var newsletterHeader = $("#newsletter-header");
var newsletterForm = $("#newsletter-signup");
newsletterForm.hide();
newsletterHeader.text("Thank you for signing up!");
setTimeout(hideModal, 2000);
};
var newsletterForm = $("#newsletter-signup");
newsletterForm.on("submit", handleNewsletterSignup);
/* Begin the clock code */
var clockTime = function() {
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
if (hours <= 11) {
var period = "AM";
} else {
var period = "PM";
}
if (hours > 12) {
hours = hours - 12;
} else if (hours === 0) {
hours = 12;
}
if (minutes < 10) {
minutes = "0" + String(minutes);
}
if (seconds < 10) {
seconds = "0" + String(seconds);
}
var time = hours + ':' + minutes + ':' + seconds + ' ' + period;
return time;
}
var clock = $("#clock");
setInterval(function() {
clock.text(clockTime());
}, 1000);
});
<head>
<title>Liz Lemon's Personal Website</title>
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah|Open+Sans:400italic,400,700|Montserrat:400,700' rel='stylesheet' type='text/css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jQuery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({;
animation: "slide",
animationLoop: true,
slideshow: true;
randomize: false,
});
});
</script>
</head>
<body>
<div class="page">
<header>
<h1>Liz Lemon's Personal Website</h1>
<img id="headshot" src="http://i284.photobucket.com/albums/ll14/britishpandachick/liz-lemon_zps6qncghn4.jpg" alt="Headshot">
</header>
<h4>
The current time is...
<span id="clock">Clock goes here</span>
</h4>
<blockquote id="greeting">This is where the JavaScript greeting goes...</blockquote>
<section id="bio">
<h2>About me</h2>
<p>Here is a paragraph all about how awesome I am. Don't you <em>love</em> to read about me? Hmm, not so much? Well, then replace this paragraph with some information about <strong>yourself</strong>! Or you can go read some fun articles on Skillcrush.
</p>
</section>
<div class="flexslider">
<ul class="slides">
<li><img src="http://images4.fanpop.com/image/photos/14900000/S1-Promotional-Photos-Liz-Lemon-liz-lemon-14945184-1071-1500.jpg" alt="professional_pic"/></li>
<li><img src="http://i.huffpost.com/gen/1362193/original.jpg" alt="fun_pic"/></li>
<li><img src="http://cdn.pastemagazine.com/www/blogs/lists/lizlemonthumbs.jpg" alt="thumbs_up"/></li>
</ul>
</div>
<section id="contact">
<h2>Contact</h2>
<div id="social-icons">
<a href="#">
<img src="http://i284.photobucket.com/albums/ll14/britishpandachick/twitter_zpsulfh8can.png" alt="Twitter icon">
</a>
</div>
</section>
<button id="modal-show">Join the Lemon List</button>
<div id="modal-container">
<section id="modal-box">
<button id="modal-hide">x</button>
<h2 id="newsletter-header">Sign up for my email list!</h2>
<form id="newsletter-signup" action="#" method="post" accept-charset="utf-8">
<input type="email" name="email" value="" placeholder="Your email">
<input type="submit" value="Sign up">
</form>
</section>
</div>
<footer>
<p>© Skillcrush 2014</p>
</footer>
</div>
</body>
So far I have triple checked every single part of my code (especially what is in the head) with the sample ones on the website and github. I also tried moving some of the JS to the JS file. Despite these changes, the pictures in slides class remain a bullet point list. Did I link the wrong files for flexslider? I think my issue is with the HTML section, but I'm not 100% positive since my code looks the same as the ones on the sample page.
I think error in your CSS and JS inclusion.
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jQuery.flexslider.js"></script>
Like it should be:
<script type="text/javascript" src="http://www.domain.com/myphysicaldirectory/js/jQuery.flexslider.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.domain.com/myphysicaldirectory/css/flexslider.css" media="all" />
Set your JS and CSS Path properly and open your source code (ctrl + u) and check its include properly or not. also check included path open correctly in browser or not.
When you download flexslider zip file then inside that demo folder, create one test.html file and add below code in it.
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta content="charset=utf-8">
<title>Liz Lemon's Personal Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!-- Demo CSS -->
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../flexslider.css" type="text/css" media="screen" />
<!-- Modernizr -->
<script src="js/modernizr.js"></script>
</head>
<body class="loading">
<div id="container" class="cf">
<header>
<h1>Liz Lemon's Personal Website</h1>
<img id="headshot" src="http://i284.photobucket.com/albums/ll14/britishpandachick/liz-lemon_zps6qncghn4.jpg" alt="Headshot">
</header>
<h4>
The current time is...
<span id="clock">Clock goes here</span>
</h4>
<blockquote id="greeting">This is where the JavaScript greeting goes...</blockquote>
<section id="bio">
<h2>About me</h2>
<p>Here is a paragraph all about how awesome I am. Don't you <em>love</em> to read about me? Hmm, not so much? Well, then replace this paragraph with some information about <strong>yourself</strong>! Or you can go read some fun articles on Skillcrush.
</p>
</section>
<div id="main" role="main">
<section class="slider">
<div class="flexslider carousel">
<ul class="slides">
<li>
<img src="http://images4.fanpop.com/image/photos/14900000/S1-Promotional-Photos-Liz-Lemon-liz-lemon-14945184-1071-1500.jpg" alt="professional_pic"/>
</li>
<li>
<img src="http://i.huffpost.com/gen/1362193/original.jpg" alt="fun_pic"/>
</li>
<li>
<img src="http://cdn.pastemagazine.com/www/blogs/lists/lizlemonthumbs.jpg" alt="thumbs_up"/>
</li>
<li>
<img src="http://images4.fanpop.com/image/photos/14900000/S1-Promotional-Photos-Liz-Lemon-liz-lemon-14945184-1071-1500.jpg" alt="professional_pic"/>
</li>
<li>
<img src="http://i.huffpost.com/gen/1362193/original.jpg" alt="fun_pic"/>
</li>
<li>
<img src="http://cdn.pastemagazine.com/www/blogs/lists/lizlemonthumbs.jpg" alt="thumbs_up"/>
</li>
<li>
<img src="http://images4.fanpop.com/image/photos/14900000/S1-Promotional-Photos-Liz-Lemon-liz-lemon-14945184-1071-1500.jpg" alt="professional_pic"/>
</li>
<li>
<img src="http://i.huffpost.com/gen/1362193/original.jpg" alt="fun_pic"/>
</li>
<li>
<img src="http://cdn.pastemagazine.com/www/blogs/lists/lizlemonthumbs.jpg" alt="thumbs_up"/>
</li>
</ul>
</div>
</section>
<section id="contact">
<h2>Contact</h2>
<div id="social-icons">
<a href="#">
<img src="http://i284.photobucket.com/albums/ll14/britishpandachick/twitter_zpsulfh8can.png" alt="Twitter icon">
</a>
</div>
</section>
<button id="modal-show">Join the Lemon List</button>
<div id="modal-container">
<section id="modal-box">
<button id="modal-hide">x</button>
<h2 id="newsletter-header">Sign up for my email list!</h2>
<form id="newsletter-signup" action="#" method="post" accept-charset="utf-8">
<input type="email" name="email" value="" placeholder="Your email">
<input type="submit" value="Sign up">
</form>
</section>
</div>
<footer>
<p>© Skillcrush 2014</p>
</footer>
</div>
</div>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
<!-- FlexSlider -->
<script defer src="../jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 420,
itemMargin: 1,
pausePlay: true,
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
</body>
</html>
I already test it. its running fine.
I am using Cordova 6.2.0 and want to override the backbutton on Android. I found the following solution(s) but this doesn't work for me (I guess it's because of the cordova Version): link.
I am using the following code to override the backbutton:
document.addEventListener("deviceready",ondeviceready, false);
function ondeviceready()
{
document.addEventListener("backbutton", onBackKey, false);
}
function onBackKey()
{
//Do something
}
The Problem is that the backbutton only "does something" on the first page. this is my index.html page:
<html>
<head>
<meta charset="utf-8"/>
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Stadtwerke-App</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/index.js"></script>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="js/hammer.js"></script>
<script>
$(document).ready(function(e) {
var startX, curX, startY, curY; // Variables
var newXScroll, newYScroll, genXScroll; // More Variables!
// Change the height of the sidebar, as well as a few things to do with the main content area, so the user
// can actually scroll in the content area.
function sideBarHeight() {
var docHeight = $(document).height();
var winHeight = $(window).height();
$('.slide-in').height(winHeight);
$('#main-container').height(winHeight);
$('#sub-container').height($('#sub-container').height());
}
sideBarHeight();
var outIn = 'in';
Hammer(document.getElementById('main-container')).on('swiperight', function(e) {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
outIn = 'out';
});
Hammer(document.getElementById('main-container')).on('swipeleft', function(e) {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
outIn = 'in';
});
function runAnimation() {
if(outIn == 'out') {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
outIn = 'in';
} else if(outIn == 'in') {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
outIn = 'out';
}
}
$('.menu-icon').click(function() {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
});
});
</script>
</head>
<body id="index" name="index">
<!--script>start()</script-->
<div id="main-container" class="tk-chaparral-pro">
<div id="Email" class="emailbox"></div>
<h2>News</h2>
<div class="Container" onclick='browser("http://www.tagesschau.de/inland/eeg-reform-105.html")'>
<p class="Buttonbereich" align="center"><img src="img/Tagesschau.png"></p>
<!--p class="Buttonbereich4"> 18.05.2016</p-->
<p class="Buttonbereich2"> 31.05.2016: Wie geht es weiter mit der Energiewende?</p>
</div>
<div class="Container" onclick='browser("http://www.rnz.de/nachrichten/metropolregion_artikel,-Nach-Unwetter-Behinderungen-im-Bahnverkehr-_arid,195765.html")'>
<p class="Buttonbereich" align="center"><img src="img/rnz_schriftzug.png"></p>
<!--p class="Buttonbereich4"> 18.05.2016</p-->
<p class="Buttonbereich2"> 31.05.2016: Nach Unwetter: Behinderungen im Bahnverkehr</p>
</div>
<div class="Container" onclick='browser("http://www.faz.net/aktuell/finanzen/meine-finanzen/geld-ausgeben/so-bekommen-sie-die-praemie-fuer-ihr-e-auto-14239079.html")'>
<p class="Buttonbereich" align="center"><img src="img/link_faz.png"/></p>
<!--p class="Buttonbereich4"> 18.05.2016</p-->
<p class="Buttonbereich2"> 18.05.2016: So bekommen Sie die Prämie für Ihr E-Auto</p>
</div>
<div class="Container" onclick='browser("http://www.rnz.de/nachrichten/region_artikel,-Hochspannungstrasse-bei-Leimen-Nach-80-Jahren-gehen-die-Stahlmasten-in-Rente-_arid,192723.html")' >
<p class="Buttonbereich" align="center"><img src="img/rnz_schriftzug.png"></p>
<p class="Buttonbereich2"> 18.05.2016: Nach 80 Jahren gehen Stahlmasten in Rente</p>
</div>
<div class="Container" onclick='browser("http://www.faz.net/aktuell/wirtschaft/grafik-des-tages-woher-kommt-unser-strom-14237266.html")'>
<p class="Buttonbereich" align="center"><img src="img/link_faz.png"/></p>
<!--p class="Buttonbereich4"> 17.05.2016</p-->
<p class="Buttonbereich2"> 17.05.2016: Woher kommt unser Strom?</p>
</div>
<div id="sub-container">
</div>
<br><br><br><br><br><br><br><br><br><br>
<div class="nav">
<div class="navbox">
<div class="menu-icon">
<div class="bar"> </div>
<div class="bar"> </div>
<div class="bar"> </div>
</div>
</div>
<div class="navbox" style=" float:right"><img src="img/Musterwerke.PNG" style="float:right;height:100%;background-color:white"> </div>
<h1 align="center" style="margin-top:10px;">Stadtwerke-App</h1>
</div>
<div class="footer">
<a rel="external" href="infos.html" ><img src="img/Infos.png" alt="hsag logo" style="float:left;height:80%;border:5px solid white"/></a>
<div class="navbox" style=" float:right" onclick='browser("https://www.hsag.info")' ><img src="img/hsag_logo.png" style="float:right;height:100%;background-color:white"> </div>
</div>
</div>
<div class="slide-in">
<ul class="tk-museo-sans">
<li onclick='window.open("index.html","_self" )' >Startseite</li>
<li onclick='window.open("Index_Nach Registrierung.html","_self" )'>Zählerstandserfassung</li>
<li onclick='window.open("Abfallkalender.html","_self" )'>Abfallkalender</li>
<li onclick='window.open("Apothekennotdienst.html","_self" )'>Apothekennotdienst</li>
<li onclick='window.open("Stoerungsmeldung.html","_self" )'>Störungsmeldung</li>
<li onclick='window.open("Services.html","_self" )'>Kundenportal</li>
<li onclick='window.open("Spartipps.html","_self" )'>Energiespartipps</li>
<li onclick='window.open("Vergleich.html","_self" )'>Verbrauchsvergleich</li>
<li onclick='window.open("Events.html","_self" )'>Event-Übersicht</li>
<li onclick='window.open("Impressum.html","_self" )'>Impressum</li>
<li onclick='window.open("Einstellungen.html","_self" )'>Einstellungen/Account</li>
</ul>
</div>
</body>
</html>
All other Pages include the same JS-Scripts.
Try the following code .It woks for me
In HTML:
<body onload="onLoad()">
in Script:
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown() {
}
I found a solution for my problem. I was using the window.open("page.html","_self") function to navigate through my pages. This was the problem because i created a new browser-instance in my Application. Instead its smarter to use the following function:
window.location="page.html"
Now the onBackKey() function is firing at every single page.