CasperJS doesn't execute javascript of page - javascript

So i just want to open a webpage , but a big part of it are scripts read by the browser...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>MyAccount</title>
<link rel="stylesheet" href="/vendor.css" />
<link rel="stylesheet" href="/app.css" />
</head>
<body>
<div id="container">
// Here is the rest generated by the script. On chrome i can see it easily (inspect element)
</div>
<script type="text/javascript">
window.myAccountUrl = "http://urlsample";
</script>
<script type="text/javascript" src="/vendor.js"></script>
<script type="text/javascript" src="/app.js"></script>
<script type="text/javascript" src="/init.js"></script>
</body>
</html>
but with casper nothing appear in it. I use this settings:
pageSettings: {
loadImages: true,
loadPlugins: true,
javascriptEnabled: true,
localToRemoteUrlAccessEnabled: true,
XSSAuditingEnabled: true
}
And i render the html like that:
var js = this.evaluate(function() {
return document;
});
this.echo(js.all[0].outerHTML);
If anyone can help me, he's welcome. :)

Related

How to add close bracket and close tag for react code mirror

I'm using react-codemirror2 in a react project. I want to add features like auto bracket close and auto tag close. There is a npm package called #codemirror/closebrackets but I can't find any documentation to do that.
<ControlledEditor
onBeforeChange={handleChange}
value={value}
className="code-mirror-wrapper"
options={{
linerWrapping: true,
lint: true,
mode: language,
theme: 'material',
lineNumbers: true
}}
/>
This is my react component.
Specify if there is a way to do without additional packages like #codemirror/closebrackets.

You can add autoCloseBrackets: true to your options and it'll work fine. From the doc:
Defines an option autoCloseBrackets that will auto-close brackets and
quotes when typed.
import 'codemirror/addon/edit/closebrackets'
// other parts of the code//
<ControlledEditor
onBeforeChange={handleChange}
value={value}
className="code-mirror-wrapper"
options={{
linerWrapping: true,
lint: true,
mode: language,
theme: 'material',
lineNumbers: true,
autoCloseBrackets: true,
}}
/>

This really works:
<!doctype html>
<html>
<head>
<title>CodeMirror</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
<link rel=stylesheet href="https://CodeMirror.net/doc/docs.css">
<script src="https://CodeMirror.net/addon/hint/anyword-hint.js" id="anyword"></script>
<link rel="stylesheet" href="https://CodeMirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/hint/show-hint.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/dialog/dialog.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/search/matchesonscrollbar.css">
<script src="https://CodeMirror.net/lib/codemirror.js"></script>
<script src="https://CodeMirror.net/addon/edit/closetag.js"></script>
<script src="https://CodeMirror.net/addon/hint/show-hint.js"></script>
<script src="https://CodeMirror.net/addon/hint/sql-hint.js"></script>
<script src="https://CodeMirror.net/addon/mode/loadmode.js"></script>
<script src="https://CodeMirror.net/mode/meta.js"></script>
<script src="https://CodeMirror.net/addon/hint/xml-hint.js"></script>
<script src="https://CodeMirror.net/addon/hint/html-hint.js"></script>
<script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror.net/addon/hint/javascript-hint.js"></script>
<script src="https://CodeMirror.net/mode/xml/xml.js"></script>
<script src="https://CodeMirror.net/mode/javascript/javascript.js"></script>
<script src="https://CodeMirror.net/mode/css/css.js"></script>
<script src="https://CodeMirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://CodeMirror.net/addon/dialog/dialog.js"></script>
<script src="https://CodeMirror.net/addon/search/searchcursor.js"></script>
<script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror.net/addon/search/search.js"></script>
<script src="https://CodeMirror.net/addon/scroll/annotatescrollbar.js"></script>
<script src="https://CodeMirror.net/addon/search/matchesonscrollbar.js"></script>
</head>
<body>
<div id="editor"></div>
<button onclick="closeBrackets()">Close Brackets</button>
<script>
function closeBrackets() {
myCodeMirror.execCommand("closeBrackets");
}
</script>
<script>
var myCodeMirror = CodeMirror(
document.getElementById('editor'), {
lineNumbers: true,
autoCloseBrackets: true,
});
</script>
</body>
</html>

Why Swup.js does not handle relative links?

I'm testing Swup.js
As far as I see it doesn't work with relative links. Like this;
Go page
Screenshoot for link in DOM
For this you need to enter the URL with the full path. But this may be undesirable. Relativity is used quite often, especially in designs with HTML content.
It works when I do as follows.
Go page
This was not the case with Turbolinks. What is the reason of this? Do I need to make any adjustments? Thanks.
My index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SWUP INDEX</title>
<link rel="stylesheet" href="">
<script src="swup.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="1.css">
<script src="1.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
<div id="swup">
<h1>INDEX</h1>
Go Page
</div>
<script type="text/javascript">
var options = {
LINK_SELECTOR: 'a',
FORM_SELECTOR: 'form[data-swup-form]',
animationSelector: '[class^="a-transition-"]',
cache: true,
pageClassPrefix: '',
scroll: true,
debugMode: true,
preload: true,
support: true,
disableIE: false,
skipPopStateHandling: function(event){
if (event.state && event.state.source == "swup") {
return false;
}
return true;
},
}
var swup = new Swup(options);
</script>
</body>
</html>
My page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SWUP PAGE</title>
<link rel="stylesheet" href="">
<script src="swup.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="2.css">
<script src="2.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
<div id="swup">
<h1>PAGE</h1>
Go Index
</div>
<script type="text/javascript">
var options = {
LINK_SELECTOR: 'a',
FORM_SELECTOR: 'form[data-swup-form]',
animationSelector: '[class^="a-transition-"]',
cache: true,
pageClassPrefix: '',
scroll: true,
debugMode: true,
preload: true,
support: true,
disableIE: false,
skipPopStateHandling: function(event){
if (event.state && event.state.source == "swup") {
return false;
}
return true;
},
}
var swup = new Swup(options);
</script>
</body>
</html>

Try to insert that instead of (LINK_SELECTOR: 'a')
linkSelector: 'a[href^="' + window.location.origin +'"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup])',

jqxDropDownList Listing is seperately opened at bottom of the page

If I include all the lib jqwidgets/jqx-all.js
it works well, but if I use only the necessary files given in their example : https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdropdownlist/index.htm#demos/jqxdropdownlist/defaultfunctionality.htm
then the listing appears at the end of the html file and not just under the widget.
I tried to include all the necessary files, didn't succeed.
Any idea?
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
</head>
<body>
<div id='content'>
<script type="text/javascript">
$(document).ready(function () {
var source = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Café Bombón",
"Café au lait"
];
// Create a jqxDropDownList
$("#jqxWidget").jqxDropDownList({ source: source, placeHolder: "Select Item", width: 250, height: 30});
});
</script>
<br/>
<br/>
<div id='jqxWidget'>
</div>
<hr>
</div>

I figured out the problem
it was the old version that I used : jqwidgets-ver8.0.0.zip
jqwidgets-ver8.3.2.zip solved the issue
So always update to latest version...

How can I hyperlink the last letter in a Quill editor?

I have the following code (also on jfiddle https://jsfiddle.net/96ye4hL4/1/ )
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<link href="https://cdn.quilljs.com/1.2.0/quill.snow.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.quilljs.com/1.2.0/quill.js"></script>
</head>
<body>
<div id="editor0"></div>
<script type="text/javascript">
const quill = new Quill("#editor0", {
modules: { toolbar: true },
theme: "snow"
});
quill.setContents({"ops":[{"insert":"Index"},{"attributes":{"header":1},"insert":"\n"},{"attributes":{"link":"http://google.com"},"insert":"FooM"},{"insert":"\n"},{"insert":"\n"}]},)
</script>
</body>
</html>
When I click on the right most character in a hyperlink (the M in FooM), the hyperlink window does not pop up.
How can I pop up the hyperlink window upon clicking the last letter in FooM?

This is an open issue with the Quill library.
https://github.com/quilljs/quill/issues/1931
Notice your code snippet will not run, but standard HREF does:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<link href="https://cdn.quilljs.com/1.2.0/quill.snow.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.quilljs.com/1.2.0/quill.js"></script>
</head>
<body>
<div id="editor0"></div>
<script type="text/javascript">
const quill = new Quill("#editor0", {
modules: { toolbar: true },
theme: "snow"
});
quill.setContents({"ops":[{"insert":"Index"},{"attributes":{"header":1},"insert":"\n"},{"attributes":{"link":"http://google.com"},"insert":"FooM"},{"insert":"\n"},{"insert":"\n"}]},)
</script>
FooM
</body>
</html>

Jquery countdownTimer Plugin not working

I downloaded this jquery plugin: http://harshen.github.io/jquery-countdownTimer/
specifically to use the Reverse countdown to zero from time set to only minutes timer.
I am pretty sure I followed the instructions correctly but the plugin does not work. I have never used jQuery or plugins before, so I'm not sure if I am missing something or just doing something completely wrong (or both).
My Javascript test alert does run.
I will attach my code for you all to look at. Not sure if it has to do with my file paths, but I've attached an image of that as well. Please tell me what could be causing the problem and how to fix. Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="timer/LIB/jquery-2.0.3.js"></script>
<script type="text/javascript" src="timer/jquery.countdownTimer.js"></script>
<link rel="stylesheet" type="text/css" href="timer/CSS/jquery.countdownTimer.css"/>
<script type="text/javascript">
alert("working");
</script>
</head>
<body>
<script type="text/javascript">
alert("tester");
</script>
<div id="main"><span id="m_timer"></span></div>
<script type="text/javascript">
$(function()
{
$("#m_timer").countdowntimer({
minutes : 2‚
size : "lg"
});
})
</script>
</body>
</html>
And here is a picture of my project folder, containing the files:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="timer/LIB/jquery-2.0.3.js"></script>
<script type="text/javascript" src="timer/jquery.countdownTimer.js"></script>
<link rel="stylesheet" type="text/css" href="timer/CSS/jquery.countdownTimer.css"/>
<script type="text/javascript">
alert("working");
</script>
</head>
<body>
<script type="text/javascript">
alert("tester");
</script>
<div id="main"><span id="m_timer"></span></div>
<script type="text/javascript">
$(function()
{
$("#m_timer").countdowntimer({
minutes : 2‚
size : "lg"
});
})
</script>
</body>
</html>

Categories