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.
Related
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.
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 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
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.
I have a select box that directs users to another page when an item is selected. I would like to show some kind of loading.gif when the user selects an Item, so they know that something is happening. Can someone please show me how to accomplish this?
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$("sRedirect").change(function(){
$("#sRedirect :selected").not(:contains('Click Here To Select')).siblings("img").first().attr('src','loading.gif');
});
</script>
</head>
<body>
<div class="titleBar">
<div class="Logo"><a class ="backBtn" href="javascript:history.back();"> </a><img src="logotop.png" align="right" />
</div>
<br><br>
<div class="top"><br><br><h2>Step 1<br><br>Choose an Area</h2><br><br> <div>
<div class="middle">
<form name=form1>
<select name="URL" id="sRedirect" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value" onfocus="javascript:toggle();" >
<option value="" disabled="disabled" selected="selected">Click Here To Select</option>
<?=$options?>
</SELECT>
<br>
<img src="" id="myLoadingPicture"/>
</form>
</div>
</html>
Just show an image before you set the location.href.
<select name="URL" onchange="$('#myLoadingPicture').show(); window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value" onfocus="javascript:toggle();" >
When you start going to another page (more specifically, start unloading a page) then the page is no longer required to respond. Therefore, even if you added an animated GIF (a simple task, just create an image element and append it to the body) there is no guarantee that it will animate, or even show up.