vendredi 27 octobre 2017

how do i select a single item and display it in a next page using jquery ajax

So, ive a list of available bikes for rental at given time and date, ive got an unique id of each bike coming from the api, each bike has different pricing, when i click on a bike, the page should b redirected showing only individual bike details of the clicked bike

example api= http://ift.tt/2hfMp74

$('#btn-bik-sel').on('click', function() {

    available();
    available($('#selet-city option:selected').val());
});


function available(id){

      $.ajax({
        /*url:'http://ift.tt/2zJDXnw',*/
          url:'http://ift.tt/2hfMqb8'+id+'/models',
        method:"GET",
        data : {
            'start_time': $('#datetimepicker1').val(),
            'end_time': $('#datetimepicker111').val(),
            'end_date': $('#datetimepicker21').val(),
            'start_date': $('#datetimepicker2').val()
        },

    }).done(function(data){
          for (var i=0; i<data.result.data.length; i++){

            console.log(data.result.data[i].id +","+data.result.data[i].totalPrice +"," + data.result.data[i].name);
              $('.bike-imgs').append(
                  '<img class="bike-in" style="width:100%" src="'+data.result.data[i].image.full+'" />' +
                  '<div class="col-sm-8 col-md-8 col-xs-6"><div class="selected-bike-s1">'+data.result.data[i].name+'</div></div>' +
                  '<div class="col-sm-8 col-md-8 col-xs-6"><div class="selected-bike-loc">'+data.result.data[i].available_locations[0].area+'</div></div>'


              );




          };


    });
};
 <div class="col-xs-6">
                        <input type="text" class="form-control date-time" id="datetimepicker2" placeholder="Start date">

                        <input type="text" class="form-control date-time" id="datetimepicker1" placeholder="Start time" style="margin-top: 10px">
                    </div>

                    <div class="col-xs-6">
                        <input type="text" class="form-control date-time" id="datetimepicker21" placeholder="End date">

                        <input type="text" class="form-control date-time" id="datetimepicker111" placeholder="End time" style="margin-top: 10px">
                    </div>

                    <div class="col-xs-12 text-center" style="margin-top: 10px;">
                        <button class="btn btn-primary" id="btn-bik-sel">Continue</button>
                    </div>



Aucun commentaire:

Enregistrer un commentaire