Below is the standard page in HTML with pagination working well. The problem arises when I perform a search. The problem is in two parts, I would like to know how to pass multiple values to the controller and secondly how I would create the card in javascript and update or create the pagination in Javascript as well.
<div class="card-description">
<div class="card-text">
<div class="card-text-wrapper">
<div class="card-details">
<p class="vehicle-name"></p>
<p class="vehicle-details"></p>
<p class="vehicle-details"></p>
</div>
</div>
</div>
<div class="card-text">
<div class="card-text-wrapper">
<h1 class="price-tag">¢ </h1>
</div>
</div>
</div>
Below is the javascript update:
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
<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)
--}}
<li class="option-make" id="make" value=""><a></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">
</div>
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?
via d3vguy