I'm using Turbolinks in my laravel App, the problem I'm encountering now is when I switch view, the content is loaded before the CSS and images and it causes an awkward display of HTML before quickly switching to full view with is bad for UX. How can I fix this, probably by ensuring turbolinks only switches once it has loaded all CSS and images first?
====EDIT====
I've been able to uncover this much
We are routing from there to the login page:
#extends('./layouts/base')
#section('meta')
#section('title', 'Become a Tuper Seller')
<link rel = "stylesheet" href = " {{ asset('fonts/material-icon/css/material-design-iconic-font.min.css')}} ">
#endsection
#section('body')
<link rel = "stylesheet" href = " {{ mix('css/auth.css')}} ">
<div class = "auth-form">
<div class="main">
<!-- Sign up form -->
<section class="signup">
<div class="container">
<div class="signup-content">
<div class="signup-form">
<h2 class="form-title">Create A Consumer Account</h2>
<form method="POST" class="register-form" id="register-form">
#csrf
<div class="form-group">
<label for="username"><i class="zmdi zmdi-account material-icons-name"></i></label>
<input type="text" name="username" id="name" placeholder="Your Name" value = "{{ old('username')}}"/>
</div>
#error("username")
<div class = "alert alert-danger"> {{ $message }}</div>
#enderror
<div class="form-group">
<label for="email"><i class="zmdi zmdi-email"></i></label>
<input type="email" name="email" value = "{{ old('email')}}" id="email" placeholder="Your Email"/>
</div>
#error('email')
<div class = "alert alert-danger"> {{ $message }}</div>
#enderror
<div class="form-group">
<label for="telephone"><i class="zmdi zmdi-phone"></i></label>
<input type="number" value = "{{ old('telephone') }}"name="telephone" id="telephone" placeholder="Telephone"/>
</div>
#error("telephone")
<div class = "alert alert-danger"> {{ $message }}</div>
#enderror
<div class="form-group">
<label for="password"><i class="zmdi zmdi-lock"></i></label>
<input type="password" name="password" value = "{{ old('password') }}"id="pass" placeholder="Password"/>
</div>
#error('password')
<div class = "alert alert-danger"> {{ $message }}</div>
#enderror
<div class="form-group">
<label for="password_confirmation"><i class="zmdi zmdi-lock-outline"></i></label>
<input type="password" value = "{{ old('password_confirmation')}}" name="password_confirmation" id="re_pass" placeholder="Repeat your password"/>
</div>
<div class="form-group">
<input type="checkbox" name="agree-term" id="agree-term" class="agree-term" />
<label for="agree-term" class="label-agree-term"><span><span></span></span>I agree all statements in Terms of service</label>
</div>
<div class="form-group form-button">
<input type="submit" name="signup" id="signup" class="form-submit" value="Register"/>
</div>
</form>
</div>
<div class="signup-image">
<figure><img src=" {{ asset('img/tuper_logo.jpg')}} " alt="sing up image"></figure>
I want to be a seller
</div>
</div>
</div>
</section>
<!-- Sing in Form -->
</div>
</div>
#endsection
I've noticed that replacing the mix(auth.css) in the login page with inline style tags and pasting the mix file fixes this error but this is not a suitable way of accomplishing this.
Well ive found a pretty neat solution. Since the css lag is caused by the link tag and since it works well when i paste the required css into style tags, i can replace by link tag with
<style>
{{ file_get_contents(asset('css/auth.css'))}}
</style>
This way it dumps the css as content instead of hyper referencing it which erradicates the dumbass delay. Also the mix helper wont work here if mix.version() is set in your webpack.mix.js because of the cache hashing.
But i dont imagine it will be a problem since there will be no cache of the css.
Related
AS I am new to jQuery I am trying to learn new things so I need little help in this : As I am trying to hide form field on submitting the form and display successful message but the form keep reloading and fields are not hiding.
following is my code
$(document).ready(function() {
$("#contact_form").submit( function() {
$("#contact_form").hide();
$(".successMessage").show();
});
});
<section class="section NPScontainer">
<a name="pagecontent" id="pagecontent"></a>
<div class="container content page NPScontainer">
<div class="feature_divider NPS-divider"></div>
{% render 'page-multi-column', content: page.content %}
<div class="one-whole column">
<div class="rich-text__content center">
<div class="rich-text__text featured_text">
<h1>THANK YOU</h1>
<p><strong>Thank you for giving us a rating</strong></p>
<p>If you have further details to share with us regarding your rating, please don’t hesitate to share them.</p>
<p>Your feedback will help us improve our services for you.</p>
</div>
<p class="successMessage">"Thank you, we value your feedback. If your feedback requires a response, our customer service team will reach out to you via the email address you have provided.”</p>
<div class="nps_feedback_form">
{% form 'contact' %}
{{ form.errors | default_errors }}
<div class="feedback-type">
<label for="feedback-type">Feedback type</label>
<div class="nps-radio">
<span><input type="radio" name="contact[feedback_type]" value="Compliments" id="comments"><label for="comments">Compliments</label></span>
<span><input type="radio" name="contact[feedback_type]" value="Areas for improvement" id="suggestions"><label for="suggestions">Areas for improvement</label></span>
<span><input type="radio" name="contact[feedback_type]" value="Questions" id="questions"><label for="questions">Questions</label></span>
</div>
</div>
<div class="message">
<label for="message">Feedback</label>
<textarea name="contact[body]" id="message" required></textarea>
</div>
<div class="personal-info">
<div class="first-name">
<label for="first-name">Name</label>
<input type="text" name="contact[first_name]" id="first-name" required/>
</div>
<div class="email">
<label for="email">Email</label>
<input type="email" name="contact[email]" id="email" required />
</div>
</div>
<div class="submit">
<input id="submitnpsform" type="submit" value="Submit"/>
</div>
{% endform %}
</div>
</div>
</div>
</div>
</section>
The default flow for forms is reloading the page when submitting, so you need to prevent this using event.preventDefault(). That should stop the form from reloading the page.
$(document).ready(function() {
$("#contact_form").submit( function(event) {
event.preventDefault()
$("#contact_form").hide();
$(".successMessage").show();
});
});
this is my first time using this site to ask a question. I'd appreciate the help, I have to turn in this bit of the project today as part of my course :(
I'm following this tutorial: https://www.youtube.com/watch?v=ncsCnC3Ynlw (chapter: stripe elements)
When I visit my checkout page, the card element isn't showing up.
I am at the stage around 3:45:00, and when looking at the checkout, the div for the card element is just a thin, empty bar.
Could anyone help me find where I made a mistake? I think it might be the connection between the script and the template or just the script itself, but I'm losing my mind trying to figure out what I've done wrong.
My views.py:
def BasketView(request):
carrinho = Carrinho(request)
total = str(carrinho.gettotal())
total = total.replace('.', '')
total = int(total)
stripe.api_key='sk_test_[...]'
intent = stripe.PaymentIntent.create(
amount=total,
currency='brl',
metadata={'integration_check': 'accept_a_payment', 'userid': request.user.id}
)
return render(request, 'pedido/pedido_novo.html', {'client_secret': intent.client_secret})
My html template:
{% load static %}
{% block title %}Livraria Aquaflora | Novo Pedido{% endblock %}
{% block adtscripts %}
<script src="https://js.stripe.com/v3/"></script>
<script src="https://unpkg.com/imask#6.0.7/dist/imask.js"></script>
<script src="{% static 'js/orderform.js' %}"></script>
<script src="{% static 'js/payment.js' %}" data-rel-js></script>
{% endblock %}
{% block conteudo %}
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-md-12">
<div class="login d-flex align-items-center py-5">
<div class="container">
<div class="row">
<form id="payment-form" class="col-12 col-lg-6 mx-auto">
<div class="form-group">
<label class="small font-weight-bold">Nome</label>
<input type="text" class="form-control" id="custName" placeholder="Nome Completo" required>
</div>
<div class="form-group">
<label class="small font-weight-bold">CPF</label>
<input type="text" class="form-control" id="cpf" placeholder="CPF" required>
</div>
<div class="form-group">
<label class="small font-weight-bold">CEP</label>
<input type="text" class="form-control" id="cep" placeholder="CEP" required>
</div>
<div class="form-group">
<label class="small font-weight-bold">Endereço</label>
<input type="text" class="form-control" id="ender" placeholder="Endereço com Número e complemento" required>
</div>
<div class="form-group">
<label class="small font-weight-bold">Bairro</label>
<input type="text" class="form-control" id="bairro" placeholder="Bairro" required>
</div>
<div class="form-group">
<label class="small font-weight-bold">Cidade</label>
<input type="text" class="form-control" id="cidade" placeholder="Cidade" required>
</div>
<div class="form-group">
<label class="small font-weight-bold">Estado</label>
<input type="text" class="form-control" id="estado" placeholder="Estado" required>
</div>
<hr class="my-4">
<h4 class="mb-3">Pagamento</h4>
<hr class="my-4">
<div id="payment-element" class="form-control form-control-payment">
</div>
<button id="submit" class="btn btn-primary btn-block py-2 mb-4 mt-5 fw500 w-100" data-secret="{{ client_secret }}">Pagar</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var CSRF_TOKEN = '{{ csrf_token }}';
</script>
{% endblock %}
and finally, my script,
var stripe = Stripe('pk_test_[...]');
var elem = document.getElementById('submit');
clientsecret = elem.getAttribute('data-secret');
var elements = stripe.elements();
var style = {
base: {
color: "#000",
lineHeight: '2.4',
fontSize: '16px'
}
};
var card = elements.create("card", { style: style });
card.mount("#card-element");
card.on('change', function(event) {
var displayError = document.getElementById('card-errors')
if (event.error) {
displayError.textContent = event.error.message;
$('#card-errors').addClass('alert alert-info');
} else {
displayError.textContent = '';
$('#card-errors').removeClass('alert alert-info');
}
});
I figured it out. Leaving it here for other dummies like me.
Do not add the .js file to the top of the page. Add it to the bottom, after the /body tag. Turns out values will be NULL if the javascript loads before the page.
The Python code looks correct, at least it looks like mine does in my working integration using Django. So here's a couple of things to try:
You don't need the clientSecret until you use stripe.confirmCardPayment() so don't fetch it yet.
Try putting the data-secret="{{client_secret}}" on the <form> element. You'll need to add an events listener to the <form>'s "submit" event anyway to prevent the default submission and trigger the confirmation so might as well retrieve the client_secret then.
I know this doesn't answer why the button was no selectable but at least it gives you some next steps.
laravel
I'm struggling to put the result of two concatme fields in another field input.
I would like to put the results of response in the email field input.
The thing I would like to achieve is to make it easier for the user to log in to the system without putting the whole email address john#box.domain.com.
here is the code so far.
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
#include('auth/banner')
<div class="panel panel-default panel-shaded">
<div class="panel-body">
#action('login_form.before')
<form class="form-horizontal margin-top" method="POST" action="{{ route('login') }}">
{{ csrf_field() }}
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label for="email" class="col-md-4 control-label">{{ __('Email Address') }}</label>
<div class="col-md-6">
<!-- SCRIPT -->
<script type="text/javascript">
function concatme()
{
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
document.getElementById("response").innerText = num1 + '' +num2;
}
</script>
<!-- FIN SCRIPT -->
<!---- INICIO---->
<input type="text" name="num1" class="form-control" id="num1" placeholder="USER">
<input type="text" name="num2" class="form-control" id="num2" value="#box.domain.com" placeholder="Number 2">
<!---FIN-->
<!-- RESUTLADO PREVIEW -->
<p id="response"></p>
<!-- RESULDADO PREVIEW -->
<input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required autofocus>
#if ($errors->has('email'))
<span class="help-block">
<strong>{{ $errors->first('email') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
<label for="password" class="col-md-4 control-label">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control" name="password" required>
#if ($errors->has('password'))
<span class="help-block">
<strong>{{ $errors->first('password') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<label class="checkbox">
<input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}> {{ __('Remember Me') }}
</label>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-4">
<button type="submit" onclick="concatme()" class="btn btn-primary">
{{ __('Login') }}
</button>
#if (Eventy::filter('auth.password_reset_available', true))
<a class="btn btn-link" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
#endif
</div>
</div>
</form>
<p>Hola</p>
#action('login_form.after')
</div>
</div>
</div>
</div>
</div>
#endsection
I think its working but you are not able to see it because you have use form and called javascript function on submit button.
What happens is its sending request to given route and refreshing page thats make paragraph tag to empty again. Remove type submit from submit button and then confirm if its working or not.
Im using meteor JS and try to implement a summernote.
The problem is, when i try to open a summernote with my data, it work just sometimes.
when i charge the page for the first time, nothing appears in the summernote, but if i change something in my code and save it, the content will appear in the summernote.
please, help me :'(
<template name="consigneModif">
<div class="container">
<div class = "col text-center">
<h1>Modification de {{{this.Name}}}</h1>
</div>
<form class="formConsigne">
<div class="form-group">
<label for="Description"><h4>Nom :</h4></label>
<textarea class="summernote" id="Name" name="Name">{{{this.Name}}}</textarea>
</div>
<div class="form-group">
<label for="Description"><h4>Description :</h4></label>
<textarea class="summernote" id="Description" name="Description" rows="3">{{{this.Description}}}</textarea>
</div>
<div class="form-group">
<label for="Condition"><h4>Condition d'application de la consigne : </h4></label>
<textarea class="summernote" id="Condition" name = "Condition" rows="3">{{{this.Condition}}}</textarea>
</div>
<div class="form-group">
<label for="Mode"><h4>Mode opératoire :</h4></label>
<textarea class="summernote" id="Mode" name ="Mode" rows="3">{{{this.Mode}}}</textarea>
</div>
<div class="form-group">
<label for="Date"><p>Date effective :</p></label>
<input type="Date" id="Date" name = Date>
</div>
<div class="form-group">
<label for="DateFin"><p>Date de fin :</p></label>
<input type="Date" id="DateFin" name = DateFin>
</div>
<div>
<button type="submit" class ="btn btn-success" id="AddConsignButton">Modifier</button>
</div>
</form>
</div>
{{>footerNavbar}}
<script>
$('.summernote').summernote('code');
</script>
</template>
I think the issue is with the script tag you are using to activate the summernote. It should work if you use the onRender method of the template instead.
This may work:
Template.consigneModif.onRendered(function () {
this.$('.summernote').summernote('code');
});
I'm struggling with a solution for this. I have the first block of code, which I want to use for css formatting/look feel etc.
<div class="login-form">
<!-- Start Error box -->
<div class="alert alert-danger hide">
<button type="button" class="close" data-dismiss="alert"> ×</button>
<h4>Error!</h4>
Your Error Message goes here
</div> <!-- End Error box -->
<form action="#" method="get" >
<input type="text" placeholder="User name" class="input-field" required/>
<input type="password" placeholder="Password" class="input-field" required/>
<button type="submit" class="btn btn-login">Login</button>
</form>
</div>
Then I have this separate code that uses a script to submit the user info once entered. I want to move the actions that this script performs onto the above code. Therefore having the look and feel of the first block of code and the actions of the second.
I'm learning at the moment, so it seems logical to try and use example code that exists as a starting point. I'm not able to find any help on goofle that direcly helps resolve this question.
I think if I could work out if I can wrap the script around the top block I could get it from there, just need some direction.
<div class="container" id="login-block">
<script type="text/template" id="login-template">
<header id="header"></header>
<div class="login">
<form class="login-form">
<div class="error" style="display:none"></div>
<input type="text" id="login-username" placeholder="Username" />
<input type="password" id="login-password" placeholder="Password" />
<button>Log In</button>
</form>
</script>
This is what I wanted to achieve. Works now, only taken 3 hours to work it out ;-/
<div class="container" id="login-block todoapp">
<div class="row">
<div class="col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4">
<div class="page-icon-shadow animated bounceInDown" > </div>
<div class="login-box clearfix animated flipInY" id="login-block">
<div class="page-icon animated bounceInDown">
<i class="glyphicon glyphicon-user"></i>
</div>
<div class="login-logo">
<img src="img/login-logo.png" alt="Company Logo" />
</div>
<hr />
<div class="login-form content">
<!-- Start Error box -->
<div class="alert alert-danger hide">
<button type="button" class="btn btn-login" data-dismiss="alert"> ×</button>
<h4>Error!</h4>
Your Error Message goes here
</div></div> <!-- End Error box -->
<script type="text/template" id="login-template">
<header id="header"></header>
<div class="login">
<form class="login-form">
<div class="error" style="display:none"></div>
<input type="text" id="login-username" placeholder="Username" />
<input type="password" id="login-password" placeholder="Password" />
<button>Log In</button>
</form>
</script>
<div class="login-links">
<a href="forgot-password.html">
Forgot password?
</a>
<br />
<a href="sign-up.html">
Don't have an account? <strong>Sign Up</strong>
</a>
</div>
</div>
</div>
</div> </div>