When I remove form-wizard.init.js, livewire wire:model $firstName updates well, but I when I return it, it refuses to update
<div>
<label >First name {{$firstName}}</label>
<input wire:model="firstName" placeholder="Enter Your First Name">
</div>
Here here is the scripts
<!-- form wizard init -->
<script src="assets/js/pages/form-wizard.init.js"></script>
<script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- App js -->
<script src="assets/js/app.js"></script>
<script src="assets/js/custom.js"></script>
#livewireScripts
Related
When you click the "client login" link at the top of this page, the reveal modal should appear. The HTML for it is correct for sure, so a script must be wrong.
In the head of my page, I have these scripts/link:
<!-- jQuery in case needed for Foundation -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Foundation CDN Links -->
<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites#6.5.3/dist/css/foundation.min.css" integrity="sha256-GSio8qamaXapM8Fq9JYdGNTvk/dgs+cMLgPeevOYEx0= sha384-wAweiGTn38CY2DSwAaEffed6iMeflc0FMiuptanbN4J+ib+342gKGpvYRWubPd/+ sha512-QHEb6jOC8SaGTmYmGU19u2FhIfeG+t/hSacIWPpDzOp5yygnthL3JwnilM7LM1dOAbJv62R+/FICfsrKUqv4Gg==" crossorigin="anonymous">
<!-- Compressed JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/foundation-sites#6.5.3/dist/js/foundation.min.js" integrity="sha256-mRYlCu5EG+ouD07WxLF8v4ZAZYCA6WrmdIXyn1Bv9Vk= sha384-KzKofw4qqetd3kvuQ5AdapWPqV1ZI+CnfyfEwZQgPk8poOLWaabfgJOfmW7uI+AV sha512-0gHfaMkY+Do568TgjJC2iMAV0dQlY4NqbeZ4pr9lVUTXQzKu8qceyd6wg/3Uql9qA2+3X5NHv3IMb05wb387rA==" crossorigin="anonymous"></script>
The compressed CSS and JavaScript are what Foundation says to use.
I created the project with foundation-cli originally but am unable to deploy, so I copied all the static files/minified CSS into this new GitHub repo and published with GitHub Pages without issue: https://github.com/nataliecardot/zeus-hosting
If I can't simply use CDN links for the reveal modal to work, maybe I could copy the needed files from the original project's repo (created by running foundation new).
Here's the HTML of the reveal modal, although I know it's correct:
<div class="reveal login-modal" id="loginModal" data-reveal>
<h1 class="h3">Client Login</h1>
<form>
<label><input type="text" placeholder="Username"></label>
<label><input type="password" placeholder="Password"></label>
<div class="login-bottom-group">
<button class="button" type="submit">Login</button>
<div class="login-couple">
<span>Remember Me</span>
<div class="switch">
<input class="switch-input" id="rememberSwitch" type="checkbox" name="rememberSwitch">
<label class="switch-paddle" for="rememberSwitch">
<span class="show-for-sr">Remember Me</span>
</label>
</div>
</div>
</div>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</form>
</div>
Scripts have to be and should always be at the end of <body>, right before </body>.
How can I remove modal body padding? Im using BoostrapVue
<b-modal
v-model="show"
title="Modal Variants">
<b-container fluid>
</b-container>
<div slot="modal-footer" class="w-100">
<b-button size="sm" class="float-right" variant="primary" #click="show=false">Close</b-button>
</div>
</b-modal>
You can provide your own class to remove the body padding via the body-class property
(or use the bootstrap p-0 class).
new Vue({
el: '#app',
mounted () {
this.$refs.modal.show()
}
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="//unpkg.com/#babel/polyfill#latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/vue#latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<div id='app'>
<div>
<b-modal ref="modal" id="modal1" title="BootstrapVue" body-class="p-0">
<container fluid>
content
</container>
<div slot="modal-footer">
<b-button size="sm" class="float-right" variant="primary">Close</b-button>
</div>
</b-modal>
</div>
</div>
First, I'm a new user so if this is not the place to ask this question or the question is leaking with details please inform me and I'll do the required adjustments.
I'm new to Ember.JS and I've recently started learning by reading this getting started guide.
In the early stages of this guide I'm already dealing with the next problem:
All stages worked well until the stage where I need to update my index.html to wrap the inner contents of <body> in this Handlebars script tag:
<script type="text/x-handlebars" data-template-name="todos">.....</script>
as asked in the 5th step of this guide.
After I do so my window ends-up displaying nothing (except for the background image)
Here is how my files looks like (hierarchic):
https://dl.dropboxusercontent.com/u/24149874/image.png
And those are the content of the relevant files from the previous steps in the guide:
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ember.js • TodoMVC</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script type="text/x-handlebars" data-template-name="todos">
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input type="text" id="new-todo" placeholder="What needs to be done?" />
</header>
<section id="main">
<ul id="todo-list">
<li class="completed">
<input type="checkbox" class="toggle">
<label>Learn Ember.js</label><button class="destroy"></button>
</li>
<li>
<input type="checkbox" class="toggle">
<label>...</label><button class="destroy"></button>
</li>
<li>
<input type="checkbox" class="toggle">
<label>Profit!</label><button class="destroy"></button>
</li>
</ul>
<input type="checkbox" id="toggle-all">
</section>
<footer id="footer">
<span id="todo-count">
<strong>2</strong> todos left
</span>
<ul id="filters">
<li>
All
</li>
<li>
Active
</li>
<li>
Completed
</li>
</ul>
<button id="clear-completed">
Clear completed (1)
</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
</footer>
</script>
<script src="libs/jquery-1.10.js"></script>
<script src="libs/handlebars.js"></script>
<script src="libs/ember.js"></script>
<script src="libs/ember-data-0.13.js"></script>
<script src="application.js"></script>
<script src="router.js"></script>
</body>
</html>
application.js
window.Todos = Ember.Application.create();
router.js
Todos.Router.map(function () {
this.resource('todos', { path: '/' });
});
Of course, I tried to find an answer in other relevant posts but nothing I found was helpful.
Appreciate your help!
I guess the only piece missing here is the application template itself.
Try to define one like this:
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="todos">
...
</script>
The {{outlet}} here is important since you need to tell ember where to inject your todos template.
See here for a working example, the css file is not included so it's normal that everything is screwed up, but the basic setup is working.
Hope it helps.
In addition to the jQuery file, even handlebar file's name is also incorrectly written in the index.html file.
Modify the index.html file with following code:
<script src="js/libs/jquery-1.10.2.min.js"></script>
<script src="js/libs/handlebars-1.0.0.js"></script>
Further in the next step, note the js file is named js/app.js or js/application.js since the code at github has file name as app.js whereas the website shows file name as application.js.
FWIW, I had the same problem, and it turned out the jQuery file in my js folder was a different version than the one called for in the tutorial's html. It was a simple error, but one that took me a little too long to notice.
How do I change the regExp in a Spring WebFlow Project with Dojo you change field size. I am working on a Spring WebFlow project with Dojo and I would like to change the regExp in Dojo to check that the user entered a name that is bigger then 1 digit and smaller then 10 digits. can someone please help me out with this,.
<%# taglib prefix="c" uri="http://java.sun.com/jstl/core"%>
<%# taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt"%>
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<style type="text/css" media="screen">
#import url("<c:url value="/resources/dojo/resources/dojo.css"/>");
#import url("<c:url value="/resources/dijit/themes/claro/claro.css"/>");
</style>
<script djconfig="parseOnLoad: true"
src="<c:url value="/resources/dojo/dojo.js"/>" type="text/javascript"></script>
<script type="text/javascript"
src="<c:url value="/resources/spring/Spring.js" />"> </script>
<script type="text/javascript"
src="<c:url value="/resources/spring/Spring-Dojo.js" />"></script>
<script type="text/javascript">dojo.require("dojo.parser");</script>
<html>
<head>
<title>Spring 3.0 MVC - Web Flow Example</title>
</head>
<body class="claro">
<h2>Field Size Test</h2>
<form:form commandName="customer" id="customer">
<input type="hidden" name="_flowExecutionKey"
value="${flowExecutionKey}" />
<div id="container">
<table>
<tr>
<td valign="top"><b>Name:</b></td>
<td valign="top"><form:input path="name" class="value" /> <script
type="text/javascript">
Spring.addDecoration(new Spring.ElementDecoration({
elementId : "name",
widgetType : "dijit.form.ValidationTextBox",
widgetAttrs : {
promptMessage : "Please Enter Your Name from 1 to 10 digits",
invalidMessage : "A 1 to 10 digit value is required.",
required : true,
regExp : "[0-9]{10}"
}
}));
</script> <br />
<p></td>
</tr>
</table>
</div>
<p>
<input type="submit" name="_eventId_submit" id="submit" value="Submit" />
<input type="submit" name="_eventId_cancel" value="Cancel" />
<script type="text/javascript">
Spring.addDecoration(new Spring.ValidateAllDecoration({
elementId : 'submit',
event : 'onclick'
}));
</script>
</form:form>
</body>
</html>
you should try this [0-9]{1,10} it means between 1 and 10 digits (10 included) it's good for a phone number or something like this.
if you are talking about letter too, I suggest [a-zA-Z0-9]{1,10} or if you want only letters [a-zA-Z]{1,10}
Hey, any ideas why this wont work, when i click on the input fields, nothing happens. Here is the code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/ui.datepicker.js"></script>
<script type="text/javascript" charset="utf-8">
$(function()
{
$('.date-pick').datePicker();
});
</script>
This my form:
<form id="form1" name="form1" method="post" action="chart.php">
<ul id="add_form">
<li><label>Date from</label>
<input type="text" name="date1" class="date-pick" /></li>
<li><label>Date to</label>
<input type="text" name="date2" class="date-pick" value="<?php echo date("Y-m-d") ?>" /></li>
<li><label>Display</label>
<select name="type">
<option value="1">User Joins</option>
<option value="2">Messages sent</option>
<option value="3">Optin/outs</option>
</select>
</li>
</ul>
<br clear="all" /><br />
<input type="image" src="images/show.jpg" border="0" alt="Submit Form" class="login" />
</form>
I think you want a lowercase p.
$('.date-pick').datepicker();
To me it seems that you want...
$('.date-pick').datepick();
But I'm looking at the 3.7.4 version of Datepicker (freshly downloaded from the jQuery site). Based on your element that imports the Datepicker plugin, I'm not sure we're looking at the same version.
My example works for me using your markup.
Are you including jQuery.ui.core js file?
Are you including the DatePicker CSS files (ui.core.css and ui.datepicker.css)? Sometimes it works but you can't see it the way it should look because there are no styles in place.