Javascript python communication - cefpython

With CEFPython can we create the prototype of a javascript function and build the function in python?
<button onclick="somme(b,a)">SOMME</button>
<label id='prompt'>Bonjour</label>
def somme(self,b,a):
self.ExecuteJavascript(document.getElementById('id').innerHTML = "somme ="+b+a)

Yes, you can do this using Javascript bindings, see a snippet here: https://github.com/cztomczak/cefpython/blob/master/examples/snippets/javascript_bindings.py
Read more about javascript bindings in the Tutorial document.

Related

How use 'v-for' object inside razor element in vue js

In my code there is a loop and inside that I have a <a> tag ; I want to generate its link by using a server-base code function; part of my code:
<div v-for="file in fileList">
<div class="badge">
<i class="fa fa-cloud-download"></i> {{file.name}}
</div>
</div>
Is there any way to do this?
As you may know server code runs before the javascript, javascript run on the client browser. So when your server-based code runs it sees all of the javascript code as a static text.
A possible solutions here: is you do a normal javascript function that calls a RESTful API which create a link and send it back.

What is the alternative of jsplumb while using Vue js?

I'm developing an app using quasar framework and Vue js. Initially, I used Drag and drop functionality and linking them with connectors in my web app using jquery UI and jsplumb.
Basically, the jsplumb library is a plugin for jquery and jquery occupies more memory space comparing to Vue js.
So, I thought of using pure Vue js functionalities for my requirement. So is there any Vue js plugins which does following tasks?
1) Able to drag blocks from one container and drop it to the specific location in another container.
2) Able to add endpoints(as provided in jsplumb) to the dropped blocks
3) And able to draw a connecting link between any blocks in the container.
So is there any way of replacing jquery and jsplumb with only pure Vue js and Quasar?
as per documentation: JSPlumb features there's a vue version, but it looks like it's paid.
Also in other part it says "Although jsPlumb has no dependency on jQuery, it also supports jQuery selectors as arguments for elements (vanilla jsPlumb because jQuery's selector object is list-like, ie. it has a length property and indexed accessors)." So you don't need jQuery to use JsPlumb. We got that cover.
Then you can use Draggable which uses vue.sortable as well, for the drag and drop part.
So, what if you already have a bunch of selectors with jsplumb in Jquery? you could replace jquery with this selector method:
window.$ = function(selector) {
var selectorType = 'querySelectorAll';
if (selector.indexOf('#') === 0) {
selectorType = 'getElementById';
selector = selector.substr(1, selector.length);
}
return document[selectorType](selector);
};
Snippet from here: https://blog.garstasio.com/you-dont-need-jquery/selectors/
Hope it helps.

jsreport template dynamic generate 2D Barcode

I am a new user for JSReport, I want to build a template for phantomjs PDF that include a 2D Barcode, however, 2D Barcode content generate dynamically. Could anyone can guild? Thanks for helping.
This depends how you want to generate the barcode image.
One option is to use external (free) service which does this for you, then you just need to insert html image with proper url
<img src='https://www.barcodesinc.com/generator/image.php?code=ABCDEFG&style=197&type=C128B&width=180&height=50&xres=1&font=3'/>
You would typically fill the code using handlebars in jsreport like this
<img src='https://www.barcodesinc.com/generator/image.php?code={{code}}&style=197&type=C128B&width=180&height=50&xres=1&font=3'/>
Playground demo
https://playground.jsreport.net/w/anon/FnOXpvbt
Another option is using an npm module that can render the barcodes serverside like the bwip-js.
Playground demo
https://playground.jsreport.net/w/anon/EYFN1vXc
Thank you for give me some key point. I also found below script can generate 2D barcode also.
< img id='barcode'
src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&size=100x100"
alt=""
title="HELLO"
width="100"
height="100" />
I know this is an old question.
I need this function but the url does not work
Google has a solution
https://developers.google.com/chart/infographics/docs/qr_codes
<img src='https://chart.googleapis.com/chart?cht=qr&chl={{rowinfo.qrCode}}&chs=200x200&choe=UTF-8'/>

DHTML - Change text on page using input field

I need to create a code to change an example text to a user-defined value when the user types in an input field (Similar to the preview field when writing a question on Stack Overflow).
This needs to be achieved without the use of HTML5 or Flash as the users will be running IE8, not all will have Flash plug-ins installed.
As such I have started by looking at DHTML to achieve the desired effect. Currently I can change the example text when a user types in the input field but only to a pre-defined value ("Example" in the code below), how should I edit this code to display the user-defined value?
JS
function changetext(id)
{
id.innerHTML="Example";
}
HTML
<form>
Content:<input type="text" id="input" onkeyup="changetext(preview)" />
</form>
<p id="preview">No content found</p>
You need to have something like this in the function:
function changetext(id){
var info = document.getElementById('input').value();
id.innerHTML = info;
}
This js is not fully correct. I would highly recommend you start using a javascript library like jQuery. It makes this a menial task.
Edited:
jQuery will work in IE8 just fine. in jQuery you will not need to attach js to your input. The code would look like this.
$('#input').click(function(){
$('#preview).html(this.val());
});
It is a lot cleaner and doesnt have js in the html.

How to create a Web slice with Search?

Does anyone know how bing's weather webslice search works? I am attempting to create a web slice(only available in IE8) with search built in and I have read that forms are not allowed and neither is javascript. Any help would be appreciated.
You can create active content by defining it on another page using the entry-content rel attribute of an tag. In this example slice.aspx has JavaScript code on it.
<div class="hslice" id="MySlice">
<p class="entry-title">
My Active Slice</p>
<a rel="entry-content" href="slice.aspx" />
<div class="entry-content">
</div>
</div>
You can achieve a similar effect using some simple javascript in a Chrome extension to create an Arbitrary Web Slice extension but with the advantage of being able to take any slice out of any web page, not just predefined Web Slice areas like Bing weather. Obviously only works in Chrome but Firefox has a similar extension API in GreaseMonkey.