``I am new in using ckeditor and working on simple crud application using ckeditor. it is working well in the create blade but not showing in the update blade.
here is my blade code
<script src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.ckeditor').ckeditor();
})
</script>
</head>
<body>
<form method = "post" action="{{url('updateblog')}}" enctype = "multipart/form-data">
#csrf
#method('PATCH')
<label for="title">Title</label>
<textarea class="ckeditor form-control" name="title">{!!$blog ->title!!}</textarea><br>
</form>
Try this, this worked for me:
<textarea class="ckeditor form-control" name="title">{{ $blog->title }}</textarea>
I hope i can help you.
Related
here i am using VeeValidate Form Validation Library For Vue Js. Using CDN i am trying to achieve this but i am not able to validate the email input fields. SO where i am going wrong please tell if any one can find the issue.
<html>
<head>
<!-- jsdelivr cdn -->
<script src="https://cdn.jsdelivr.net/npm/vee-validate#latest/dist/vee-validate.js"></script>
<script src="https://unpkg.com/vue#next"></script>
<!-- cloudflair cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.1.1/vee-validate.min.js"></script>
</head>
<body>
<input v-validate="'required|email'" name="email" type="text">
<span>{{ errors.first('email') }}</span>
</body>
</html>
Vue.use(VeeValidate);
new Vue({
el: '#root',
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.2.9/vee-validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#vee-validate/rules#4.4.7/dist/vee-validate-rules.min.js"></script>
<div id="root">
<div>
<input v-validate="'required|email'" name="email" type="text">
<span>{{ errors.first('email') }}</span>
</div>
</div>
You forgot to bind a Vue object to an HTML element i.e
new Vue({
el: '#root',
});
I also added the vee validate plugin using
Vue.use(VeeValidate);
Please note am using Vue 2 not 3
I work on Laravel + Vuejs. Something has just happened, since then my script as copied hereunder doesn't work, chrome doesn't detect any vuejs script.
Astonishingly, the same script works well if I copy it into backup directory & run PHP artisan instance from there. Need advise. Actually problem seems with routerview which could not activate due to unknown problem. did i wrongly uninstall something which need to reinstall again ? because seems router doesn't work
kash.blade.php: - Main script
<head>
<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css')}}">
<link href="{{asset('backend/vendor/fontawesome-free/css/all.min.css')}}"
rel="stylesheet" type="text/css">
<link href="{{asset('backend/vendor/bootstrap/css/bootstrap.min.css')}}"
rel="stylesheet" type="text/css">
</head>
<body id="page-top">
<div id="app">
<div id="wrapper">
<div class="container-fluid" id="container-wrapper">
<router-view></router-view>
</div>
</div>
</div>
<script src="{{asset('js/app.js')}}"></script>
<script src="{{asset('backend/vendor/jquery/jquery.min.js')}}"></script>
<script src="{{asset('backend/vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{asset('backend/vendor/jquery-easing/jquery.easing.min.js')}}"></script>
</body>
</html>
route.js: - where I describe the component route as to where login.vue lies
let login = require('./components/auth/login.vue').default;
export const routes = [
{ path: '/', component: login, name:'/' },
]
Login.vue: - Just a simple vue script with two text boxes.
<template>
<div>
<div class="container-login">
<h1 class="h4 text-gray-900 mb-4">Login</h1>
</div>
<form class="user" #submit.prevent="login">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail"
placeholder="Enter Email Address" v-model="form.email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword"
placeholder="Password" v-model="form.password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Login</button>
</div>
<hr>
</form>
<hr>
<div class="text-center">
</div>
</div>
</template>
<script type="text/javascript">
export default {
data(){
return {
form:{
email: null,
password: null
}
}
},
methods:{
}
}
</script>
I am doing POC on login application using angular js. On button click I need to navigate to another page. The code which I have written is only updating the url but the view is not getting loaded. I have used ng-view or ui- view also. And I have used $location.path. But still unable to navigate to other page
Here is my code
index.html:
<html ng-app='myApp'>
<head>
<title>Jasmine</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="routing.js" type="text/javascript"></script>
</head>
<body>
<div id='content' ng-controller='LoginController'>
<div class="container">
<form class="form-signin" role="form" name="myForm" ng-submit="login()">
<h3 class="form-signin-heading">Login Form</h3>
<span>
<b>Username :</b> <input type="text" class="form-control" ng-model="user.name" required>
</span> <br />
<br /> <span>
<b>Password :</b> <input type="password"
class="form-control" ng-model="user.password" required>
</span>
<br><br>
<button class="btn btn-lg btn-primary btn-block" type="submit" ng-disabled="myForm.$invalid">
<b>Sign in</b>
</button>
</form>
</div>
{{message}}
</div>
<div ui-view></div>
</body>
</html>
Here I have used ui-view.. when i use this, url is updating but not the view..
when i use ng-view, the script block is happening both in chrome and firefox.
routing.js:
var applog = angular.module('myApp', ['ngRoute']);
applog.controller("LoginController", function ($scope, $location, $window) {
$scope.message = "hi";
$scope.login = function () {
var username = $scope.user.name;
var password = $scope.user.password;
$location.path('/home');
};
});
applog.controller("HomeController", function ($scope, $location) {
$scope.msg = "qwerty";
});
applog.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'index.html',
controller: 'LoginController'
}).when('/home', {
templateUrl: '/home.html',
controller: 'HomeController'
}).otherwise({
redirectTo: 'index.html'
});
});
Here I tried with hash also.. not working
Home.html:
<div ng-controller="HomeController">
Welcome....
</div>
I need get attributes of element inside Parsley validation, I can using jQuery and selector, but I think it not the best way, have another way to do it?
See below my validation and html code:
(function () {
'use strict';
// Validate xml extension.
window.ParsleyValidator.addValidator('filetype',
function (value, requirement) {
var ext = value.split('.').pop().toLowerCase();
return ext === requirement;
}, 32)
.addMessage('en', 'filetype', 'The selected file must be an %s file.');
}());
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/parsley.js/2.0.7/parsley.js"></script>
<div class="container">
<form class="form-horizontal" role="form" data-parsley-validate>
<div class="form-group">
<label for="file" class="col-sm-2 control-label">File</label>
<div class="col-sm-4">
<input type="file"
name="file[]"
id="file"
class="form-control"
multiple="multiple"
data-buttonText="Escolha arquivo"
data-iconName="fa fa-folder-open"
data-parsley-filetype="xml"
required>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<button type="submit" class="btn btn-default">Salvar</button>
</div>
</div>
</form>
</div>
The current version doesn't really give you access; everything you need should be in requirement. It could be an array with multiple values, though.
A future should allow you to access any attribute starting with data-parsley-filetype-, but there's no way to know from your example what you are actually trying to achieve, so I don't know if that would help.
you need to access the argument directly:
window.Parsley
.addValidator('customvalidator', {
validateNumber: function (value, requirement) {
var element = arguments[2].$element.parent();
//logic here...
},
requirementType: 'integer'
});
so here's my problem.
i have a html page with a simple form and some javascript (jquery) code to validate it, ok then.
this page would looks like this: test.html
<html>
<head>
<title></title>
<script src="jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
function validate(){
$('form').submit(function () {
var txt = $('#SYSTEM_NAME').val();
if (txt == '') $('#loading').append('field is empty');
return false;
})
}
window.onload = validate
<form action="SomeAction" id="form0" method="post">
<fieldset>
<legend>Information</legend>
<div class="editor-field">
<input id="SYSTEM_NAME" name="SYSTEM_NAME" type="text" value="" />
</div>
<input type="submit" value="Insert" id="saveCreation" />
<div id="loading"></div>
</fieldset>
</form>
</body>
</html>
In this page above, if you try to insert without any information on the field 'SYSTEM_NAME', it would dysplay a message. Everything is fine here my form is validated.
But when i load this page from another one using ajax(jquery), what occurs is, after loaded it the validation that i made on 'test.html' doenst work.
Example:
<html>
<head>
<title></title>
<script src="jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#go').click(function(){
$('#here').load('test.html')
});
</script>
</head>
<body>
<input type='button' id='go' value='go' />
<div id='here'></div>
</body>
</html>
Now if i click on 'Insert' the validation doest work anymore.
How can i solve this problem ? can i interact with loaded page and javascript code together ?
Hope you guys have understood my problem. Thanks and sorry for enlish mistakes.
forgive me if this is too much of a change, but i thought i might suggest another method for you. what about using jquery validate to help you with the validation? here is an example with the ajax-response validating as you want. below is the parent document... (notice that i am including jquery validate in the head. just ignore the 'get_test' i am using to load the partial.)
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#go').click(function() {
$('#here').load('get_test');
});
});
</script>
</head>
<body>
<input type='button' id='go' value='go' />
<div id='here'></div>
</body>
</html>
and the partial i am loading below... (notice that the text input has a class of 'required' - this is how jquery validate works. you will also see a validate method.)
<script type="text/javascript">
$("#form0").validate();
</script>
<form action="SomeAction" id="form0" method="post">
<fieldset>
<legend>Information</legend>
<div class="editor-field">
<input id="SYSTEM_NAME" name="SYSTEM_NAME" type="text" value="" class="required" />
</div>
<input type="submit" value="Insert" id="saveCreation" />
<div id="loading"></div>
</fieldset>
</form>