I'm new to JSFiddle but really like it. Don't fully understand how to load a local html page as a DOM to work with in Fiddle. looked at echo\html\ but don't know where to direct the actual URL link to get my full html page? html is very large and would need to escape thousands of ' to get it working. I know about Cross Domain issue so I've tried putting my html table in another Fiddle and calling it, that way its not cross domain.
http://jsfiddle.net/jeffbarclay/HGSvJ/
I would ideally like to get my html from my server like: http://www.myserver.com/myhtml.html
$(function(){
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img src='http://automobiles.honda.com/images/current-offers/small-loading.gif' alt='loading...' />";
var loadUrl = "http://jsfiddle.net/jeffbarclay/MvHTR/show/";
$("#loadbasic").click(function(){
$("#result").html(ajax_load).load(loadUrl);
});
});
Resolved: had to use different link in jsfiddle to get results.
Here is working jsfiddle:
JSFiddle demo
$(function(){
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img src='http://automobiles.honda.com/images/current-offers/small-loading.gif' alt='loading...' />";
var loadUrl = "http://fiddle.jshell.net/jeffbarclay/MvHTR/show/";
$("#loadbasic").click(function(){
$("#result").html(ajax_load).load(loadUrl);
});
});
Related
I'm trying to do a redirect after set a $storage var, using ngStorage module. This is not working, and I can't find out why.
My code is below:
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
<script>
angular.module('app', [
'ngStorage'
]).
controller('Ctrl', function (
$scope,
$localStorage
) {
$scope.$storage = $localStorage.$default({
array: []
});
$scope.Redirect1 = function () {
$scope.$storage.array = ['pineapple', 'pear', 'peach'];
window.location.href = 'http://localhost:61267/Page1.aspx?q=fruitsp';
};
$scope.Redirect2 = function () {
$scope.$storage.array = ['blackberry', 'banana', 'blueberry'];
window.location.href = 'http://localhost:61267/Page1.aspx?q=fruitsb';
};
});
</script>
</head>
<body ng-controller="Ctrl">
{{$storage|json}}
<br/>
<button ng-click="Redirect1();">Change Array</button><br/>
<button ng-click="Redirect2();">Change Array2</button>
</body>
</html>
If I remove the window.location rows, it work normally.
Am I doing something in the wrong order?
This problem has been answered here by #claireablani.
It seems that page reloading occurs before modification on localStorage has been applied.
You can use a fork of ngStorage library by #raynode (Github here, not available on bower) which add a $save() method to ensure modification had been applied.
$localStorage.$apply();
did the trick for me
thanks to this github issue comment
var setLocalStorage = function (token, uname)
{
$localStorage.token = token;
$localStorage.name = uname;
}
$timeout(setLocalStorage(token, userForm.uname), 500);
Module Used : ngStorage
OR
$localStorage.apply();
//Just after adding values in localstorage use this. No timeout required.
I also ran into this issue. I was trying to update localStorage in a service and it didn't seem to work. At least not inside a promise. Tried $localStorage.$apply() and $timeout there, but it didn't work. I had to move the code inside my controller to make this work.
$scope.$localStorage.myVar = 'test';
$scope.$localStorage.$apply();
$state.go('app.home');
I'm using the client side javascript SDK to connect to soundcloud.
now i want to block all latest tracks in a widget.
if i'm using SC.Widget('frameid') i'll get an error: Widget is not a function
so i have to implement the second script (widget api)
Whether I load the script directly from soundcloud or download it
I get the error: e is null
I tried to load the sdk before the widget api
and I also tried to load the api in document.ready but I still get the same error.
For selecting the iframe I tried to get it via ID and document.getElementbyId(..)
but that still did not work
Can someone tell me the solution?
what i'm doing wrong?
Looks like you dont reference the scripts in a proper way.
I hope this sketch points you in the right direction:
JS
(function() {
var iframe2 = document.querySelector('#widget2');
var widget2 = SC.Widget(iframe2);
var newurl = 'http://soundcloud.com/bnzlovesyou';
widget2.bind(SC.Widget.Events.READY, function() {
alert('ready');
widget2.bind(SC.Widget.Events.PLAY, function(eventData) {
alert('Playing..');
});
widget2.bind(SC.Widget.Events.PAUSE, function(eventData) {
alert('PAUSE..');
});
});
$( "#changetrack" ).click(function() {
widget2.load(newurl);
});
}());
HTML
<iframe id="widget2" width="100%" src = 'http://w.soundcloud.com/player/?url=http://soundcloud.com/barehouse_1'>
</iframe>
<div id="changetrack">Change Track / URL to my account ;)</div>
http://jsfiddle.net/iambnz/wpe2zmLh/
I'm trying to get this page: http://www.pqllana.com.ar/distribuidores/mapa with phantomjs.
I have special interest in getting the section that contains "ubicacion", "locales", "mapa".
As you can see in the page, it works with javascript, and I want to get those sections fully working, I mean that if I click on them they should work as expected.
What happens is that the google map is not loaded correctly, and some links doesn't work at all. I'm retrieving the page using this code:
var page = require('webpage').create();
page.open('http://www.pqllana.com.ar/distribuidores/mapa', function() {
var content = page.content;
var fs = require('fs');
try {
fs.write("hellohello.ctp", content, 'w');
} catch(e) {
console.log(e);
}
phantom.exit();
});
What I do is I pick that file and render into another page.
Looks like what I'm trying to achieve is not possible with PhantomJS (not suitable for this task), so I'm going to implement an iFrame, deactivate it's scrollbar and use dynamic size.
What is the best way to show the resulting css from files compiled with less.js in the client.
In other words, how can i fill a div with the resulting css?
I need to display the result on the page, any way to do this?
THanks!
update
As already pointed out in the comments by #ertrzyiks you should replace less.parse with less.render for Less v 2.x:
var lessCode = '';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
var options = {}
lessCode = xmlhttp.responseText;
less.render(lessCode, options, function (error, output) {
if(!error) {
document.getElementById('lesscode').innerHTML = output.css;
}
else document.getElementById('lesscode').innerHTML = '<span style="color:red">' + error + '</span>';
});
}
};
xmlhttp.open("GET","important.less",true);
xmlhttp.send();
see also: How to detect and print changing variables LESS
But since Less v2:
In the browser, less.pageLoadFinished will be a promise, resolved when
less has finished its initial processing. less.refresh and
less.modifyVars also return promises.
When you compile filename.less the compiled CSS code has been inject in a style tag with id less:filename, so to get the compilled CSS code you can also use:
less.pageLoadFinished.then(
function() {
console.log(document.getElementById('less:filename').innerHTML);
}
);
Notice that the last example also applies the compiled CSS code on the page.
--end update
I expected that running something such as the following was possible:
<link rel="stylesheet/less" type="text/css" href="important.less">
<script src="less-1.7.3.js" type="text/javascript"></script>
<script>
css = less.tree.toCSS();
console.log(css);
</script>
unfortunately this does not work, but you can use the following code to get what you want:
<script src="less-1.7.3.js" type="text/javascript"></script>
<script>
var lessCode = '';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
lessCode = xmlhttp.responseText;
new(less.Parser)().parse(lessCode, function (e, tree) {
document.getElementById('lesscode').innerHTML = tree.toCSS().replace(/\n/g,"<br>");
});
}
};
xmlhttp.open("GET","important.less",true);
xmlhttp.send();
</script>
With in the body section of your HTML:
<div id="lesscode"></div>
See also: Combining two .less files in one and How to open a local disk file with Javascript?
I just use Chrome's Inspect Element.
Right click on the element CSS you are looking for, Right click and choose Inspect element. On the right you will find the compiled CSS in Styles. Hope it helps
You have two options to do this, Internet Explorer or Firefox.
Let's start with Firefox. If you install the web developer toolbar, you get a menu option that's labelled CSS. Clicking on this gives you a few options and if you choose View CSS, you are taken to a new tab that shows you all of the styles for the page, grouped by their location and you should see a section with the CSS that has been generated by LESS and dynamically applied to the elements.
IE also has a Web Developer option and if you use the toolbar to inspect an element, you can then use the short cut 'Ctrl + T' which will bring up the page source with the computed styles.
The Firefox solution is better, as you can see exactly which styles have been provided by LESS whereas IE just lumps it all together.
There is a third option, and that is to compile the CSS server side!
I'm using jCaptcha (http://jcaptcha.sourceforge.net/) on our website. The problem is sometimes it's very difficult to read the image. So, we are planning to provide a button named 'REFRESH' next to the jcaptcha image and upon clicking REFRESH button, it has to refresh only the jcaptcha image not the entire page/portlet. How can we do that?
This is how I solved it using JQuery, it will replace the image. The alert() is just there to show off the new filename and can of course be removed. The code is using the jquery plugin in grails but shows what to do in jquery to refresh the image.
<div>
<jcaptcha:jpeg name="captchaImage"/>
Refresh captcha
<jq:jquery>
$("#refreshCaptcha").click(function() {
$("#captchaImage").fadeOut(500, function() {
var captchaURL = $("#captchaImage").attr("src");
captchaURL = captchaURL.replace(captchaURL.substring(captchaURL.indexOf("=")+1, captchaURL.length), Math.floor(Math.random()*9999999999));
alert(captchaURL);
$("#captchaImage").attr("src", captchaURL);
});
$("#captchaImage").fadeIn(300);
});
</jq:jquery>
</div>
Make this changes in JSP :
<img src="jcaptcha" id="captcha_image"/> Refresh
Add the Javascript function like :
function reloadCaptcha(){
var d = new Date();
$("#captcha_image").attr("src", "jcaptcha?"+d.getTime());
}
You would have to load the image and the refresh button into . Than you should be able to refresh just the iframe. But the I don't know how you are performing your validation so.
Set an id for the img tag and let it call a javascript function:
<img src="jcaptcha.jpg" id="captchaImage"/>
javascript function:
<script type="text/javascript">
function refresh()
{
var captchaImage=document.getElementById("captchaImage");
captchaImage.src="jcaptcha.jpg";
}
</script>
this works fine because i implemented this one in my project just create one button on clicking that button it will come to below menctiond block of code like that you do
<script type="text/javascript">
function refresh()
{
var image=document.getElementById("kaptchaImage");
image.src="<%=request.getContextPath()%>/kaptcha.jpg?"+Math.floor(Math.random()*100)
}
</script>