I have a home view that shows sneakers:
When you put the cursor over a pair of shoes, the card slides down and shows the sizes that exist in the database if they have stock.
I would like to know how I could go about choosing a size so that I can record that value and send it to the controller.
I have done something like this:
<div class="all-sizes">
<div id="stock-size-{{$stock->id}}" class="stock-size" onclick="changeText({{$stock->id}})">
<span>{{$stock->size}}</span>
<input type="hidden" name="size" value="{{$stock->size}}"/>
</div>
</div>
I have tried to pass it through an input type hidden to the controller and there pick it up, but I think I would need an id or something ...
The controller:
public function add($id, Request $request) {
$product = Product::find($id);
$size = $request->input('size');
if ($product) {
$cart_item = new CartItem();
$cart_item->user_id = \Auth::user()->id;
$cart_item->product_id = $product->id;
$cart_item->quantity = 1;
$cart_item->size = $size;
$cart_item->save();
}
return redirect()->route('home')->with(['message', $product->brand." ".$product->name." ".'añadido a la cesta']);
}
(The rest of the code works perfectly, it just fails that $ size picks me up null)
I would also like to know how to make sure that when I press the sizes, I do not change the styles of all of them, (If not, if for example, I press 19 it is colored but if I then press 30 the 19 return to their normal styles and color 30)
Now I have something like this:
The code that colors them and changes the styles:
function changeText(id) {
var stock_size = document.querySelector("#stock-size-" + id);
var stock_size_span = document.querySelector("#stock-size-" + id + " span");
stock_size.style.borderStyle = "none";
stock_size.style.backgroundColor = "black";
stock_size_span.style.color = "white";
}
Thanks!!
EDIT: Updated with all code from view.
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
#foreach($products_limit as $product)
<div class="swiper-slide">
<div id="card-{{$product->id}}" class="home-card" onmouseenter="mouseEnterMethod('{{$product->id}}')" onmouseleave="mouseLeaveMethod('{{$product->id}}')">
#foreach($product->product_images as $i=>$product_image)
#if($i<1)
<a href="{{route('product.detail', ['brand' => $product->brand, 'name' => $product->name])}}"><img id="image-{{$product->id}}" class="card-image" src="{{url('product/'.$product_image->image)}}">
#endif
#endforeach
<h2>{{$product->brand . " ". str_replace('-', ' ', $product->name)}}</h2>
#if($product->discount>0)
<span><s>{{$product->price}} €</s></span>
<span class='discount'>-{{$product->discount}}%</span>
<p>{{\CountCartItem::calcPriceWithDiscount($product->id)}} €</p>
#else
<span></span>
<p>{{$product->price}} €</p>
</a>
#endif
#if(count($product->stocks)>0)
#foreach($product->stocks->sortBy('size') as $stock)
#if($stock->stock>0)
<div class="all-sizes">
<div id="stock-size-{{$stock->id}}" class="stock-size" onclick="changeText({{$stock->id}})">
<span>{{$stock->size}}</span>
<input style="display:none;" name="size" value="{{$stock->size}}"/>
</div>
</div>
#else
<p class='no-stock'>{{$stock->size}}</p>
#endif
#endforeach
#else
<p>No hay Stock!!</p>
#endif
Add to Cart
</div>
</div>
#endforeach
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
Please don't make the input type "hidden", instead change it's style to hide is from display like this:
<input type="number" name="size" value="{{$stock->size}}" style="display:none;"/>
Related
My code works fine, it displays more users when the load more button is clicked.
my constraint right now is how to remove the Load more button if there is no more value on the response.
This is how my model looks like
public function getFreeAds($page){
$offset = 10*$page;
$limit = 10;
$this->db->select('*');
$this->db->from('escort');
$this->db->where('status', 'Approved');
$this->db->limit($offset ,$limit);
$this->db->order_by("time_stamp, UPPER(time_stamp)", "DESC");
$query = $this->db->get();
return $query->result();
}
My Controller looks like this
public function getCountry(){
$page = $_GET['page'];
$countries = $this->Home_model->getCountry($page);
foreach($countries as $country){
echo
'<div class="col-md-4 col-sm-6">
<div class="portfolio-item">
<div class="thumb">
<a ><div class="hover-effect" data-e_id="'.$country->e_id.'" id="profile2">
<div class="hover-content">
<h1> '.$country->ProfileName.'</em></h1>
<p> '.$country->Height.' CM tall '.$country->BreastCup.' Breast Size <b>Nationality: '.$country->Nationality.' </b></p>
<button type="button" class="btn-info">View More</button>
<button type="button" class="'.$country->confirmstatus.'">'.$country->confirmstatus.'</button>
<div class="top">
</div>
</div>
</div></a>
<div class="image" width="70%" height="1000px">
<img src="uploads/'.$country->ProfilePicture.'">
</div>
</div>
</div>
</div>';
}
exit;
}
Here is my query code that displays the response.
$(document).ready(function(){
getcountry(0);
$("#load_more").click(function(e){
e.preventDefault();
var page = $(this).data('val');
getcountry(page);
});
});
var getcountry = function(page){
$("#loader").show();
$.ajax({
url:"<?php echo base_url() ?>Home/getCountry",
type:'GET',
data: {page:page}
}).done(function(response){
$("#show_data").append(response);
$("#loader").hide();
$('#load_more').data('val', ($('#load_more').data('val')+1));
scroll();
});
};
var scroll = function(){
$('html, body').animate({
scrollTop: $('#load_more').offset().top
}, 1000);
};
What you can do is get the next values in the same function and if there are values available you can make an input field(hidden) and then show or hide the button according to its value.
I'm writing a possible solution for your case, comments are mentioned wherever necessary. Remember there are better ways of doing this like using count but this is according to your code. See if it helps you.
Controller
public function getCountry(){
$page = $_GET['page'];
$countries = $this->Home_model->getCountry($page);
$nextValue = $this->Home_model->getCountry($page+1); // get the values for the next page
$showButton = !empty($nextValue) ? 'yes' : 'no'; // show the button if next value exists
foreach($countries as $country){
echo
'<div class="col-md-4 col-sm-6">
<div class="portfolio-item">
<div class="thumb">
<a ><div class="hover-effect" data-e_id="'.$country->e_id.'" id="profile2">
<div class="hover-content">
<h1> '.$country->ProfileName.'</em></h1>
<p> '.$country->Height.' CM tall '.$country->BreastCup.' Breast Size <b>Nationality: '.$country->Nationality.' </b></p>
<input type="hidden" class="showButton" value="'.$showButton.'" />
<!-- make a hidden input field and assign a value (yes/no) -->
<button type="button" class="btn-info">View More</button>
<button type="button" class="'.$country->confirmstatus.'">'.$country->confirmstatus.'</button>
<div class="top">
</div>
</div>
</div></a>
<div class="image" width="70%" height="1000px">
<img src="uploads/'.$country->ProfilePicture.'">
</div>
</div>
</div>
</div>';
}
exit;
}
View
var getcountry = function(page){
$("#loader").show();
$.ajax({
url:"<?php echo base_url() ?>Home/getCountry",
type:'GET',
data: {page:page}
}).done(function(response){
$("#show_data").append(response);
$("#loader").hide();
$('#load_more').data('val', ($('#load_more').data('val')+1));
// check the value of input field
if($('.showButton:last').val() == "no"){
$('#load_more').hide(); // hide the button
}
scroll();
});
};
Add to your response metadata with total pages count. During every request make count query to your DB with same clauses. In your JS code after every request compare current page with total pages from response and hide button if last page reached.
How can I get value from my html action link, I tried to set the value in js function and it is work, and the problem is js not get the value form html file, and this forloop only the first one will call the Javascript function.
this is my js function
function selectTemplate() {
$('#choose').on('click', function () {
var objTemplate = $(".styTemplate").val();
$.post(strRoot + "/Home/Index/", { styTemplate: objTemplate });
});
};
and this is my vbhtml code
#For Each item In Model
Dim currentItem = item
'<!-- single-awesome-project start -->
#<div Class="col-md-4 col-sm-4 col-xs-12 #Html.DisplayFor(Function(modelItem) currentItem.strTemplateType)">
<div Class="single-awesome-project">
<div Class="awesome-img">
<img src="#Url.Content("~/Content/TemplateCSS/img/portfolio/" & currentItem.strTemplateType & ".jpg")" alt="" />
<div Class="add-actions text-center">
<div Class="project-dec">
<a Class="venobox" data-gall="myGallery" href="#Url.Content("~/Content/TemplateCSS/img/portfolio/" & currentItem.strTemplateType & ".jpg")">
<h4>#currentItem.strTemplateName</h4>
<span> Web Development</span>
#Html.ActionLink("Choose", "companyInfomation", "Home", New With {.id = "choose"}, New With {.styTemplate = currentItem.strTemplateName})
</a>
</div>
</div>
</div>
</div>
</div>
'<!-- single-awesome-project end -->
Next
</div>
<script>
selectTemplate();
</script>
Maybe it's better to use onclick attribute? Use this instead of Html.ActionLink:
Choose
I have a product page where products from database is showing. Code for that product page.
<!-- language: lang-html -->
<div class="tab-content vertical col-md-10 col-lg-10 col-sm-9 col-xs-9 left-aligned">
<div class="tab-pane fade in active">
<perfect-scrollbar wheel-propagation="true" suppress-scroll-x="true" min-scrollbar-length="8" class='ps-scrollbar'>
<div class="ecommerce_product col-lg-3 col-md-4 col-sm-4 col-xs-6" ng-repeat="products in data | filter:search | startSearchFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
<div class="thumb">
<img class="img-responsive" ng-src="../upload/{{products.image}}">
<div class="overlay"><a ng-href="#/app/ecommerce/product-edit?id={{products.id}}" data-ng-click="editUser(products)" ><i class="material-icons">shopping_cart</i></a></div>
</div>
<div class="product-info">
<h4><a ui-sref="app.mus-song-view"><b>{{ products.pname | limitTo: 8 }}{{products.pname > 8 ? '...' : ''}}</b></a></h4>
<p class="price"> <b>Price:</b> {{products.price}}</p>
<p class="price"><b>Sale Price:</b>{{products.price - products.discount | number:2}}</p>
</div>
</div>
</perfect-scrollbar>
</div>
</div>
<!-- end snippet -->
Now the problem is i want to edit a particular product in a different page when clicked on the product. I passed the id in the url. But i am not being able to call the url parameter from the controller and at the same time pass the parameter to a php file so that i can call the data from the database.
Is there anyone who can help me from this. Please.
To get a url param you can use: $routeParams
For example you can get the id of a product from that route:
www.yoursite.com/product/id
by doing:
var id = $routeParams.id
In you HTML/PHP page after you pass param to the URL
Suppose your URL will be example.com/edit?id=1
and in the page when you visit above URL.
<?php
$id = $_GET['id'];
?>
<div ng-controller="my_ctrl">
<input type="hidden" ng-model="myID" value="<?php echo $id; ?>" />
{{myID}}
</div>
Now in your angular controller my_ctrl you can access your value (id) by using
myID
In your controller (my_ctrl):
//.............
$scope.myID = ""; //Initial Value
//.............
Remember Angular is both way data binding framework, so if you change the value of a model in you HTML will reflect on JS and if you change value in JS will reflect on View.
Below is the standard page in HTML with pagination working well. The problem arises when I perform a search. I would like to know why when I run the search it complains that "vehicles is an undefined variable"
#foreach($all as $one)
<div class="card-description">
<div class="card-text">
<div class="card-text-wrapper">
<div class="card-details">
<p class="vehicle-name">{{$one->make}}</p>
<p class="vehicle-details">{{$one->year}}</p>
<p class="vehicle-details">{{$one->type}}</p>
</div>
</div>
</div>
<div class="card-text">
<div class="card-text-wrapper">
<h1 class="price-tag">¢ {{$one->price}}</h1>
</div>
</div>
</div>
{{$all->links()}}
#endforeach
Below is the javascript function I tried for performing the search but unfortunately I do not know how to update the pagination to accept the new search values:
function searchVehicle(){
var make = document.getElementById("vehicle_make");
var strMake = make.options[make.selectedIndex].text;
var model = document.getElementById("vehicle_model");
var strModel = model.options[model.selectedIndex].text;
var cardDisplay = document.getElementById("card_display");
var cardDeck = document.getElementById("card_deck");
var strUrl = vehicle_url + strMake + '/' +strModel;
var obj = sendRequest(strUrl);
while (cardDeck.firstChild) {
cardDeck.removeChild(cardDeck.firstChild);
}
}
Below is my form which would be performing the search
{{ Form::open(['route' => 'search','method' => 'GET']) }}
<div>
<div class="wrapper-dropdown-5" tabindex="1" >
<span class="placeholder">Select make</span>
<ul class="dropdown" style="z-index:1000" name="mak" id="vehicle_make">
#foreach($vehicles as $vehicle)
{{--{{$vehicle->id}}--}}
<li class="option-make" id="make" value="{{$vehicle->make}}"><a>{{$vehicle->make}}</a></li>
#endforeach
</ul>
</div>
<div id="dd" class="wrapper-dropdown-5 inactive" tabindex="2" >
<span class="placeholder">Select model</span>
<ul class="dropdown" id="vehicle_model">
</ul>
</div>
</div>
</div>
<div class="button-wrap">
{{Form::submit('Search', ['class' => 'submit-button'])}}
</div>
{{ Form::close() }}
Below is the way I tried to display the search results but had an error that "vehicles" is an undefined variable:
public function searchVehicle(SearchVehicleRequest $request){
$make=$request->input('make');
$model=$request->input('model');
$results = Vehicles::where('make', 'LIKE', '%'.$make. '%')->orWhere('model','LIKE', '%'.$vehicle_model.'%')->paginate(2);
return Response::json(\View::make('Garages.home', array('all' => $results))->render());
}
And my route:
Route::get('search', ['as' => 'search', 'uses' => 'VehiclesController#searchVehicle']);
I can populate the HTML but don't know how to update the pagination..unless this whole process is wrong and there is a simpler way to get this done with ajax? or is page rendering the wrong way to go for something like this??
I am making an app, the user can either select an item or use their camera to get the qr code which translates into an item's ID.
The problem is that I think some JQuery is messing with my scope from working properly.
I have to get the QR code by listening to an innerHtml change, once it changes (DOMSubtreeModified) the following occurs.
var index = 0;
$('#result').one('DOMSubtreeModified', function(e) {
var code = "";
if (e.target.innerHTML.length > 0) {
code = e.target.innerHTML;
$scope.ToRun(code);
}
});
$scope.ToRun = function(code) {
for (i = 0; i < $scope.plantList.length; i++) {
if ($scope.plantList[i].plantcode == code) {
index = i;
break;
}
}
$scope.currentPlant = $scope.plantList[index];
$scope.plantDetails = false;
$scope.searchDetails = true;
}
For some reason the following does not have any effect on my ng-classes. As when an item is selected I hide the input dialogs, and show the result one.
$scope.plantDetails = false;
$scope.searchDetails = true;
But when a user selects the item manually it works just perfectly. (the items have an ng-click on it)
$scope.viewPlant = function(plant) {
$scope.currentPlant = plant
$scope.plantDetails = false;
$scope.searchDetails = true;
};
And the above works fine, with the ng-click. So why won't my new function that listens for an innerHtml change work?
HTML snippet
<div ng-class="{ 'hidden': searchDetails }">
<!-- CHOOSE INPUT TYPE -->
<div class="form-group" style="margin-bottom:0px">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default" ng-click="digits = false; qr = true">Plant Code</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default" ng-click="digits = true; qr = false">QR Code</button>
</div>
</div>
</div>
<br />
<!-- QR CODE INPUT -->
<div ng-class="{ 'hidden': qr }">
<img id="blah" src="./images/placeholder.png" />
<span class="btn btn-default btn-file">
<i class="glyphicon glyphicon-camera"></i>
<input type="file" onchange="readURL(this);handleFiles(this.files)">
</span>
<div id="result">xxxxxx</div>
<canvas id="qr-canvas" width="800" height="600"></canvas>
</div>
<!-- MANUAL SELECTION INPUT -->
<div ng-class="{ 'hidden': digits }">
<input ng-model="search.$" style="width:100%; font-size:30px; text-align:center" placeholder="Plant Code" />
<div style="overflow: auto; max-height:250px">
<table class="table table-striped" style="background-color:lightblue">
<tr ng-repeat="plant in plantList | filter:search" ng-click="viewPlant(plant)" style="cursor:pointer">
<th>{{plant.name}}</th>
<th>{{plant.plantcode}}</th>
</tr>
</table>
</div>
</div>
<div>
</div>
</div>
<div ng-class="{ 'hidden': plantDetails }">
// results - this should appear when one of the above is entered.
// works for manual selection, but not qr code
</div>
Just confused on why my QR input will not fire off the change-class options to hide the searchDetails div and show the plantDetails div
EDIT: Doing a small test, it seems that my class variables are indeed not updating at all. I just put the values at the bottom of my page and they do not update when hitting the block of:
$scope.plantDetails = false;
$scope.searchDetails = true;
You need to let Angular know about the change. Add this at the end of your method and let me know if it works.
$scope.$apply();