We Keep Coding

How with javascript change html code

I need the following change using javascript:
from:
<input id="innn" value="" />
to:
<input id="innn" value="SOME_VALUE" />
I tried this:
document.getElementById("innn").setAttribute("value", "189");
and this:
document.getElementById('innn').value = '152';
it worked but it changed only visual on page not the html code and i need to change the code as shown below:
<input id="innn" value="" /> --> <input id="innn" value="125" /> --><input id="innn" value="158" />
Please help or I must use php like : <input id="innn" value="<? php ... ?>" /> ????

HTML is what is rendered in order for your browser to know what to show on your page. Once sent by the server it will not change (at least not with basic JavaScript). There are more advanced ways of doing things, but they are not simple. When you call a JavaScript function to change something, it changes it in the DOM, so you will see the change on your screen, but when you click view-source your browser is fetching the original page again from the server to show you. In some browsers they have something called Inspect mode which allows you to see what the HTML looks like right now for your page. In that case it will show the updated code. If you want that when someone clicks view-source and sees SOME_VALUE in the value for id="innn", then you would need to use PHP.

document.getElementById("innn").value = somevalue

runat="server" breaks my jQuery - datapicker

The runat="server" is breaking my jquery. I have two input, but for testing purpose added runat="server" in only one of those. Actually , I need to add on both.
Below you can find JS script to trigger the datetimepicker:
note: dateTo has runat="server" set and tried to change the way JS trying to get its ID, but still not working.
<script>
$(function(){
$("#dateFrom").datetimepicker();
$("#<%=dateTo%>").datetimepicker();
});
</script>
Here you can find the HTML input using runat="server" or not into asp.net code.
<tr>
<td>
<input type="text" id="dateFrom" name="dateFrom" value="" class="dateFrom" />
</td>
<td >
<input type="text" id="dateTo" name="dateTo" runat="server" value="" class="dateTo" />
</td>
</tr>
Does anybody has any idea,hint.....?
thank you

Use ClientID to get the generated Id of a server side control:
$("#<%=dateTo.ClientID%>").datetimepicker();
ASP.NET will generate a specific id attribute that is different from the id attribute of the server side control, so you need to use the generated value in order to access it from jQuery.

Since you're supplying class names, I suggest simply using those.
$(function(){
$(".dateTo, .dateFrom").datetimepicker();
});
Alternatively, you could give any "date" field on your form a class of "date" and use that:
$(function(){
$(".date").datetimepicker();
});
This is a common pattern for client-side validation, and also allows you to provide context clues through styling with CSS.

If you're using .NET 4 you can set the ClientIDMode attribute to Static. This will prevent the framework from changing the element's ID:
<input type="text" id="dateTo" name="dateTo" runat="server"
ClientIDMode="Static" class="dateTo" value="" />

ASP.NET will treat the inputs as server-side controls when runat=server is added, and this will result in transformed identifiers of those inputs so that they start with a container prefix (something like ctl00_), hence 'breaking' your jQuery selectors.
If you're using .NET 4 then you can disable these transformations by altering the ClientIDMode. Otherwise you will need to include the prefix in your selectors, or refactor your selectors to be independent of ID and somewhat distinct for selection by other means.

Use this to get correct client id for server controls
$('[id$=dateTo]').datetimepicker();

Hobo: is that possible to add cookies to table-plus?

I am having some trouble with the sorting provided by table-plus feature in hobo. Let's say I have some javascript functions to display different tables:
function showTable1() {
...
}
function showTable2() {
...
}
function showTable3() {
...
}
Event.observer(windows, 'load', showTable1);
and I am using to display the tables. As we can see, Table 1 will be shown by default and every time when I try to sort, let say, Table 2 after displaying it, the page will refresh and then it will automatically switch back to show Table 1.
I am planning to replace the default behavior by a handler:
function showHandler() {
if (case1) showTable1();
else if (case2) showTable2();
else showTable3();
}
Is this possible to implement it by adding cookies to the table-plus behavior? is there any better way to do it?

It's generally easiest if you do everything all server-side or all client-side in a Rails or Hobo app.
So either switch to hobo_data_tables and sort on the client side or do the display toggling server side. To do the latter, you can add forms like this:
<form action="">
<input type="hidden" name="search" value="&params[:search]"/>
<input type="hidden" name="sort" value="&params[:sort]"/>
<input type="hidden" name="page" value="&params[:page]"/>
<input type="hidden" name="table" value="2"/>
<submit label="Show page 2"/>
</form>
Then put if statements around each table:
<if test="&params[:table].to_i==2">
<h2> table 2 </h2>
<table-plus .../>
</if>
I also recommend posting to hobo-users -- there's a much more active community there.

How input and remove field with javascript?

i would like to create two buttons, one where the user can press it and then appears a drop drown and a input text field and another to remove this one, if the user wishes.
I already searched it in Google but can't find it.
Best regards,
Valter Henrique.

[working demo here: http://jsfiddle.net/GNnSw/1/][1]
your html
<div id="box" style="display:none;">
<select>
<option value="test">Test</option>
</select>
<input type="text" value="" id="text1" />
<input type="text" value="" id="text2" />
</div>
<input type="button" value="show" id="show" />
<input type="button" value="hide" id="hide" />
in jQuery:
$('#show').live('click', function(){
$('#box').show();
});
$('#hide').live('click', function(){
$('#box').hide();
});
http://jsfiddle.net/GNnSw/4/

using jquery it would take something like:
<button onclick="$('form').show();">press it</button>
<form>
//input elements
</form>
Search harder in google btw.

Do it with jQuery.
HTML
<button id="buttonid" value="Click on me!">
jQuery
$("#buttonid").click(function(){
var $input = '<input id="inputid" type="text" value="value">';
// make the input field
var $select = '<select id="selectid"></select>';
// make the select
var $opt1 = '<option name="one">one</option>';
var $opt2 = '<option name="two">two</option>';
// make two options
$select.append($opt1).append($opt2);
// append to select the options
$(this).after('<form action="url" method="POST"></form>').append($input).append($select);
// append input and the select after the button
});
Oh yeah. :) Btw you need jquery library.

Create a "placeholder" for your fields:
<div id="placeholder"></div>
Add the buttons / links:
<a onClick="add()">Add Form</a><a onClick="remove()">Remove Form</a>
And this to your javascript-file:
function add() {
document.getElementById('placeholder').innerHTML = "Code for your form...";
}
function remove() {
document.getElementById('placeholder').innerHTML = "";
}

I guess the best way of achieving flexible and user friendly HTML layout it by using external JavaScript library, such as jQuery or mootools. The reason is - in traditional web frameworks after you send HTML content to web browser, server cannot manipulate with it. Also, I guess good principle is to use Java only for serving content, and using client-side framework to do all the magic with User Interface.
Moreover, You will find plenty of examples how to work with those libraries like this one.
If you would really like to stick to plain Java, since you might know anything about JavaScript, I suggest checking out Google Web Toolkit and Vaadin. You can write Java code almost without any restrictions, and it will be "converted" (compiled) to JavaScript automatically. But that decision should be considered deeply, since learning GWT or Vaading might be more time consuming and not always applicable.

Show/hide another input fields using h:selectBooleanCheckbox

I am using JSF2 and Java to build a web application. I want to build a form like the one at the picture below:
When somebody unchecks the checkbox the form should disappear:
Here is an example with gwt.
So far,
I tried some stuff with the <f:ajax> tag and an PropertyActionListener in the managedBean but it didn't work. Can somebody give me an example or at least some hints to accomplish my goal. I would be really thankfull

Use <f:ajax render="idOfPanelContainingInputFields"> in the checkbox and give the component containing the input fields a rendered attribute which depends on the checkbox's state. No need for another JS code clutter.
<h:form>
<fieldset>
<legend>
<h:selectBooleanCheckbox binding="#{showUserInfo}">
<f:ajax render="idOfPanelContainingTextBox" />
</h:selectBooleanCheckbox>
<h:outputText value="User information" />
</legend>
<h:panelGroup id="idOfPanelContainingTextBox" layout="block">
<ui:fragment rendered="#{not empty showUserInfo.value and showUserInfo.value}">
<p>
<h:outputLabel for="firstName" value="First name:" />
<h:inputText id="firstName" value="#{bean.user.firstName}" />
</p>
</ui:fragment>
</h:panelGroup>
</fieldset>
</h:form>
The above example binds the checkbox to the view, you can of course also bind it to a boolean bean property, you can then remove the not empty check from the rendered attribute.
<h:selectBooleanCheckbox value="#{bean.showUserInfo}">
...
<ui:fragment rendered="#{bean.showUserInfo}">
See also:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?

As suggested by amorfis, the idea of using Ajax here is not the best solution, as you will do a call to your server for a client-side manipulation.
The best solution is to use Javascript to hide your component(s). For example, if all your labels and input texts are nested in a <h:panelGrid> component, you can do that:
<script type="text/javascript">
function hideOrShow(show) {
// Get the panel using its ID
var obj = document.getElementById("myForm:myPanel");
if (show) {
obj.style.display = "block";
} else {
obj.style.display = "none";
}
}
</script>
<h:form id="myForm">
<h:selectBooleanCheckbox id="myCheckbox" onclick="hideOrShow(this.checked);"/>
<h:panelGrid id="myPanel" columns="2">
...
</h:panelGrid>
</h:form>

You could do it by jQuery, or another JavaScript. It is also possible by <f:ajax>, but it connects to the server, which you don't need here.
By jQuery you can just hide the form, not changing the DOM. As far as I understand, it should be enough.
Post some .xhtml if you want more :)