I'm developing a small "Hello World" web app using Unity3D and I need to update a Text element (I'm using the brand new UI elements added in the latest unity release, 4.6).
I've been following several tutorials, including the Unity's official docs, and it doesn't work.
Here I post some code:
First of all my C# script, as you can see, i'm setting the initial value of the variable named "name" to "Unknown",
the goal is update it using the input name.
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class ChangeText : MonoBehaviour {
Text text;
string name;
// Use this for initialization
void Start () {
text = GetComponent<Text>();
name = "Unknown";
}
// Update is called once per frame
void Update () {
text.text ="Welcome " + name;
}
void updateLabelText(string inputName) {
Debug.Log ("input >> " + name);
name = inputName;
}
}
Here the website side javascript code:
function SaySomethingToUnity() {
input = document.getElementById('inputName').value;
u.getUnity().SendMessage("text", "updateLabelText", input);
//alert(input);
}
And finally the HTML to write user's name:
<div>
<input type="text" name="enter" class="enter" value="" id="inputName"/>
<input type="button" value="click" onclick="SaySomethingToUnity();"/>
</div>
If anyone can help me...
Thank all for wasting your time in my post!! :D
Related
I'm stuck with a problem that seems too simple to be true. I'm wondering where is my mistake...
I'm rendering some HTML with RAZOR from Asp .net MVC controler
#foreach (var inst in Model.InstrumentsList)
{
<section class="instrumSummary">
<p>#inst.RemoteMachineName</p>
<p>#inst.LocalClientName</p>
<p id="rcState_#inst.LocalClientName">#inst.RemoteServiceState</p>
<p id="rcVer">#inst.RemoteServiceVersion</p>
</section>
}
Then, using jQuery I try to retreive elements in a signalR callback
<script type="text/javascript" language="javascript">
$(document).ready(function () {
console.log("document loaded !!");
// Reference the auto-generated proxy for the hub.
var chat = $.connection.InstHub;
// Create a function that the hub can call back to display messages.
chat.client.SendInstrumentState = function (acState, targetHost) {
// Add the message to the page.
console.log(targetHost + " : " + acState);
var idupd = "rcState_" + targetHost;
console.log("update element id :" + idupd);
$("#" + idupd).text(acState);
};
$.connection.hub.start().done(function () {
console.log("Hub is started.");
});
});
</script>
The problem is that i can't get to retreive my <p> tag when its id attribute is defined with a static part (rcState_) and a dynamic part coming from my model (#inst.LocalClientName)
So basicaly the $("#" + idupd) does not return my <p> html element. When I replace its ID attribute with a full static name (for exemple <p id="rcstate">), everything works fine, but as this element will be repeated n times depending on the number of elements in my list, I should be able to update the correct element when executing signalR callback.
Of course in the code above I checked that targetHost and #inst.LocalClientName have exactly the same values...
I am currently working with legacy code to attempt to get it to work correctly in newer browsers. The code is written with Struts 1.3 and makes use of the html tag library extensively in the following manner:
<html:text property="myTextInput" maxlength="10"/>
Which produces the following html when rendered:
<input name="myTextInput" type="text" maxlength="10" value="">
In old versions of IE, one could use document.getElementById('myTextInput') to get a reference even if the element only had a name attribute and didn't have an id attribute. When using the jsp html tags, the name property generates the name attribute in the html code but doesn't generate the id attribute.
I found adding styleId to the html tag in the jsp does add the id attribute to the resulting xml, but this means I would have to touch every single html tag element in all the jsp's and change it similar to:
<html:text property="myTextInput" styleId="myTextInput" maxlength="10"/>
I also found document.getElementByName(), but this results in touching a lot of javascript and also (due to bad code), I don't know if it really is referring to an element by the id or name so this could cause some issues.
Is there an easy way to add the styleId attribute without touching every element?
I ended up writing a small java main method to deal with this. I use regex to find the html elements (select,option. text, hidden, textarea) that don't already have a styleId attribute and then add the styleId attribute with the same value as the property attribute. This could be expanded to do a bunch of files at once but right now I just wanted something to do individual files so I could easily check them against source control and make sure it worked correctly. It's a quick and dirty solution to a problem so I wouldn't have to comb through tons of jsp files manually so I'm sure there are some edge cases it doesn't deal with. With that said:
import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.FileReader;
import java.io.FileWriter;
import java.io.IOException;
import java.nio.channels.FileChannel;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
public class JspModifierStyleId {
public static void main(String[] args) throws IOException {
String lineEnding = "\r\n";
String baseDir= "C:/path/to/your/directory/"; //Change this to suit your directory
String origFileName= "OriginalFile.jsp"; //Change this to suit your original file that needs the attribute added
File origFile = new File(baseDir + origFileName);
String tempFileName = "TemporaryFile.jsp";
File tempFile = new File(baseDir + tempFileName);
Pattern p = Pattern.compile("^(?!.*styleId)\\s*<html:(?:select|option|text|hidden|textarea)\\s.*property=\"([a-zA-Z1-9.]*)\".+");
FileReader in = new FileReader(origFile);
FileWriter out = new FileWriter(tempFile);
BufferedReader br = new BufferedReader(in);
BufferedWriter bw = new BufferedWriter(out);
String line;
while ((line = br.readLine()) != null) {
Matcher m = p.matcher(line);
if(m.matches()){
String strWithStyleId = line.substring(0, m.start(1)) + m.group(1) + "\" styleId=\"" + line.substring(m.start(1));
bw.write(strWithStyleId + lineEnding);
System.out.println(strWithStyleId);
}else {
bw.write(line + lineEnding);
}
}
br.close();
bw.close();
//copies back to original file, BE CAREFUL!!!
copyFile(tempFile, origFile);
}
public static void copyFile(File sourceFile, File destFile) throws IOException {
if(!destFile.exists()) {
destFile.createNewFile();
}
FileChannel source = null;
FileChannel destination = null;
try {
source = new FileInputStream(sourceFile).getChannel();
destination = new FileOutputStream(destFile).getChannel();
destination.transferFrom(source, 0, source.size());
}
finally {
if(source != null) {
source.close();
}
if(destination != null) {
destination.close();
}
}
}
}
I'm working with Mojarra JSF 2.1.28 and Primefaces 3.5. I want to implement a client-side transferring input for the p:pickList component, where the user types something and the value is searched through the labels at the list of available elements, then it's transferred to the target list. That's how my code looks like:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head />
<h:body>
<script>
//Just for testing, transfer the second element
//to the target list when document is ready. Works well
$(document).ready(function(string) {
transfer("name2");
});
//Transfer function. It takes each list item from the source list and checks if it matches with the given pattern
//If it does, moves it to the target list
function transfer(string) {
$(".ui-picklist-source li").each(function() {
var re = new RegExp(string);
if ($(this).attr('data-item-label').match(re)) {
$(".ui-picklist-target").append($(this));
}
});
};
</script>
<h:form>
<p:inputText
onkeypress="if (event.keyCode == 13) { transfer(this.value); return false;}" />
</h:form>
<h:form id="form">
<p:pickList value="#{bean.elements}" var="element"
itemLabel="#{element.name}" itemValue="#{element.name}" id="picklist" />
<p:commandButton value="Send" action="#{bean.send}" />
</h:form>
</h:body>
</html>
#ManagedBean
#ViewScoped
public class Bean implements Serializable{
public class Element {
private String name;
public Element(String n) {
name = n;
}
public String getName() {
return name;
}
#Override
public String toString() {
return "Element [name=" + name + "]";
}
}
private DualListModel<Element> elements;
public Bean() {
List<Element> source = new ArrayList<Bean.Element>();
List<Element> target = new ArrayList<Bean.Element>();
source.add(new Element("name1"));
source.add(new Element("name2"));
elements = new DualListModel<Bean.Element>(source, target);
}
public DualListModel<Element> getElements() {
return elements;
}
public void send() {
System.out.println("Available: " + elements.getSource() + " assigned: "
+ elements.getTarget());
}
public void setElements(DualListModel<Element> elements) {
this.elements = elements;
}
}
Well, in this test case, there are two items to play with, name1 and name2. When page loads, I use $(document).ready() to call my transfer(string) function in order to move name2 to the target list. Page gets properly loaded and if we click on Send button, we get the second element properly assigned.
Problem comes when calling the function using the p:inputText component. Here, we listen to the Enter key event to send the current given value and perform a transfer. At client side it works fair enough, it behaves as expected. However, when clicking on Send, model doesn't get properly updated at server side.
I infer this is caused by the view state kept by JSF, but how to deal with this? Is there a way to implement it or do I have to stick to Ajax requests?
The "right" way to achieve this is to use Primefaces's Javascript API of
PrimeFaces.widget.PickList
Assuming your widgetVar is pickListWV, here's how you would do:
function transfer(string) {
PF('pickListWV').sourceList.children().each(function() {
var re = new RegExp(string, "i");
if ($(this).attr('data-item-label').match(re)) {
PF('pickListWV').selectItem($(this));// select the item
PF('pickListWV').add();// add it to the target
}
});
}
EDIT:
Also you can make it more interesting, like live filtering..
<p:inputText
onkeypress="if (event.keyCode == 13) { transfer(this.value); return false;} else{PF('pickListWV').filter(this.value, PF('pickListWV').sourceList)}" />
EDIT 2:
As I can see that you have a case-sensitive match, so you have to declare your RegExp as case-insensitive
var re = new RegExp(string, "i");
Here's a small working example on github, and a working demo as requested :)
Hope this helps.
I currently have a listbox (part of a search criteria) that represents a list of strings that are retrieved one at a time via a pop-up window. However when the pop-up window closes the selected String is never added to the listbox. (I have confirmed that the hidden variable is updated and if you navigate away from the page after a search is performed and navigate back, the list box correctly shows Strings I had selected from the pop up previously). Any help would be greatly appreciated!
<script type="text/javascript">
function selectBook(bookId, extendedBookName) {
var idInput = jQuery("#myForm\\:bookNames");
if (idInput.val() == "") {
idInput.val(extendedBookName);
} else {
idInput.val(idInput.val() + '###' + extendedBookName);
}
}
</script>
...
<h:form id="myForm">
...
<ui:define name="form-fields">
<h:selectOneListbox id="booksListBox" size="3" style="width:470px">
<s:selectItems var="_var" value="#{bean.searchCriteria.bookNames}" label="#{_var}" noSelectionLabel="" />
</h:selectOneListbox>
<h:outputLink onclick="return openNewWindow('#{bean.booksLookupUrl}?#{bean.bookLookupParameters}', 'book');"
target="_blank">
<h:inputHidden id="bookNames" value="#{bean.searchCriteria.bookNames}" converter="StringListConverter"/>
<h:outputText value="Add"/>
</h:outputLink>
</ui:define>
...
</h:form>
This is javaScript that belongs to the lookup window. This calls the selectBook function
function selectBook(bookId, extendedBookName) {
var extendedName = unescape(extendedBookName);
window.opener.selectBook(bookId, extendedName);
window.close();
}
And for my Java code...
public class BookSearchCriteria implements Serializable {
...
private List<String> bookNames = new ArrayList<String>();
public List<String> getBookNames() {
return bookNames;
}
public void setBookNames(List<String> bookNames) {
this.bookNames = bookNames;
}
The StringListConverter code...
#FacesConverter("myStringListConverter")
public class StringListConverter implements Converter {
// this is used as a regex, so choose other separator carefully
private static final String MY_SEPARATOR = "###";
#Override
public Object getAsObject(FacesContext context, UIComponent component,
String value) {
if (value == null) {
return new ArrayList<String>();
}
return new ArrayList<String>(Arrays.asList(value.split(MY_SEPARATOR)));
}
#Override
public String getAsString(FacesContext context, UIComponent component,
Object value) {
if (value == null) {
return "";
}
return join((List<String>) value, MY_SEPARATOR);
}
/**
* Joins a String list, src: http://stackoverflow.com/q/1751844/149872
*
* #param list
* #param conjunction
* #return
*/
public static String join(List<String> list, String conjunction) {
StringBuilder sb = new StringBuilder();
boolean first = true;
for (String item : list) {
if (first) {
first = false;
} else {
sb.append(conjunction);
}
sb.append(item);
}
return sb.toString();
}
}
I don't really understand why you want to populate your listBox using a popup.
But if you modify the underlying bean values, you need to rerender the <h:selectOneListbox/> to reflect these changes. If you are using (or can use) the richfaces framework it can be done quite easily through an ajax call.
The ajax4jsf component called <a4j:jsFunction/> can do the job. For example in your parent page add :
<a4j:jsFunction name="refreshListbox" reRender="booksListBox" limitToList="true"/>
and in your popup just call this js function when a new book value is selected :
<script type="text/javascript">
window.opener.refreshListbox();
</script>
You could also use a <rich:modalPanel> instead of a popup to stay in the same page and interact more easily with your jsf components.
The page in the popup window is running some server-side Java code that creates new options for the dropdown menu. This has no absolutely no effect on the parent page until the parent page is reloaded and regenerated by the server. To avoid reloading the page, you need to create and select the new option using client-side JavaScript/jQuery code.
Assuming that the HTML code for the resulting option should look something like <option value="bookId">extendedBookName</option>, you can use this:
<script>
function addBook(bookId, extendedBookName) {
var newOption = jQuery('<option>').val(bookId).text(extendedBookName);
var idInput = jQuery('#myForm\\:bookNames');
idInput.append(newOption).val(bookId);
}
</script>
Demo: http://jsfiddle.net/5Cwjk/
Or, if the selection from the popup window is not guaranteed to be new, then you'll want to dynamically determine whether creating an option is necessary before doing so to avoid duplicates:
<script>
function addBook(bookId, extendedBookName) {
var idInput = jQuery('#myForm\\:bookNames');
if (idInput.val(bookId).val() != bookId) {
var newOption = jQuery('<option>').val(bookId).text(extendedBookName);
idInput.append(newOption).val(bookId);
}
}
</script>
Demo: http://jsfiddle.net/nTtY9/1/
I have made a web user control (.ascx) which consists of the two html textbox and two input buttons, when I try to do document.getElementById('<%=ControlID.ClientID%>') it returns null. what could i have done wrong ?
source code:
<script language="javascript" type="text/javascript">
function intilize() {
var x = document.getElementById('<%=JSNumeric_Control.ClientID%>');
}
</script>
<table class="style1">
<tr>
<td >
<My:UserInfoBoxControl ID="JSNumeric_Control" runat="server" />
</td>
<td>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<input id="Button1" type="button" value="button" onclick="intilize()" /><br />
</td>
</tr>
</table>
Here is the code for the Numbric.cs, the following are the property used and in page load i am using JavaScript to assign all the events for the HTML inputs:
public partial class NumricCounter : System.Web.UI.UserControl
{
public string defualtValue = "0";
public double defaultIncrementValue = 1;
public int defaultPrecsionValue = 0;
public string Button_Add_ClientID
{
get { return Button_Add.ClientID; }
}
public string Button_Subtract_ClientID
{
get { return Button_Subtract.ClientID; }
}
//Set and Get for all these properties. (Code Omitted)
public string Text;
public double IncrementValue;
public int PrecsionValue;
public void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Text_Output.Value = this.Text;
Button_Add.Attributes.Add("onclick", "Add(" + IncrementValue.ToString() + "," + PrecsionValue.ToString() + ");");
Button_Subtract.Attributes.Add("onclick", "Subtract(" + this.IncrementValue.ToString() + "," + this.PrecsionValue.ToString() + ")");
Text_Output.Attributes.Add("onkeyup", "check(" + this.PrecsionValue.ToString() + ");");
}
}
}
Try replacing your function:
function intilize() {
var x = document.getElementById('<%=JSNumeric_Control.ClientID%>');
}
with this:
function intilize() {
var x = document.getElementById('JSNumeric_Control');
}
The getElementById should read the ID of the element from the rendored html.
JSNumeric_Control.ClientID will return the ClientID of the control if it were rendered to the page. It's existance doesn't necessarily mean that there will be HTML on the final page that has that ID.
For example if you create a control that just outputs two buttons you will give each of those buttons different IDs that are not the same as the control that they live in. Often you might create a container div that you will put around all other content which you will give the ID of the Control to for easy finding but there is no reason for this to exist.
What you should do is either make sure that your control does create this HTML container with the ID of your control or you should refer specifically to the client ID of the items inside your control.
var button1 = document.getElementById('<%=JSNumeric_Control.Button1.ClientID%>');
The problem is that in the DOM there's no element with Id = ClientID of your UserInfoBoxControl. The controls inside your user control will have other Ids, like 'JSNumeric_Control_Button1', 'JSNumeric_Control_TextBox1' etc. If you need to get both of the input buttons, you can do one of the following:
Use jquery selector to find all inputs with type = button and id starting with <%=JSNumeric_Control.ClientID%>
Add two new properties to your control - FirstButtonClientID and SecondButtonClientID that will provide you with clientIDs of your buttons. Then you can use it in javascript.
Create custom javascript object which will represent your usercontrol and provide necessary functionality.
You are most likely trying to search the DOM before it's been loaded. Try putting your code inside an onload handler:
document.onload = function () {
alert(document.getElementById('<%=ControlID.ClientID%>'));
}
This makes sure that the code isn't executed before you actually have all of the DOM loaded.
//Button_Add is the control id inside the user control
var x = document.getElementByID(JSNumeric_Control.FindControl("Button_Add").ClientID);