I get the above error in IE only.
the line that throws the error is apparently
element.setAttribute('data-view', viewId);
in viewEngine.js
createView: function(viewId) {
var that = this;
var requirePath = this.convertViewIdToRequirePath(viewId);
var existing = this.tryGetViewFromCache(requirePath);
if (existing) {
return system.defer(function(dfd) {
dfd.resolve(existing.cloneNode(true));
}).promise();
}
return system.defer(function(dfd) {
system.acquire(requirePath).then(function(markup) {
var element = that.processMarkup(markup);
element.setAttribute('data-view', viewId);
that.putViewInCache(requirePath, element);
dfd.resolve(element.cloneNode(true));
}).fail(function(err) {
that.createFallbackView(viewId, requirePath, err).then(function(element) {
element.setAttribute('data-view', viewId);
that.cache[requirePath] = element;
dfd.resolve(element.cloneNode(true));
});
});
}).promise();
},
edit:
I narrowed it down to the error happening between activate() and binding() in the lifecycle. Not sure if this is of any help, though.
edit2: upon further investigation i found that the processMarkup(markup) doesn't return a HtmlDivElement like it should and normally does for all other modules...
Looks like IE8 has issues with the setAttribute method.
To solve try the following:
Use this as your doctype
<!DOCTYPE html>
and then put this in the head of the document
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Resource Link: Replace setAttribute with IE compatible script
I found the mistake and it was not part of any javascript code.
the $.parseHTML() function in Durandals viewEngine.js only returns an object if the html markup supplied has syntactical correct HTML tags. I forgot to close one div at the very end of the view and that was the problem.
Related
I have a Vue component I'd like to print. When the user presses a print button, a function is called which opens the component in a new window to isolate the HTML, and get the formatting right.
async openPrintDetailsDialogue() {
const prtHtml = document.getElementById('printable').innerHTML;
let stylesHtml = '';
for (const node of [...document.querySelectorAll('link[rel="stylesheet"], style')]) {
stylesHtml += node.outerHTML;
}
var newWindow = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
newWindow.document.write(`<!DOCTYPE html>
<html>
<head>
${stylesHtml}
</head>
<body id="printme">
${prtHtml}
</body>
</html>`);
newWindow.document.close();
newWindow.focus();
...
I then try to print using $htmlToPaper.
...
await this.$htmlToPaper('printme');
newWindow.close();
}
However, the main window alerts Element to print #printme not found!.
I add the plugin VueHtmlToPaper in my mounted() function:
mounted() {
Vue.use(VueHtmlToPaper);
}
I've already tried passing my existing styles.css to the $htmlToPaper() call options, which changed nothing. I also have some styles in my vue file's <style scoped>, which couldn't be included in the options parameter either.
How can I get VueHtmlToPaper to "point" to newWindow?
By opening a new window you have a new separate webpage, where is no Vue Js instance. It does not work so and you will not make it work this way. You should use a Modal, change the current page or make a new page with Vue instance for printing.
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 got a lot of help regarding this issue earlier but the issue hasnt been completely resolved for me. I am stuck at another thing now. I am returning a response from my controller and receiving it in the Index.cshtml like this:
var rData = #Html.Raw(Json.Encode(Model.WarehouseResults));
Now I need to assign this data to slickgrid somewhat like this:
<script type="text/javascript">
var from = 0, to = from + rData.length;
//data.length = parseInt(resp.total);
for (var i = 0; i < rData.length; i++) {
data[from + i] = rData[i];
data[from + i].index = from + i;
}
onDataLoaded.notify({ from: from, to: to });
grid = new Slick.Grid("#myGrid", rData, columns, options);
etc etc...
</script>
Now, the problem is, I dont know where exactly to receive the data. As in, where do I put this line:
var rData = #Html.Raw(Json.Encode(Model.WarehouseResults));
If I put it above the tag (but inside the #Scripts section), I get an error saying rData is not defined. Then when I put it inside the tag, I get a syntax error saying: "IHtmlString HtmlHelper.Raw(String value) (+1 overloads) returns markup that is not HTML encoded".
Where exactly should this line go? Is there a standard format for a cshtml page, like which sections go where? If so, can someone provide a link or something for it?
Using your code in MVC 5:-
var rData = #Html.Raw(Json.Encode(Model.WarehouseResults));
I find that the semi-colon at the end of the line causes a syntax error.
A solution which I am currently using (my example is for JQuery autocomplete) which should also work for your example is as follows.
Create the javascript variable code completely within the HtmlHelper. This is placed within the view's #section Scripts.
#section Scripts {
<script type="text/javascript">
#Html.Raw("var existingPersons = " + Json.Encode(this.Model.ExistingPersons) + ";" )
#Html.Raw("var settlementInformation=" + Json.Encode(this.Model.SettlementInformation) + ";")
$(function () {
$("#personName").autocomplete({
source: existingPersons
});
$("#settlementInformation").autocomplete({
source: settlementInformation
});
});
</script>
}
At the client side this appears in the <head> element as expected
<script type="text/javascript">
var existingPersons = ["Person 1","Person 2"];
var settlementInformation=["Settlement Type 1"];
$(function () {
$("#personName").autocomplete({
source: existingPersons
});
$("#settlementInformation").autocomplete({
source: settlementInformation
});
});
</script>
I've not tried this in other versions of MVC
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!
So I am using the Disqus Plugin v2.65. I am trying to edit the dsq-global-toolbar at the top of the Disqus comments.
The following tags are in disqus-comment-system/comments.php
<div id="disqus_thread">
<?php if (!get_option('disqus_disable_ssr')): ?>
<?php
// if (is_file(TEMPLATEPATH . '/comments.php')) {
// include(TEMPLATEPATH . '/comments.php');
// }
?>
<div id="dsq-content">
<ul id="dsq-comments">
however on my site there are mulitple tags (the disqus-global-toolbar div) that seem to be dynamically appended between the dsq-content div and the dsq-comments ul. Where is this coming from and where can I edit this? Any help would be greatly appreciated.
I think it is coming somewhere around line 3140 in disqus.js
You can use this code to wait for the document to finish loading completely then do your changes (client side):
$(document).ready(function() {
window.disqus_no_style = true;
$.getScript('http://sitename.disqus.com/embed.js', function() {
var loader = setInterval(function() {
if($('#disqus_thread').html().length) {
clearInterval(loader);
disqusReady();
}
}, 1000);
});
function disqusReady() {
//whatever you can imagine
}
});
window.diqus_no_style can be deleted as well as the $.getsript wrapper.
Is that what you are looking for?
Something like this (use livequery instead of live):
function disqusReady() {
$('#dsq-global-toolbar').livequery(function() {
//$(this) will refer to object
});
}
Not sure what plug-in you're talking about, but if it's WordPress, I've done the same thing. Modify wp-content/plug-ins/disqus-comment-system/comments.php by adding an event handler for 'afterRender' (fires when the content ready in the DOM, but still hidden), eg. around line 70:
config.callbacks.afterRender.push(myFunctionToModifyDisqusOutput);