Friday, March 17, 2017

how would I get laravel's paginate to be affected by the data that is appended in javascript

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

Advertisement