In my firefox extension I need user input to do further computations on my extension.
I used a panel to do this. With panels I can get input form user and pass it to my content script and emit this from there using self.port.emit and receive it on main.js using panel.port.on. But my problem is panels auto hide. I want to show my panel until user closes it.
I tried getting the above scenario by opening a html page using window window.open. But I could not pass the user input from my html window to main.js. I used the following code.
MY SR.html code
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<script>
var t= {
CallExtension : function(e) {
var text = document.getElementById("p").value;
var element = document.createElement("MyExtDE");
element.setAttribute("phNu", text);
document.documentElement.appendChild(element);
var evt = document.createEvent("Events");
evt.initEvent("SREvent", true, false);
element.dispatchEvent(evt);
}
}
</script>
<style>
table{ padding-top:30px;}
h1{ color:orange; }
td{ font-family:"Arial"; font-size:12px; }
</style>
</head>
<body>
<table cellspacing=5 cellpadding=5 align="center" border=0>
<tr>
<td colspan=3><h1>MyRMN Start Registration</h1></td>
</tr>
<tr>
<td>Phone Number</td><td>:</td><td><input type="text" id="p" name="pn"/>
</td>
</tr>
<tr>
<td><input type="button" id="btnSSubmit" value="Submit"
onclick="t.CallExtension(event);" /></td>
</tr>
</table>
</body>
My main.js code
function SR(){
try {
win = window.open(data.url("SR.html"), "SR",
"chrome,centerscreen");
win.document.defaultView.addEventListener("SREvent", S1Submit, false, true);
//window.window.document.defaultView.addEventListener("SREvent", S1Submit, false,
true);
} catch(e) {
prompts.alert(null, "main() SR", " Exception: " + e);
}
}
function S1Submit(evt){
var text = evt.target.getAttribute("phNu");
prompts.alert(null, "main() S1Submit", text);
if (text) {
mSR(text);
}
}
UPDATE
I introduced page-mod in my main.js page and i could not still communicate with my main.js
from my webpage.
main.js
var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");
function StartRegistration(){
try {
winSReg = window.open(null, data.url("SR.html"), "Title",
"chrome,centerscreen", null);
} catch(e) {
prompts.alert(null, "Title", "SR Exception: " + e);
}
}
pageMod.PageMod({
include: data.url("SR.html"),
contentScriptFile: data.url("SR.js"),
onAttach: function(worker) {
worker.port.on("gotInput", function(inputValue) {
doSomethingWith(inputValue);
});
}
});
SR.JS
function SubmitSReg(){
try {
var text = document.getElementById("p").value;
alert("SR.js text:" + text);
self.port.emit("gotInput", text);
} catch(e) {
alert(e);
}
}
SR.Html
<!DOCTYPE HTML>
<html>
<head>
<title>SR</title>
<script type="text/javascript" src="SR.js"></script>
<style>
table{ padding-top:30px;}
h1{ color:orange; }
td{ font-family:"Arial"; font-size:12px; }
</style>
</head>
<body>
<table cellspacing=5 cellpadding=5 align="center" border=0>
<tr>
<td colspan=3><h1>Title</h1></td>
</tr>
<tr>
<td>Phone Number</td><td>:</td><td><input type="text" id="p"
name="pn" /></td>
</tr>
<tr>
<td><input type="button" id="btnSSubmit" value="Submit" onclick =
"SubmitSReg()"/></td>
</tr>
</table>
</body>
</html>
Any kind of help is greatly appreciated.
Thanks in advance
Your approach is right but there's a missing part: in order to allow communication between the main.js and your static page you need to use a page-mod matching your static page local url.
Add this to your main.js:
var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");
pageMod.PageMod({
include: data.url("SR.html"),
contentScriptFile: [data.url("script.js")],
onAttach: function(worker) {
worker.port.on("gotInput", function(inputValue) {
doSomethingWith(inputValue);
});
}
});
And also create a data/script.js file containing:
/* Here add a listener to the form's submit event and then
get the input element and its value.
Then do this with yhe input value:
*/
self.port.emit('gotInput', inputValue);
This way you achieve communication between your page and the addon main.js.
Related
I'm trying to send a word by clicking the button next to that word to a different html page using socket connection. I'm trying to learn socket, and I haven't learnt anything yet. It doesn't do anything that shows up when I click the button.
This is my 1st html page that has the buttons to send the word next to the button.
<html>
<head>
<script src="/node_modules/socket.io/client-dist/socket.io.js"></script>
</head>
<table>
<tr>
<td id="word1">Word 1</td>
<td><button id="button1">Word 1</button></td>
<td id="word2">Word 2</td>
<td><button id="button2">Word 2</button></td>
<td id="word3">Word 3</td>
<td><button id="button3">Word 3</button></td>
<td id="word4">Word 4</td>
<td><button id="button4">Word 4</button></td>
<td id="word5">Word 5</td>
<td><button id="button5">Word 5</button></td>
<td id="word6">Word 6</td>
<td><button id="button6">Word 6</button></td>
</tr>
</table>
<script>
// Initialize the socket
var socket = io();
// Get a reference to the buttons and words
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
var button3 = document.getElementById("button3");
var button4 = document.getElementById("button4");
var button5 = document.getElementById("button5");
var button6 = document.getElementById("button6");
var word1 = document.getElementById("word1");
var word2 = document.getElementById("word2");
var word3 = document.getElementById("word3");
var word4 = document.getElementById("word4");
var word5 = document.getElementById("word5");
var word6 = document.getElementById("word6");
// Create a function to handle the click event
function handleClick(button, word) {
button.addEventListener("click", function () {
// Get the text of the word
var text = word.textContent;
// Use the socket to send the text to the new page
socket.emit("send-word", text);
});
}
// Attach an event listener to each button
handleClick(button1, word1);
handleClick(button2, word2);
handleClick(button3, word3);
handleClick(button4, word4);
handleClick(button5, word5);
handleClick(button6, word6);
</script>
</html>
This is the page that must be receive the word and display it.
<html>
<head>
<title>My New Page</title>
<script src="/node_modules/socket.io/client-dist/socket.io.js"></script>
</head>
<body>
<div id="word-container">Selam</div>
<script>
// Initialize the socket
var socket = io();
// Listen for the "send-word" event
socket.on("send-word", function(text) {
// Get a reference to the word container
var container = document.getElementById("word-container");
// Update the container with the received text
container.textContent = text;
});
</script>
</body>
</html>
It may be so simple to solve this problem, but I'm kinda new into coding and socket.
This is my first post in stack overflow also so if I have done anything wrong, sorry :)
I am working on Xamarin forms IOS application calling HTML pages, styles and scripts by using Hybrid WebView. I am not able to render styles and scripts and my code is
HybridWebViewRenderer.cs
protected override void OnElementChanged (ElementChangedEventArgs<HybridWebView> e)
{
base.OnElementChanged (e);
if (Control == null) {
userController = new WKUserContentController ();
var script = new WKUserScript (new NSString (JavaScriptFunction), WKUserScriptInjectionTime.AtDocumentEnd, false);
userController.AddUserScript (script);
userController.AddScriptMessageHandler (this, "invokeAction");
var config = new WKWebViewConfiguration { UserContentController = userController };
var webView = new WKWebView (Frame, config);
SetNativeControl (webView);
}
if (e.OldElement != null) {
userController.RemoveAllUserScripts ();
userController.RemoveScriptMessageHandler ("invokeAction");
var hybridWebView = e.OldElement as HybridWebView;
hybridWebView.Cleanup ();
}
if (e.NewElement != null) {
string fileName = Path.Combine (NSBundle.MainBundle.BundlePath, string.Format ("Content/{0}", Element.Uri));
//fileName = "/var/containers/Bundle/Application/2DC89563-D118-4092-B7A5-4549AF07F3B2/StoneApplication.iOS.app/Content/index.html"
Control.LoadRequest (new NSUrlRequest (new NSUrl (fileName, false)));
}
}
public void DidReceiveScriptMessage (WKUserContentController userContentController, WKScriptMessage message)
{
Element.InvokeAction (message.Body.ToString ());
}
and my index.html, here I am calling scripts, Images and styles
<html>
<head>
<title>STONEAPP TEMPLATE</title>
<!--Scripts-->
<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/jquery.min.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/fileServer.js"></script>
<script src="/Scripts/fileupload.js"></script>
<script src="/Scripts/ng-cordova.js"></script>
<script src="/Scripts/app.js"></script>
<!--Styles-->
<link href="/Styles/bootstrap.css" rel="stylesheet"/>
<link href="/Styles/main.css" rel="stylesheet"/>
</head>
<body ng-app="stoneApp" style="background-color: #ffffff;">
<div ng-controller="templateCtrl">
<div id="Header" style="background-color:#293846;min-height:50px">
<table style="width:100%;padding-top:5px;padding-left:5px;padding-right:5px">
<tr>
<td align="center" width="5%" valign="middle" ng-if="jobView == true" ng-click="showActList()">
<img src="/Images/arrow-back.png" alt="" style="height:50px;width:50px"/>
</td>
<td align="center" width="5%" valign="middle">
<img src="/Images/wifi_on.png" alt="" style="height:50px;width:50px" ng-click="ShowWifiSettings()"/>
</td>
<td align="center" width="5%" valign="middle" ng-click="ShowTabSettings()">
<img src="/Images/settings.png" alt="" style="height:50px;width:50px" ng-if="loginView == false"/>
</td>
<td width="5%" valign="middle" ng-if="activityView == true"></td>
<td width="60%" valign="middle"></td>
<td width="20%" valign="middle" align="right">
<span style="color:white" ng-if="loginView == false">{{userName}} !</span>
</td>
<td width="5%" align="right" valign="middle" ng-click="logout()" >
<img src="/Images/power_button.png" style="height:50px;width:50px" ng-if="loginView == false"/>
</td>
</tr>
</table>
</div>
</div>
</body>
I gave build action as bundle resource for styles and scripts even though I am not able to call styles and scripts and program structure is as attached image.
I am using iOS 10.2 tablet. How can I investigate my issue and make call the scripts styles and images as the links given in the HTML page?
You can't do that with Control.LoadRequest
You're problem is that you can't define baseUrl for your webview with this method and no other method let you define it.
So when your index.html is loaded into the webview, the webview can't retrieve script or css because the baseUrl is not defined and it doesn't know where to load them.
A workaround is to use LoadHtmlString (String htmlContent, NSUrl baseUrl)
Where htmlContent is your index.html content loaded into a var and baseUrl NSUrl baseurl = new NSUrl(NSBundle.MainBundle.BundlePath, true);
how can i pass two parameters using ajax from two different textboxes to another page.
which function should i use to do this.
Index.jsp
<html>
<head>
<script type="text/javascript">
function sendInfo(str,stri)
{
var XMLhttp;
if(str=="")
{
document.getElementById("my").InnerHTML="";
}
if(window.XMLHttpRequest)
{
XMLhttp=new XMLHttpRequest();
}
else
{
XMLhttp=new ActiveXObject("Microsoft.XMLhttp");
}
XMLhttp.onreadystatechange=function()
{
if(XMLhttp.readyState==4 && XMLhttp.status==200)
{
document.getElementById("my").innerHTML=XMLhttp.responseText;
}
}
XMLhttp.open("GET","get.jsp?feeid="+str+"&sid="+stri,true);
XMLhttp.send();
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>fee processing</title>
</head>
<body>
<h3>Fee Transaction</h3>
<form method="post" action="myservlet">
<table>
<tr>
<td>Date of Transaction</td>
<td><input type="text" name="date"/></td>
</tr>
<tr><td>Feeid</td>
<td><input type="text" name="feeid" onkeyup ="sendInfo(this.value)"></td></tr>
<tr><td>Student Id</td><td><input type="text" name="sid" onkeyup="sendInfo(this.value)"/></td></tr>
<tr><td><div id="my"></div></td></tr>
<tr><td>amount</td>
<td><input type="text" name="amount"/></td></tr>
<tr><td>Remaining</td>
<td><input type="text" name="remain"/></td>
</tr>
<tr><td><input type="submit" name="submit" value="submit"></td></tr>
</table>
</form>
</body>
</html>
get.jsp: i want those two parameter values in this page.
</head>
<body>
<form method="post" action="index.jsp">
<% String fid = request.getParameter("feeid");
int fidd =Integer.parseInt(fid);
System.out.print(fid);
String sid = request.getParameter("sid");
int sidd = Integer.parseInt(sid);
try
{
//int i =3;
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3307/mdb","root","tiger");
Statement stmt = con.createStatement();
//System.out.print("a");
String query1 = "select amount from feestudent where st_id="+sidd+" and fees_id="+fidd;
ResultSet rs = stmt.executeQuery(query1);
if(rs.next())
{
// System.out.print("d");
%>
<table>
<tr>
<td><input type="text" name = "totalamt" value="<%=rs.getInt("amount") %>"/></td>
<%
}
}
catch(Exception e)
{
e.printStackTrace();
}
%>
</tr>
</table>
%>
</form>
</body>
</html>
please Help me.
Thanks.
The problem in your code is caused by this line in the HTML:
<td><input type="text" name="feeid"
"which function should i use here?" ="sendInfo(this.value)"></td>
Your sendInfo(str, stri) JavaScript function expects two parameters, but you are only passing in one. Pass in a value for stri and you should be good to go.
Hi I am trying to catch an array of string from a class called AjaxFacade using DWR and I am using jquery to autocomplete a text box snippetof my jsp code is as follows
<%
String path = request.getContextPath();
%>
<script type='text/javascript' src='<%=path%>/dwr/interface/ajaxFacade.js'></script>
<script type='text/javascript' src='<%=path%>/dwr/engine.js'></script>
<script type='text/javascript' src='<%=path%>/dwr/util.js'></script>
<script>
$(function()
{
var countries ;
countries = ajaxFacade.getCountries();
$("#tags").autocomplete({source : countries});
});
</script>
<tr>
<td align="left" valign="top" bgcolor="e3ddc7">
<div align="right"><strong> <font color="red">*</font>Old E-mail Address:</strong></div>
</td>
<td align="left" valign="top" bgcolor="#FFFFFF">
<html:text name="amsUserRequestForm" property="oldEmail" size="20" styleClass="ui-widget" styleId="tags">
</html:text></td>
</tr>
Function in AjaxFacade class is as follows
public String[] getUsers() {
String[] countries = {
"India",
"Iran",
"Iraq",
"Indoneshia",
"Ireland"
};
return countries;
}
No matter what I do it keeps me giving error this.source is not a function. Any help is greatly appreciated
make sure that the countries are filled with data make sync json call if needed.
i have a Ajax function that works in Firefox but not in IE 6
my ajax script :
<script type="text/javascript">
function actualiserDLIS(){
var url = 'administration/gestionUtilisateurs.do?method=actualisationDLIs';
var params = 'DR='+encodeURIComponent(document.getElementById('selectDR').value);
var myAjax = new Ajax.Request(
url,
{ method: 'post',
parameters: params,
onComplete: majDLIS
});
}
function majDLIS(retour){
if (retour.status == 200)
{
alert("Retour Status: "+retour.responseText);
document.getElementById('tableDLI').innerHTML = retour.responseText;
}else{
document.getElementById('tableDLI').innerHTML = "uncool";
}
}
</script>
in my <body>
[...]
<table class="tabForm" id="tableDLI">
<c:forEach var="DLI" items="${sessionScope['fiscalite.AdministrationGestionUtilisateurForm'].DLISUtilisateur}" varStatus="status" >
<tr>
<td class="label_tableau_type1 width200px" ><c:out value="${DLI.code}"/>
</td>
<td class="width150px" colspan="3"><html:checkbox property="DLI(${status.count-1})"/>
</td>
</tr>
</c:forEach>
</table>
[...]
in my alertI'm recovering well my data that I want to display in my tableDLI
Apparently you're using Prototype. First I must mention that targeting IE6 is wrong, worse, it's evil. It's well known that this browser is broken in all sorts of ways. You probably have javascript errors in the browser, what are they?
Here is a what can be a useful link.