How to get from `pulp init` to running code in browser? - purescript

I have success on getting pulp's helloworld purescript running via nodejs with following command sequences:
$ pulp init
...
$ pulp run
* Building project in /data/works/beta_projects/js_games/processing/hello-ps
* Build successful.
Hello sailor!
Next, I want to make the Hello sailor! message in the browser in the body text by injecting it in the div inner text
<html>
<body>
<div id="output" />
</body>
</html>
What are steps I need to do?
I try pulp server command and got the blank page at http://localhost:1337/ without the need to provide index.html and there is no any message in console.
There is pulp browserify command that prints out the javascript which I expect to be included in the index.html's script tag but I don't know where I need to put index.html file.

I'm just starting out with PureScript, so there is definitely a better answer, but this works.
Create the index.html in the root folder and add:
<!doctype html>
<html>
<body>
<script src="/jquery-3.2.1.min.js"></script>
<script src="/app.js"></script>
<div id="output"></div>
</body>
</html>
To actually modify the DOM this example uses https://github.com/purescript-contrib/purescript-jquery, so you have to make sure that you load jQuery before the app.js is being loaded.
purescript-jquery seems to be the easiest option to work with the DOM. Other options are
https://github.com/purescript-web/purescript-dom (very low level)
https://github.com/aktowns/purescript-simple-dom (couldn't get it to work with PureScript 0.11.6)
The Main.purs looks like this:
module Main where
import Control.Monad.Eff (Eff)
import Control.Monad.Eff.Console (CONSOLE)
import Control.Monad.Eff.JQuery (append, create, body, ready, setText, find)
import DOM (DOM)
import Prelude hiding (append)
main :: forall eff. Eff ( dom :: DOM
, console :: CONSOLE
| eff
) Unit
main =
ready $ do
-- Get the document body
body <- body
-- Find the div
div <- find "#output" body
-- Create a paragraph to display a greeting
greeting <- create "<p>"
append greeting div
setText "Hello Sailor!" greeting
Run pulp browserify and then pulp server and you should see the greeting!

Related

eclipse stops responding while running a .jsp file

i have created a basic dynamic web project in eclipse.
my jsp file contains following code
<html>
<head>
<title>Insert title here</title>
</head>
<body>
this is the sum of 5 and 3 <%com.testing.SumOfNumbers.addTwoNumbers(3,5); %>
</body>
</html>
and in package "com.testing" i have created SumOfNumbers class with addTwoNumbers method.
package com.testing;
public class SumOfNumbers {
public static int addTwoNumbers(int a,int b)
{
return a+b;
}
}
i have downloaded tomcat v10.0 server.
I tried several times but same result. I don't know where the problem is ,is it in tomcat server or eclipse bug?
thanks in advance.
It's unlikely to be your code, although you're using a scriptlet instead of an expression, so the sum won't be in the output like you seem to expect.
https://wiki.eclipse.org/How_to_report_a_deadlock includes directions on how to get a stack dump to see what's going on.

How to serve multiple files in Flask in one request, to be utilized in a template? [duplicate]

This question already has answers here:
How to serve static files in Flask
(24 answers)
Why use Flask's url_for?
(1 answer)
Closed 2 years ago.
I am attempting to redirect a URL in Flask. e.g : localhost/x/e/f/i.mp4. Where e and f are integer inputs (There isn't an actual file) to a another URL, which actually has the file name i.mp4. e.g localhost/static/i.mp4.
This URL is part of a request in a template. But with the template, it will request i.mp4, which is localhost/e/f/i.mp4. I have tried using add_url_rule with the endpoint being redirect_to=send_from_directory(something), send_from_directory after the template, send_from_directory before the template, but that only sends the mp4.
The current snippet for Flask is this.
#app.route('/watch/<int:s>/<int:ep>/', methods=['GET'])
def vid(s,ep):
return app.add_url_rule(f'/watch/{s}/{ep}/S{s}-{ep}sub.m4v', redirect_to=send_from_directory('static', f'S{s}-{ep}sub.m4v'))
def sub(s, ep):
return app.add_url_rule(f'/watch/{s}/{ep}/S{s}-{ep}.vtt', redirect_to=send_from_directory('static',f'S{s}-{ep}.vtt'))
def watch(s, ep):
return render_template('watch.html', s=s, ep=ep)
The template is this:
<!DOCTYPE html>
<html lang="en" style="height:100%;">
<head>
<title>{{s}}-{{ep}}</title>
</head>
<body style="margin:0; text-align: center; height:100%;">
<video autoplay=" "controls="" style="margin: 0 auto; height:100vh;">
<source src="S{{s}}-{{ep}}sub.m4v" type="video/mp4">
<track label="English" kind="subtitles" srclang="en" src="S{{s}}-{{ep}}.vtt" default>
</video>
</body>
</html>
I think you're over-complicating things. Also the first version of your question was clearer, so based on that...
It's not possible to decorate several functions with one app.route decorator like you were trying. The way to put this together is probably to have your watch route render the template, then have a vid and sub route, which the browser hits when the watch page loads:
#app.route('/vid/<int:s>/<int:ep>')
def vid(s,ep):
return send_from_directory('static', f'S{s}-{ep}sub.m4v')
#app.route('/sub/<int:s>/<int:ep>')
def sub(s, ep):
return send_from_directory('static',f'S{s}-{ep}.vtt')
#app.route('/watch/<int:s>/<int:ep>', methods=['GET'])
def watch(s, ep):
return render_template('watch.html', s=s, ep=ep)
Then in the template you can use the url_for function to render the URLs for the vid and sub routes:
<source src="{{ url_for('vid', s=s, ep=ep) }}" type="video/mp4">
<track label="English" kind="subtitles" srclang="en" src="{{ url_for('vid', s=s, ep=ep)}}" default>
While the above shows how to pass these variables around in Flask, it's probably worth mentioning that this isn't really the best way to serve video content. It will probably do if you want to view your own media collection through a browser.

How to dynamically add a script to the page using watir-webdriver

I have some *.js script that I want to execute using watir-webdriver during my test runs. So the question is there any way to upload the script to the page using watir-webdriver?
You could use the execute_script method to add a script element with the src attribute as your js file. The method call would look like:
browser.execute_script(
"var the_script = document.createElement('script');
the_script.setAttribute('src','your_script.js');
document.head.appendChild(the_script);"
)
To see that it works, let us assume you have the page:
<html>
<body>
<input type="text" id="field" value="100">
</body>
</html>
If you try to execute jQuery on the page (the '$' in the script), an exception occurs because the page does not know what jQuery is:
field = browser.text_field
p browser.execute_script('return $(arguments[0]).val();', field)
#=> $ is not defined (Selenium::WebDriver::Error::JavascriptError)
If you add the jQuery script file (http://code.jquery.com/jquery-1.10.2.js), via execute_script, you will now be able to use jQuery:
browser.execute_script(
"var the_script = document.createElement('script');
the_script.setAttribute('src','http://code.jquery.com/jquery-1.10.2.js');
document.head.appendChild(the_script);"
)
field = browser.text_field
p browser.execute_script('return $(arguments[0]).val();', field)
#=> "100"

coffeescript line number in error.stack?

Following coffee-script code:
try
any_error_here
catch err
alert err.stack
Gives following stack trace:
ReferenceError: any_error_here is not defined
at eval (coffeescript:5:3)
How to get coffeescript line number for this stack (line 2)?
Here is simple html with same question:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Coffee-script stack trace problems</title>
<script type="text/javascript" language="javascript" src="http://coffeescript.org/extras/coffee-script.js"></script>
</head>
<body id="dt_example">
<script type="text/coffeescript" language="javascript">
try
any_error_here
catch err
alert err.message+'\n'+err.stack + '\n\nWhat is coffeescript line number for this stack?'
</script>
</body>
</html>
This sounds like a problem for source maps.
When you compile your CoffeeScript, you can generate a source map by specifying the -m option:
coffee -c -m so.coffee
In browsers that support source maps (e.g. Chrome), the CoffeeScript file will appear in the Sources tab, and errors and log statements will refer to the corresponding line in the CoffeeScript file.
For more information, check out the HTML5 tutorial on source maps, and a short article about using source maps with CoffeeScript.
If you have a source map, you can also use it to parse a stack trace string and refer back to the original uncompiled file as outlined in this question.

dhtmlx combo, autocomplete mode, js

I am having problem with autocomplete mode with dhtmlx combo.
The includes files are as follows:
// Images
<script>
window.dhx_globalImgPath="combo/dhtmlxCombo/codebase/imgs/";
</script>
// CSS
<link rel="stylesheet" type="text/css" href="combo/dhtmlxCombo/codebase/dhtmlxcombo.css">
// Required JS files
<script src="combo/dhtmlxCombo/codebase/dhtmlxcommon.js"></script>
<script src="combo/dhtmlxCombo/codebase/dhtmlxcombo.js"></script>
<script src="combo/dhtmlxCombo/codebase/ext/dhtmlxcombo_extra.js"></script>
I have no issues with the code above and works well.
The following code I have on the page I have the combo itself is as follows:
<!-- HTML Combo -->
<div id="pickup" style="width:260px;"></div>
<!-- Initialisation of combo -->
<script>
var x = new dhtmlXCombo("pickup",260,"image");
// this works
x.loadXML("list.xml");
x.enableFilteringMode(true);
</script>
My problem is i want to use autocomplete mode by using the following line of code:
x.enableFilteringMode(true, "list.xml", true, true)
When i try the above line, it doesnt give error but it doesnt filter either. However im told to use a php file but i don't know what I need to put in the list.php file itself. I can code just dont know what to put in. Can anyone shed some light, the docs arent that helpful.
enableFilteringMode enables server-side filtering. It means that when you type something in the combo header, this text is sent to the script that is defined the second parameter of the method. The script generates XML with options that correspond the mask.
Therefore, you can't use static XML in this case.
You can find a demo of the dynamic loading in the dhtmlxCombo package:
dhtmlxCombo/samples/04_filtering/01_combo_big_db.html
Also, you can use dhtmlxConnector that provides a ready solutions for the server side (PHP, ASP.NET, etc.). The dhtmlxConnector package includes a demo with dhtmlxCombo, e.g.:
dhtmlxConnector_php_v10_110725/php/samples/combo/02_sql.html