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

OnClick event triggering javascript function only after clicking twice

I'm fairly new to this web-programming thing, and I'm having some trouble with an onclick event. I don't even know if using "onclick()" is the best thing to do, but it has been working so far for me.
At this moment, I have a page with a div in which I load another page. This content varies depending on hash changed when I select options from a toolbar, using this piece of js
function loadcontent(toload){
$('#browsediv').load("content/addimagecontent.php?"+toload);
}
Every js function is called from the main page, not the content one.
Now, my problem is that, in the loaded content, I have several pages of results, and I have a div with the word Next printed into it, and an onclick event that should make the page change its page attribute:
echo "<div onClick='loadcontent(\"page=".$nextpage."\")'>Next</div>";
I also have the same thing to lead you to the previous page.
Once I go to the page, I see everything as should, but if I click either on "Next" or "Previous", it doesn't do anything the first time.
Any subsequent times I click on any of those, it works perfectly, even if the first thing I click is Next and then I click Previous or viceversa.
I've been looking around but no-one seems to have answered anything that adjusts to my issue, if someone has, please forgive me, as English is not my mother tongue and I sometimes don't know the best way to look for something.
Thanks for reading :)

Instead of adding an onclick, add an id attribute. Then with jquery you can do something like this:
<div id="yourDiv">Next</div>
$("#yourDiv").click(function() {
loadcontent(toload)
})
I'm not quite sure if this is "legal" but you can add the $nextPage variable as an attribute too.
<div id="yourDiv" data-page="<?php echo $nextPage;?>">Next</div>
Then you would use the following
$("#yourDiv").click(function() {
var page = $(this).attr('data-page');
loadcontent(page);
})

Passing a model to an added to DOM popup window in Grails

Here is the problem:
I have a page e.g www.app.com/home and I have some windows that are added in a slide way to the DOM via jquery. One of those windows has the functionality of looking into a gmail account for contacts.
This is done in this way:
User is in the home page.
Clicks the search Friends button, and a window with many options
slides in (added by jquery, rthe content is in another .gsp)
Clicks the option gmail and it redirects to googles oauth,
permissions and account selection, where he must accept the access
to his/her contact list.
Once accepted, it redirects to my home page again, where I have a
var to know if its the callback from google, so I ran the script
that shows the popup again.
The problem Im having, is that from the home page itself, I can access the model passed by the controller that has the ${friendList}, but when I add some code to the popup window, the ${friendList} is not detected.

I have used grails render templates to solve this problem in the past. You can have a hidden div that jquery unhides when it is popped up. e.g
<div id="theSlideWindow" style="display:none">
<g:render template="gsptemplate" collection="${friendList}" var="myfriend" />
</div>
Now when the button is clicked, jquery will unhide the div and animate it however you are animating it. Now this is not very efficient depending on the size of friendList because it is loaded with every refresh.
But you can still make jquery load work by doing the following:
add user id to a hidden input.
<input type="hidden" value="${userid}"/>
use jquery so send the id as a param:
$('button').click(function() {
var page = "gspurl/show?userid=" + $("#hidden").val();
$("div").load(page, function(response, status, xhr) {
//do something here
});
return false;
});
In your gsp use userid to load friendList.
Another alternative would be to use a controller that returns html or json instead of a gsp.
Obviously, there several different ways of passing friendList around but hope this gives you some ideas.

divs hide correctly on page load, but need to show when back button is clicked

I have several divs that are to be hidden on page load on a html form I am designing. Some contain text fields, some contain dropdown boxes. The are shown based on when certain radio buttons are clicked in the form. I am using javascript to hide the divs. Here is the code I am using:
<script language="JavaScript">
function start() {
hide('hideablearea');
hide('nontenant');
hide('conftype');
hide('rec_roomlayout');
hide('req_roomlabel');
hide('req_roomdrpdwn');
}
window.onload = start;
</script>
It works perfectly. My problem is...when the form is submitted and there is an error (for example, the user forgets to complete a required field) and clicks the back button, this function fires again and hides everything..and I want the hidden divs which have info inthem to show at this point. Any idea on how to achieve this?
Thanks in advance!
K

You might want to re-think your design if once you display an error message, the user needs to click Back to go to the previous page and correct the information. The previous page will have no concept of the error message. I can see two ways to correct this.
1) Do all error checking in JavaScript
If you implement your error handling in script, you can immediately inform users of errors and missing information before the page is submitted. You would then only submit the form if everything checks out.
2) Re-display the form on post back
When the user submits the form, you'd do required error checking on the server. You would then re-render the form again, with all the user-entered information, and display error messages. On this page, you'd write something like:
<script>var hasErrors = true;</script>
If the page has errors, your client side script could avoid hiding the relevant information. No-where in this model does the user need to click the Back button to correct their mistakes.

You can put id attribute to your divs and then control if your div has a message to show then you didn't hide them.
Like this:
<script type="text/javascript">
function start() {
if (document.getElementById('hideablearea') == "") {
hide('hideablearea');
}
...
}
</script>

Get Element in div with JavaScript

I want to disable/enable a button with JavaScript. Because the JavaScript is called, after a Flash animation is rendered, the button exists at the time of the execution.
The button is in a hierarchy:
<html><body><form#form1><div#control><asp:Button#Export1>
I tried for hours to get a reference to that button, but nothing seems to work:
document.getElementById("Export1")
// and
document.getElementbyId("form1").getElementById("control").getElementById("Export1")
// and many more
How to get a reference to that button (in order to change btnref.disabled = true)?
Thanks a lot for your help!

Have you tried right-clicking in the document and selecting "view source" to see how that code actually renders? An asp:Button is a server control, that gets translated to an input field during render. During this, the ID of the field will not be exactly what you set it to in your aspx.
You can use Export1.ClientID at serverside to get the ID of the control.

If it's the only button in your div, this should work:
var btnref = document.getElementById("controls").getElementsByTagName("button")[0];

Usually the id of the button won't stay the same in the page source. Click on view source in the HTML and look for that tag to find the new id. You can then use that id in something like:
document.getElementbyId("Export1_some_unique_id")...