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
Related
I use 2 ng-click to try to do a toggle effect. first one bind to says a button, the other one used on body tag. I expect when I click the button my stuff shows up and when I click anywhere on the body, my stuff hide.
But angularjs seem unlike jquery.
http://plnkr.co/edit/KG4b9B1gac53a8JkRBvu?p=preview
What is the approach to achieve that?
the poblem here is, that clicking the button also triggers clicking the body. here a plunkr to show what i mean.
you could add your click event to the body after clicking the button.
I have a page where a series of checkboxes are displayed next entries from a database, they each have an onClick event to do an Ajax write of their value to the database.
I want to have a button on the form that toggles all the checkboxes, so I used the following function/jQuery:
function toggle_chk_links(){
$(".chk_user_link").click();
};
It works fine visually, the only problem is that although it triggers the onClick event as required the checkbox is read with it's old value, so the database gets the opposite value to the one required! This is the line reading the checkbox in its' onClick event:
active=Number($("#chk_brandlink"+brand_ID).prop("checked"));
I need users to be able to manually click on each checkbox, as well as toggle them all, ideally using one onClick function call. Any suggestions?
The easiest solution is to handle the onchange event instead of the onclick event.
$(".chk_user_link").change(function() {
// your change handler
});
Example: http://jsfiddle.net/7zHRm/1/
I am trying to rerun a block of javascript when the user clicks on a button. The site was created in a CMS so I do not have access to the button to give it an id. However, in firebug I noticed it has these values ->
<input type="submit" value="Continue">
Is there anyway I can call to this by using the value of 'Continue'?
FYI: the button is coded with php and I want to rerun the following
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function resizePole(){
var ht=($('#LayoutColumn2').height() > $('#LayoutColumn3').height()) ?
$('#LayoutColumn2').height() : $('#LayoutColumn3').height(); $('#lightPole').height(ht); }); </script>
and I am attempting to call this using:
onclick="return resizePole();"
Oh and I know next to nothing about javascript :)
Link to page working on - you may have to create a customer account. Enter some jibberish and I can delete it later
link to site
What the problem is: Ok let me explain what should be happening. I have created a div called 'lightpole' this div contains a background image of a lightpole that is coded with javascript to match the height of the 'content' div when the page loads. On the checkout_express page the creators of the CMS system have created expanding and collapsible divs that guide the user through the checkout process. On the third step 'Shipping Method' the user clicks on the 'Continue' button which expands the 'Order Confirmation Step'. This div causes the 'content' div to be longer than on initial loading but the lightpole was only sized to match the inital height of the content, not the added height of the Order Confirmation Step so it causes the lightpole to be shorter than it actually needs to be.
This will work.
$('[type="submit"][value="Continue"]').click(function () {
{
return resizePole();
});
EDIT
As pointed out in the comments, there is a more concise way to do this. I typically use the method above out of habit (makes it easier to add future logic to the click event).
$('[type="submit"][value="Continue"]').click(resizePole);
EDIT 2
To answer the question in the comments - yes, you can filter by the div ID as well. This will attach to the click event of all submit buttons inside a div with an id of DivIdHere and a value of Continue.
$('#DivIdHere [type="submit"][value="Continue"]').click(resizePole);
EDIT 3
This is a bit dirty, but after looking at your updated requirments, this should do the trick. Basically, it adds the click event to the last submit button on the page that has a value of continue (which appears to be the shipping section based on the link you provided).
$('[type="submit"][value="Continue"]:last').click(resizePole);
I have following structure of web application, for which I'm automating testing:
<em unselectable="on" class="x-btn-split">
<button type="button" class="x-btn-text " id="ext-gen523" title="Add Options">Add</button>
</em>
Both objects has event listeners,added viw JavaScript in some linked js-file (I don't know what file exactly).
After clicking on button "Add" with mouse, calls AJAX function calls and row adding to some table, after clicking on em element, opens application menu.
I try to reproduce clicking on button ADD via VBScript (as I say, I'm automating testing of this application),instead of adding row into table, application menu opening. But I know exactly, that I'm clicking button Add, but not em-element.
PseudoCode, that do so:
set obj = domHelper.GetElementByClassName(container,"x-btn-text","button")
obj.click
Please, let me know If you know reasons for this behavior, because I'm really don't know what to think. (I've tried many different approaches to fix this, but nothing helped)
Thank you!
click, like most events, ‘bubbles’ up through all ancestor elements. When you click the <button>, yes, you're also clicking the <em> that contains it.
If the event handler for the <em> needs to know that the click was directly in the content area of the <em> but not any of its children, it should look at the event.target (srcElement in IE<9) property to check that the click is on itself, or not on the button, before opening a menu. Alternatively, if the button's click handler calls event.stopPropagation() (cancelBubble= true in IE<9), then the event will stop and not pass up any further.
I'm working on the Web GUI of an appliance-like product.
I have an HTML form that works fine: it shows a list of things with checkboxes, the user checks some of them and clicks the "remove" button which submits the form. The server gets the POST, removes the items, and refreshes the page. All fine.
There's a requirement to add an "are you sure?" confirmation to the form. If I add a call to
confirm("are you sure?");
as the onsubmit method in the FORM tag, or the onclick in the submit button tag, it works fine but uses the ugly browser-native confirm dialog.
Elsewhere in the product we have a nice custom CSS-styled confirm dialog I'd like to use, but it works like this: At the appropriate place, you put a call to
myConfirm("Confirm", "Are you sure", "Yes", "No", confirmCallback);
This puts up a clickmask, customizes a dialog, centers and displays it, and then returns FALSE and the form doesn't submit.
Later when the user decides, if they press "Yes", it calls the confirmCallback function. In the other, Ajax based pages of the product this gathers info, creates a postBody and uses Prototype's Ajax object to post it, and all is fine. (If "No", then the dialog and clickmask are removed and things continue.)
On this simpler page, with the pure HTML form, I have a confirmCallback function that looks like this:
var confirmCallback = function() {
document.myForm.submit();
}
and it fires OK, but when the form is submitted, the remove button has ALREADY been clicked, and the false returned by the custom confirm suppressed submission. Instead, this is considered a new submission, and the remove button was not actually clicked, so it is not considered "successful" in terms of W3.org's HTML 4 standard section 17.13.3. The server gets the data, no remove button, says "I got it but I dunno what you want me to do with it" and just does nothing but serve the next page.
If you're read this far, THANK YOU, and here is my actual question. How can I, in my confirmCallback javascript function, in a crossbrowser manner, cause the remove button to fire, become "successful" and submit along with the rest of the data?
Sounds like you're gonna need a hidden field to pretend to be the pressed button, and each button will require no name, but instead an onclick event to manipulate the value of the hidden field.
If the name of the buttons are all different, you might need to use DOM methods to add the hidden field because I don't think you can change the name of a field once it has been added to the DOM in all browsers.
If you require this solution to still work without JS, then you may need play around with the JS logic a little more (to do more modifications to your initial DOM tree) or modify the server code. You could even put the "Are you sure" behaviour into the response then...
Assuming that the remove button is the submit button for that form then probably the easiest solution is to give the form an id
<form id="submitForm"...
Then in your confirm call the form submit
document.getElementById("submitForm").submit()
I think that will do what you're asking but it seems like you were pretty much at that solution already so if you're asking something else let me know.
In your callback, remove the onclick handler for the button (causing the confirmation), then trigger a click on the button. This will cause the button click to submit the form and result in the button causing the submit to be posted back along with the form data.
var confirmCallback = function() {
$('submitButton').stopObserving('click');
$('submitButton').click();
}