Is it possible to return something to a function from appended HTML?
In my case, something that determines what button was pressed in that HTML.
Scenario
I am making a file menu system for web storage. You have other storage, bitmapr web storage, and then local disk. I want to be able to create a file selection system using jQuery. (e.g: I click select on bitmapr web storage, and then the function that called that returns that I clicked bitmapr web storage. (or an rational value that means that.)
Problem
I'm not sure how to tackle this scenario. I've tried using onclick returns, that doesn't work, and jquery append doesn't return what happens on onclick.
Is there a way to solve the scenario posted above?
Program code
Modal display function
var advancedModal = function(html, title, msg, color) {
$("body").append(`
<div class="w3-modal-content w3-animate-opacity w3-display-middle modal">
<header class="w3-container w3-${color}">
<span onclick="$(this).parent().parent().remove()" class="w3-button w3-display-topright">×</span>
<h2>${title}</h2>
<small>${msg}</small>
</header>
${html}
<footer class="w3-container w3-${color}">
<p>bitmapr</p>
</footer>
</div>
</div>`);
return (something determining what button was pressed)
};
advancedModal call
advancedModal(`
<div class="w3-container w3-animate-opacity">
<ul class="w3-ul">
<li class="w3-light-grey w3-animate-opacity" onclick="$('ul', this).toggle();">
<i class="fa fa-question"> </i><i class="fa fa-chevron-right"></i> Web Storage
<button class="w3-button w3-red" onclick="resetStorage()">Delete All</button>
<ul class="w3-ul">
${otherStorageHTML}
</ul>
</li>
<li class="w3-blue blueGradient w3-animate-opacity" onclick="$('ul', this).toggle();">
<i class="fa fa-images"> </i><i class="fa fa-chevron-right"></i> <b>bitmapr</b> Web Storage
<button class="w3-button w3-teal" onclick="return 'clicked me'">Select</button>
<ul class="w3-ul">
${bitmaprHTML}
</ul>
</li>
<li class="w3-blue w3-deep-purple w3-animate-opacity" onclick="$('ul', this).toggle();">
<i class="fa fa-archive"> </i><i class="fa fa-chevron-right"></i> Local Disk Storage
<button class="w3-button w3-teal" onclick="">Select</button>
<ul class="w3-ul">
Not Available Now
</ul>
</li>
</ul>
</div>
`, "Open", spaceLeft + "MB remaining in virtual storage", "blue"));
Notice: All of the ${} variables are defined correctly.
Text diagram
var value = advancedModal(...)
advancedModal(html, title, etc...) {
prints out html, but on click of a button, return a value corresponding to the button
}
Visual diagram
Extra thing
Before flagging/closing, please post in comments what your questions are or what you want cleared up. I tried hard to explain it all here but there may be something I am missing. Thanks.
Instead of returning a value, you can pass a callback. This can be a new parameter.
var advancedModal = function(html, title, msg, color,callback) {};
Now you can use a delegated method to call on when a button is clicked.
var advancedModal = function(html, title, msg, color,callback) {
... appending ...
$('.w3-container').on("click","button",callback);
};
This will call the callback function on any button that is clicked. Here is an example:
advancedModal(html, title, msg, color,function(){
console.log(this); // <-- this is the button
});
It will be a good idea to give the button tag an attribute that allows you to identify it.
Working Example: JsFiddle
It's my first time when I use mustache.js and need some help, please.
Doing a html template builder and I am trying to grab data from JSON and HTML files, than show them into my page.
So I am using this script to get Default theme from JSON than to get the HTML:
$.getJSON('templates.json', function(json){
$.each(json, function(theme, val){
if(theme == 'Default'){
template.load('templates/'+val.url+'/template.html', function(response, status, xhr){
$(this).html(Mustache.render($(this).html(), {
tabs:val.tabs
}));
});
}
});
});
JSON:
{
"Default" : {
"url":"default",
"logo": "YOUR LOGO HERE",
"phone": "+1234567890",
"tabs": [
"About Us",
"Delivery",
"Payment",
"Shipping",
"Contact Us"
]
}
}
HTML:
{{#tabs.length}}
<div id="tabs">
{{#tabs}}
<input class="state" type="radio" title="tab1" name="tabs-state" id="tab1" checked />
{{/tabs}}
<div class="tabs flex-tabs">
{{#tabs}}
<label for="tab1" id="tab1-label" class="tab">{{.}}</label>
{{/tabs}}
{{#tabs}}
<div id="tab1-panel" class="panel active">[[{{.}}]]</div>
{{#tabs}}
</div>
</div>
{{/tabs.length}}
I just can't display the tabs. First time I tried with javascript to convert json into html, but Mustache was showing text instead of html. Now I am trying with conditions in html with no luck.
I also need to add numbers to each item, eg: "tab1", "tab2".. - is this {{#index}} good for that?
How can I add checked only for first items?
Also not sure if {{.}} this is displaying the name of my tab..
You've almost got this nailed, although have slightly misunderstood how to write the mustacheJS view. It's even simpler than you thought! See below. I've simplified the example, so you understand the concept.
Some explanation for below:
{{#Default}}{/Default}} represents looping over an object literal
{{#tabs}}{{/tabs}} presents looping over the object that exists within {{#Defaults}}.
{{.}} displays the entire contents of the object. If this was a complex object, it would be rendered as [object][object]. If you ever encounter this, you must name the object explicitly in your view.
<div class="tabs">
{{#Default}}
{{#tabs}}
<input class="state" type="radio" title="Tab1" name="tabs-state" checked/>
<div class=tabs flex-tabs>
{{.}}
</div>
{{/tabs}}
{{/Default}}
</div>
View Produced
<div class="tabs">
<div class=tabs flex-tabs>
About Us
</div>
<div class=tabs flex-tabs>
Delivery
</div>
<div class=tabs flex-tabs>
Payment
</div>
<div class=tabs flex-tabs>
Shipping
</div>
<div class=tabs flex-tabs>
Contact Us
</div>
</div>
<li data-id="63947814" data-author="ac ca" data-author-id="1387539" data-flags="share report vote" data-isfavorite="false" data-favorite-count="22" data-seyler-slug="" data-comment-count="0">
<div class="content"> el kadar bebelere üstelik hükümetin kıymetlisi olan bir vakıfta tecavüz edilirken üç maymunu oynayan adalet sistemimizin annenin terliğine takılması '' ... sürecek kadar akıl yok'' dedirtiyor..
<br/>ve bazı malların arzusu gerçek olursa bu sığırlar idam kararları alacaklar, kimi asacaklar ki acaba..
<br/>bilmem anlatabiliyor muyum?
</div>
<footer>
<div class="feedback"></div>
<div class="info"> <a class="entry-date permalink" href="/entry/63947814">07.11.2016 12:29</a> <a class="entry-author" href="/biri/ac-ca">ac ca</a> </div>
</footer>
<div class="comment-summary">
<div class="comment-pages"> </div>
</div>
</li>
I've got this html code.My question is i want to parse it with JSOUP like : i will get all li data-id=* informations.This website contains random data-id's so all i just wants get data starts with anything "li data-id="
Elements links = document.select("li[data-id=63947814]");
it's works only got id "63947814".
i've tried "*" : Elements links = document.select("li[data-id=*]");or
Elements links = document.select("li[data-id=\"*\"]");
but it doesnt work.Searched JSON API's and didn't get all i wanted.
so much thanks.
You should use Attribute selector, it will select all the elements with data-id attribute.
Elements links = document.select("li[data-id]");
I am trying to insert a snippet of HTML code after each feed item using JQuery, however whatever I try it still doesn't work. I have displayed the HTML code below of the page I am trying to edit. I am trying to get some HTML to be inserted after every feed time (every time it finishes with class="wp_rss_retriever_container">)
<div class="wp_rss_retriever">
<ul class="wp_rss_retriever_list">
<li class="wp_rss_retriever_item">
<div class="wp_rss_retriever_item_wrapper">
<a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/uncategorized/man-united-ready-to-smash-transfer-record-to-sign-star-striker/" title="Man United ready to smash transfer record to sign star striker">
Man United ready to smash transfer record to sign star striker
</a>
<div class="wp_rss_retriever_container">
<div class="wp_rss_retriever_metadata">
<span class="wp_rss_retriever_date">
Published: March 25, 2016 - 12:29 pm
</span>
</div>
</div>
</div>
</li>
<li class="wp_rss_retriever_item">
<div class="wp_rss_retriever_item_wrapper">
<a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/manchester-united/fenerbahce-plan-bid-for-manchester-united-ace-mata/" title="Fenerbahce plan bid for Manchester United ace Mata">
Fenerbahce plan bid for Manchester United ace Mata
</a>
<div class="wp_rss_retriever_container">
<div class="wp_rss_retriever_metadata">
<span class="wp_rss_retriever_date">
Published: March 25, 2016 - 12:15 pm
</span>
</div>
</div>
</div>
</li>
<li class="wp_rss_retriever_item">
<div class="wp_rss_retriever_item_wrapper">
<a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/manchester-united/united-arsenal-target-morata-premier-league-would-suit-me/" title="Manchester United, Arsenal target Morata: Premier League would suit me">
Manchester United, Arsenal target Morata: Premier League would suit me
</a>
<div class="wp_rss_retriever_container">
<div class="wp_rss_retriever_metadata">
<span class="wp_rss_retriever_date">
Published: March 25, 2016 - 11:55 am
</span>
</div>
</div>
</div>
</li>
<li class="wp_rss_retriever_item">
<div class="wp_rss_retriever_item_wrapper">
<a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/manchester-united/manchester-united-rival-arsenal-liverpool-for-juventus-striker-morata/"
The code i tried to use to get it to work is
$( "<p>Test</p>" ).insertAfter( ".wp_rss_retriever_container" );
You could use each to iterate over all the .wp_rss_retriever_container class:
$('.wp_rss_retriever_container').each(function(i, obj) {
$(this).append("<p>Test</p>"); //or .html()
});
If you want it to be 'limited amount of times' you could condition and break if 'i' is equal to some value:
if(i == 5){ break; } // only 4 'test' will be added
Hope it helps to you!
The Problem
(Since posting this, I've gotten a little closer to solving it, but I'm still stuck. Please check the update at the end of the question).
I have a site that's been template using Mustache.js. When the site is run locally, it works fine. The templates are loaded, Mustache replaces the mustache tags with the given data, and the page renders as expected.
When the site is run from my (school) server however, it develops an odd issue. For whatever reason, Mustache.render is replacing all the mustache tags in my template with nothing (as in empty strings). Obviously, this is causing my site to load very wrong.
What I've Tried To Diagnose It
Using console logging, I tracked the loaded templates, and what Mustache produces. The results are below:
The data to plug into the templates (siteData.json):
{
"headerClasses": "mainHeader",
"headerTitle": "Uromastyces Fact Site",
"sideBarClasses": "mainSideBar",
"sideBarImgClasses": "sideBarImage",
"sideBarImgAlt": "A Picture of Pascal",
"sideBarImgSrc": "../images/pascal-cropped-shrunk.jpg",
"navBarClassNames": "navBar",
"navLinks": [
{
"name": "Home",
"link": "index.html"
}, {
"name": "Enclosure",
"link": "enclosure.html"
}, {
"name": "Diet",
"link": "diet.html"
}, {
"name": "Behavior and Life",
"link": "behaviorAndLife.html"
}, {
"name": "About Me",
"link": "aboutMe.html"
}
],
"uniqueBodyClasses": "uniqueBody",
"uniqueBodyContent": "DEFAULT UNIQUE BODY",
"footerClasses": "mainFooter",
"authorWrapperClasses": "footerAuthor footerWrapper",
"dateModifiedWrapperClasses": "footerModified footerWrapper",
"authorName": "Brendon Williams",
"lastModifiedDate": "DEFAULT LAST MODIFIED DATE",
"indexNavBarClasses": "indexNavBar"
}
Body Template (BodyTemplate.mustache):
<header class="{{headerClasses}}">
<h1>
{{headerTitle}}
</h1>
</header>
<aside class="{{sideBarClasses}}">
<img class="{{sideBarImgClasses}}" src="{{sideBarImgSrc}}" alt="{{sideBarImgAlt}}">
<nav class="{{navBarClassNames}}">
<ul>
{{#navLinks}}
<li>{{name}}</li>
{{/navLinks}}
</ul>
</nav>
</aside>
<section class="{{uniqueBodyClasses}}">
<div id="indexDiv">
<div id="indexContents"></div>
</div>
{{> uniqueBodyContent}}
</section>
<footer class="{{footerClasses}}">
<span class="{{authorWrapperClasses}}">
Author: {{authorName}}
</span>
<span class="{{dateModifiedWrapperClasses}}">
Last Modified: {{> lastModifiedDate}}
</span>
</footer>
<script src="./js/Indexer.js"></script>
Here's where it differs. After running the above files through Mustache.render locally, here are the results:
<header class="mainHeader">
<h1>
Uromastyces Fact Site
</h1>
</header>
<aside class="mainSideBar">
<img class="sideBarImage" src="../images/pascal-cropped-shrunk.jpg" alt="A Picture of Pascal">
<nav class="navBar">
<ul>
<li>Home</li>
<li>Enclosure</li>
<li>Diet</li>
<li>Behavior and Life</li>
<li>About Me</li>
</ul>
</nav>
</aside>
<section class="uniqueBody">
<div id="indexDiv">
<div id="indexContents"></div>
</div>
<h4>Introduction</h4>
<h5>Hi...</h5>
<p>
I created this site to...
</p>
<p>
...
</p>
<p>
...
</p>
<h4>Contact Me</h4>
<p>
Want to send me a message? Use the form below:
</p>
<form enctype="text/plain" method="post" action="mailto:brendonw5#gmail.com">
<label class="contactLabel">Subject:</label>
<input class="contactInput" type="text" name="subject">
<label class="contactLabel">Body:</label>
<input class="contactInput" type="text" name="body">
<input type="submit" name="submit" value="Submit">
</form>
</section>
<footer class="mainFooter">
<span class="footerAuthor footerWrapper">
Author: Brendon Williams
</span>
<span class="footerModified footerWrapper">
Last Modified: 15.12.26
</span>
</footer>
<script src="./js/Indexer.js"></script>
Exactly as I'd expect. All the mustache tags were removed, and replaced with the corresponding data from the JSON
However, here's the results when run from my school's server (The exact same code):
<header class="">
<h1>
</h1>
</header>
<aside class="">
<img class="" src="" alt="">
<nav class="">
<ul>
</ul>
</nav>
</aside>
<section class="">
<div id="indexDiv">
<div id="indexContents"></div>
</div>
<h4>Introduction</h4>
<h5>Hi...</h5>
<p>
I created this site to...
</p>
<p>
...
</p>
<p>
...
</p>
<h4>Contact Me</h4>
<p>
Want to send me a message? Use the form below:
</p>
<form enctype="text/plain" method="post" action="mailto:brendonw5#gmail.com">
<label class="contactLabel">Subject:</label>
<input class="contactInput" type="text" name="subject">
<label class="contactLabel">Body:</label>
<input class="contactInput" type="text" name="body">
<input type="submit" name="submit" value="Submit">
</form>
</section>
<footer class="">
<span class="">
Author:
</span>
<span class="">
Last Modified: 15.12.26
</span>
</footer>
<script src="./js/Indexer.js"></script>
Notice how all of the mustache tags were simply removed instead of being replaced by the data.
I know everything is being downloaded fine, so it's not a path issue:
While I've been using mustache for about a week, I have no idea how to diagnose a problem like this. The above snippets were the result of console logging, so I've verified the input going into Mustache.render, and it all checks out. And again, this only happens when it's hosted remotely.
Here's my rendering module (templateLoader.js) (The chunk of console logs in the middle of renderPage is the source of the above snippets via the Developer Cosole):
var TemplateLoader = {
/**
* Draws the templated page, along with the given unique body.
*
* #param {string|Node} uniqueBodyElement Data representing the unique body to display. Should either be a string
* of HTML, or a DOM element containing the HTML.
* #param {string} lastModifiedDate The date that the page was last modified.
*/
renderPage: function(uniqueBodyElement, lastModifiedDate) {
var data;
var headTemplate;
var bodyTemplate;
var articleTemplate;
//Wait until all data is available
$.when(
$.get("./templates/siteData.json", function(d){ data = d }),
$.get("./templates/HeadTemplate.mustache", function(hT){ headTemplate = hT }),
$.get("./templates/BodyTemplate.mustache", function(bT){ bodyTemplate = bT }),
$.get("./templates/ArticleTemplate.mustache", function(aT){ articleTemplate = aT })
).done(function() {
Helpers.doWithMustache(function() {
var partial = TemplateLoader.getTemplatePartial(uniqueBodyElement);
partial.lastModifiedDate = lastModifiedDate;
var renderedHead = Mustache.render(headTemplate, data);
var renderedBody = Mustache.render(bodyTemplate, data, partial);
var renderedArticleBody = Mustache.render(articleTemplate, {}, { articleBody: renderedBody });
console.group();
console.log("Data: \n" + data);
console.log("Body Template: \n" + bodyTemplate);
console.log("Article Template: \n" + articleTemplate);
console.log("Rendered Body: \n" + renderedBody);
console.log("Rendered Article Body: \n" + renderedArticleBody);
console.groupEnd();
$('head').append(renderedHead);
$('body').html(renderedArticleBody);
console.log("Templates Loaded.");
});
}).fail(function() {
console.error("Failed to fetch templates or site data.")
});
},
getTemplatePartial: function(templateData) {
var uniqueBodyString;
if (typeof templateData === "string") {
uniqueBodyString = templateData
} else {
uniqueBodyString = templateData.innerHTML;
}
return {
uniqueBodyContent: uniqueBodyString
};
}
};
var Helpers = {
doWithMustache: function(f) {
$.getScript("./js/mustache.min.js", function() {
f();
}).fail(function() {
console.error("Failed to fetch mustache script.")
});
}
};
And here's the full results of the log:
Data:
{
"headerClasses": "mainHeader",
headerTitle: "Uromastyces Fact Site",
"sideBarClasses": "mainSideBar",
"sideBarImgClasses": "sideBarImage",
"sideBarImgAlt": "A Picture of Pascal",
"sideBarImgSrc": "../images/pascal-cropped-shrunk.jpg",
"navBarClassNames": "navBar",
"navLinks": [
{
"name": "Home",
"link": "index.html"
}, {
"name": "Enclosure",
"link": "enclosure.html"
}, {
"name": "Diet",
"link": "diet.html"
}, {
"name": "Behavior and Life",
"link": "behaviorAndLife.html"
}, {
"name": "About Me",
"link": "aboutMe.html"
}
],
"uniqueBodyClasses": "uniqueBody",
"uniqueBodyContent": "DEFAULT UNIQUE BODY",
"footerClasses": "mainFooter",
"authorWrapperClasses": "footerAuthor footerWrapper",
"dateModifiedWrapperClasses": "footerModified footerWrapper",
"authorName": "Brendon Williams",
"lastModifiedDate": "DEFAULT LAST MODIFIED DATE",
"indexNavBarClasses": "indexNavBar"
}
templateLoader.js (41,14)
Body Template:
<header class="{{headerClasses}}">
<h1>
{{headerTitle}}
</h1>
</header>
<aside class="{{sideBarClasses}}">
<img class="{{sideBarImgClasses}}" src="{{sideBarImgSrc}}" alt="{{sideBarImgAlt}}">
<nav class="{{navBarClassNames}}">
<ul>
{{#navLinks}}
<li>{{name}}</li>
{{/navLinks}}
</ul>
</nav>
</aside>
<section class="{{uniqueBodyClasses}}">
<div id="indexDiv">
<div id="indexContents"></div>
</div>
{{> uniqueBodyContent}}
</section>
<footer class="{{footerClasses}}">
<span class="{{authorWrapperClasses}}">
Author: {{authorName}}
</span>
<span class="{{dateModifiedWrapperClasses}}">
Last Modified: {{> lastModifiedDate}}
</span>
</footer>
<script src="./js/Indexer.js"></script>
templateLoader.js (42,14)
Article Template:
<section>
{{> articleBody}}
</section>
templateLoader.js (43,14)
Article Template:
<section>
{{> articleBody}}
</section>
templateLoader.js (43,14)
Rendered Article Body:
<section>
<header class="">
<h1>
</h1>
</header>
<aside class="">
<img class="" src="" alt="">
<nav class="">
<ul>
</ul>
</nav>
</aside>
<section class="">
<div id="indexDiv">
<div id="indexContents"></div>
</div>
<h4>Introduction</h4>
<h5>Hi, I'm Brendon, and I'm a long-time reptile and Uromastyx owner.</h5>
<p>
I created this site to act as a centralized collection of facts on Uromastyces. The conditions that Uromastyces should be housed in are quite different than most other reptiles, so it can be confusing to new owners as to what the correct conditions are, and what they can be fed.
</p>
<p>
To the best of my ability, I will reference external sites and provide links to the original information. Note though that new information about Uromastyces may come to light after the publication of this site, so I can't guarantee that this information will forever remain in-date, and that contradictory information won't appear later; although I'll do my best to evaluate all of the sources I use.
</p>
<p>
In the top-left of every page is my current Uromastyx, <em>Pascal</em>. She was injured in-transit on the way to my Dad's wholesale warehouse (her right eye was damaged) and was deemed unsellable, so I adopted her to ensure that she can still live a long-life. Besides her lack-of a left eye, she's so healthy, you'd never know that she's injured (except when she
walks in circles looking for food).
</p>
<h4>Contact Me</h4>
<p>
Want to send me a message? Use the form below:
</p>
<form enctype="text/plain" method="post" action="mailto:brendonw5#gmail.com">
<label class="contactLabel">Subject:</label>
<input class="contactInput" type="text" name="subject">
<label class="contactLabel">Body:</label>
<input class="contactInput" type="text" name="body">
<input type="submit" name="submit" value="Submit">
</form>
</section>
<footer class="">
<span class="">
Author:
</span>
<span class="">
Last Modified: 15.12.26
</span>
</footer>
<script src="./js/Indexer.js"></script></section>
templateLoader.js (45,14)
Templates Loaded.
templateLoader.js (51,14)
Any guidance at all here would be appreciated.
Update:
So, while debugging it, I found out the potential source of the problem, but have no idea how to resolve it. When debugging it locally, the data object (inside renderPage) is interpreted by Edge as a JS object, and lists each of its attributes. When it's remote however, the data object is being interpreted as a String (local is on the left, remote on the right):
So, the issue seems to be that the data.json isn't being read properly on the server side.
I should note that locally, I'm using Windows, but the school server is "Apache/2.2.3 (Red Hat)" (according to Edge's Network tab). I changed the returns from \r\n to \n to adhere to Unix standards, but it didn't change anything.
I've run the JSON file through all of the top JSON validators, and it checks out in all of them, so it doesn't seem to be a formatting issue.
It looks like you're not parsing JSON data from the AJAX response. The document is read as plain text. (Take a look at your data variable.)
You can use JSON.parse(txt) or jQuery's AJAX shorthand $.getJSON(...).