I am using knockout js and bootstrap. I have a list of users with a delete button on each row.
I also have a bootstrap modal dialog that has a confirmation message whether to delete the user or not.
I have a click binding on the delete button that can remove the user from the model. How do i change it so that the deletion happens after the user has confirmed.
I have searched several examples and they all suggest to use custom bindings, and the closest i found was this fiddle example
http://jsfiddle.net/snaptopixel/vDZQk/
The one problem with this example is, it uses a pre-defined item from the model in the modal popup, what i want is to automatically bind the item that was deleted by the user and show the user name and other properties in the modal window and ask for confirmation.
Here is my modal dialog
<div class="modal-body">
<div class="well">
<p>By clicking 'Yes', you will remove the User 'foo' from the system. This action cannot be undone. To cancel this action, click 'No'. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
For example...
The modal window will say "Are you sure you want to delete User 'foo'? I would like to have access to the selected User inside the modal window.
Thanks for your help
Set a click binding on the 'Yes' button to the function that actually does the deletion, and set the click binding on the delete button to a function that displays the modal. You'll probably want that function to store the current item in an observable (itemToDelete or something like that) so that the actual delete function knows what to delete.
Related
I have a Bootstrap modal with this button
<button class="btn btn-primary" type="button" id="send" data-btn-action="send">Send</button>
On the main page, where the modal is, I have the same button as above but with a submit type. So, on click of the modal's button, it triggers the button on the page. It works fine, but the data attribute is NULL if it's triggered from the modal but if I click on it directly, I get the data attribute value
My JS
let actionBtn = $("#send").attr('data-btn-action');
Thank you.
Hello Stackoverflow community,
Is there any way to automatically click a "Submit" type button once a type "Button" is clicked?
Example:
Using:
-Wordpress
-Woocommerce
-WHMCA (for custom forms)
-Html/Javascript
I am retrieving a product from the backend once the customer clicks on our custom Add to cart button but also need the product information from the current page the customer is making the purchase on. Because they are two different types of button thought the best way was to trigger Button 2 automatically once button one is clicked. Please need help in this one :)
Button to be clicked by user:
<button type="button" onclick="window.location.href='https://example.com/?add-to-cart=375'">Buton 1</button>
Button to be automatically clicked after Button 1 is clicked.
<form>
<button type="submit" name="add-to-cart" value="363" class="1">Button 2</button>
</form>
Look forward for your advice!
Best regards,
Jaso
p.s. If there is a way to have both types inside one button, that would work to! Thank you!
Both types inside one button I can think of appending both values (375 and 363) to the first button like in:
<button type="button" onclick="window.location.href='https://example.com/?add-to-cart1=375&add-to-cart2=363'">Buton 1</button>
This question is more a logic or best practice question than a technical one.
I have a form creator/render where certain admin users can design a form, and other general users can then use these already created a defined forms to request stuff.
On the general edit section of the form designer, user can move a component up, down, edit or delete it. For the deletion, I am looking for getting confirmation before actual deletion, so the way I could make it works is pretty much like this:
When the user click the delete button, a hidden html is displayed that request confirmation
$scope.clickDeleteButton = function ( index ) {
// log only for reference. Need to be removed
console.log('Delete button pressed');
deletion = true;
};
because var deletion is true this is confirmation is displayed
<div ng-show="confirmDeletion()" class="alert alert-danger" role="alert">
Please confirm that you want to delete the component
<button class="btn btn-sm btn-default pull-right" ng-click="deletionConfirmed($parent.$index)">Confirm</button>
<button class="btn btn-sm btn-default pull-right" ng-click="deletionCancelled()">Cancel</button>
</div>
And when the confirmation requested is accepted, then I process the deletion.
$scope.deletionConfirmed = function ( index ) {
//call deletion method in currentForm
console.log('Delete item with index: ', index);
FormServ.currentFormData.deleteItem(index);
};
This do the trick, but I dont feel it right. How is it done in real projects? Remember, I am already working on a modal so as far as I understand you cannot open a second modal.
I want to use bootstrap modal in my page. At the same time, when modal trigger button is clicked, I want to do something in javascript also. It's not working.
<button type="button" class="btn btn-primary center-block" id="start_quiz" data-toggle="modal" data-target="#myModal">
Start Quiz
</button>
The button on clicking lauches modal but unable to call:
$('#start_quiz').click(function(){
alert("hello from javascript");
});
How can I achieve both results at the same time? Please help me.
Remove the data-toggle="modal" data-target="#myModal" attributes from the button, so that it doesn't open the modal.
Then check that the "hello from javascript" displays - it should do.
Then open the modal from javascript code instead, add this line below your alert:
$('#myModal').modal('show')
This should now make the alert, then show the modal. You can always reverse the two if you want the modal shown first.
Second option, hook into the shown method and write your javascript there:
$('#myModal').on('shown.bs.modal', function () {
// alert here
})
Suppose a form has multiple submit buttons:
...
<button type="submit" value="deletefoo">Delete Foo</button>
<button type="submit" value="deletebar">Delete Bar</button>
<button type="submit" value="Edit">Edit</button>
...
I am intercepting the clicks for only the 2 delete buttons and disabling the form submit to trigger a custom modal dialog which has OK and CANCEL buttons on it to confirm user choice. If user presses OK, I want to submit the form. If cancel, then dialog dismissed and nothing happens.
I have the first part wired up to trigger the dialog but I am at a loss on how to get the OK button in the dialog to trigger the form submit contingent on which original submit button was pressed (e.g. if Delete button pressed, I want to confirm with user they want to delete, then if so, submit the form as normal.
I've searched around and look at jQuery docs but haven't found the answer yet so I must be missing something really straightforward.
Update: I don't want to use JS confirm function. In my original question above I'm looking to use a custom modal dialog for various reasons.
Check out the JS confirm function and put it as an onclick event.
You have a nice example here.
Why not have them be regular buttons and then onclick set a variable to determine the action type and then when the form submits include this hidden variable and check that to find what you're supposed to do
First, you'd have to intercept both (all) the buttons, you could do this easily by fetching any of the submit buttons within a specific form, then you can ask your question and given you still have the current event handler, you can figure out what button was pressed and do the callback you'd like. For example:
<form id="myform">
<button type="submit" value="delete">Delete</button>
<button type="submit" value="Edit">Edit</button>
</form>
--
$(function() {
$("form#myform button[type='submit']").click(function(ev) {
ev.preventDefault();
if (confirm("you sure")) {
var action = $(ev.currentTarget).val();
console.log(action);
}
});
});
JSLint is here: http://jsfiddle.net/r48Cb/
Basically, console.log(action) will output either "delete" or "Edit" based on the original click. How you handle that value is up to you. A switch statement, a simple if block could work, but it's up to you, I don't know the scope of your app.
The window.confirm function returns a true if the user selects okay and a false if the user cancels. Using this logic you could do something like this:
<button id="delete" type="submit" value="delete">Delete</button>
<button type="submit" value="Edit">Edit</button>
var question;
$("#delete").click(function(){question=window.confirm("Are you sure?");)
if (question){
//Submit the form here
}
else{
alert("Not deleted!");
}
I think you are making it too complex, you can do something as simple as:
<form >
<input name="foo" value="foo">
<button name="sub0" value="sub0" onclick="
return window.confirm('sure?');
">submit 0</button>
<button name="sub1" value="sub1" onclick="
return window.confirm('sure?');
">submit 1</button>
</form>
If the user clicks OK on the confirm dialog, the form submits from whichever button was pressed. If not, it doesn't.
My 2c:
... (edited: removed the value parameter. buttons don't need that)
<button onclick='deleteFoo(); ' >Delete Foo</button>
<button onclick='deleteBar(); ' >Delete Bar</button>
<button onclick='allowEdit(); ' >Edit</button>
...
function deleteFoo() {
do-your-modal-whichever-way-you-want;
if confirmed,
$('#form-id').attr('action','your-action-for-delete-foo');
$('#form-id').submit();
else-just-return
}
function deleteBar() {
do-your-modal-whichever-way-you-want;
if confirmed,
$('#form-id').attr('action','your-action-for-delete-bar');
$('#form-id').submit();
else-just-return
}
function allowEdit() {
whatever
}