Autofocus form field causes loading issue in Firefox - javascript

I have a Laravel-based web application, and I have a very odd and specific problem appearing on some pages in Firefox only.
If I have a form on the page, and in that form there is a field with autofocus, the HTML loads before the CSS, and for a second or two, the user sees the page as plain text, before the CSS loads and then everything is back to normal.
The correlation sounds far-fetched, but removing the autofocus from the form field resolves the issue in 100% of cases on the website. Is the autofocus somehow requiring the browser to load the HTML before the styling? How do I fix this without removing autofocus from all my forms?
This is an example form field from the site:
<div class="form-group">
<label for="card-number" class="col-md-4 control-label">Card Number</label>
<div class="col-md-6">
<input id="card-number" type="text" class="form-control span4 card-number numbers-only" value="" required autofocus maxlength="16">
#if ($errors->has('card-number'))
<span class="help-block">
<strong>{{ $errors->first('card-number') }}</strong>
</span>
#endif
</div>
</div>
All the CSS files are loaded in the <head> of the page:
<!-- jQuery UI -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<!-- Theme Styles -->
<link href="/assets/css/bootstrap.css" rel="stylesheet">
<link href="/assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="/assets/css/styles.css" rel="stylesheet">

Related

Laravel forms broken after including Vue

I am in the process of adding real-time messaging functionality to a Laravel 6.x site. The messaging seems to be working, but as soon as I include <div id="app"> just after the main menu, some of the existing forms stop working. E.g., this form:
<div class="modal-body">
<div class="form-controls">
<div class="row">
<div class="col-lg-4">
<form id="form-status{{$task->id}}" action="{{ url('xxx') }}" method="POST" style="display: none;">
#csrf
<label for="status{{$task->id}}">Status: </label>
<select class="form-control" id="status{{$task->id}}" name="status">
<option value="0" selected="selected">Not started</option>
<option value="10">Started</option>
<option value="20">Finished</option>
</select>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary" onclick="event.preventDefault();document.getElementById('{{'form-status'.$task->id}}').submit();"> Update
</a>
</div>
The post action is still executed, but I get a 419 "page expired" error, so I assume the csrf value is not sent with the post data anymore.
Does anyone know why this may be happening? For now, I've moved the APP id to a small section of the website with no pre-existing forms, but in future I would like to have more Vue components on the page, so I will have to fix it at some stage.
I am using Bootstrap 3, so I removed Bootstrap 4 in Laravel using npm, and I import it using a script tag. The HTML header includes:
<link href="http://myurl/css/bootstrap.min.css" rel="stylesheet">
<link href="http://myurl/css/reset.css" rel="stylesheet">
<link href="http://myurl/css/dashboard.css" rel="stylesheet">
<link href="http://myurl/css/sticky-footer-navbar.css" rel="stylesheet">
<link href="http://myurl/css/bootstrap-datepicker.css" rel="stylesheet">
<!-- Script imported for laravel echo and vue -->
<script src="http://myurl/js/app.js" defer></script>
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" defer></script>
<script src="http://myurl/js/bootstrap.min.js" defer></script>
<script src="http://myurl/js/bootstrap-datepicker.js" defer></script>
Thanks,
Hendrik.
EDIT:
The html sent to the client is as follows:
<div class="modal-body">
<div class="form-controls">
<div class="row">
<div class="col-lg-4">
<form id="form-status94" action="myurl/projects/35/nodes/68/tasks/94/status" method="POST" style="display: none;">
<input type="hidden" name="_token" value="7ynFCghH2yNGpaO5Pfpd45EMYGIQHdXdNjYooNtJ">
<label for="status94">Status: </label>
<select class="form-control" id="status94" name="status">
<option value="0" selected="selected">Not started</option>
<option value="10">Started</option>
<option value="20">Finished</option>
</select>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary" onclick="event.preventDefault();document.getElementById('form-status94').submit();">Update
</a>
</div>
Your curly braces conflict with Vue.js. There's a Blade & JavaScript Frameworks section in Laravel's documentation, saying:
Since many JavaScript frameworks also use "curly" braces to indicate a given expression should be displayed in the browser, you may use the # symbol to inform the Blade rendering engine an expression should remain untouched. For example:
<h1>Laravel</h1>
Hello, #{{ name }}.
In this example, the # symbol will be removed by Blade; however, {{ name }} expression will remain untouched by the Blade engine, allowing it to instead be rendered by your JavaScript framework.

Can disable the time picker using bootstrap

I downloaded one admin template that template has datetimepicker in that I want only date picker but I don't how to disable the time picker please help me how to fix these issues. I'll attach my class file and HTML code and same time I'll attach the time picker UI also.
<!-- Bootstrap Material Datetime Picker Css -->
<link href="{{asset('assets/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css')}}" rel="stylesheet" />
This one they using footer
<script src="{{asset('assets/plugins/momentjs/moment.js')}}"></script> <!-- Moment Plugin Js -->
<!-- Bootstrap Material Datetime Picker Plugin Js -->
<script src="{{asset('assets/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js')}}"></script>
This is my HTML code
<div class="col-sm-6">
<div class="input-group">
<span class="input-group-addon">
<i class="zmdi zmdi-calendar"></i>
</span>
<input type="text" class="form-control datetimepicker" placeholder="Please choose date & time...">
</div>
</div>
You can do this by setting the time param as false like:
$('.datetimepicker').bootstrapMaterialDatePicker({ time: false });
Demo Here

How to place a datetimepicker in html page?

I have all of these files in my website header:
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="crossorigin="anonymous"></script>
<script src="http://localhost:8080/Javascript/bootstrap.bundle.js" type="javascript/text"></script>
<link rel="stylesheet" href="http://localhost:8080/Css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js" type="javascript/text"></script>
Then I have the following in my body:
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<!-- Form code begins -->
<form method="post">
<div class="form-group"> <!-- Date input -->
<label class="control-label" for="date">Date</label>
<input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
</div>
<div class="form-group"> <!-- Submit button -->
<button class="btn btn-primary " name="submit" type="submit">Submit</button>
</div>
</form>
<!-- Form code ends -->
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#date").datepicker();
});
</script>
I want it to look like this: https://formden.com/blog/date-picker.
But instead it looks like this:
What do I do? I have been trying for hours. I have tried different ordering of the files. When I try to do datetimepicker(). I get an error. I just do not know what to do please help.
It looks like you are Using JqueryUI as well as BootstrapDatepicker. Since bootstrapDatepicker and JqueryUI both has got the same function name for their datepicker to be initialized hence there is an ambiguity.
Now your markup has got jqueryUI js loaded first so it is ideally using the jqueryUI datepicker function and expecting the CSS of jqueryUI which can be found here.
If you want to use the bootstrap datepicker then you might need to remove the jqueryUI.js or generate the jqueryUI js which is excluding the datepicker functionality.

css rule not applying when using third party files

I am using the following source to create some good looking forms on my site.
If you look at the live demo, and go to the form titled "yoko" you will see that once you fill out the input box, it is supposed to stay open, and you are supposed to be able to see the text you input.
When I use this source, it opens when I click in the text box, but the form collapses even when it has been filled out, which it is not supposed to do.
On the demo when you click in the text box and fill it out, the class name of that span element goes from "input input--minoru" to "input input--minoru input--filled". When I use the css, and javascript files from the source the forms open up correctly when I click and type in them, but they do not stay open, and the class title does not changed to "input input--minoru input--filled".
In my header.php I all the css files in the following order:
<link href="dist3/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/normalize.css" >
<link type="text/css" rel="stylesheet" href="css/component.css" >
<link type="text/css" rel="stylesheet" href="css/style2.css" >
In my index.php I have the following piece of code:
<section class="test">
<div class="container">
<div class="row">
<span class="input input--minoru">
<input class="input__field input__field--yoko" type="text" id="input-1" />
<label class="input__label input__label--yoko" for="input-1">
<span class="input__label-content input__label-content--yoko">First Name</span>
</label>
</span>
</div>
<div class="row">
<span class="input input--yoko">
<input class="input__field input__field--yoko" type="text" id="input-1" />
<label class="input__label input__label--yoko" for="input-1">
<span class="input__label-content input__label-content--yoko">Last Name</span>
</label>
</span>
</div>
</div>
</section>
and at the very end of index.php I call the javascript files in this order:
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script type="text/javascript" src="js/script.js"></script>
The styles are all applying, so I know the css is at least styling correctly, but it is not doing the correct ::before and ::after functionality correctly.
JSFiddle of what I am talking about
If you type in something into a form, and then leave the input area the box collapses again. When it should stay up.
I did not include the .js files, but classie.js comes with the source, and they are ordered as mentioned above in my index.php

Search clear button does not appear in iOS

I have an application that does some searches against post codes and for the most part it works fine. However, I have noticed that the clear icon which appears on the right-hand side of the field does not appear in some browsers.
So I created a basic HTML markup to test against some browsers. This is not have any accompanying CSS stylesheet.
<input type="search" />
Under iOS 7 Safari and Chrome this does not appear.
Under Safari 7.0.1 and Chrome 31.0.1650.63 on the Mac this works perfectly fine.
Under Firefox 26 for Mac this does not appear.
The main reason why I want it is because the web app will be running mainly on the mobile platform and removing post codes in a flash would be very convenient for continued usage.
The other tactic I tried was to select the entire text once the field was on focus.
<input id="orig" type="search" value="" placeholder="Origin" onclick="this.select()">
This works under Firefox/Safari/Chrome on the Mac but not on iOS.
I do not really mind which of the above works as long as I can quickly get rid of the old text from the search field. Is there a universal markup I could use that would work across all browsers?
I have solved my query with the following code using Jquery mobile:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Insert Page Title Here</h1>
</div>
<div data-role="content">
<label for="search-enhanced">Search:</label>
<div class="ui-input-search ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear">
<input type="text" data-type="search" data-enhanced="true" name="search-enhanced" id="search-enhanced" value="">
</div>
</div>
<div data-role="footer">
<h1>Insert Footer Text Here</h1>
</div>
</div>
</body>
</html>
I hope this helps anyone having the same issue.

Categories