Here is my what I have
<div id=A></div>
<div id=B></div>
<input type="button" value="ChangeA" onClick="createTableA();">
<input type="button" value="ChangeB" onClick="createTableB();">
So in my jsp file, I use javascript and jQuery to manipulate the content of those two div dynamically. For example, if I click on changeA, the function createTableA() will dynamically manipulate <div id=A></div> and append a table to it. So my question is if I click on changeA, then click changeB, how can I manipulate the history so that if I click the back button, I go back to the content of Table A
I've been using the jQuery History plugin for just this sort of thing and it's been working pretty well for me.
Each "page" is referenced by a hash in your URL. That way "changing pages" doesn't refresh the page, but does store the page state in history and allow for bookmarking.
EDIT
I'll expand on the example given in the link to apply more for your situation.
function loadTable(hash)
{
if(hash == "ChangeA")
createTableA();
if(hash == "ChangeB")
createTableB();
}
$(document).ready(function() {
$.history.init(loadTable);
$("input[id^='Change']").click(function(){
$.history.load(this.attr('value'));
return false;
});
});
What the above code does is sets an event handler on all input tags whose id begins with 'Change' so that when those buttons are clicked, loadTable is called. If you change your buttons to look like this:
<input type="button" id="ChangeA" value="ChangeA">
<input type="button" id="ChangeB" value="ChangeB">
clicking button A will put this http://www.example.com/yourpage.html#ChangeA in the address bar and load table A, also adding that table change to the browser history.
The native 'location' object has a 'hash' property that you could use for navigation in AJAX/JS applications.
You could use History plugin or Address plugin.
Address plugin gives more flexibility and recommended for more complex apps.
You should check out Ben Alman's Back Button and Query Library Great api for mucking with the browser history and has some great examples to get you started.
YUI also has a browser history manager: YUI3: http://developer.yahoo.com/yui/3/history/ or YUI 2: http://developer.yahoo.com/yui/history/
Related
I am trying to click on some button (which becomes enabled after all of the fields are fill in):
<div class="savCancelContainer">
<input type="button"
value="Save"
translatekey="ACTVITY_DETAILS_SAVE_BUTTON"
class="translate" id="submitActivityDetails"
style="background-color: rgb(0, 125, 195);">
The programmers of the web-page have changed it for some reason, and now my code is no longer working correctly (the button doesn't get clicked on):
driver.findElement(By.id("submitActivityDetails")).click();
I also tried finding it by xpath, with no success.
Is there any way to click the button using the Id and Value attributes together?
Any other ideas?
Similar pages and dialogs are still working fine...
You need to create a xpath which will contain both the attribute:
//input[#id='submitActivityDetails'][#value='Save']
And Click event can be triggered in the following way:
driver.findElement(By.xpath("//input[#id='submitActivityDetails'][#value='Save']")).click();
Lemme know if it helps!
Additionally you can use css seelctor to perform that action too.
[id='submitActivityDetails'][value='Save']
I have a apache click page having a form table with action links and a checkbox. Table also have paginator. once user select some entries from table by selecting checkboxes he can perform operations by selecting submit button on form. But checkboxes are not preserving their state when user move from one table page to other. I tried saving selected entries in static arraylist but it is not getting populated.
Click is a stateless framework. Quoting the documentation:
Control state is not saved and restored automatically by Click.
Instead, state saving and restoring is under full control of the
developer through a public API.
As you can see from the Stateful interface's doc, several controls implements that contract and using the "Search Table Page" example as a reference you can implement your use case.
Hth,
Gilberto
Try following steps:
1. make a hidden field on java page. add it to the form.
2. onclick of every checkbox set the value of hiddenfield using javascript function.
3. add dummy form to you htm page with dummy hidden submit. like
<form name="dummyForm" action="" method="POST" >
<input type="hidden" name="dummyHiddenCBSelected" value="" />
</form>
4. on java page table paging link call the javascript function to submit the above dummy form.
eg:
table.getControlLink().setAttribute("onclick", "tableAction(this); return false;");
and javascript function like:
function tableAction(_anchorObj) {
var linkHref;
linkHref = _anchorObj.getAttribute("href");
//Set the value in hidden field
var hiddenCBSelected = document.getElementById('your hiddenfield');
document.getElementsByName("dummyHiddenCBSelected")[0].value = hiddenCBSelected.value;
//Set the form href and submit form
document.getElementsByName('dummyForm')[0].action = linkHref;
document.getElementsByName('dummyForm')[0].submit();
}
i have a question about using request.getParameter(), i knew that it can use to post the value using request.getParameter, Is it necessary match request.getParameter and <input>???
My original code in HTML:
<INPUT type=submit name="submit" value="download">
In JSP:
String start = request.getParameter("submit");
Now I want to change a button and use div
div name="submit"id="submit" class="btnStyleFunc"
onclick="document.body.style.cursor='wait';this.disabled='true';
document.getElementById('form').submit();">
But it doesn't work, anyone can help me ?
Now i use the method below, but another problem is raised...the action does not stop...
String start = request.getParameter("submit1");
<input type=hidden name=submit1 value=download>
<div class="btnStyleFunc" onclick="document.body.style.cursor='wait';
this.disabled='true';document.getElementById('form').submit();">
Does anyone know what the problem is ?
A clicked submit button is a successful form control and its name/value pair will be submitted to the server in the form data.
If you submit a form with JavaScript, there is no clicked submit button, so it won't appear in the data. A div cannot have a name and is not a form control anyway — it isn't a submit button, even if it triggers JavaScript that submits the form.
Using a div with JavaScript also breaks the form for:
Anyone not using a mouse/trackpad/etc to navigate the page (a div won't get the focus when tabbing through interactive elements)
Anyone with JavaScript disabled
Anyone using a screen reader in forms mode (div elements are not form controls).
Use a real submit button instead.
I am trying to use ace:fileEntry component to upload images to my database but now, I want to change the name of the button "Browse" in my case "Seleccionar archivo" but I don't know where that name is stored.
<ace:fileEntry id="ImageFileEntry"
fileEntryListener="#{usuarioBean.sampleListener}"
useSessionSubdir="true">
</ace:fileEntry>
<h:commandButton id="submit" value="subir"></h:commandButton>
I attached a screenshot
http://i.stack.imgur.com/8b817.png
thanks
The ace:fileEntry will render an <input type="file"> element, the text on this button is always defined by your browser/the language of your browser. It is not possible to change it, have a look at this post for more information and some workarounds: Change default text in input type="file"?
I have a register form in which i want when the user selects an item from a first Select to create dynamically a second select with items from the database which are compatible with first selection.
For example i have 2 select Lists the first with Lessons and the second with professors.When i select from the first Select a lesson the Second Select Lists must have only professors of this lesson.
I am using jsp,java and i want to avoid ajax is this possible?
Thank you!
Yes it's possible.
However without AJAX, you would have to load all of the data with the page. That means storing the list of professors associated with each lesson in either a Javascript array or in a hidden HTML element from which you can retrieve the data later on.
You may avoid ajax by using one of those solutions:
Load all the professors of all the lessons when displaying the form, and store them in some JavaScript structure. When the selection of lesson changes, get the associated professors from this JavaScript structure. This might mean loading too much data at once, though
When the lessons selection changes, submit the form and redisplay it with the select box of professors populated.
Both of the solutions need JavaScript, and I really don't see what you gain by not using AJAX, though.
You might avoid JavaSCript completely with the second solution, but the user would have to click a submit button to load the second form.
Yes it is possible,
create two select boxes with the professor and lessons list and hide them by default. So attach event "onchange" on your first select box, when professors are selected show list with professors, when Lessons are selected show list with Lessons and hide Professors. e.g.
<select id="cbOne" onchange="show(this);">
<option value="0">Select</option>
<option value="1">Professors</option>
<option value="2">Lessons</option>
</select>
<select id="cbLessons" style="display: none;">
... your list
</select>
<select id="cbProfessors" style="display: none;">
... your list
</select>
This is method for JavaScript show
<script language="javascript">
function show(el)
{
var professors = document.getElementById('cbProfessors');
var lesssons = document.getElementById('cbLessons');
if(el.value == "0")
{
professors.style.display = 'none';
lessons.style.display = 'none';
}
else if(el.value == "1")
{
professors.style.display = '';
lessons.style.display = 'none';
}
else if(el.value == "2")
{
professors.style.display = 'none';
lessons.style.display = '';
}
}
</script>
I hope that this will help you.