While using sammy.js library of versions 0.7.4 (also 0.7.1) it was found that if some error happens during execution of get handler function, nothing is printed to console.
For example in the following code snippet nothing will be printed to console though no function with name notExistingFunction exists:
<html>
<head>
...
<script src="/path/to/jquery-1.5.2.min.js"></script>
<script src="/path/to/sammy-0.7.4.min.js"></script>
...
</head>
<body>
<script>
$(document).ready(function() {
var sammy = Sammy(function() {
this.get('#someAnchor', function() {
// this function doesn't exist
notExistingFunction();
});
});
sammy.run();
// this should lead to execution of above handler
window.location.hash = '#someAnchor';
});
</script>
...
</body>
</html>
This really complicates troubleshooting of pages, did someone experienced this as well? Is this expected behavior or a bug? Are there any workarounds for this?
Thanks a lot in advance
Turned out to be easier than I thought - after inspecting sources of sammy.js it was found that somewhy raise_errors flag is set to false by default which manages error reporting.
So, modifying part above code to:
<html>
<head>...</head>
<body>
<script>
...
sammy.raise_errors = true;
sammy.run();
...
</script>
</body>
</html>
starts showing nice errors.
Related
I have a js code that uses jQuery.MD5 library. It works perfectly on my server:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://example.com/static/js/jquery.md5.js"></script>
</head>
<body>
<script>
// my code goes here (declaring variables and functions)
var code = $.md5('mystring');
// and a little more code
</script>
</body>
But then I upload it to a web application (which I cannot control), that makes it look like this and puts it into an iframe:
<head>
<script>
// some extra variables are declared here
// double-checked that nothing here can break my code
</script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://example.com/static/js/jquery.md5.js"></script>
<script>
// some code
var code = $.md5('mystring');
// some code
</script>
</body>
And this code starts giving me the $.md5 is not a function error. Strange thing. Tried clearing the cache, putting jquery.md5.js code directly into mine, nothing works.
Note that all the code works on my machine, so there must be no problem with my JS.
Update: the problematic code behavior seems to be unpredictable, meaning that sometimes it works fine with no changes.
What can be wrong?
Hm... That's a little embarrassing, but the problem was in jQuery. The one I included in my iframe conflicted with the one included in the page. Somehow this lead to "hiding" my $.md5 function after its code's end.
And yeah, I know, it was quite obvious that jQuery could cause problems.
If you want to use jQuery md5 function you should have import jquery.md5.js file in your project.
Steps-
Download jquery.md5.js file from https://github.com/placemarker/jQuery-MD5
Copy this file into your source folder. (ex: assert/theme/js)
Import that js file to your project.
(ex: <script src="<?= base_url(); ?>/public/assert/theme/js/jquery.md5.js"></script>
)
That's it! You are done!
I am playing around with an html template and I have noticed that the developer doesn't use RequireJS or anything else to require and call different functions from other node files. Instead, they used this in the html file to initialise and call the function:
<script src="../../assets.js/test.js"></script>
<script type="text/javascript">
$(document).ready(function(){
test.initSomeFunction();
});
</script>
And I've got the below code in assets/js/test.js which defines initSomeFunction in javascript:
test = {
initSomeFunction: function() {
//Some code
}
initAnotherFunction: function() {
//More code
}
}
(It would be helpful if someone can tell me what this method is called so that I can research it more.)
My problem arises when I try to do the same thing in my node app in the home directory /main.js. The node app works fine on its own but when I add something like this:
test2 = {
initMyFunction: function() {
console.log("I finally decided to work! Good luck...");
}
}
and modify my html file like this:
<script src="../../main.js"></script>
<script type="text/javascript">
$(document).ready(function(){
test.initSomeFunction();
test2.initMyFunction();
});
</script>
then it won't work. Can someone please point me to the right direction as I don't even know what to Google. I am trying to avoid using RequireJS or anything else as I am a total beginner and the method that the developer used sounds so simple and tempting.
I wish this answer will help you:
I am using express, so I do this to solved your problem!
main.js file's position:
modify app.js add:
app.use(express.static(path.join(__dirname, '/')));
Then, in the view file:
<html>
<head>
<script src="public/javascripts/jquery-1.10.2.min.js"> </script>
<script src="main.js"></script>
</head>
<body>
<script>
$(function () {
//test.initSomeFunction();
test2.initMyFunction();
})
</script>
</body>
</html>
Open the chrome Developer Tools. You will see the result.
I'm using PhantomJS to setup CI for jasmine tests. I'm facing the problem with including SystemJS in my html page. I removed everything from it, just left javascript and still facing the same error:
ReferenceError: Can't find variable: System
Here is the example of html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="lib/systemjs/dist/system.src.js"> </script>
<script>
System.config({
baseURL: './lib'
});
</script>
</body>
</html>
I ran it in console like that: phantomjs test.js http://localhost:8080.
test.js contains following code:
var page = require('webpage').create();
page.open(system.args[1], function(status)
{
phantom.exit(0);
});
It looks like it doesn't see system.src.js. I tried to put there absolute path - but still the same error. Also tried with page.injectJs - no good either.
After some time I found an answer and I want to share it, maybe someone will find it useful. I logged page.outerHTML and saw that instead of script with system.src.js I've got additional script with system-polyfills.js. It looked like that:
<script src="lib/systemjs/dist/system.src.js"></script>
<script type="text/javascript" src="http://127.0.0.1:8080/lib/systemjs/dist/system-polyfills.js">
So I've just added missing system-polyfills.js to the following folder and it fixed the error. Although I still have no idea where it came from.
I know this topic has been covered many times here but no matter which approach I take I either get a error such as "Unable to get property 'setContent' of undefined or null reference" or the line executes but nothing happens.
Here's what I know.
tinymce initializes and is a valid object.
The html variable has the propper HTML which it get from a parent window.
jQuery is loaded and functional.
In addition to the code below I have also tried.
tinyMCE.activeEditor.setContent(html);
tinymce.editors[0].setContent(html);
$('textarea#XRMeditor').val(html); * Before initialization
I have tried all methods before and after tinymce intializes (just in case).
<!DOCTYPE html>
<html>
<head>
<script src="sage_jquery.min.js" type="text/javascript"></script>
<script src="tinymce_/tinymce.min.js" type="text/javascript"></script>
<script>
var html = window.parent.document.getElementById("descriptionIFrame").contentDocument.getElementsByTagName('body')[0].innerHTML;
debugger;
//$('textarea#XRMeditor').val(html);
tinymce.init({
selector: 'textarea#XRMeditor'
});
tinymce.get('XRMeditor').setContent(html);
</script>
</head>
<body>
<textarea id="XRMeditor">Easy (and free!) You should check out our premium features.</textarea>
</body>
</html>
I suspect this issue is that you are trying to talk to TinyMCE before its initialized on the page.
Your get() call is in the head of your page and I would doubt that when the browser processes your script that TinyMCE has initialized. You can use an "init" handler to delay when this call happens:
tinyMCE.init({
//your regular init parameters here...
setup: function(editor) {
editor.on('init', function() {
//load your content here!
tinymce.activeEditor.setContent(html);
//or
tinymce.editors[0].setContent(html);
});
}
});
I am using jQuery a lot, but sometimes I get stuck because my browser cannot see the jQuery library, or maybe loads the library after running the my JavaScript code.
Pseudo-code to explain my question:
<html>
<head>
I always load CSS here
I always load jquery here
</head>
<body>
<p class="link-style3"><span id="my_tag"><span>Bize Hemen Yazın</span></span></p>
<script>
$(function() {
$('#my_tag').click(function(e) {
alert('tesrt');
});
});
</script>
</body>
</html>
I always put my stuff in the order like below, but this doesn't work now. When I click the <span id="my_tag">, it doesn't do anything, and doesn't return any error.
what should I do?
Here is the entire code jsfiddle
Try to avoid some syntax errors like(suggestable only)
<script type="text/javascript">
$(function() {
$('#my_tag').click(function() {
alert('tesrt');
});
})
</script>
and put your code at the top after you load the js files
A few things you can do:
inspect your document (network pane in devtools) to see if everything
is loading correctly
Move your scripts to the bottom of the page
use $(document).ready(function(){ ... });