I got a little problem with Javascript in laravel 5.6.
I have a wizard setup here, and there are 3 steps.
Step 1. login or register
Step 2. another div (hidden)
Step 3. another div (hidden)
If I still don't have a login session (here I use the session for the login)
then I want to go directly to step 2 (hidden div 1 and 2)
And my statement is how do I get login session logic on javascript?
This is the markup for the view:
<div class="container">
<div class="stepwizard1">
<div class="stepwizard-row1 setup-panel">
<div class="stepwizard-step1">
<a id="a-step1" href="#step-1" type="button" class="btn btn-primary btn-circle"></a>Step 1</p>
</div>
<div class="stepwizard-step1">
<a id="a-step2" href="#step-2" type="button" class="btn btn-default btn-circle disabled"></a>
<p>Step 2</p>
</div>
<div class="stepwizard-step1">
<a id="a-step3" href="#step-3" type="button" class="btn btn-default btn-circle disabled"></a>
<p>Step 3</p>
</div>
</div>
</div>
<div class="tab-panel setup-content" id="step-1">
<div class="col-md-12">
<section class="content">
<div class="login">
<h2>masuk</h2>
<div class="alert alert-danger alert-dismissible alert-login" style="display:none;"></div>
<form id="form-login">
<div id="label_email">
<input type="text" placeholder="Email" name="email" id="email"/>
</div>
<div id="label_password">
<input type="password" placeholder="Password" name="password" id="password"/>
</div>
<button type="submit" class="button nextBtn">Masuk</button>
</form>
</div>
</section>
</div>
<div class="tab-panel setup-content " id="step-2">
<div class="col-md-12">
<section class="content">
<div class="login">
<h2>Alamat</h2>
<div class="alert alert-danger alert-dismissible alert-login" style="display:none;"></div>
<div id="label_email">
<input type="text" placeholder="alamat" name="alamat" id="alamat"/>
</div>
<div id="label_password">
<input type="text" placeholder="kodepos" name="kodepos" id="kodepos"/>
</div>
<button type="submit" class="button nextBtn">Next</button>
</div>
</section>
</div>
</div>
</div>
btw, here I use ajax for the login form...
Thanks in advance, and I'm sorry if it's still wrong because I am still relatively new in the world of programs and my bad...very bad English.
First of all, if you are using a laravel then you can take advantage of blade templating engine
#auth
// The user is authenticated...
#endauth
#guest
// The user is not authenticated...
#endguest
Then you could set some classes inside those code blocks and style them. Your steps will be easier to implement.
If, however, you really want to use Ajax to check if user is authenticated, You could make a function in your controller to return a user status like
public function isLogged() {
if (Auth::check()) {
// The user is logged in...
}
}
And set up a root path like
Route::post( '/isUserLogged', 'UserController#isLogged' );
Oh, and one more thing, if you are using steps that could get ugly JS code pretty fast. I would suggest to use a Vuejs framework which has already built in the Laravel.
Good luck :)
Related
I've been looking at examples and nothing seems to work. Right now I have a button group, where each button serves as a separate category. Once the button is clicked, it will show an accordion and within the accordion there will be forms. For testing purposes, I only have one form right now.
The problem I'm running into is that once I click the submit button, the page completely reloads and once the page is returned everything is closed. I've tried using updatePanel and have had zero luck.
Basically, I want everything to remain open after the reload that was open before the reload.
<asp:ScriptManager id="script1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel id="panel1" runat="server">
<div class="btn-group-vertical" style="width:100%; ">
#* Bucket Group 1 *#
<div class="btn-group">
<button type="button" class="btn btn-primary" id="formButton1" style="background-color:#EEEEEE; border-color:darkgrey; color:black;"><p>Bucket </p> <text style="font-size:80%;"> Bucket1</text></button>
#* Overall form for Monitoring *#
<form asp-controller="test" method="post" role="form" onsubmit="return confirm('Do you really want to carry out this action?');" id="form1" style="display:none;">
<div id="accordion" role="tablist" aria-multiselectable="true">
#* Form 1 *#
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="font-size:15px;">
Test1
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block">
<div class="form-group">
<div class="form-group">
<p> This script will return a value.</p>
</div>
#Html.DropDownList("Envs", new SelectList(Enum.GetValues(typeof(Envs))), "Select Enivronment", new { #class = "form-control" })
<br>
<div>
<button type="submit">Submit</button>
</div>
<br />
#* Space to display output *#
<h5>Output: </h5>
<div>
<textarea cols="20" rows="2" class="form-control" style="color:cadetblue;font-weight:bold;"> #ViewBag.serviceResponse </textarea>
</div>
</div>
</div>
</div>
</div>
#* Form 2 *#
</div>
</form>
</div>
#* Bucket Group 2 *#
<div class="btn-group">
<button type="button" class="btn btn-primary" id="formButton2" style="background-color:#EEEEEE; border-color:darkgrey; color:black;"><p>Test2</p> <text style="font-size:80%">Test 2</text></button>
<form id="form2" method="post" style="display:none;">
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card" id="get">
<div class="card-header" role="tab" id="heading">
<h5 class="mb-0">
<p> Test2.</p>
</h5>
</div>
</div>
</div>
</form>
</div>
</div>
</asp:UpdatePanel>
Javascript functions to open when buttons are clicked.
$("#formButton1").click(function () {
$("#form1").toggle();
});
// Write your JavaScript code.
// Write your Javascript code.
$("#formButton2").click(function () {
$("#form2").toggle();
});
You have two options:
Don't reload the page (add a click handler to submit form data without using the built-in HTML submit)
Use local storage to store the state of which accordion section was open and initializing the page with the same section open
I am building a Reddit clone. So far you are able to add links, upvote/down vote, and comment/remove comments on the links posted. You must be logged in via Twitter to add comments or posts.
The big issue I am facing is whenever a post has comments, they do not show up if you reload the website. You must add a new comment to see comments which are already present. The next big issue is if you add a new post it will automatically inherit the comments from the previously commented on post even though these comments are not in the posts data on the Firebase Server.
If you comment on the new post it causes all the other post's comments to inherit the new comment on the new post.
Here is the source code.
<div>
<span>Currently Logged in as: {{authData.twitter.username}}</span>
<form>
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label class="control-label" for="focusedInput">Post Name</label>
<input type="text" ng-model="post.name" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label class="control-label" for="focusedInput">Description</label>
<input type="text" ng-model="post.description" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label class="control-label" for="focusedInput">URL</label>
<input type="text" ng-model="post.url" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-3">
<button ng-click="savePost(post)" class="form-control" style="margin-top: 25px">Submit</button>
</div>
</div>
</div>
</form>
</div>
<div ng-repeat="post in posts">
<h2><a ng-href="{{post.url}}">{{post.name}}</a></h2>
<p>{{post.description}}</p>
<button ng-click="deletePost(post)" class="btn btn-danger">Delete Post</button>
<span>{{post.votes}}</span>
<button ng-click="addVote(post)" class="btn btn-primary">Up Vote</button>
<button ng-click="removeVote(post)" class="btn btn-primary">Down Vote</button>
<br>
<br>
<div class="panel panel-default" ng-repeat="comment in comments">
<div class="panel-body">
<a ng-href="https://twitter.com/{{comment.user}}">{{comment.user}}</a>
</div>
<div class="panel-footer">
{{comment.text}}
<br>
<button class="btn btn-danger" ng-click="removeComment(post, comment)">Remove Comment</button>
</div>
</div>
<form>
<div class="input-group">
<input ng-model="comment.text" class="form-control">
<div class="input-group-btn"><button ng-click="addComment(post, comment)" class="btn btn-success">Add Comment!</button></div>
</div>
</form>
</div>
<br>
<button class="btn btn-primary" ng-click="login()">Log in with Twitter</button>
<!--Starter Project for the Reddit Clone-->
<!doctype html>
<html ng-app="reddit-clone">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.min.js">
</script>
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
<link rel="stylesheet" href="bootstrap.css">
<script src="app.js"></script>
<title>Reddit Clone</title>
</head>
<body style="width: 80%; margin: 0 auto">
<h1 class="text-center">Reddit Clone</h1>
<div ng-view></div>
</body>
</html>
Here is a picture of the database showing that the comment only exists for the first post.
Here is a picture showing how the comment is display on both posts even though it is only in one in the database.
You are storing only one comments array on your $scope.
Then in your template, you are looping over this one array for each post inside the ng-repeat on posts, hence it is the same for both posts. You need to loop over the comments that are specific to a post instead. Like so:
<div class="panel panel-default" ng-repeat="comment in post.comments">
Notice the post.comments.
I have a file upload control as shown below,
Code:
<div class="row">
<div class="col-md-12">
<div class="alert alert-warning normal-text hide" role="alert" id="ImportErrorMessage"></div>
<div class="panel panel-default">
<div class="panel-body">
<form id="FileImportForm" method="POST" action="api/FileUpload/Upload" enctype="multipart/form-data">
<div class="col-md-1">
<span class="glyphicon glyphicon-download-alt"></span> Get Template
</div>
<div class="col-md-3">
<select id="ItemDdl" class="col-md-12 item-list" title="Items"></select>
</div>
<div class="col-md-3">
<input type="file" id="ImportFile" name="ImportFile" accept="*.xlsx" class="col-md-12" />
</div>
<div class="col-md-1">
<button class="btn btn-danger btn-xs" id="ImportFileBtn" type="Submit" title="Import and Validate"><span class="glyphicon glyphicon-import"></span>Validate</button>
</div>
</form>
</div>
</div>
</div>
</div>
Expectation:
I want to show the 'No file chosen' message in the center as shown in the image. The reason is, to reduce the empty space between the 'Validate' button and the 'Choose file' button.
Options Tried:
I tried to modify this via css property and jquery but could not locate the text in UI.
Any help is appreciated.
Sorry, there is no simple way to do it. The only way to do it is to hide that input, put an image where that input is and some text with margin-left. With javascript you can easily position it and make sure that the click works cross-browser.
I'm trying to align my product box to look like this:
What I have thus far:
jsFiddle
I'm just trying to obtain the results of the "boxed" area, but I cannot for the life of me figure out this alignment.
I've included external resources to my JS & CSS as well.
HTML is below:
<section id="product">
<div class="container White_BG">
<aside class="col-md-4">
<!--Category-->
<div class="sidewidt2">
<div class="productprice" id="StandardProductBox">
<div id="ItemNumber">
<span itemprop="identifier" content="sku:EB06">
<p># EB06</p>
</span>
</div>
<div itemprop="availability" id="StockStatus" content="in_stock">
<strong>Out of Stock,</strong>
Please call for availability
</div>
<p class="prod-det-price">Call for Pricing</p>
<label for="qtyproduct" id="qtylabel">Qty</label>
<input id="qtyproduct" type="text" value="1" name="dmilist_Qty_100000060715">
<ul class="productpagecart">
<li>
<span style="position:relative;">
<input type="submit" id="DisabledAddToCart" name="Add to Cart" value="ADD TO CART" alt="Add to Cart" style="cursor:not-allowed;" disabled="disabled">
<div class="DisabledCart" style="position:absolute; left:0; right:0; top:0; bottom:0; cursor:not-allowed;"></div>
</span>
<div class="modal fade" id="NotAvailable" tabindex="-1" role="dialog" aria-labelledby="NotAvailableLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<img class="closeModal" data-dismiss="modal" aria-hidden="true" src="http://cdnll.amleo.com/images/art/x_white.png" height="20" width="20" alt="X">
<h4 class="modal-title" id="myModalLabel">Not Available Online</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger"><strong>Not available for online orders. Please call 1-800-543-8995 to order; thank you.</strong></div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="ShipWeight" id="ShipWeight">
Weight: 29.80 lbs
</div>
</aside>
</div>
</section>
I'm not sure what you have the ability to adjust and what you don't, but you can do this a couple ways by changing the markup and the classes. I'll show you the finished product and you'll have to work to convert your markup to something like this.
If you want half the content to hug the left, and the other half to hug the right, you should keep each separate. You can float one section left and the other right (.pull-left and .pull-right in Bootstrap), but since you're already using Bootstrap, why not use their grid system for layout. That's what it's there for!
So set up your shopping cart item, and add a .row inside of it, and then split the content in half with two divs with .col-xs-6. Put the content inside each div. The content for the one on the right can align to the right by using .text-right.
Like this:
<div class="ItemBox ">
<div class="row">
<div class="col-xs-6">
<b>#EBRO1</b><br/>
Call for pricing.<br/><br/>
<label for="qtyInput" >Qty</label>
<input type="text" id="qtyInput" />
</div>
<div class="col-xs-6 text-right">
<b>Out of Stock,</b><br/>
Please call for availability <br/><br/>
<button class="btn btn-default">Add to Cart</button>
</div>
</div>
</div>
Demo in fiddle
Which will look like this:
I`m use front-end framework Foundation. How i can in this menu enable Log in button only if Login and Password input filled text.
<form data-abide="ajax">
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Login" />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Password" />
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
Log in
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Register
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Forgot password?
</div>
</div>
</form>
You could add a function to watch the onkeypress listener for the input box. Here is a working fiddle of how to do it on the username and you could do something similar for the password input as well.
http://jsfiddle.net/fFLq4/
Add a couple element id's to your elements:
<form data-abide="ajax">
<div class="row">
<div class="large-12 columns">
<input type="text" id="loginTxtBox" placeholder="Login" />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Password" />
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
Log in
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Register
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Forgot password?
</div>
</div>
</form>
And add the javascript function to listen for the keypress:
var textBox = document.getElementById("loginTxtBox");
textBox.onkeypress=function(textBox){
if(this.value.length >= 5)
{
document.getElementById("loginButton").className = "button tiny";
}
else
{
document.getElementById("loginButton").className = "button tiny disabled";
}
};
This will only activate your login button once you have at least 5 characters in it. Apply this to your password input as well.
If I understand this correctly, you would like to show the login form only if the user clicks on the Login Link.
To achieve this, I would suggest moving the links outside the and use any of these (toggle/show/slide) in jQuery to show it on click.
Here is the modified HTML:
<form id="loginForm" data-abide="ajax">
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Login" />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Password" />
</div>
</div>
</form>
<div class="row">
<div class="large-12 columns text-center">
<a id="login" href="#" class="button tiny disabled">Log in</a>
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Register
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Forgot password?
</div>
</div>
And here is a working fiddle of how to show/hide the login form:
http://jsfiddle.net/9C4s7/
The commented line in the js toggles the slide (clicking the link will show the form, clicking it again will hide it). The active line will only make it slide down once clicked. So, you go ahead and choose whichever works best for you!