I was wondering if anyone could assist with the following. I have two buttons that when clicked need to render a different form, which I would like to achieve with Ajax
<!-- Animal Type -->
<div class="col-md-6 type-col" data-clicked-status="false">
<button class="btn btn-default btn-green btn-animal-type" id="dog_rehome_button" data-remote="true">Dog</button>
</div>
<div class="col-md-6 type-col" data-clicked-status="false">
<button class="btn btn-default btn-green btn-animal-type" id="cat_rehome_button" data-remote="true">Cat</button>
</div>
Im my view I have a div ready for the content to be loaded into, and have this setup
new.js.erb
$(".rehome_form").html("<%= escape_javascript(render('/animals/dog_rehome')) %>");
So at the moment when either button is clicked the dog_rehome form is rendered.
Ideally though I want to render a different form when clicking on the Cat button.
/animals/cat_rehome
How can I tell rails to render the corresponding form when its button is clicked
$('#cat_rehome_button').click(function() {
$(".rehome_form").html("<%= escape_javascript(render('/animals/cat_rehome')) %>");
});
Related
I have a doubt that I can't solve. From a PHP page I call a typical modal window in which I always had a button that updated or added or deleted records, but now I need to place 2 buttons and that the new button allows me to call a PHP page in which I have a code that downloads data and passes it to an Excel file. I don't know how to make the call to that page from the button in the modal window.
<div class="mb-3 row">
<div class="col-md-6 text-center">
<button type="submit" class="btn btn-primary">update</button>
</div>
<div class="col-md-6 text-center">
<button type="button" class="btn btn-success">download detail</button>
</div>
</div>
I would appreciate any help. Thanks
In Bootstrap, you can use same button classes for <a> tag as well:
The .btn classes are designed to be used with the <button> element.
However, you can also use these classes on <a> or <input> elements
(though some browsers may apply a slightly different rendering).
So your button should be done like this:
download detail
First off, I'm loving Angular 2 (v5). Taken a while to "get it" but suddenly it's all made sense and really enjoying working with it.
I have a list of products generated from a WebApi service that I load into an Observable array and display on the UI using ngFor. Very simple stuff. Each item has a button to Add to Cart. Again simple and all working great.
What I want to do is make the process a bit more fluid for a user, so when a users clicks the Add to Cart button, the button is hidden and a number input spinner is revealed with an Add button, so that the user can simply select quantity at this point, prior to submitting to the AddToCart function. Otherwise they have to add to cart, then update the quantity.
I'm having a "brain not working" moment, if I'm showing and hiding elements within a ngFor list using Angular 5 with perhaps an ngIf, how do I identify that unique element or should I just use some standard JavaScript for this and if so what's the unique identifier for the element? Obviously it won't work with a variable at component level as that affects every button in the list. Perhaps I shouldn't be considering Angular at all for manipulating the DOM in this instance.
I can take the productID from the model and append that to the ID field for the button giving it an ID of something like "btn_000142" and giving the hidden element an ID of "quantity_000142" and then when the button is clicked I use some javascript (or jQuery?) to show and hide and then pass the value with the object back into the component code. But is that the right way to handle this?
Probably a stupid question, just sometimes it's hard to break the "just throw some jQuery at it" or "in MVC I'd do that easily like this..." thinking pattern! :)
Some code below:
<div *ngFor="let prod of prodDetails$ | async" [#fadeInOut] class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a routerLink="{{prod.productWebFriendlyName}}"><img class="card-img-top" [src]="prod.productImgUrl" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a routerLink="{{prod.productWebFriendlyName}}">{{ prod.productName }}</a>
</h4>
<p class="card-text">{{ prod.productDescription }}</p>
<p class="card-text">{{ prod.productPrice | currency:'GBP' }}
<!-- click this button to display the div below and hide this button-->
<button type="button" (click)="addToCart(prod)" class="btn btn-primary float-right small">Add to Cart</button>
<!-- This is hidden until the Add to Cart is clicked -->
<div id="numberSpinnnerHere" style="display:none">NUMBER SPINNER HERE <button id="FinalAddToCartWithQuantity(prod, quantity)">Add</button></div></p>
</div>
</div>
</div>
You can do it in this way (trimmed the code for clearity)
<div *ngFor="let prod of prodDetails$ | async; let i = index" [#fadeInOut]>
<div class="card h-100">
<a routerLink="{{prod.productWebFriendlyName}}"></a>
<div class="card-body">
<!-- click this button to display the div below and hide this button-->
<button *ngIf="!productAdded[i]" type="button" (click)="addToCart(prod, i)" class="btn btn-primary float-right small">Add to Cart</button>
<!-- This is hidden until the Add to Cart is clicked -->
<div *ngIf="productAdded[i]" id="numberSpinnnerHere" style="display:none">NUMBER SPINNER HERE <button id="FinalAddToCartWithQuantity(prod, quantity)">Add</button></div></p>
</div>
</div>
</div>
Then in your component
productAdded = new Array(prodDetails.length)
addToCart(prod, index) {
productAdded[index] = true
}
how do I identify that unique element
It's done for you in the ngFor.
*ngFor="let prod of prodDetails
prod is the object being iterated over in the list and is the only one in the scope when referring to prod.
So use some function like isProdInCart(prod) to determine whether to show the buttons.
Although saying this, if you made a ProductCardComponent you'd avoid most of the hassle of having to do that as your component could just have a flag or something that's set when the add to cart button is clicked.
I am creating a web app in which I have two buttons.
1st for insert
2nd for update
and on the click of any of these buttons I want to open a modal and it is working good.
modal is poped up after I click (either on insert or update)
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><p style="color:red; text-align:center;">Don't Leave Empty Field Please Fill 'N.A' There !!</p></h4>
</div>
<div class="modal-body">
<select>
<option>Insert Text Box</option>
<option>Update Text box</option>
</select>
<input type="text" name="insert">
<input type="text" name="update">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default">Insert</button>
<button type="button" class="btn btn-default">Update</button>
</div>
</div>
</div>
</div>
But if a user click insert or update button in modal-footer must be hide
and in modal if user chooses insert in dropdownlist update textbox must be hide and if a user chooses update insert textbox must be hide.
You need to add the ng-click directive to the two buttons and add a method to close the modal, like this:
<button ng-click="closeModal()" type="button" class="btn btn-default">Insert</button>
Most likely the modal you are using already has a method for this available. Otherwise you would need to handle the closing part in your controller.
You should keep in your controller's data the information and then use the ngShow directive (doc) to display one or the other.
Here's an example if you have a controller named ctrl with a updateModal boolean.
<button type="button" class="btn btn-default" ng-show="!ctrl.updateModal">Insert</button>
<button type="button" class="btn btn-default" ng-show="ctrl.updateModal">Update</button>
Then you'll have to update this boolean value when you open the modal.
You could use a scope variable to keep track of the last button that was pressed, and use ngShow to only display the desired button.
However, if chances are you're going to eventually customize the modal dialog further, it's going to get messy. If I were you, I'd sacrifice a bit of typing and create two modal dialogs. Then, I'd have the action buttons show each their associated modal.
i has file within my wordpress theme this file contains the signin, signup, lostpasswors and reset password forms with the required php codes. and in my header i have two buttons created by bootstrap codes us follow.
<div class="col-sm-3">
<div id="user-notlogged-in" class="pull-right btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-info"><a class="signin" href="<?php echo bloginfo('url') ?>/login"><?php _e('Sign In'); ?></a></button>
<button type="button" class="btn btn-default"><a class="signup" href="<?php echo bloginfo('url') ?>/login"><?php _e('Sign up'); ?></a></button>
</div>
</div>
and in my login-register.php file i have above forms like below
<div id="signin-form">
</div>
<div id="signup-form">
</div>
<div id="resetpass-form">
</div>
<div id="newpass-form">
</div>
this link below contains full code in my login-register.php file
login-register.php
my questions
i want when click on Sign In link only show me signin-form
i want when click on Sign Up link only show me signup-form
i want when i click on Lost Password? Link only show me resetpass-form
i want when send me reset password mail and i clcik on reset password link only show me newpass-form
What you're looking for is some simple jquery. Try something like...
onclick=$('#signin-form').show();
there is one Way i hope it will help You.
You can Use Jquery for Show And hide forms.
`http://jsfiddle.net/ffor00ps/3/`
Try it may be this will help to solve your problem
If a user clicks the delete user button, I display a modal window asking for confirmation of the delete. Within the modal window, if they click yes, then a function is called to delete the user (via ajax). If no, then the modal window is just closed. That is how it should work. But I don't know how to pass the user ID to the yes button. Below is what I have so far to delete the user but it may be way off.
<div class="modal hide fade" id="DeleteUserModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h3>Delete User?</h3>
</div>
<div class="modal-body">
<div class="row-fluid">
<div class="span12">
<p>Are you sure you want to permanently remove this user?</p>
</div>
</div>
<div class="row-fluid">
<div class="span12">
Yes, I'm sure
<button class="btn" type="submit" data-dismiss="modal">No way!</button>
</div>
</div>
</div>
<div class="modal-footer">
Close
</div>
I do not know how to pass the userid to this specific line in the above modal window:
Yes, I'm sure
While I am using jQuery, the answer can be written in JavaScript.
Use the data-attributes. They'll make you happy. http://www.broken-links.com/2010/11/18/data-attributes-in-html-and-jquery/
Rather give this node:
Yes, I'm sure
..an id:
<a id="delete-user-link" class="btn btn-danger">Yes, I'm sure</a>
..when you want to delete a specific user (thus click on the delete button in the list), set the data-attribute for the specific user-id:
$(".delete-button").click(function(){
$("#delete-user-link").data("user-id", $(this).data("user-id");
// show the modal
});
this does require your delete-buttons (in the list) to have a data-attribute, like:
<a class="btn" data-user-id="123">delete</a>
and add a small jQuery method:
$("#delete-user-link").click(function(){
var userId = $(this).data("user-id");
// do your delete stuff here
});
That should do the trick!
For the click to load the modal window:
var delete_id = 1234;// Set this to the appropriate value
$(".span12 a.btn-danger").attr("href", "javascript:deleteUser("+delete_id+")");