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>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 days ago.
Improve this question
I am trying to display the image from pokeapi but I get an error when I input the name. When I input the number I do get the pokemon image after clicking twice. But when I search for another pokemon I get a number of the previous pokemon. I would appreciate the help on the proper way to display the image. Thanks.
JS code is as follows:
document.querySelector("#search").addEventListener("click", getPokemon);
function getPokemon(e) {
const name = document.querySelector("#pokemonName").value;
fetch(`https://pokeapi.co/api/v2/pokemon/${name || id}`)
.then((res) => res.json())
.then((data) => {
console.log(data);
document.getElementById("data_id").innerHTML = data.id;
document.getElementById("data_name").innerHTML = data.name;
document.getElementById("data_type").innerHTML = data.types
.map((type) => type.type.name)
.join(", ");
document.getElementById("data_moves").innerHTML = data.moves
.map((move) => move.move.name)
.slice(0, 5)
.join(", ");
document.getElementById("search").addEventListener("click", getImage);
function getImage() {
const img = new Image();
img.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${name || id}.png`;
document.getElementById("image").appendChild(img);
}
})
.catch((err) => {
console.log("Error pokemon not found", err);
});
e.preventDefault();
}
HTML CODE:
<!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" />
<!-- CSS -->
<link rel="stylesheet" href="style.css" />
<!-- BOOTSTRAP -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Unbounded&display=swap"
rel="stylesheet"
/>
<!-- cdnfonts -->
<link
href="https://fonts.cdnfonts.com/css/pokemon-solid"
rel="stylesheet"
/>
<title>Pokedex</title>
</head>
<body>
<div class="main-container">
<h1 class="heading">Pokemon</h1>
<form class="nameForm">
<input
type="text"
id="pokemonName"
name="pokemonName"
placeholder="Enter Pokemon Name"
/><br />
<button type="submit" class="sub-btn" id="search">Enter</button>
</form>
<div class="pokemonInfo container text-center">
<div id="image"></div>
<div class="row row-cols-2 gy-1">
<div class="pokemon-info-left dark-green col">Pokedex no.</div>
<div class="yellow col" id="data_id"></div>
<div class="w-100"></div>
<div class="pokemon-info-left light-green col">Name</div>
<div class="light col" id="data_name"></div>
<div class="w-100"></div>
<div class="pokemon-info-left dark-green col">Type</div>
<div class="yellow col" id="data_type"></div>
<div class="w-100"></div>
<div class="pokemon-info-left light-green col">Move</div>
<div class="light col data_moves" id="data_moves"></div>
</div>
</div>
</div>
<!-- Javascript -->
<script src="main.js"></script>
</body>
</html>
I tried a few ways cant seem to get it to work.
You can create a image tag inside of div#image and change its src attribute after you receive the response from the API. Here is how:
In you HTML code, add this:
<div id="image">
<img src="" alt="Pokemon Image" id="pokemon-image" />
</div>
In you JS code, remove these lines:
document.getElementById("search").addEventListener("click", getImage);
function getImage() {
const img = new Image();
img.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${name || id}.png`;
document.getElementById("image").appendChild(img);
}
and replace with these code:
const img_link = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${data.id}.png`
document.getElementById("pokemon-image").setAttribute("src", img_link);
I have the following index.html page, I inserted a div of class "topnav" (see a section with additional hard returns).
Now I need the same code (div of class "topnav") in all other HTML pages in the directory. This could be a few hundreds of files!
I was thinking: "can somebody help me with the creation of a script?" or by pushing a javascript file that can transform all HTML pages in the folder? All the pages have the same header. So we could say: after the first , add a new and section with the home/search
function relPathToAbs(sRelPath) {
var nUpLn, sDir = "",
sPath = location.pathname.replace(/[^\/]*$/, sRelPath.replace(/(\/|^)(?:\.?\/+)+/g, "$1"));
for (var nEnd, nStart = 0; nEnd = sPath.indexOf("/../", nStart), nEnd > -1; nStart = nEnd + nUpLn) {
nUpLn = /^\/(?:\.\.\/)*/.exec(sPath.slice(nEnd))[0].length;
sDir = (sDir + sPath.substring(nStart, nEnd)).replace(new RegExp("(?:\\\/+[^\\\/]*){0," + ((nUpLn - 1) / 3) + "}$"), "/");
}
return sDir + sPath.substr(nStart);
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>6129103883 - Schema ST4 styles -- Reference view - do not translate this file. Aperçu de référence - ne pas traduire ce fichier. Referenzansicht - diese Datei nicht übersetzen.</title>
<meta http-equiv="Content-Script-Type" content="text/javascript"
/>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="generator" content="SCHEMA ST4" />
<script language="JavaScript" src="Scripts/Common.Core.js" type="text/javascript" charset="UTF-8">
</script>
<script language="JavaScript" src="Scripts/Common.Language.js" type="text/javascript" charset="UTF-8">
</script>
<script language="JavaScript" src="Scripts/Production.js" type="text/javascript" charset="UTF-8">
</script>
<link rel="stylesheet" href="layout.css" type="text/css" />
<link rel="stylesheet" href="CSS/Common.Reset.css" type="text/css" />
<link rel="stylesheet" href="CSS/Core.Production.css" type="text/css" />
<link rel="stylesheet" href="CSS/HTML.css" type="text/css" />
</head>
<body>
<div class="page">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="metatable">
<tr>
<td class="project">Schema ST4 styles -- Reference view - do not translate this file. Aperçu de référence - ne pas traduire ce fichier. Referenzansicht - diese Datei nicht übersetzen.</td>
</tr>
<td>
<tr>
<div class="topnav">
<a class="active" href="#home">Home</a>
<input type="text" placeholder="Search..">
</div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="contentLayout">
<tr>
<td class="contentLayoutOne">
<div class="navigation tripletNavigation">
<div class="tripletHead tripletHeadInfoType">Example of Heading 0 (metadata – Installer or User)</div>
<div class="tripletHead tripletHeadInfoType">Example of Heading 1 (metadata – TitleAcrossAllColumns)</div>
<div class="tripletHead tripletHeadInfoType">Example of Heading 1 (metadata – TitleAsSectionTitle)</div>
<div class="tripletHead tripletHeadInfoType">Example of Heading 1</div>
<div class="tripletHead tripletHeadInfoType">New Node</div>
<div class="tripletHead tripletHeadInfoType">New Node</div>
<div class="tripletHead tripletHeadInfoType">Button yes/no</div>
<div class="tripletHead tripletHeadInfoType">Button history yes</div>
<div class="tripletHead tripletHeadInfoType">Button history no</div>
<div class="tripletHead tripletHeadInfoType">Button history</div>
<div class="tripletHead tripletHeadInfoType">Topic that contains fragment to link to</div>
<div class="tripletHead tripletHeadInfoType">Topic with links</div>
</div>
</td>
<td class="contentLayoutTwo"><img src="" /></td>
<td class="contentLayoutThree">
<div class="content">
<div class="titlePageContent"> </div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
We inserted of course just the bar at this moment, so we still need a search javascript too to add in the folder structure/HTML pages. Any recommendations?
If you use the find and replace functionality in something like Visual Studio Code you can just replace this entire header with the updated one.
:) 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 :)
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 have a very basic nodejs app that is displaying a html pages. This pages has two buttons linked with js function in a separated file. One of the function use ajax, the other not. The one using ajax is not working (not found I guess).
The external js file was working perfectly well under apache. Is there something specific to do to be able to use ajax on client side with node.js?
Here the node.js part:
var express = require ('express');
var app = express ();
app.use(express.static(__dirname + '/images'));
app.use(express.static(__dirname + '/CSS'));
app.use(express.static(__dirname + '/font'));
app.use(express.static(__dirname ));
app.use(express.static(__dirname +'/ChemAlive_JS'));
app.get('/', function(req, res) {
res.setHeader('Content-Type', 'text/html');
res.sendFile('/home/laetitia/Project/ChemAlive_Interface_Node/test.html');
});
app.listen(8080);
The html part:
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="/Interface.css" type="text/css" rel="stylesheet" />
<link href="/ketcher.css" type="text/css" rel="stylesheet" />
<link href="/font-chemalive.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="/ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href=/ddsmoothmenu-v.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="/ui_bis.js"></script>
</head>
<body >
<div id="background">
<div id="LoginButton" class="deck login" >
<img class="LoginButtonUnpressed" alt="Login/Start" src="/ChemAlive_Start_Button.png">
<img class="LoginButtonPressed" alt="Login/Start" src="/ChemAlive_Start_Button_pressed.png">
<div class="popup" style="top: 0px; right: 80px;">
<p>Log-on or launch your calculations.</p>
</div>
</div>
<!-- Welcome Dialogue box -->
<div id="welcome_DB" class="dialogWindow fileDialog" >
<div class="h1">
<p>Welcome. Thank you for visiting our interface!</p>
</div>
<div class="iconDiv">
<img src="/Green_gears.png"/>
</div>
<div class="mainDiv">
<div class="desText">
<p>ChemAlive i</p>
</div>
</div>
<div class="navDiv">
<input type="submit" id="welcome_cancel" class="dialogButton" value="Cancel"/>
<label for="welcome_cancel" onclick="gototry();"><span class="label">Just Try It</span></label>
<input id="welcome_login" class="dialogButton" type="submit" value="Done"/>
<label for="welcome_login" style="right: 10px" onclick="gotologin();"><span class="label">Login</span></label>
<input id="welcome_register" class="dialogButton" type="submit" value="Done"/>
<label for="welcome_register" style="right: 20px" onclick="gotoregister();" ><span class="label">Registration</span></label>
</div>
</div>
<!-- Close welcome DB -->
</div>
</body>
</html>
And the external, client side, js:
$('LoginButton').observe('click', ui.onClick_login);
ui.onClick_login = function() {
window.alert("Hey There")
ui.showDialog('register_login');
}
function gototry() {
document.getElementById("welcome_DB").style.display = "none";
}
function gotologin() {
document.getElementById("welcome_DB").style.display = "none";
document.getElementById("login_v2").style.display = "inline-block";
}
function gotoregister() {
document.getElementById("welcome_DB").style.display = "none";
document.getElementById("register_DB").style.display = "inline-block";
}
Its $('LoginButton').observe('click', ui.onClick_login) call is not working.
Any ideas?
rename ui.onClick_login to a simple name like my_onclick_login
$('#LoginButton').observe('click', my_onclick_login);
my_onclick_login = function() {
window.alert("Hey There")
ui.showDialog('register_login');
}