So I'm learning Riot JS, following a guide. Gives an example explaining step by step.
And adds a "this.update()" to update the riot js variables. Now, it is working for him, but not for me. Can you guys tell me why?
Here's the code.
This is the index.html
<body>
<script src="bower_components/riot/riot.min.js" type="text/javascript"></script>
<script src="tags/all.js" type="text/javascript"></script>
<contact-list></contact-list>
<script>
riot.mount('contact-list', {callback: tagCallback});
function tagCallback(theTag) {
console.log('callback executed');
var request = new XMLHttpRequest();
request.open('GET', 'people.json', true);
request.onload = function() {
if(request.status == 200) {
var data = JSON.parse(request.responseText);
console.log(data);
theTag.trigger('data_loaded', data);
}
}
setTimeout(function() {
request.send();
},2000);
}
</script>
</body>
And this is my contact-list.tag
<contact-list>
<h1>Contacts</h1>
<ul>
<li each={p in opts.people}>{p.first} {p.last}</li>
</ul>
<script>
this.on('mount', function() {
console.log('Riot mount event fired');
opts.callback(this);
})
this.on('data_loaded', function(peeps) {
console.log(peeps);
opts.people = peeps;
this.update();
})
</script>
</contact-list>
After debugging with the console.logs I can see i'm retrieving data correctly from my JSON file, my contact list data is there. But the bullet list isn't updated. It's displayed empty.
Is there any reason for using a callback function?
If not, move your callback function into the tag and update it directly after assigning your fetched data to your tags variable.
Look at the sources in riotgear:
https://github.com/RiotGear/rg/blob/master/tags/rg-include/rg-include.tag
For me it was a perfect example.
Oh nevermind guys, sorry. Don't know how actually the example of the guy in the video worked. Because I had to pass data.people on the html trigger event. Otherwise i was passing a plane Object with an Array in it.
Related
Having a struggle, I have created a Modal Popup for a mail signup however it has become annoying showing everytime on a page load so I am wanting to just show this once per session and no matter how I adjust the script I cannot get this to happen. Please can anyone help?
The code is as follows for the popup:
<script type="text/javascript">
window.onload = function() {
OpenBootstrapPopup();
};
function OpenBootstrapPopup() {
$("#simpleModal").modal('show');
}
</script>
<script>
$('#simpleModal').on('click', 'button.close', function(eventObject) {
$('#simpleModal').modal('hide');
});
</script>
I just want the modal popup to show once per session
I want to inject some CSS and JavaScript files via a preprocessor.
In my preprocessor I inject the html template to the body element.
I printed the result out via console.log(document.body) - you can see the result at the bottom. It looks good, but the script is not evaluated.
If I run console.log(window.foobar) in my test, it's undefined.
Actually I don't want to to inject simple scripts, I want to load some files via
<script src="build/app.js"></script>
I need it in every test, so I don't want to refactor every single test for the same code injection, that's the reason why I tried to put it into the html generated by karma.
<body><script> window.foobar = 'miau!';</script>
<!-- The scripts need to be at the end of body, so that some test running frameworks
(Angular Scenario, for example) need the body to be loaded so that it can insert its magic
into it. If it is before body, then it fails to find the body and crashes and burns in an epic
manner. -->
<script type="text/javascript">
// sets window.__karma__ and overrides console and error handling
// Use window.opener if this was opened by someone else - in a new window
if (window.opener) {
window.opener.karma.setupContext(window);
} else {
window.parent.karma.setupContext(window);
}
// All served files with the latest timestamps
window.__karma__.files = {
'/base/node_modules/mocha/mocha.js': '253e2fdce43a4b2eed46eb25139b784adbb5c47f',
'/base/node_modules/karma-mocha/lib/adapter.js': '3664759c75e6f4e496fef20ad115ce8233a0f7b5',
'/base/test/custom-test.js': 'abf5b0b3f4dbb62653c816b264a251c7fc264fb9',
'/base/test/build/build.css': 'df7e943e50164a1fc4b66e0a0c46fc86efdef656',
'/base/test/build/build.js': '9f0a39709e073846c73481453cdee8d37e528856',
'/base/test/build/test.js': '0ccd4711b9c887458f81cf1dedc04c6ed59abe43'
};
</script>
<!-- Dynamically replaced with <script> tags -->
<script type="text/javascript" src="/base/node_modules/mocha/mocha.js?253e2fdce43a4b2eed46eb25139b784adbb5c47f"></script>
<script type="text/javascript" src="/base/node_modules/karma-mocha/lib/adapter.js?3664759c75e6f4e496fef20ad115ce8233a0f7b5"></script>
<script type="text/javascript" src="/base/test/custom-test.js?abf5b0b3f4dbb62653c816b264a251c7fc264fb9"></script></body>
Karma introduces the page scripts/html just like ajax, so it wont execute once the append has finished.
You will need to append the files for each spec. I have a helper for this job:
function appendCSS(path){
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href='base/' + path;
document.body.appendChild(link)
}
function appendScript(path){
var link = document.createElement('script');
link.type = 'javascript';
link.src='base/' + path;
document.body.appendChild(link)
}
function loadAssets(page){
document.body.innerHTML = __html__['_site/' + (page || 'index') + '.html'];
appendCSS('_site/styles/demo.css');
appendCSS('_site/styles/' + page + '.css');
appendScript('_site/scripts/vendor.js');
appendScript('_site/scripts/' + page + '.js');
}
module.exports = {
loadAssets: loadAssets
};
In my spec i then simply call the helper, passing the name of the html page to be tested.
require('../helper').loadAssets('tested-page-name');
As you can see, i use the borwserify plugin, but i hope this helps.
I am using the Onsen framework with jQuery and jQuery mobile, it appears that there is no way to catch the event that fires once the new page is loaded.
My current code, which executes in the index.html file (the master page)
<script src="scripts/jQuery.js"></script>
<script src="scripts/jquery.mobile.custom.min.js"></script>
<script src="scripts/app.js"></script>
<script>
ons.bootstrap();
ons.ready(function() {
$(document.body).on('pageinit', '#recentPage', function() {
initRecentPage();
});
});
in app.js is the following code
function initRecentPage() {
$("#yourReports").on("tap", ".showReport", recentShowReport);
var content = document.getElementById("yourReports");
ons.compile(content);
}
and the HTML:
<ons-page id="recentPage">
<ons-toolbar id="myToolbar">
<div id="toolBarTitle" class="center">Recent Checks</div>
<div class="right">
<ons-toolbar-button ng-click="mySlidingMenu.toggleMenu()">
<ons-icon icon="bars"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-scroller>
<h3 class="headingTitle"> Checks</h3>
<div id="Free" class="tabArea">
<ons-list id="yourReports">
</ons-list>
<ons-button id="clearFreeRecentButton">
<span id="clearRecentText" class="bold">Clear Recent Checks</span>
</ons-button>
</div>
</ons-scroller>
</ons-page>
in this instance the variable 'content' is always null. I've debuged significantly, and the element I am trying to get is not present when this event fires. It is loaded later.
So, the question is, how do I ensure that all of the content is present before using a selector. It feels like this is an onsen specific issue.
In the end I could only find one reliable way of making this work.
Essentially I had to wait, using setTimeout 300 milliseconds for the DOM elements to be ready. It feels like a hack, but honestly there is no other reliable way of making this behave. The app is in the app store and works well, so even though it seems like a hack, it works:
$(document).on('pageinit', '#homePage', function() {
initHomePage();
});
function initHomePage() {
setTimeout(function() {
setUpHomePage();
}, 300);
}
Move your $(document.body).on('pageinit', '#recentPage', function() { outside of ons.ready block.
JS
ons.bootstrap();
ons.ready(function() {
console.log("ready");
});
$(document.body).on('pageinit', '#recentPage', function() {
initRecentPage();
});
function initRecentPage() {
//$("#yourReports").on("tap", ".showReport", recentShowReport);
var content = document.getElementById("yourReports");
alert(content)
ons.compile(content);
}
I commented out a line because I do not have access to that "recentShowReport"
You can see how it works here: 'http://codepen.io/vnguyen972/pen/xCqDe'
The alert will show that 'content' is not NULL.
Hope this helps.
It seems FB have removed the possibility to get the the clicked element (i.e. this) in the context of <fb:visible-to-connection>.
I.e:
<a onclick="doSomething(this);">test</a>
<script>
function doSomething(this) {
console.log(this);
}
<script>
Will give the following in Firebug:
Object { PRIV_obj=a, appendChild=function(), insertBefore=function(), more...}
Whereas
<fb:visible-to-connection>
<a onclick="doSomething(this);">test</a>
<fb:else>
</fb:else>
<a onclick="doSomething(this);">test</a>
</fb:visible-to-connection>
<script type="text/javascript">
function doSomething(element) {
console.log(element);
}
</script>
Will give:
null
Is this a temporary bug in FBJS or due to some new feature?
How do I get hold of "this" in the second example?
This was changed for security reasons, you can't access HTML elements inside FMBL elements any more - the initial bug report (which was closed as a 'by design') was about using getElementById but I believe this is the same cause
I'm trying to prevent the back button from working on one of my asp.net mvc pages.
I've read a couple of places that if i put "window.history.forward(1);" in my page it will prevent the back button from working on a given page.
This is what I did in my page:
<script type="text/javascript">
$(document).ready(function () {
window.history.forward(1);
});
</script>
It doesn't seem to be working. Am I using this incorrectly or is this approach wrong? thanks.
The way I've seen this trick used is to put history.forward() on every page before the page where you don't want the back button to work, then every time the user hits the back button it forwards them back to where they were. The common use is to prevent others from returning to a page (usually in a given, linear sequence) once they have progressed. This is sometimes used in the sign-in sequence for banking websites, for example.
As far as I know, there is no way to actually disable the back button. Sometimes people get around this by opening the page in a new window, which will not have a history of pages preceding it, and thus nothing to go back to. Others simply display a warning message before going back to inform a user that they may lose unsaved data, if that is the main concern.
That said, maybe this will help you: http://viralpatel.net/blogs/disable-back-button-browser-javascript/
maybe:...
<script type="text/javascript">
function disableBackButton()
{
window.history.forward();
}
setTimeout("disableBackButton()", 0);
$(document).ready(function () {
disableBackButton();
});
</script>
Use on the page in which you don't want back button to work.
window.history.forward(1);
This is working for me... Hope it helpful for you..
<script type="text/javascript">
window.history.forward();
function noBack(){
window.history.forward();
}
</script>
$(document).ready(function() {
noBack();
});
You can use
history.go(index)
index =0 //for the current page.
index>0 //e.g 1,2 for forward navigation
index<0 //e.g -1,-2 for backward navigation
history.go(-2)
<SCRIPT type="text/javascript">
window.history.forward();
function noBack() { window.history.forward(); }
</SCRIPT>
And in html Body tag write the following code.
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload=" " >
Try this, it worked for me.
Not sure if this is relevant but I found it and it might be worth a try:
<script type="text/javascript">
function preventBack() {
window.history.forward();
}
setTimeout("preventBack()", 0);
window.onunload = function() {
null
};
</script>
<script>
function preventBack() {
window.history.forward();
}
setTimeout("preventBack()", 0);
window.onunload = function () {
null
};
</script>
window.history.forward();
function noBack()
{
window.history.forward();
}
function setit() {
noBack();
}
<script>
function preventBack() {
window.history.forward();
}
setTimeout("preventBack()", 0);
window.onunload = function () {
null
};
</script>
The code needs to be on the page infront as well as the page you require for it to work