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 droplet with the webshop_id exists 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>{{ $order->user->email }}</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>{{ $payment->id }}</li>
<li>{{ $order->created_at->toFormattedDateString() }}</li>
<li>{{ $payment->method }}</li>
<li>€ {{ $order->price_sum }}</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">
See the result
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{ $webshop->id }}
<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 {{ $webshop->id }} anytime in this blade file. This ID has to match to the "Webshop_ID" in the droplets table
Make one controller function with your logic
function() {
if( Droplet::where("webshop_id", "=", $webshop->id)->exists())
$id_exists = 1;
else {
$id_exists = 0;
}
return response()->json(['id_exists' => $id_exists]);
}
Then in your blade file
In script make ajax call to above controller function and get value of id_exists now you can decide whether to show progressbar or not upon this result
You can use do this from database and controller validation in such way
$table->string('abc')->unique();
This is your table column in migration file
$this->validate($request,[
'abc'=>'table_name:unique',
]);
This is your controller code in which abc is your request key and in
$table->string('abc')->unique(); which is your column name of table and table_name is your table name you must replace with your own table name.
Related
I have 100 rows, I need to display in a popup. So, 50 rows should be displayed in left side of the popup and 50 rows should be displayed right side of the popup.
This is my HTML code that I have tried. But, I can not get two tables.
HTML Code
<div class="panel-body p0">
<ul ui-sortable="sortableOptions" ng-model="itemListArray" style=" list-style: none outside none; padding-inline-start: 15px; ">
<li class="featureContentBox-30" ng-style="{ 'cursor' : (sortableEventStart == true) ? 'all-scroll' : 'default' }" ng-repeat="dimension in (itemListArray | limitTo: totalShow.count) track by $index">
<div class="row p10">
<div class="col-sm-1">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<div class="col-sm-2">
{{$index+1}}
</div>
<div class="col-sm-4">
{{dimension.valueName}}
</div>
<div class="col-sm-4">{{dimension.displayName}} </div>
<div class="col-sm-1" ng-click="removeDimension($index)"> x</div>
</div>
</li>
</ul>
</div>
Think in this way...
<div class="row">
<div class="col-6">
// left side
</div>
<div class="col-6">
// right side
</div>
</div>
i have a div that when you click it,it opens a modal. as follows
<div if.bind="Members.length" click.delegate="GetProfiles($event.target)">
<div repeat.for="category of Types(Members)">
<div class="row">
<div class="col s3">
<div class="card blue-grey darken-1">
<div class="rotate-text-90-negative truncate">
${category.name}
</div>
</div>
</div>
</div>
</div>
</div>
so when the page loads and i have 3 category names displayed for example
Stationary
Office Equipment
Cleaning supplies
now when i click on Stationary i want it to open the "GetProfiles($event.target)" modal i have which it does as follows
<div md-modal="
in-duration: 1000;
out-duration: 1000;
dismissible:false;
"
md-modal.ref="GetProfile">
<div class="modal-content">
<div>
<div >
<md-input label="First Name" readonly.bind="false"></md-input>
</div>
</div>
</div>
</div>
i have the following on my type script page
async GetCrewProfiles(Members) {
this.GetProfile.open();
console.log(Members);
}
but now when i log the members out it comes back with all the members array as follows:
0:{Name:"Stationary" Id:"12365" active:true stock:"50"}
1:{Name:"Office Equipment" Id:"1278365" active:true stock:"0"}
2:{Name:"Cleaning supplies" Id:"12395" active:true stock:"5"}
how do i create an event that only returns the Member that i clicked on, so if i clicked on Stationary i only want to get the information for that and not return everything
i tried this
GetProfiles($event.target) and GetProfiles(Members)
but i cant figure out how to add a click event for a selected item
Have you tried moving your click.delegate function inside the repeat.for div?
I suggest you to move your click.delegate inside the repeat.for div. Something like this:
<div if.bind="Members.length">
<div repeat.for="category of Types(Members)">
<div class="row">
<div class="col s3">
<div class="card blue-grey darken-1">
<div click.delegate="GetProfiles($event.target)"
class="rotate-text-90-negative truncate"> ${category.name}
</div>
</div>
</div>
</div>
</div>
</div>
I have some HTML with 2 tags having the same name and in my JavaScript I have a var, so that in future if the tel number changes, it only has to be changed in one place (in the JavaScript) and will be applied to all tags with the matched named.
I can't seem to remember how to do this as I can't use 'ID' as the 'Footer' is displayed when the hidden Div is displayed. One is a <p> and the other is a <span> which the page contains a few of these.
It needs to be JavaScript not jQuery.
Code
<div class="row m-0 d-flex align-items-center p-5">
<div class="col-12 col-lg-6 pr-lg-0">
<h1>Oops, something went wrong</h1>
<span id="otherErrorTxt" style="display: none">
<p>This error has occurred whilst processing your request.</p>
<p>If the error continues, please contact us on:</p>
<p name="telNo" class="text-muted"></p> <!-- TEL NO. TO GO HERE -->
</span>
<span id="fourOfourTxt">
<p>The page you are looking for is not available. This may be because of one of the following reasons:</p>
<ul class="mb-3">
<li>The page may have been moved or removed</li>
<li>The page may have had its name changed</li>
<li>You may have typed the URL incorrectly</li>
</ul>
</span>
<a class="btn btn-primary col-12 col-lg-2 mt-3" href="/">Go back</a>
</div>
</div>
<div class="row footer">
<div class="col-lg-4">
© 2020 Packnet Limited - All rights reserved
</div>
<div class="col text-right">
<i class="fas fa-phone fa-lg fa-rotate-90 mr-2"></i>
<span name="telNo"></span> <!-- TEL NO. TO ALSO GO HERE -->
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
var telNo = '01234 567 8900 (8.30am till 5.30pm - Mon to Fri excluding bank holidays)';
if (document.getElementById('returnedError').innerHTML.indexOf('404') != -1) {
document.getElementById('fourOfourTxt').style.display = 'block';
document.getElementById('otherErrorTxt').style.display = 'none';
} else {
document.getElementById('fourOfourTxt').style.display = 'none';
document.getElementById('otherErrorTxt').style.display = 'block'
}
document.getElementsByName('telNo').innerHTML = telNo; // Not working
});
</script>
You need to loop over the results of the getElementsByName() function since it returns a collection. See example below. As mentioned in the comments, you shouldn't use name on span elements. It's better to use a class selector instead. The same logic applies for the getElementsByClassName() or querySelectorAll() functions since these return collections as well.
var telNo = '01234 567 8900 (8.30am till 5.30pm - Mon to Fri excluding bank holidays)';
document.getElementsByName('telNo').forEach((el) => {
el.innerHTML = telNo;
});
<div class="row m-0 d-flex align-items-center p-5">
<div class="col-12 col-lg-6 pr-lg-0">
<h1>Oops, something went wrong</h1>
<span id="otherErrorTxt" style="display: block">
<p>This error has occurred whilst processing your request.</p>
<p>If the error continues, please contact us on:</p>
<p name="telNo" class="text-muted"></p> <!-- TEL NO. TO GO HERE -->
</span>
<span id="fourOfourTxt">
<p>The page you are looking for is not available. This may be because of one of the following reasons:</p>
<ul class="mb-3">
<li>The page may have been moved or removed</li>
<li>The page may have had its name changed</li>
<li>You may have typed the URL incorrectly</li>
</ul>
</span>
<a class="btn btn-primary col-12 col-lg-2 mt-3" href="/">Go back</a>
</div>
</div>
<div class="row footer">
<div class="col-lg-4">
© 2020 Packnet Limited - All rights reserved
</div>
<div class="col text-right">
<i class="fas fa-phone fa-lg fa-rotate-90 mr-2"></i>
<span name="telNo"></span>
<!-- TEL NO. TO ALSO GO HERE -->
</div>
</div>
I'm trying to display some json data I got from a get request. So far I've been able to display other arrays with no problem, but I'm having trouble displaying this particular array for some reason, and I'm not getting any errors.
the one that won't display correctly is the showtimes array.
<div *ngIf="show">
<div *ngFor="let shows of show"class="showtime">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{shows.title}}</h3>
</div>
<div class="panel-body" >
<div class="row">
<div class="col-md-7 col-sm-5 col-xs-12 ">
<img class="thumbnail movie_pic" src="http://developer.tmsimg.com/{{shows.preferredImage.uri}}?api_key={{api}}"><br>
</div>
<div class="col-md-5 col-sm-7 col-xs-12">
<ul class="list-group">
<li class="list-group-item">Genres: {{shows.genres}}</li>
<li class="list-group-rel">Release Date: {{shows.releaseDate}}</li>
<li class="list-group-rel">{{shows.longDescription}}</li>
<li *ngFor="let shows of show.showtimes" class="list-group-rel">shows.theatre.name</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
You are missing {{}} expression
<li *ngFor="let shows of show.showtimes" class="list-group-rel">{{shows.theatre.name}}</li>
EDIT
Change it to some other variable name, since you are already using shows,
<li *ngFor="let showdetail of show.showtimes" class="list-group-rel">{{showdetail.theatre.name}}</li>
As it looks from your snapshot, the array of objects is stored in variable showtimes, if that is the case, try the below code:
<li *ngFor="let detail of showtimes" class="list-group-rel">
{{detail.theatre.name}}
</li>
A nested ngFor loop solved the problem..
<div *ngFor="let shows of show">
<div *ngFor="let detail of shows.showtimes">
<p>{{detail.theatre.name}}</p>
</div>
</div>
works perfectly, thanks for the help
I have two collections, one is a Posts collection which has posts, with an id.
And the other is a Sets collection which has an array called ArticleId that can be updated by the user by inserting a post id from the Posts collection into it via a click function with the button toggle-addToSet.
The user Creates the Array called ArticleId, gives it a name and saves articles in it periodically. Think Pinterest Boards or G+ collections.
I have a button on the post item that when a user clicks the icon, all the Sets he has created come up in a dialogue and the user chooses which Set he want to save the post id into.
<template name="summeryArticle">
<li>
<div class="row col s12 m7">
<div class="card" id="cardId">
<div class="card-image waves-effect waves-block waves-light">
<img src="{{better_featured_image.source_url}}">
</div>
<div class="card-content">
<h5 class=" truncate grey-text text-darken-4">{{title.rendered}}</h5>
MORE <i class="waves-effect waves-teal small material-icons right">playlist_add</i>{{>
likePartial}}{{> reblogPartial}}
<!-- The modal below is what brings up all the sets the user has created so that the user can pick with set they wat to save the article in -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<div class="row">
{{#each set}}
<div class="col s6 m6 addSet teal">
<div class="card ">
<div class="card-image">
<span class="card-title cardSet">{{name}}</span>
</div>
<div class="card-footer">
<button type="button" class="btn toggle-addToSet" name="button">add Article Id to this Set!</button>
</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</template>
Graphically it looks like this
And when the user clicks the icon modal-trigger to bring up the Sets he created, it looks like this
As you can see, the user has three Sets, Lifestyle, Love, Business, they can choose to save the posts id into any one of those three.
## GOAL ##
I want to be able to choose a Set, click the add button of my chosen Set, and somehow capture the post Id of the current post in my foreach loop, and insert it into that via the click function, at the moment all I have is this
Template.summeryArticle.events({
'click .toggle-addToSet': function(e, template) {
var ob = this.id
console.log(ob);
}
});
and when I console log that, I just get the Set id instead of the post id.
Question
How can I capture the post id of the current post,
Choose a Set of my liking, then insert the post id into my chosen set?
And if there is a better way to achieve this, please let me know.
EDIT AFTER FEEDBACK
I did the second option like this
<template name="summeryArticle">
{{#let article=this}}
<li>
<div class="row col s12 m7">
<div class="card" id="cardId">
<div class="card-image waves-effect waves-block waves-light">
<img src="{{better_featured_image.source_url}}">
</div>
<div class="card-content">
<h5 class=" truncate grey-text text-darken-4">{{title.rendered}}</h5>
MORE <i class="waves-effect waves-teal small material-icons right">playlist_add</i>{{>
likePartial}}{{> reblogPartial}}
<!-- The modal below is what brings up all the sets the user has created so that the user can pick with set they wat to save the article in -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<div class="row">
{{#each set}}
<div class="col s6 m6 addSet teal">
<div class="card ">
<div class="card-image">
<span class="card-title cardSet">{{name}}</span>
</div>
<div class="card-footer">
{{#each s in set}}
<button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}" articleid="{{article._id}}">add Article Id to this Set!</button> {{/each}}
</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
</li>
{{/let}}
</template>
my helper is like this
Template.summeryArticle.events({
'click .toggle-addToSet': function(e, template) {
var ob = this
console.log(ob);
var sid = $(e.currentTarget).data('setid');
var aid = $(e.currentTarget).data('articleid');
console.log(sid);
console.log(aid);
}
});
However, this is what I'm getting.
and the log looks like this
where 7MgLCEnTWjXFRhLg6 is the Sets_id depending on which of the three buttons I clicked
SECOND EDIT. CONTEXT
when i do this
<template name="summeryArticle">
{{#let article=_id}}
<li>
<div class="row col s12 m7">
<div class="card" id="cardId">
<div class="card-image waves-effect waves-block waves-light">
<img src="{{better_featured_image.source_url}}">
</div>
<div class="card-content">
<h5 class=" truncate grey-text text-darken-4">{{title.rendered}}</h5>
MORE <i class="waves-effect waves-teal small material-icons right">playlist_add</i>{{> likePartial}}{{> reblogPartial}}
<!-- The modal below is what brings up all the sets the user has created so that the user can pick with set they wat to save the article in -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<div class="row">
{{#each s in set}}
<div class="col s6 m6 addSet teal">
<div class="card ">
<div class="card-image">
<span class="card-title cardSet">{{name}}</span>
</div>
<div class="card-footer">
<button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}" articleid="{{article._id}}">add Article Id to this Set!</button>
</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
</li>
{{/let}}
</template>
I get this
What's going on here is that I have the articles organised in categories, so what's going on now is that the article=_idbeing captured is the last article in the category, no matter what articles I try to add, it's just one article being caught, and its always the one at the bottom. I have no idea why
There are several ways. One would be something like this:
I would but article id and set id to toggle-addToSet button's data-attributes:
<button type="button" class="btn toggle-addToSet" name="button" data-setid="SETID" data-articleid="ARTID">add Article Id to this Set!</button>
If you call your summeryArticle like this:
{{#each article in articles}}
{{>summeryArticle article=article}}
{{/each}}
(another opotion is use let-helper:
<template name="summeryArticle">
{{#let article=this}}
...
{{/let}}
</template>
Then in your summeryArticle-template you can get article id in sets-loop:
{{#each s in set}}
<button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}" articleid="{{article._id}}>add Article Id to this Set!</button>
{{/each}}
Then in template events:
Template.summeryArticle.events({
'click .toggle-addToSet': function(e, template) {
var ob = this.id
console.log(ob);
var sid = $(e.currentTarget).data('setid');
var aid = $(e.currentTarget).data('articleid');
Sets.update({_id: sid}, {$addToSet: {ArticlesId: aid}});
}
});
Note!
This assumes you can update your collection directly from client side! Depending on your situation, but usually it is not recommended. Normally you should deny client side updates and use methods for updating collections:
Method.call('mymethd', sid, aid, function(e, r) {
if (!e) {
console.log(r);
} else {
console.error(e);
}
});