How do I get JSONRPC working properly with JQuery on the client-side, on the referenced types of calls?
To represent my attempt, I've tried to create the smallest possible test-case:
Server[1]
from txjsonrpc.web import jsonrpc
from twisted.web import server
from twisted.internet import reactor
class Math(jsonrpc.JSONRPC):
def jsonrpc_add(self, a, b):
return a+b
def jsonrpc_echo(self, foo):
return str(foo)
def jsonrpc_hello(self):
return u"Hello World!"
reactor.listenTCP(7080, server.Site(Math()))
reactor.run()
Client[2]
<!DOCTYPE HTML>
<html>
<head>
<title>Math is fun?!</title>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/datagraph/jquery-jsonrpc/master/jquery.jsonrpc.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.jsonRPC.setup({
endPoint : 'http://localhost:7080',
namespace : ''
});
$("input#evaluate").click(function() {
$.jsonRPC.request('jsonrpc_echo', {
params : [$("textarea#input").val()],
success : function(data) {
$("<p />").text(data.result).appendTo($("p#result"));
},
error : function(data) {
$("<p />").text(data.error.message).appendTo($("p#result"));
}
});
});
});
</script>
</head>
<body>
<p id="result"></p>
<p>
<textarea name="input" id="input"></textarea>
</p>
<p>
<input name="evaluate" id="evaluate" value="evaluate" type="button" />
</p>
</body>
</html>
Adapted from https://stackoverflow.com/a/4738563/1438003
Adapted from https://github.com/filonenko-mikhail/maxima-json-rpc/blob/master/examples/js-maxima-rpc-client.html
Related
I want to send result to JavaScript to display the result in html using eel.
I'm adding the two numbers reading it from JavaScript through html & I want to display the result in html side at the end..
main.py
import eel
import requests
eel.init('web')
#eel.expose
def sum(a,b):
c = int(a) + int(b)
print(c)
return c
eel.start('index.html', size=(500, 500))
main.js
function sum() {
var a = document.getElementById("data_1").value;
var b = document.getElementById("data_2").value;
eel.sum(a, b);
}
index.html
<!doctype html>
<html lang="en">
<head>
<title>Test eel</title>
<script type="text/javascript" src="/eel.js"></script>
<script type="text/javascript" src="/myscript.js"></script>
</head>
<body>
<h3 class='label_'>Num 1 </h3>
<input type="text" id="data_1" >
</br>
<h3 class='label_'>Num 2 </h3>
<input type="text" id="data_2" >
</br>
<input type="button" class="submit" value="submit" onclick="sum()"></br>
output
<div id='file-name'>---</div>
</div>
</body>
</html>
You can use JavaScript callback function to pass the return value to html
main.js
function sum() {
var a = document.getElementById("data_1").value;
var b = document.getElementById("data_2").value;
eel.sum(a, b)(callback); // change here
}
// add function as
function callback(c) {
document.getElementById("data").value = c;
}
In index.html add this below code to print result on html side
index.html
<div>
Result : <input type="text" id="data" >
</div>
I have to upload this code to the fouton interface. How can I query without uploading the file or without using cURL?
<!DOCTYPE html>
<html>
<head>
<title>Tiny CouchApp</title>
</head>
<body>
<h1>Tiny CouchApp</h1>
<ul id="databases"></ul>
</body>
<script src="/_utils/script/jquery.js"></script> <script
src="/_utils/script/jquery.couch.js"></script> <script>
$.couch.allDbs({
success : function(dbs) {
dbs.forEach(function(db) {
$("#databases").append('<li>'+db+'</li>');
});
}
});
</script>
</html>
getting javascript error like
Uncaught ReferenceError: doSearch is not defined
Here am attaching code, its spring mvc
the controller code is
#RequestMapping("/ajaxSearch")
public #ResponseBody List<Book> performLooseSearch(#RequestParam("CHARS") String chars)
{
System.out.println("CHARS: "+chars);
return bookService.searchBooksByLooseMatch(chars);
}
and jsp and java script here
<html>
<head>
<title>Loose Search</title>
<script type="text/javascript" src="/BookShopping/resources/jquery-1.4.2.min.js" />
<script type="text/javascript">
function doSearch() {
// make request to server...
alert("#searchBox " + $('#searchBox').val());
$.getJSON("ajaxSearch.do", {
CHARS: $('#searchBox').val()
}, function(data) {
// the call back
alert("Response received " + data);
});
}
</script>
</head>
<body>
<h1>Loose Search</h1>
<input type="text" onKeyUp="doSearch();" id="searchBox" />
<div id="results">
</div>
</body>
</html>
Any suggestion ?
<script> cannot be self closed. Check Why don't self-closing script tags work?
Change
<script type="text/javascript" src="/BookShopping/resources/jquery-1.4.2.min.js"/>
to
<script type="text/javascript" src="/BookShopping/resources/jquery-1.4.2.min.js"></script>
I have the following code that works:
<html>
<head>
<script>
function loaded(){
oFormElement = document.forms['test form'].elements["txtStatus"];
oFormElement.value = "just loaded";
}
</script>
</head>
<body onload="loaded()">
<p>my first socket.io test</p>
<form id = "test form">
<input type="text" id ="txtStatus" value="">
</form>
</body>
</html>
now, if I include the reference to socket.io, it stops working
<html>
<head>
<script src="socket.io/socket.io.js">
<script>
function loaded(){
is this because socket.io handles from elements in it's own way, or is because the browser cannot find socket.io ? Is there any way to debug this/fix this ?
You need to close the first <script> tag...
<html>
<head>
<script src="socket.io/socket.io.js"></script>
<script>
function loaded(){
// ...
I have been trying to get the bootstrap typeahead to work, with no luck whatsoever. I have pasted the code I have. I have reference Jquery-1.9.1 and typeahead.js. What am I doing wrong? Your help is much appreciated! Thanks.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<script src="Scripts/typeahead.js-master/test/vendor/jquery-1.9.1.js"></script>
<script src="Scripts/typeahead.js-master/src/typeahead.js"></script>
<title></title>
</head>
<body>
<form>
<div>
<input type="text" data-provide="typeahead" autocomplete="off" data-source='["arizona","alaska"]' />
</div>
</form>
</body>
</html>
It looks like you're getting confused between typeahead.js (by Twitter) and Twitter Bootstrap's Typeahead feature
You're including the library for typeahead.js
<script src="Scripts/typeahead.js-master/src/typeahead.js"></script>
but trying to use it like Twitter Bootstrap's typeahead feature.
Make sure you're including the Twitter Bootstrap library, if you want to use your current code:
<script type="text/javascript"
src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js">
</script>
Here's an example: jsFiddle
I hope this is what you expection. Here is the complete code try with necessary dependencies.
<!DOCTYPE html>
<html>
<head>
<title>Member</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="well">
<input type="text" class="span3" id="search" data-provide="typeahead" data-items="4" />
</div>
<script>
var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON'];
$('#search').typeahead({source: subjects})
</script>
</body>
</html>
The Type head File with add two features:
Type Space Bar Show All Auto Complete Data's
If you Give Data with Space also Can be Sort and Display Data's
Change The Lookup Function This:
lookup: function (event) {
var that = this,
items;
if (that.ajax) {
that.ajaxer();
}
else if (($.trim(that.$element.val())) == "") {
that.query = that.$element.val();
if (!that.query) {
return that.shown ? that.hide() : that;
}
items = that.source;
if (!items || !items.length) {
return that.shown ? that.hide() : that;
}
return that.render(items.slice(0, that.options.items)).show();
}
else {
that.query = $.trim(that.$element.val());
if (!that.query) {
return that.shown ? that.hide() : that;
}
items = that.grepper(that.source);
if (!items || !items.length) {
return that.shown ? that.hide() : that;
}
return that.render(items.slice(0, that.options.items)).show();
}
},