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.
Related
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.
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">
I'm trying to use Selenium in python to web scrape some data that is behind a login page. By viewing source, the page source code is as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>sometitle</title>
</head>
<body>
<div id="id1"></div>
<div id="wrapper">Loading...</div>
<div id="id2">
... some code ...
</div>
... some code ...
<script data-main="main" src="libs/requirejs.js"></script>
</body>
</html>
I tried to use the following code to log into system and go to the next page, but it cannot find username/password elements in the above source code:
from selenium import webdriver
browser = webdriver.Chrome()
username = 'username'
password = 'password'
browser.get("https://sometitle.com")
browser.find_element_by_name("callback_0").send_keys(username)
browser.find_element_by_name("callback_1").send_keys(password)
browser.find_element_by_name("callback_2").click()
I then examined elements by inspect elements and found the elements on that page:
<div id="wrapper"><div id="login-base" class="base-wrapper">
<div id="header" class="clearfix">
...
</div>
<div id="content" class="content"><div class="container-shadow" id="login-container" style="background-image: url(../images/box-bg.png);">
<br>
<h1>Header</h1>
<form action="" method="post" class="form small">
<fieldset>
<div class="group-field-block">
<label class="short">Username:</label><input type="username" name="callback_0" value="" data-validator="required" required="" data-validator-event="keyup">
</div>
<div class="group-field-block">
<label class="short">Password:</label><input type="password" name="callback_1" value="" data-validator="required" required="" data-validator-event="keyup">
</div>
<div class="group-field-block float-left">
<input name="callback_2" type="submit" class="button" index="0" value="Login">
</div>
<ul class="link-box float-left"></ul>
</fieldset>
</form>
</div>
</div>
</div>
</div>
My question is - how can I locate the username/password/submit elements on the page that is only visible from inspect elements but not page source? Did some research, seems the website was built as dynamic website and it's redirecting to other page via jquery or javascript or something. I don't quite understand what's going on. Really appreciate some help or some insights!
On my concept design the jQuery controlling things like the calendar to appear when the input(s) at the top right are clicked on work fine, however now I'm trying to integrate this into an existing design, all these Javascript elements are not working, although I am using the same code amongst other things which already existed within old design.
I considered it to be simply a compatibility issue of the sidebar calendar, removed it entirely and still nothing. Within the console it defines "Cannot read property 'datetimepicker' of null" for example.
Live URL of the concept (all working elements): http://bit.ly/1m23oXT
Live URL of the non working site: http://bit.ly/1gxgXfx
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo HTTP_HOST; ?>Styles/jquery.datetimepicker.css" />
<script src="<?php echo HTTP_HOST; ?>Scripts/jquery.idTabs.min.js"></script>
.
<div class="header-reservations">
<div id="usual2" class="usual">
<ul>
<li>ROOM BOOKINGS</li>
<li>SPA BOOKINGS</li>
</ul>
<div id="tabs2">
<form>
<input type="text" class="header-form-input" id="datetimepicker" placeholder="21st January" />
<select class="header-form-dropdown">
<option>1 Night</option>
<option>2 Nights</option>
</select>
<select class="header-form-dropdown">
<option>1 Adult</option>
<option>2 Adults</option>
</select>
<input type="submit" class="header-form-submit blue-btns" value="BOOK" />
</form>
<span class="clearboth"></span>
</div>
<div id="tabs3">
<div class="header-tab-spa">
<h3>To Make A Spa Booking, Contact Us Here</h3>
</div>
<span class="clearboth"></span>
</div>
</div>
</div>
.
<!-- Required JS Files -->
<script type="text/javascript">
$(document).ready(function() {
$("#usual2 ul").idTabs("tabs2");
}
</script>
<script src="<?php echo HTTP_HOST; ?>Scripts/jquery.datetimepicker.js"></script>
<script type="text/javascript">
$('#datetimepicker').datetimepicker();
$('#datetimepicker2').datetimepicker();
</script>
A parenthesis is missing at the end of
$(document).ready(function() {
$("#usual2 ul").idTabs("tabs2");
}
But such a syntax error should be found using the console, not Stack Overflow. Read about the console.
I'm writing a chrome extension that uses angularjs to get a JSON response from an API. The page bellow is the popup for the extension. At the moment there is a form that calls a method in the angular controller to get the JSON from the API, however I would like to have this called when the popup is opened. I have tried many things to get this to work and failed. I'd like some guidance if anyone knows what is required to achieved what I want.
Thanks.
Here's my code.
I declare my app like so
var extension = angular.module('StackAPI',['ngResource']);
In my controller file i have the following.
extension.controller('StackAPICtrl', function ($scope, $resource) {
$scope.stackAPI = $resource('http://*/question/params?questionId=:questionId',
{port:'80', questionId:'', callback:'JSON_CALLBACK'},
{get:{method:'JSONP'}});
$scope.doSearch = function () {
$scope.soResult = $scope.stackAPI.get({questionId:$scope.search});
}
});
And my html popup page looks like this
The form with the ng-submit="doSearch()" is what currently calls the method in the angular controller. I would like this method doSearch() to be called when I open the extension popup page.
<!DOCTYPE html>
<html ng-app="StackAPI" ng-csp>
<head>
<title>Test</title>
<script type="text/javascript" src="/js/angular.min.js"></script>
<script type="text/javascript" src="/js/angular-resource.min.js"></script>
<script type="text/javascript" src="/js/extension.js"></script>
<script type="text/javascript" src="/js/query.js"></script>
<link rel="stylesheet" type="text/css" href="/css/all.css" media="screen"/>
</head>
<body>
<div ng-controller="StackAPICtrl">
<form align="left" ng-submit="doSearch()">
<input id="input" type="text" placeholder="Enter a question id..." ng-model="search" size="115">
</form>
<div class="container">
<div ng-repeat="answer in soResult.answers">
<div id="answer-{{answer.answer_id}}" class="answer" data-answerid={{answer.answer_id}}>
<table>
<tr>
<td class="votecell">
<div class="vote">
<span class="vote-count-post " title="up-ranked">
<img src="/images/arrow.png" alt="arrow" height="64" width="64">
</span>
</div>
</td>
<td class="answercell" align="left">
<div class="post-text" ng-bind-html-unsafe="answer.body">
</div>
<table class="fw">
<tr>
<td class="vt">
<div class="post-menu">
<a class="short-link">share</a>
<span class="lsep">|</span>
<a class="suggest-edit-post" title="revise and improve this post">edit</a>
</div>
</td>
<td align="right" class="post-signature">
<div class="user-info ">
<div class="user-action-time">answered {{answer.creation_date}}
<span title="2013-02-22 23:12:55Z" class="relativetime"></span>
</div>
<div class="user-gravatar32">
<!-- ${profile_picture} -->
<img src="{{answer.owner.profile_image}}"
alt="" width="32" height="32">
</div>
<!-- users details stuff here -->
<div class="user-details">
<!-- ${name} -->
<a>{{answer.owner.display_name}}</a><br>
<span class="reputation-score" title="reputation score" dir="ltr">
<!-- ${reputation} -->
{{answer.owner.reputation}}
</span>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
It turns out that what I am doing is not possible with my current setup due to the content security policy (CSP) chrome has. The API I created is currently serving only with http, this is where the problem lies. The doSearch() method calls a ngResource that has been initialized with my http API and due to the CSP it can only run in a sandbox defined in the manifest file. The sandboxing means other parts of the extension can not comuiniacte with what ever is running in the sandbox, and so I can not call the doSearch() method in the way that I want.
The solution to this - I have to configure tomcat to serve the API over https, which is allowed by the CSP once the source uri is stated in the manifest file.