I am writing one application where i need to show4 different date and Start/End Time.
So i have created date using datepicker. Below that i have one checkbox ,If user checks that check box it will add same set of date(default) So the maximum date would be 4.
So i tried using ng-repeat but seems some issue.
Kindly help
<div class="form-group">
<label>6. Enter Onsite Details( Up to 4)</label> <br>
<div ng-repeat="object in configDate track by $index">
<button bs-datepicker
class="btn btn-info"
id="comm_cal_bttn"
name="date"
data-animation="am-flip-x"
data-autoclose="true"
data-max-date="{{comm.maxDate}}"
data-min-date="{{comm.minDate}}"
ng-blur="getMinTime();"
ng-model="scheduled.commDate">
<i class="fa fa-fw fa-calendar" aria-hidden="true"></i> Date
</button>
<br>
<br>
<button bs-timepicker
class="btn btn-info"
id="comm_time_bttn"
name="Start Time"
data-animation="am-flip-x"
data-length="3"
data-minute-step="{{comm.minuteStep}}"
data-round-display="true"
min-time="{{comm.minTime}}"
ng-blur="checkValidTime();"
ng-disabled="! scheduled.commDate"
ng-keydown="disableKeys();"
ng-model="scheduled.commTime">
<i class="fa fa-fw fa-clock-o" aria-hidden="true"></i> Start Time
</button>
<button bs-timepicker
class="btn btn-info"
id="comm_time_bttn"
name="End Time"
data-animation="am-flip-x"
data-length="3"
data-minute-step="{{comm.minuteStep}}"
data-round-display="true"
min-time="{{comm.minTime}}"
ng-blur="checkValidTime();"
ng-disabled="! scheduled.commDate"
ng-keydown="disableKeys();"
ng-model="scheduled.commTime">
<i class="fa fa-fw fa-clock-o" aria-hidden="true"></i> End Time
</button>
<br>
<br>
</div>
<label for="cc_user">Location</label> <input type="text" ng-model="configDate">
<br>
<br>
<input type="checkbox" ng-model="configDate" ng-checked = "configDate.push(configDate)"> <label for="cc_user">Add Additional</label>
</div>
Related
I have this code from a search field, I tried several ways, but none worked. Someone can help?
<form id="searchResultsForm" name="searchResultsForm" method="get" action="#" target="_blank">
<div class="search">
<input class="tftextinput3" type="text" id="searchresultsquery" placeholder="Encontre tudo onde lhe for mais útil.." name="q" title="" autofocus>
<span data-toggle="modal" data-target="#resultsmodal">
<button type="button" onclick="botaoazul()" class="searchButton2" data-toggle="tooltip" data-placement="top" title=" Descubra campanhas e jogue. Boa-sorte!">
<i class="fa fa-tag fa-lg"></i>
</button>
</span>
<button type="submit" class="searchButton" \ data-toggle="tooltip" data-placement="top" title="Insira um betcode e jogue. Boa-sorte!">
<i class="fa fa-play fa-lg"></i>
</button>
</form>
What you did with the target="_blank" is ok and that it how is should be done.
However, other things in your code should be done differently:
Instead of button type="submit" => go with: input type="submit" (and no need for closing tag of input).
You forgot to add a in order to close the exiting one.
As for the form type="GET". It is usually a type="POST", so just take into consideration if that is what you really wanted.
Here is the final code (you can add all things i've dropped:
<form id="searchResultsForm" name="searchResultsForm" method="get" action="#" target="_blank">
<div class="search">
<input class="tftextinput3" type="text" id="searchresultsquery" placeholder="Encontre tudo onde lhe for mais útil.." name="q" title="" autofocus>
<input type="submit" class="searchButton">
</div>
</form>
I'm trying do remove class "bg-color-disable" for #filenameRPT but nothing I tried work. I have used $("#parentRPT > span#filenameRPT").removeClass("bg-color-disable"); and $("#filenameRPT").removeClass("bg-color-disable"); but no lucks. Any idea?
<div class="two-row mb-3">
<div id="parentRPT" class="input-group bg-color-disable">
<span class="input-group-addon gi data-gi-size gi-file-plus"></span>
<span id="filenameRPT" class="bg-color-disable">
Upload REPORT
<span class="fa fa-arrow-circle-right text-primary ml-1 mr-1"></span>
<a name="rpt" href="#">No File Exists</a
<input class="hidden" name="delete_RPT" value="not_deleted" type="text"/>
</span>
<span id="deleteRPT" class="fa fa-times text-danger hidden" title="Delete"></span>
<label class="input-group-addon has-float-label" for="file-uploadRPT">
Browse
<input id="file-uploadRPT" name="FileToUploadRPT" type="file" accept="application/pdf">
</label>
</div>
</div>
Crazy thing is I was able to remove "bg-color-disable" for #parentRPT using $("#parentRPT").removeClass("bg-color-disable"); but using $("#filenameRPT").removeClass("bg-color-disable"); didn't work for element #filenameRPT. Why?
I think your issue is with improper closing of anchor tag.
Removing class is straight forward.
window.onload = removeClass()
function removeClass() {
console.log('before removal',document.getElementById('filenameRPT').classList);
document.getElementById('filenameRPT').classList.remove('bg-color-disable')
console.log('after removal',document.getElementById('filenameRPT').classList);
}
<div class="two-row mb-3">
<div id="parentRPT" class="input-group bg-color-disable">
<span class="input-group-addon gi data-gi-size gi-file-plus"></span>
<span id="filenameRPT" class="bg-color-disable">
Upload REPORT
<span class="fa fa-arrow-circle-right text-primary ml-1 mr-1"></span>
<a name="rpt" href="#">No File Exists</a>
<input class="hidden" name="delete_RPT" value="not_deleted" type="text"/>
</span>
<span id="deleteRPT" class="fa fa-times text-danger hidden" title="Delete"></span>
<label class="input-group-addon has-float-label" for="file-uploadRPT">
Browse
<input id="file-uploadRPT" name="FileToUploadRPT" type="file" accept="application/pdf">
</label>
</div>
</div>
in there i want to add shopping cart in my project. i have try make it but its still want work.
this my controller :
function postCreate(){
echo '<pre>';
print_r(Request::all());
exit;
$data['list'] = DB::table('package')
->join("cms_car","cms_car.id","=","package.id_cms_car")
->join("zone","zone.id","=","package.id_zone")
->select("package.*","cms_car.car as name_car","cms_car.photo as car_photo");
return view('detail',$data);
}
and here my view for listing :
#if ($row->driver == 'Driver Included')
<img src="{{ asset('assets/assets/icon/ic-petrol.png') }}" style="max-width:15px;">
#else
#endif
{{$row->driver}}</p>
<p>
#if ($row->driver == 'Driver Included')
<img src="{{ asset('assets/assets/icon/ic-driver.png') }}"style="max-width:15px;">
#else
#endif
{{$row->fuel}}</p>
<h6 class="post-price">price :</h6>
<p>Rp. {{$row->price}}</p>
</div>
</div>
<hr>
<div class="col-md-6">
Unit Quality :<br><br>
<div class="input-group" style="width: 150px;">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-number btn-minus" data-type="minus">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quantity" class="form-control input-number" value="1" data-price="{{$row->price}}" data-id="{{$row->id}}" min="1" max="100">
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-number btn-plus" data-type="plus">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
<div class="col-md-6">
<h3 style="margin-top:40px" id="price{{$row->id}}">Rp. {{number_format($row->price)}}</h3>
</div>
</div>
</div>
#endforeach
in there i want to make cart it only add when i change the unit quantity
form input name : quantity
have someone tell me what improvements do i have to make to the code to achieve my goal?
I recommend using this package Crinsane/LaravelShoppingcart
There are somany shopping cart module available on github. They are very easy to integrate, try one of them:
LaravelShoppingcart
laravel-cart
I've a form containing input fields and checkboxes (table crud generating dynamically). See the image below:
Here, In my clients modal dialog form I've implemented small crud for adding/updating/deleting Providers data and showing table below of it on the fly.
Following is my code:
View:
<form name="clientForm" ng-submit="check(id)" ng-controller="ClientsController">
<div class="form-group">
<label for="name">Name</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Name" ng-model="client.name">
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Email" ng-model="client.email">
</div>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Phone" ng-model="client.phone">
</div>
</div>
<div class="form-group">
<label for="phone">Providers</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
<input type="text" class="form-control" id="title" ng-model="provider.provider_name" placeholder="Enter Provider Name">
</div>
<br>
<button type="button" id="addbtn" class="btn btn-sm btn-primary" ng-click="addProvider()">Add Provider</button>
<button type="button" id="editbtn" class="btn btn-sm btn-info" ng-click="updateProvider(id)">Update Provider</button>
<button type="button" id="editbtn" class="btn btn-sm btn-default" ng-click="clearProvider()">Clear Provider</button>
<br>
<table style="width: 50%; margin-top: 10px;" class="">
<tbody>
<tr ng-repeat="val in providersData">
<td>
<input type="checkbox" name="providersData" ng-model="$parent.client.providersList" value="{{val._id}}"/>
</td>
<td>{{val.provider_name}}</td>
<td>
<a style="color: blue;" href="javascript:void(0);" ng-click="editProvider(val._id)"><i class="glyphicon glyphicon-edit"></i></a>
<a style="color: red;" href="javascript:void(0);" title="Delete" confirmed-click="removeProvider(val._id)" ng-confirm-click="Are you sure you want to remove provider?"><i class="glyphicon glyphicon-trash"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="well well-lg text-center bg-gray">
<button class="btn btn-success" ng-if="id">Save Client</button>
<button class="btn btn-danger" ng-if="id" title="Delete" confirmed-click="remove(client._id)" ng-confirm-click="Are you sure you want to remove?">Delete</button>
<button type="button" class="btn btn-warning" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-success" ng-if="!id">Add Client</button>
</div>
</form>
Controller:
$scope.showModal = false;
$scope.client = {};
$scope.provider = null;
$scope.addClient = function () {
alert(JSON.stringify($scope.client));
$http.post('/clients', {param: $scope.client}).success(function (response) {
if (response) {
alert("Client added successfully");
$scope.client = "";
refresh();
$scope.closemodal();
}
});
};
Now I want to insert/update selected checkboxes value to db along with Name, Email, and Phone field.
Here I'm facing following issues:
Whenever I'm clicking on any checkbox its checking all checkboxes.
After clicking on Add Client button its showing result of alert(JSON.stringify($scope.client)) like this
{"name":"asdfdsafasdf","email":"sdf","phone":"sadf","providersList":{"id":true}}
In mongodb its showing like this:
I've search a lot tried this and ng-model="$parent.client.providersList.id" but still its not working.
I'm beginner in AngularJS and just started working on it.
Any help would be appreciated.
You should use ng-true-value & ng-false-value over the checkbox(I'm considering default value to be 0). And then use $index of providersData ng-repeat to create an array of client.providersList.
Markup
<input type="checkbox" name="{{'providersData'+$index}}"
ng-model="client.providersList[$index].id" ng-true-value="val._id" ng-false-value="0" />
You are facing this problem because of the value of your ng-model attribute. The value for ng-model attribute must be different for each checkbox. Here, try this:
<input type="checkbox" name="providersData" ng-model="client.providersList{{$index}}" ng-value="val._id" />
Try something like this:
$scope.client = {};
$scope.client.providersList = [];
// Now watch the model for changes
$scope.$watch('client', function(){
// When the checkbox is selected it returns true
if($scope.client.providersList1 == true){
$scope.client.providersList.push({"id": value})
}
// Repeat the if statements for all the checkboxes (or use a for loop)
}, true);
I am trying to create a form where user gets a list of products from database and upon selecting the product, retrieve the prices associated to that product and assign the value from database to the second textfield, similarly other textfields as well. Also upon changing the selection the values should get updated. Need suggestions if this is possible and how? Examples would be great. Thanks
He is what I am trying to do
<form method="post" action=".\Sale">
<div class= "form">
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<select class="form-control" name="orproductname" id="orproname" onchange="updateFields()">
<option>--Select Product--</option>
<% ProductDAO pdr = new ProductDAO(); String[] kl = pdr.getProductNames();
for(int i=0;i<kl.length;i++) {%>
<option><% out.println(kl[i]); %></option>
<% } %>
</select>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<input class="form-control" type="text" placeholder="Original Price" id="orproprice" name="orproductprice" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<input class="form-control" type="text" placeholder="Discount" id="orprodis" name="orproductdiscount" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<input class="form-control" type="text" placeholder="Sales Tax" id="orprosalestax" name="orproductsalestax" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<input class="form-control" type="text" placeholder="Final Price" id="orprofinalprice" name="orproductfinalprice" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-home" ></i>
</span>
<textarea class="form-control" type="textarea" placeholder="Shipping Address" name="orproductshippingaddress" required></textarea>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input class="form-control" type="text" placeholder="Order Date" id="datepicker" name="orproductorderdate" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
<input class="form-control" type="text" placeholder="User ID" name="orproductuserid" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-picture-o"></i>
</span>
<img class="img-responsive" src="img/bride-1.jpg" alt="Product" >
</div>
<input class="btn btn-primary send" style="width:200px; margin-right:20px" type="submit" value="Order">
<input class="btn btn-primary send" style="width:200px" type="reset" value="Clear">
</form>
You can do that using ajax.
Find the below links to get the data from database using Jsp and servlets and ajax.
http://www.javacodegeeks.com/2014/09/jquery-ajax-servlets-integration-building-a-complete-application.html
How to use Servlets and Ajax?
http://www.programming-free.com/2013/03/ajax-fetch-data-from-database-in-jsp.html
Give it a try ;)
I will explain this into step by step with code.
step 1. in jsp file display all product into select option tag. and give select tag name and **id**.
step 2. using ajax to define where to get the required data.call servlet. this servlet define the your query you wants using productid. productid pass by ajax. jQuery("#your select tag id").change(function(){
var productid = jQuery(this).val();
jQuery.ajax({
async : false,
url : 'your servlet url',
type : 'POST',
dataType: 'json',
data : {'productid':productid},
success : function(response){
if (response.success == 'true' && response.html != '') {
$('#your price text box id').val(response.html)
}else{
jQuery("#user_role_parent").html("");
}
},
error : function(){
alert("Some thing went wrong!!!");
},
});
Step 3. response.html come from servlet
I hope you are understand this code and solve your problem.