I have a module/widget that deliberatly calls stopParser: true to prevent the dojo parser from parsing its content. This works fine, as long as the widget is directly in an HTML page. As soon as I use the widget inside the template of another widget, stopParserdoes not work anymore. I recon it's a bug, since the same problem exists with dijit/layout/ContentPane and the parserOnLoadproperty. Anyone has an explanation or a tip how to solve this?
BR,
Daniel
Related
I would like to use Scratchblocks (a tool for rendering visual Scratch code blocks from a text listing, on GitHub) on my Squarespace website. The problem I am getting is that the scratchblocks are never rendered on the first load - but only after a refresh.
This is in the header (set in the header for that particular blog):
<script src="https://scratchblocks.github.io/js/scratchblocks-v3.1-min.js""></script>
Then I think I need to call this function at the end of the page - I've put it in the footer:
scratchblocks.renderMatching('pre.blocks');
NOTE: When I view the source I sort of see this JavaScript twice at the end of the page. Not sure what is happening there.
Here's an example of it on my website, where it renders the scratchblocks only after a refresh. [UPDATE - following the fix provided below, this now renders first time, every time as far as I can tell.]
[http://www.glennbroadway.com/coding-zone/2017/4/6/simple-collisions-in-scratch]2
Here's an example of someone else using it and it working properly. I've inspected the source and I can't work out how they are doing it.
https://codeclubprojects.org/en-GB/scratch/memory/
I've also tried all the different methods listed elsewhere on stackoverflow for getting javascript to load only after the HTML has finished. I can't get any of them to work - but I think the problem is something to do with Squarespace, I just don't have the knowledge to work out what.
Any help would be greatly appreciated.
In Squarespace, when your custom Javascript only works after a page refresh, it most likely has to do with Squarespace's AJAX loading:
Occasionally, Ajax may conflict with embedded custom code or anchor
links. Ajax can also interfere with site analytics, logging hits on
the first page only.
You may be able to disable AJAX for your template. Or, see the other approaches outlined here: https://stackoverflow.com/a/42604055/5338581 including:
window.addEventListener("mercury:load", function(){
// do stuff
});
In addition, I would generally recommend placing custom code in the "Footer" code injection area unless you have a specific reason to do otherwise.
I found jquery mobile is not rendering correctly when the element is generated by knockoutjs (or probably not rendering correctly when element is generated dynamically). See the demo at http://jsfiddle.net/wRRZk/1/
updates:
One solution is to load jquery-mobile js file after KO binding finished as shown in http://jsfiddle.net/wRRZk/3/, however this doesn't solve the problem that jquerymobile render fail when changing KO model dynamically, as shown in http://jsfiddle.net/wRRZk/4/
I think you'll need to tell jQueryMobile to create those elements into the jQM enhanced version using the API. Check here :: http://jquerymobile.com/demos/1.1.1/docs/pages/page-scripting.html and look halfway down for "Enhancing new markup" and the section just below.
As for the create/refresh ... might need to be somewhat judicious in know when and where you're adding new stuff, and whether a create or refresh is needed.
I've done a new version of the jsFiddle here :: http://jsfiddle.net/wRRZk/5/.
I'm also removing from the model afterwards, which does seem to remove the links too, BUT, I think that may also be because the jQM enhancement is keeping the same anchor, thus the reference knockout as is still valid.
Not too sure how well that will work for the other enhancements done by jQM.
This is a bit of an odd issue I'm having. I've been using John Resig' micro-templates for a meeting minutes application, and it seemed to work well, but lately I've been having an issue.
Basically the application fetches some JSON from an ajax call, and then uses the templating engine to generate a table with various actions like so:
This works fine, its a little slow in IE (javascript rendering) but it works. However randomly I'll get a stuff up in the display:
notice the gap there, its pushed it out wide, also, its made the rest of the rows squish up. I've tried every CSS/HTML trick I can think of to try and get IE to render it properly, but I'm out of ideas (any suggestions would be great!) . I'm using JQuery Sortable so you can drag each of those rows around, I noticed that when you drag it and place it again, it displays correctly. It's as if it thinks theres an extra TD there, when there isn't.
So I opened the IE developer tools and copied the inner HTML of the HTML element. Pasted this into a HTML file and put it on the server, turned off the JS so it wouldn't reload the elements and ran the page. It displays perfectly, just as in my first image.
So I'm confused as to why IE will render the page fine if the HTML is present from the start, but the templating engine causes odd stuff ups.
I'll probably look at rendering that part of the HTML on the server, and only use the templating where I need to. But has anyone come across this sort of issue before? is there any trick I can do to make it render it as it should?
we had similar problem in our company and our designer solved it. Solution was in concatenating tags one after another without spaces and/or without new line. Code is not looking great after that but still solves problem.
Thanks,
Nikola
Sorry for the title.....bit difficult to word what I really want to ask.
Some websites allow a user to copy and paste some widget for use with their own site. For example, getsatisfaction. Yes, those feedback icons that I hope most of you see in various places.
If you have a look at twitterfeed, on the left there will be a feedback icon, once clicked on a nice modal window comes up. the modal windows content is in an iframe to an external source.
I really like this, but my question is:
I could do the same by using some jQuery library for the modal window and then linking the modal content to a site on my page, but how do I stop this from becoming obtrusive to a sites other javascript files?
For example, let's say i'm using my js code and the relevant jquery code, and i've minified it into one file. The user adds my widget to their site. If they're using jQuery, how do I make sure my code isn't going to interfere with theirs?
Would the best way be to use a modal window library which is not very popular?
Thanks very much. Hope that makes sense!
EDIT: I could write my own modal window functionality code, but i'd much rather use a library which already does it.
You can dynamically load jQuery only if it is needed.
First check for the existance of the jQuery object. If not add the script tag.
There are some challenges to this, as there is no onload event when adding a script tag to a page, that works consistently accross browsers, so you will have to poll to see if it fully loaded, and only then run your code.
There is an article on how to do this:
http://www.squidoo.com/load-jQuery-dynamically
You may still have an issue if the user has a differnt version of the jquery library though, although you can probably get around this with some additional checks.
jQuery UI has very nice dialog components that should fit your purpose. Inside them you can instantiate an iframe. see:
http://elijahmanor.com/demos/jqueryuidialogiframe/index.html
If I understand all this correctly, the iframe content is a separate page, so there is no case where your javascript code in that page would interfere with the javascript of the calling page, but maybe I haven't understood that part correctly?
EDIT:
I think I understand what you meant, in that you want to package up the code that you will write that opens the modal window with the iframe. SO you want to make sure that this code does not interfere with existing jQuery code that the user is using.
I think this is a good use case for a jQuery plugin. This way the user of the page can use your function like any jQuery function, so less likelyhood of collisions
I've got a problem with CKEditor. Especially the br- and img-Tags are transformed to not be valid.
In the source-view I see and but when I inspect the rte-source the slashes are gone as well as when submitting the form.
Can someone tell me where I can disable this or enable XHTML-conformity? The embedding page is XHTML.
Thank to any hints, ideas or solutions.
To solve this problem describe above:
This wasn't a problem of CKEditor. I did use jQuery's html-method that relies on the DOM innerHTML property to get CKEditors contents. This property seems to be unable to handle XHTML at all (tested in FF and Chrome).
You need to replace all slashes manually.