We Keep Coding

How to take identificator from html button

I have that form in index.html
<form action="Servlet">
<p>Type text:<br><textarea cols="100" rows="10" name=encipher></textarea></p>
<input type="submit" value="Encipher" name=encipherSubmit id="a"/>
<input type="submit" value="Decipher" name=decipherSubmit id="b"/>
</form>
And i dont't know how to get some identificator from buttons. I need to execute encipher method when 1st button pushed and decipher method when 2nd button pushed.
For textarea in Servlet.java i have code:
String encipher = req.getParameter("encipher");
And how to take parameter from buttons ?

Every input is sent using the name that you gave it. Your submit buttons have names. So, if you click the "Encipher" button, you will have a parameter called encipherSubmit whose value is Encipher. If you clicked the "Decipher" button, you'll have a parameter called decipherSubmit whose value is Decipher.
It's just as if these were text fields, but the good thing is that only the button which you actually used for submission will be sent.
So you can do something like:
String encipherButton = req.getParameter("encipherSubmit");
String decipherButton = req.getParameter("decipherSubmit");
if ( encipherButton != null && encipherButton.equals("Encipher") ) {
// Do encipher operation
} else if ( decipherButton != null && decipherButton.equals("Decipher") ) {
// Do decipher operation
} else {
// Form was submitted without using the buttons.
// Decide what you want to do in this case.
}
In fact, in most cases, just checking encipherButton != null and decipherButton != null is sufficient.

Well you can't know which button you click this way, because buttons just do the form submit. Actually servlet can process any header or data you send via HTTP, but button name is not send.
Alternatively you can write a javascript onclick event handler for each button and then send the submit programmaticly with additional parameter - the button clicked.

how to clear the <select> tag before filling the another value through <option> tag

On clicking these radio button it just call servlet and fill the Dropdown list to its content.
but the problem is on clicking the 1st time it is filling as expected but if I click againg the radio button then it again call the servlet and fill the same thing again(for eg. in the dropdown list matrix and matrix two times).
Q1 : How do i prevent this to fill the same thing again ????
second thing is, after clicking the 1st radio button it will fill the dropdown let suppose "matrix" value and then if click the another radio button the it will fill the another value let suppose "jack" (as expected) but the problem is,
In the dropdown list both the value is contained "matrix" and "jack" but I just want if I click 1st radio button then it fill only "matrix" and again if I click 2nd radio button the it fill only "jack" the 1st radio button's value should be removed before filling the another radio button's value Q2: how to do this ??
jsp page:-
<b>Select Language :</b>
<input type="radio" onclick="callServlet();" id="lang1" name="lang" value="c">C
<input type="radio" onclick="callServlet();" id="lang2" name="lang" value="cpp">C++
<input type="radio" onclick="callServlet();" id="lang3" name="lang" value="java">Java
<b>Select Program :</b>
<select id="combo">
<option>-Select Program-</option>
</select>
Here is my java script function which will called on clicking the radio button function:-
<script>
function callServlet()
{
var d;
$(function() {
d = $('input[name=lang]:checked').val();
});
console.log("value = " + d);
$.ajax({
url: "AllProgramNameServlet",
type: "post",
data: {
language: d
},
success: function(msg)
{
for (i = 0; i < msg.length; i++)
{
var combo = document.getElementById("combo");
var option = document.createElement("option");
option.text = msg[i].programName;
option.value = msg[i].programName;
try {
combo.add(option, null); //Standard
} catch (error) {
combo.add(option); // IE only
}
}
}
});
}
</script>

You can first clear the dropdownlist before appending options using:
$('#combo').empty(); //empty the list
or for keeping first option and removing rest using:
$('#combo option:gt(0)').remove();

Show image when button is clicked

I have this div:
<div id="flaw">
<img id='flaw1' src='images\flaw1.png'>
<img id='flaw2' src='images\flaw2.png'>
<img id='flaw3' src='images\flaw3.png'>
<img id='flaw4' src='images\flaw4.png'>
<img id='flaw5' src='images\flaw5.png'>
<img id='flaw6' src='images\flaw6.png'>
<img id='flaw7' src='images\flaw7.png'>
<img id='flaw8' src='images\flaw8.png'>
<img id='flaw9' src='images\flaw9.png'>
</div>
I'm trying to make 3 buttons. Every time 1 random button should be good. the other 2 bad buttons should make 1 of the images appear.
If you click the wrong button 9 times, all images will be visible and you would lose the game.
First I tried putting all images in an array, but I kept failing...
Eventually I ended up with this;
$(document).ready(function () {
var buttons = $("#buttons img");
var flaw = $("#flaw img");
window.onload = function () {
flaw.hide();
};
buttons.on('click', function () {
$("#flaw1").show();
})
});
All it has to do now is show the first image when someone clicks a button.
And show the next image when someone clicks it again and again and again.
Until all 9 images are visible.
But I could figure out how to loop through the images on every click.
Can anyone help me?

you can do something like this
var flaws = $("#flaw img");
buttons.on('click', function () {
flaws.each(function(){
if ( ($(this).is(":hidden") ){
$(this).show();
break;
}
});
})
For further refernces check
http://api.jquery.com/hidden-selector/
http://api.jquery.com/each/

Richfaces 3.3 extendedDataTable onRowClick is setting data from previous row click

I have this datatable with an a4j:support tag so taht when someone clicks on a row, i want to display or hide certain buttons based on the status of the row selected.
The problem is that the data in my backing bean is always one click behind.
<rich:extendedDataTable
id="formSummaryTableId"
var="dataSummary"
value="#{FormSearch.summaries}"
binding="#{FormBacking.table}"
selection="#{FormSearch.selection}"
rowKeyVar="rkv"
frozenColCount="0"
sortMode="single" height="500px" width="795px"
cellpadding="0" cellspacing="0" border="0" rowClasses="even, odd"
selectedClass="itemSelected">
<a4j:support event="onRowClick" actionListener="#{FormBacking.onClickForm}"
reRender="DesignerForm:formEditToolbar" />
....
FormBacking.onClickForm
public void onClickForm(ActionEvent e)
{
Iterator<Object> selectionKeys = getFormSearch().getSelection().getKeys();
LOG.info("selectionKeys = "+selectionKeys.hasNext());
if (selectionKeys.hasNext())
{
LOG.info("selectionKeys.next()");
Integer lookupKey = (Integer) selectionKeys.next();
LOG.info("lookupKey = "+lookupKey);
} else {
LOG.info("THERE is no keys");
}
}
EDIT
I've figured out that for some reason, when i click a row, it's not getting set correctly. It's like it's 1 step behind my clicks. For example if i click row 1 of my datatable, my method gets into "THERE is no keys", but if i click row 2 now, my method has the keys for the first row I clicked.
Why is it 1 click behind?

Use onselectionchange event:
<a4j:support event="onselectionchange" ...
I guess the problem with onRowClick is that it gets fired before selection change happen, so it submits previous selection value.

How to change table background depending on database textareas 'height'?

Is it possible to get the height of a 'text' field from mysql?
Or the number of linebreaks would also work!
I have a table which fetches the 'text' field from my mysql database.
The background image of the table is sort of a container...
I want the background to change to another (taller) background if the text is vertically high!
Possible, if so how?
Thanks
UPDATE: I am not going to use word wrapping...

In your query you can count how many instances of '\n' are found. You can do this in javascript or php as well. This wouldn't be totally accurate though if you're word wrapping.
How to do it with php
Alternatively... to grab the height with javascript:
document.getElementById('mytable').clientHeight;

Very difficult, as you're never going to be able to predict font size with 100% certainty (Users could have enlarged text in their browser, for instance, or be using a different font).
If you want to make 100% sure, you would need to use Javascript to measure the actual size.
Otherwise, for most cases, as #Chris Klepeis says, counting the line breaks should work.

I think this will be help but i used textarea here and i test it will be working fine u just need apply it on table.
<textarea data-adaptheight rows="3" cols="40" placeholder="Your input" style="padding: 16px; line-height: 1.5;"></textarea>
<script>
(function() {
function adjustHeight(textareaElement, minHeight) {
// compute the height difference which is caused by border and outline
var outerHeight = parseInt(window.getComputedStyle(el).height, 10);
var diff = outerHeight - el.clientHeight;
el.style.height = 0;
el.style.height = Math.max(minHeight, el.scrollHeight + diff) + 'px';
}
var textAreas = [].slice.call(document.querySelectorAll('textarea[data-adaptheight]'));
textAreas.forEach(function(el) {
el.style.boxSizing = el.style.mozBoxSizing = 'border-box';
el.style.overflowY = 'hidden';
var minHeight = el.scrollHeight;
el.addEventListener('input', function() {
adjustHeight(el, minHeight);
});
window.addEventListener('resize', function() {
adjustHeight(el, minHeight);
});
adjustHeight(el, minHeight);
});
}());
</script>