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