In my application, I build a page where the user sees a progress bar which displays the progress of an action that is happening in the background. One part of this progress bar is the following: I have to check in jQuery if a certain row with a certain id exists in the database. If it does exist, The progress bar has to skip to 30%. If it does not exists then It has to do nothing.
I have a database table called Droplets, In there-there is a field called Webshop_id. If a Droplet exists in this table which has the webshop_id of the one that the user just created, The progress bar goes to 30%.
A small summary to clarify
-
Check if a
dropletwith thewebshop_idexists in the database using jQuery -
If it does exist, Make the progress bar a width of 30%;
- If it does NOT exists. Do nothing.
A simple if-statement in PHP of this issue would look something like this
if( Droplet::where("webshop_id", "=", $webshop->id)->exists())
Make the progress bar 30% in width
else {
Just do nothing
}
But this needs to be done in jQuery in order to make the progress bar a width of 30%. What is the best way to handle this issue?
The page where this needs to happen looks like this.
@extends('layouts.home') @section('content')
<div class="container" id="showEffect">
<div class="row justify-content-md-center">
<div class="col-md-10">
<div class="card depth-5 p-4 mb-5">
<div class="card-header p-4 bg-white">
<div class="row">
<div class="col-md-12">
<h2 class="mb-4 text-green"><i class="fal fa-check-circle mr-3"></i> Payment succesfull!</h2>
</div>
<div class="col-md-8">
<p class="text-muted m-0">Thank you! Your payment has been recieved! The order is confirmed. A reciept is being send to <b></b></p>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<h5>Summary</h5>
<div class="card depth-2">
<div class="card-body">
<div class="row">
<div class="col-md-6 text-right">
<ul class="list-unstyled">
<li class="text-muted">Payment ID:</li>
<li class="text-muted">Order date:</li>
<li class="text-muted">Payment method:</li>
<li class="text-muted">Total sum: </li>
</ul>
</div>
<div class="col-md-6 text-left">
<ul class="list-unstyled">
<li></li>
<li></li>
<li></li>
<li>€ </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer mt-3 bg-white">
<h4>Your Webshop</h4>
<p class="text-muted">Your webshop is installing! We advise you not to click away if u want to prevent cancelling the installation</p>
<div class="row">
<div class="col-md-12 text-right">
<h3>37%</h3>
</div>
<div class="col-md-12 mb-3">
<div class="progress mb-3">
<div id="progress-install" class="progress-bar andcode-progress progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%"></div>
</div>
</div>
<div class="col-md-12 text-right">
<a href="" class="btn btn-orange disabled">See the result</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="andcode-clouds">
</div>
<script>
$(document).ready(function() {
var checkdb = function() {
// Bestaat de droplet met de webshop id van de aangemaakte webshop in de database. Als deze wel bestaat, Spring naar 30%. Als hij niet bestaat. Dan niks
var ele = document.getElementById('progress-install');
ele.style.width = 30 + '%';
};
setInterval(checkdb(), 1000 * 60);
})
</script>
@endsection
I can call anytime in this blade file. This ID has to match to the "Webshop_ID" in the droplets table
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire