We Keep Coding

Is it possible to share one button click in different forms?

The basic idea is to have a grid where a user double-clicks the row and opens a modal window (Bootstrap panel) with a panel-body section to edit the data, and a panel-footer with a btn-group to "Save", "Cancel", or "Close" with some logic built in to handle the button's state and onclick events accordingly.
Since there will be many grids and many modal windows throughout the project, and although the panel-body section will vary for each one of them, the panel-footer will likely be the same for them all and I would like to use only one panel-footer as a template, but I don't know how to.
At the moment, here is how it works:
In the project, there are two forms: frmCustomer and frmUnit.
frmCustomer panel-footer has buttons #btnSaveCust, #btnCancelCust, and #btnCloseCust.
The jQuery script has events hooked up to each of those IDs and works as expected $(document).on("click", "#btnSaveCust", function () { SaveCust(); });
frmUnit works the same way except with the name changed to #btnSaveUnit and the event changed to #btnSaveUnit and SaveUnti().
Now, if I do a template, the buttons' IDs would change to #btnSave, #btnCancel and #btnClose.
How would I know how to call SaveCust() or SaveUnit()?
UPDATE 1: I just realized that this is not going to work, since we cannot have duplicated id's, the btns in the shared view (template?) must have to be renamed every time they are used in another form

Here's something that should help
Updated fiddle, this one tells you which form the button is in
For the updated fiddle, click on the buttons, which opens the modal. I have a form that is dynamically added to the modal when you click on the button. Then inside the modal, click on the submit button, and it will alert which form you're in. Close out of the modal and try another button and you'll see it alerts with the updated form, and clicking on that submit button tells you which form you clicked on
The idea is, you have one button event handler for a class rather than an id. This will make any button with a certain class behave the same way. Now the next step is the button logic.
If you look at the fiddle, where I handle the .open-button logic, I take the id of the button that was clicked on, append the string -modal to it, and it opens the matching modal. You can replicate this with a form, I believe, and use some sort of name matching the same way.
Also, look at the message that appears when you close the modal, you can use this type of logic to target a form and do form.submit or something similar. This should make all your buttons have only one click event handler and apply to multiple forms/modals
This is better than having the click event handler, and having a bunch of if (something) else if (something) else etc... you just do a quick and easy string manipulation and get the element you want and submit that form.
Let me know if that helps

WatiN clicks the button but nothing happens

I have a textfield and a button on the page:
<textarea class="txCS" id="text-area"></textarea>
<span id="search-button">Search</span>
What I try is simple, write some text in the textfield and click "Search".
browser.TextField("text-area").TypeText("Some Text");
browser.Span("search-button").Click();
TypeText() works, I see my text gets written on the textfield, Click() also works because I see WatiN highlights it when it clicks the button, but nothing happens when it clicks the button.
When I click the button myself still nothing happens, but when I type something in the textfield manually and click Search then everything works, as if the page knows if a human is interacting with the page and allows searching...
I montiored the events fired when I type someting in the textfield and then tried to fire them using WatiN:
searchBox.FireEvent("onmouseover");
searchBox.FireEvent("onmousemove");
searchBox.FireEvent("onmousedown");
searchBox.FireEvent("onfocus");
searchBox.FireEvent("onmouseup");
searchBox.FireEvent("onclick");
searchBox.FireEvent("onkeydown");
searchBox.FireEvent("onkeypress");
searchBox.FireEvent("onkeyup");
searchBox.FireEvent("onchange");
searchBox.FireEvent("onblur");
That didn't work either. Am I doing something wrong here?

Just as a reference for others the problem with your code is that you are trying to click a span instead of a button. Unless you 100% sure that the clickable element is a span you should use the following code with Watin:
browser.Button("search-button").Click();
And that should do the trick

Allow onclick inside an onfocus/onblur show/hide textarea

Sorry for the strange title question.
I am wondering how to do the following:
When a user clicks on the blurred out textarea through onfocus, it will display: block the div around it, displaying a "textarea console" and then a "add step" icon beneath the textarea. If you click out, it will blur the textarea along with two extra items.
However, what I would like to add is, if they click either the "textarea console" or the "add step" icon, the div will not blur out.
Here's what I have so far at jsfiddle.net

I've updated the jsFiddle: HERE
I think it was just a few things wrong...you were on the right track.
$("#textareasteinstruc").focusout(function() {
alert('focusout');
$(".textareaconsole").hide();
$("#addPrepStepButtonicon").hide();
The # was missing from focusout function...and classes/IDs were not referenced properly.
It's working the way you want it now I'm thinking :)
UPDATE: I added the $("#addPrepStepButtonicon").show(); to the click event so the 'submit' button will appear again

Check this one http://jsfiddle.net/wAaDz/13/ . Have made changes.

Unselect a Select Input

I have a "select" input that is programmed to open up a modal box when clicked to get some information before proceeding. That part all works great.
The problem is that once the modal box is up, the select dropdown options are all still visible. I want that select input to go back to being a normal, not clicked on at all, select box.
What javascript or jquery code can I use to make that select dropdown clear away?

I think it is more correct to move handler from click to change. In this case select will be close and keyboard changes also will be processed

Try using this instead:
$('#mySelect').focus(function(event){
event.preventDefault();
// code here
});
If that does't work, try using the preventDefault() with the click event.
The focus will at least allows users navigating fields with the keyboard (tab, etc) instead of the mouse.

Prior to jQuery 1.6
$('#mySelectBox :selected').attr('selected', '');
jQuery 1.6 and higher
$('#mySelectBox :selected').removeProp('selected', '');

I'm not sure that you can do it with standard select tag. Maybe because it still has focus. What I did when I needed a customized select tag is to avoid the select tag completely and use a button which graphically looks like the select button. Look at this page - look at the TAX button and the button to the left of it. There is no select tag, but it works great.

close button in lytebox

Close button is not working in the lyte box,while the link is working but i want button instead of link there by i can easily apply css to my button.
thank u

Your question is hard to understand, but by the sounds of it you want to style the close 'button' with css. You say the link still works, do you mean there is a link with the text 'Close'? If so then there is probably a problem with your image linking. Either way you can still style that link it has the id 'lbClose'.
a#lbClose {
}

You are correct, the lytebox close button is not a real button but a hyperlink. To use a button instead of a link, you would have to change the lytebox code (Which you most certainly can). Or, you could set the close button to not display (there is a property you can set to false in the lytebox.js: this.showClose) and in your iFrame code add a button to do whatever you need it to do.