I'm looking for a simple way to confirm a delete of an item (I'm using Laravel 5.3)
I have this code:
<span class="glyphicon glyphicon-trash"></span>
So when clicking on the link, I call the route deleteProduct/{id}. But what I want is, that when clicking on the link, there is a prompt, saying something like sure to delete? yes/no. Only when clicking yes, this route is called then.
I tried it with a bootstrap modal and in general it worked, but I had problems with the $product, actually $product is an item in a foreach, so around the <a>-tag, there is a #foreach($products as $product). That's why the modal didn't work, because it got somehow messed up with this foreach (actually $product always held the last "product", because i defined it after the foreach).
Is there a easy to achieve what I want? Alternatively I could create a modal for every product, but there could be up to thousands of those, so this would be nonsense. So whats the better way?
Edit: The normal javascript function confirm() would work, but thats a little "too basic", so I want something that fits in the design, so something with bootstrap would be nice, or anything thats not a alert dialog with two buttons. The functionality of confirm is the one that I want. But also, confirm provides the buttons in english, I may want to customize those to be used in more then one language.
I have achieved a pretty great results with SweetAlert plugin. There is actually an example of a delete with ajax. Check it out!
Related
Ive been stuck on this for a while now.
I have an API of a LIST that I want to display, each one of the objects on the list needs to be cliackable and a MODAL should appear with the LIST OBJECTS info ''pokemon height'', 'pokemon name'' and ''pokemon type''. The MODAL should also be CLOSED when clicking ESC or outside of the MODAL.
The thing is, I believe I added all the codes correctly but everytime I find an error, or the list simply disappears. I fix an error and another one appears, when there is no errors it simply just doesn't work. I am sorry if that is a rather simple thing to do but I am brand-new to programming and I am trying to learn.
It just seems that everytime I ''correct'' something, I get further away from the correct way of doing it. PLEASE if somebody could take a look in what I've done and give me some tips or point what should be done here. THANKS
HERE IS THE LINK TO MY "PROJECT":
added functions to loadDetails, loadList, addListItem (it worked)
then by adding the MODAl, CLOSE MODAL, HIDE MODAL, it just doesnt answer accordingly
I have a toggle switch. when i turn it off and based on a variable, a pop up modal will be displayed asking to confirm the turn off. if user clicks on turn off button , only then the toggle should turn off. if user clicks on cancel button in the modal, then the toggle should not turn off , it should be in on state only. I found solutions for this problem using jQuery. but I don't want to use jQuery. so please give solutions in angular, typescript, bootstrap. I'm new to angular. hence it would be more understandable if you could explain the solution. thanks in advance.
Have you got the modal working yet? I assume you're using event AND two way binding on the toggel to listed for changs. You should be able to pass data back from the modal - perhaps a boolean, then you can set the toggle's value based what was passed back from the modal.
I building a threaded comment system (Reddit-like) in Django 3.0
A comment can have as many replies as possible.
For each comment made, a Reply form is shown below it.
Now, if I don't hide the forms, the page looks very bad, cluttered with textareas.
I need the following:
A 'Reply' button, clicking which the reply form can be displayed/hidden.
Here's what I have tried:
Added a class .replyForm to the forms.
Added a class .hideBtn to the hide Buttons.
Used JQuery:
$(".hideBtn").click(function(){
$(".replyForm").toggle();
});
Now, this works fine, but clicking a reply button opens up all the forms at the same time.
This is expected as the class belonging to each form is the same.
Using Django's template tags I managed to make the id of each form and button unique.
Example: id = "replyForm{{comment.id}}" which renders as replyForm123 if comment.id = 123
But I am not able to use this in any productive way.
I can't access the id outside the for loop (which displays the comments).
I tried adding the JQuery script inside the loop, and created 2 variable, one for the id for the button, and other for the form's id.
But as the loop executes, the variables change accordingly, and finally they store the id's of the last comment only, rendering all the other toggle buttons useless.
I feel that I am complicating things way too much, I am very new to JS and JQuery, and I'am only using them because I couldn't find a pythonic/django-based way for doing this.
Is there a simpler, more elegant way for doing this? Any help is appreciated
Edit 1:
I have found a very simple solution using Bootstrap 4's collapse class, but still want to know the JQuery way of doing this.
Try this:
$(".replyForm").click(function(){
$(this).toggle();
});
I have a jquery/javascript question. For a site I am working on in PHP/JQuery I have the need to create a dialogue box with an ok/cancel button and a message and then submit a form based on if the user says ok or not. I know in javascript I can create a new window that links to a styled page and then I can do a select for if the user hits the ok button and submit the windows parent form using that but the last time I coded something similar to it I felt like it took a lot of lines of code and was wondering if JQuery supported dialogue box creation and if I could do some similar functionality using it (with hopefully less lines of code since everytime I use jquery instead of standard javascript it seems like it really reduces my codebase). If anyone knows of a resource to learn how to do this I would appreciate a link or a second of your time for some pointers.
Thanks!
I think you are looking for something along the lines of the jquery ui dialog.
I am familiar with the basic JavaScript confirm function. I want to take one step further: instead of having a message box pop up with the options of "OK" and "Cancel", I would like to add three options and change the dialog so that the three choices read "Confirm", "Deny", and "cancel". A "Confirm" or "Deny" choice would each call a different function. Any suggestions on how to do this?
I am not using JQuery or any other library, and i really don't want to use any if I can help it, as it's just this one function. Any help would be appreciated.
You will want to look into making a custom dialog from a div, and assign click events to the buttons. You can't modify the browser's standard dialogs without using VBScript which is IE only.
The fact that you don't want to use JQuery is quite silly. It's 31k and the best thing to ever happen to JavaScript.
If you want to avoid JQueryUI, you can create a dialog yourself very easily. Here's a tutorial to get you started: http://www.queness.com/post/1696/create-a-beautiful-looking-custom-dialog-box-with-jquery-and-css3
AFAIK, you cannot change the button prompt strings with just using pure JS. It has to be 'OK' and 'Cancel'.