I'm using Django and i'm trying to send data in a modal to get informations of an element.
My button to open the modal is :
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#informations">
<span class="glyphicon glyphicon-trash" aria-hidden="true">{{registration_id}}</span>
</button>
And the modal is
<div class="modal fade" tabindex="-1" role="dialog" id="information">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form method="post" action="{% url 'informations_choices' %}">
{% csrf_token %}
<input type="hidden" name="registration" value=......>
Get info about : ......
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="$('#information').modal('hide');$('#informations_choices').submit()">
Get Info
</button>
</div>
</div>
</div>
</div>
The modal open correctly, but how can transform the "......" into value (by exemple with the {{registration_id}} present in the button ?
Thanks in advance
I am assuming here that the modal is on the same page from the beginning. You can just replace the .... with {{registration_id}}. If you want to make the .... dynamic and changing over the time the person is on the page, you might want to look into javascript frameworks and work with AJAX requests.
If you want to go with plain AJAX you will end up with something like this:
$.ajax({
type: "POST",
url: "/getnewvalue/",
data: { array : items_array },
success: function (data) {
// make the changes to the DOM.
},
error: function(data) {
$("#MESSAGE-DIV").html("Something went wrong!");
}
});
Related
I want to ask you, if you know, is here some point or solution how to do confirm delete item with DeleteView class by Popup bootstrap window. So I will not use template_name, but popup windows on current page.
Thank you so much for everything...!!!
To be more precise
I have this button in my index.html page
<button type="button" class=" ml-1 btn btn-outline-dark my-2 my-sm-0" data-toggle="modal" data-target="#exampleModal">
In
</button>
And here I have modal for deleting
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Are you sure to delete this?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<div class="modal-footer">
Yes
<button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
</div>
and here is my views.py for delete
class ItemDeleteView(DeleteView):
model = Item
# template_name = 'index.html'
success_url = reverse_lazy('index')
login_url = '/accounts/login/'
def get(self, request, *args, **kwargs):
return self.post(request, *args, **kwargs)
and I don't know what to do. now... thanks
Best option would be Javascript, but you could instead redefine the get method of your DeleteView class :
Add that to your class
def get(self, request, *args, **kwargs):
return self.post(request, *args, **kwargs)
Basically the Deleteview need a post request to get trigger, it is a bit of a hack but works well.
In your template place this in your modal or popup
<form method="POST" action="{% url "your_delete_url_name" %}">
{% csrf_token %}<input type="submit" value="DELETE">
</form>
Do not forget the object id in your URL
so i have modal to confirm delete action, but when the tabel data is null / dont have any data, got have an error because i dont have id to call? but if i have more than 1 data my delete modal code is works perfectly.. an error occurs when I delete the last data in the table.
i have already try :
the error message is :
Undefined variable $listproduct on --> index.blade.php)
Possible typo $listproduct
Did you mean $listproducts?
my loop function is #foreach($listproducts as $listproduct)
this is my button :
<td>
<a href="#" class="btn btn-danger delete"
data-toggle="modal"
data-target="#deleteModal"
productid="{{$listproduct->id}}"> Delete
</a>
</td>
this is my modal :
<!-- Delete Warning Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="Delete" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete Contact</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="{{ route('products.destroy', $listproduct->id ) }}" method="post">
#csrf
#method('DELETE')
<div class="modal-body">
<label for="id">
<input id="id" name="productid">
</label>
<h5 class="text-center">Are you sure you want to delete this contact?</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-sm btn-danger">Yes, Delete Contact</button>
</div>
</form>
</div>
</div>
</div>
<!-- End Delete Modal -->
this is my script to get ID ( I use this when i write this code :
<form action="{{ url('delete', 'id' ) }}" method="post">
but still not works
) :
$(document).on('click','.delete',function(){
let id = $(this).attr('productid');
$('#id').val(id);
});
this is my Product Controller :
public function destroy($id): RedirectResponse
{
$deleteads = Product::findOrFail($id);
$deleteads->delete();
return redirect('products');
}
and this is my route (iam using Resource):
Route::group(['middleware' => ['auth']], function() {
***Route::resource('products', ProductController::class);***
Route::delete('/selected-products', [ProductController::class, 'deleteSelectedItem'])->name('products.deleteSelected');
});
First, you can't use your own productid attribute in HTML, thus you should use data attribute you save your information.
Second, your form in the modal doesn't get it's action attribute updated and thus only One product ID remains in the action attribute.
Try putting a # in the action first, and then when an item is clicked to be deleted, use JQuery to update your form's action and put the proper URL and the ID of the product.
Your ID should be saved in data attribute like below:
<td>
<a href="#" class="btn btn-danger delete"
data-toggle="modal"
data-target="#deleteModal"
data-productid="{{$listproduct->id}}"> Delete
</a>
</td>
Form in the modal:
<form action="#" method="post" id="delete_product_form">
#csrf
#method('DELETE')
<div class="modal-body">
<label for="id">
<input id="id" name="productid">
</label>
<h5 class="text-center">Are you sure you want to delete this contact?</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-sm btn-danger">Yes, Delete Contact</button>
</div>
</form>
JQuery code for handling the form's action attribute update:
$(document).on('click','.delete',function(){
let id = $(this).data('productid');
$('#delete_product_form').attr('action', '/products/' + id);
});
I'm new to NodeJS and Express, I'm trying to make a login-registration page for understanding the basic concepts. My question is similar to this but there is no solution posted. I'm using a bootstrap modal for login. What I did to display login modal :
Created an empty modal div in the header file so that it is available through the application
<div class="modal fade text-center" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
Loaded modal when clicked on login link
Login
And at server.js file
var reqPath = path.join(__dirname, '../', 'views/pages/userLoginPopup');
router.get('/', function(req, res) {
res.render(reqPath, {isvalid: true}); //isvalid variable is for displaying error
});
Created modal body in another .ejs file
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<%if(!isvalid){%>
<div class="alert alert-danger alert-dismissible">
×
<strong>Incorrect credentials!</strong>
</div>
<%}%>
<form action = "/login" method="POST">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</span>
<input placeholder="Name" class="form-control" required type = "text" name = "ccname"/>
</div> <br />
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-lock"></i>
</span>
<input placeholder="ID" class="form-control" required type = "text" name = "ccid"/>
</div> <br />
<input type = "submit" value = "Login" class="btn btn-md btn-success btn-block">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
Now when user enters incorrect credentials the alert is not shown in the modal instead the page is loaded(as shown below)
In the server.js file retrieving the form data and checking in DB for authentication, if the user is authenticated it is redirected to the home page and if not then current page is rendered with another value for isvalid flag.
router.post('/', function(req, res) {
var lname = req.body.ccname;
var lid = req.body.ccid;
service.loginUser(lname, lid, function (err, result, privilege) {
if(err){
res.render('./pages/error', {errorName: err});
}else {
if(result){
req.session.name = lname;
req.session.uid = lid;
req.session.privilege = privilege;
res.redirect('/'); //home.js
}else {
res.render(reqPath, {isvalid: false});
}
}
});
});
What am I doing wrong can anyone help? I know that I need to pass the modal id where the modal is needed to be load(as done while loading the initial login modal) but I don't know how to do that while submitting form. Thanks in advance.
Update 1: This is what I'm getting when loading modal
Update 2: Project structure
projectName
|
---- routes
|
--- userLogin.js
|
---- views
|
--- pages
|
--- userLoginPopup.ejs
|
--- partials
|
--- header.ejs
|
---- app.js
I am trying to create a virtual stock market where I have different modals displaying information about each stock.
But the template renders as such that I am unable to get a unique modal-header for each stock.
Even after clicking on the 'CIPLA' stock I get "Buy HDFC" as the modal header.
Here is my django template.
{% for stock in user.stocks.all %}
<li class="list-group-item">
<b>{{ stock.stock_name }}</b>
<p id="curr">Current price : {{ stock.current_price }}</p>
Bought at : {{ stock.buy_price }}
<button class="btn" id="buy" data-toggle="modal" data-target="#buy-modal">Buy</button>
<!--Modal for buy-->
<div id="buy-modal" class="modal fade" 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">Buy {{ stock.stock_name }}</h4>
</div>
<div class="modal-body">
<form method="post" action="/stocks/{{ user.id }}/{{ stock.stock_name }}/buy/" >
{% csrf_token %}
<label for="quantity">Quantity</label>
<input type="number" id="quantity-buy" name="quantity">
<button class="btn" id="confirm-buy" type="submit" >Buy</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I have ended it with {% endfor %}.
The error is being caused by this line:
<button class="btn" id="buy" data-toggle="modal" data-target="#buy-modal">Buy</button>
As you can see, this line is mapped to data-target="#buy-modal" . This means that the Dom Element with id="buy-modal" gets invoked by it.
Now if you look inside your code, you are creating more than one number of modals(but with same html id).
The root error being the multiple Dom Elements with the same id. If you look at this line:
<div id="buy-modal" class="modal fade" role="dialog">
this line is created n-times inside your Dom(because it's being run inside a loop). This means that there are n-modals with the same ID. This also means that you Dom has n-number of modals with the same id.
Now that's a wrong practice in writing html.
Every time you click on the button:
<button class="btn" id="buy" data-toggle="modal" data-target="#buy-modal">Buy</button>
the html parser looks for the respective data-target in your html. Which clearly are n(since you created n; more than 1). Now the html always invokes the first or any specific modal every time because it parsed only one while it initialized your modal. Hence every time you click on a button, the same modal pops up
So to fix this you have to create modal with different ids and with different button triggers.
Hope this helps. Thanks.
I'm trying to input a username and password into the input fields and send them to the API URL to authenticate the user and return data. I can provide hardcoded credentials to the URL and successfully login. But what I need is to able to input values in the Web interface dynamically and perform the login.
I have no idea how to bind input values into the URL and how the format should be written. Please help with this.
My controller with hard-coded username and password:
var login = angular.module('login', []);
login.controller('loginController', ['$scope','$http','$location',function($scope, $http) {
$scope.loginauth = function(username,password)
{
$http({
method : 'POST',
url : 'http://televisionarybackendservices.azurewebsites.net/auth/login?username=Evangeli&password=1234',
headers : {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data) {
console.log(data)
$scope.userData = data;
});
};
enter code here}]);
My html modal to log in;
<div id="loginModal" class="modal fade" role="dialog" ng-controller="loginController">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<form class="form" action="" method="POST" enctype="multipart/form-data" role="form">
<div class="form-group">
<label for="ue">Username</label>
<input type="text" class="form-control" id="ue" placeholder="" ng-model="username">
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input type="password" class="form-control" id="pwd" placeholder="" ng-model="password">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" ng-click="loginauth(username,password)">Login</button>
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
<div ng-repeat="data in userData">
{{data.username}}<br />
{{data.created_at}}
</div>
</div>
</div>
</div>
I need to enter username and password dynamically and not supply hard-coded values. Thanks in advance.
Well i got the answer.This is for anyone who need help.
var login = angular.module('login', []);
login.controller('loginController', ['$scope','$http','$location',function($scope, $http) {
$scope.loginauth = function(username,password)
{
$http({
method : 'POST',
url : 'http://televisionarybackendservices.azurewebsites.net/auth/login',
data: jQuery.param({
username: $scope.username,
password: $scope.password
}),
headers : {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data) {
console.log(data)
$scope.userData = data;
});
};
}]);