I have components dropzone on vue. Im install my template in settings.
Then i want to set v-on:click(method) to preview image in dropzone, but event don`t works. How to set correctly click to element?
<template>
<vue-dropzone :options="dropzoneOptions" ref="myVueDropzone" id="customdropzone"
:preview-template="template">
</vue-dropzone>
</template>
methods: {
template () {
return `<div class="dz-preview dz-file-preview" v-on:click.native="alert(1)">
<div class="dz-image" v-on:click="alert(1)">
<img data-dz-thumbnail>
</div>
<div class="dz-details" v-on:click="alert(1)">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<div class="dz-success-mark"><i class="fa fa-check"></i></div>
<div class="dz-error-mark"><i class="fa fa-close"></i></div>
</div>`
;
},
}
data: function () {
return {
dropzoneOptions: {
url: 'https://httpbin.org/post',
thumbnailWidth: 200,
maxFilesize: 0.5,
addRemoveLinks: true,
previewTemplate: this.template(),
headers: {"My-Awesome-Header": "header value"},
},
salonID: 0,
photos: [],
}
},
Related
I wanna use quill rich editor and other fields on my form. But cant get access to quill innerHTML from JS function. I am using Laravel with Alpinejs and my code is
<form x-data="contactForm()" #submit.prevent="submit">
<div class="col-12">
<div class="mt-2 w-100 bg-white" wire:ignore>
<div
x-data
x-ref="quillEditor"
x-init="
quill = new Quill($refs.quillEditor, {
theme: 'snow',
modules: {toolbar: '#toolbar'}
});
quill.on('text-change', function () {
$dispatch('input', quill.root.innerHTML);
});"
wire:model.debounce.2000ms="description"
class="sign__textarea"
style="height: 300px;"
>{{ old('description', $services_users->description) }}
</div>
</div>
</div>
<div class="col-12">
<input name="message" x-model="data.title">
</div>
<div class="col-12 col-xl-3 mt-5">
<button type="submit" x-text="buttonText" :disabled="loading"></button>
</div>
</form>
<script>
function contactForm() {
return {
data: {
title: "",
myQuill: quill.root.innerHTML,
},
buttonText: "Save",
loading: false,
submit() {
this.buttonText = "Saving...";
this.loading = true;
fetch('myurl.endpoint', {
method: "POST",
headers: {
"Content-Type": "application/json",
"Accept": "application/json",
},
body: JSON.stringify(this.data),
}).then(() => {
alert("Form submitted");
}).catch(() => {
alert("Something went wrong");
}).finally(() => {
this.data.title = ""
this.buttonText = "Save";
this.loading = false;
});
},
};
}
</scirpt>
Now i have an error Can't find variable: quill how can i get all fields from form and send to backend event if quill is not a form field?
It doesn't work because you're calling the variable "quill" in the parent and you're declaring it in the child. To fix it declare the x-init directive in the form.
listening to the "text-change" event is not necessary. A good option is to add the content of the container before submitting the form.
see : https://alpinejs.dev/directives/data#scope
<form x-data="contactForm()" x-init="
quill = new Quill($refs.quillEditor, {
theme: 'snow'
});
quill.on('text-change', function () {
$dispatch('input', quill.root.innerHTML);
});" #submit.prevent="submit">
<div class="col-12">
<div class="mt-2 w-100 bg-white" wire:ignore>
<div
x-ref="quillEditor"
wire:model.debounce.2000ms="description"
class="sign__textarea"
style="height: 300px;"
>{{ old('description', $services_users->description) }}
</div>
</div>
</div>
<div class="col-12">
<input name="message" x-model="data.title">
</div>
<div class="col-12 col-xl-3 mt-5">
<button type="submit" x-text="buttonText" :disabled="loading"></button>
</div>
</form>
<script>
function contactForm() {
return {
quill:null,
data: {
title: "",
// myQuill: function(){ return this.quill.root.innerHTML}
},
buttonText: "Save",
loading: false,
submit() {
this.buttonText = "Saving...";
//add content quill here
this.data.myQuill = this.quill.root.innerHTML;
this.loading = true;
fetch('myurl.endpoint', {
method: "POST",
headers: {
"Content-Type": "application/json",
"Accept": "application/json",
},
body: JSON.stringify(this.data),
}).then(() => {
alert("Form submitted");
}).catch(() => {
alert("Something went wrong");
}).finally(() => {
this.data.title = ""
this.buttonText = "Save";
this.loading = false;
});
},
};
}
</script>
Ok this is what i did
<form x-data="contactForm()" x-init="initQuill()" x-on:submit="submit()" method="POST" action="target.url">
<div x-ref="editor"></div>
<input x-ref="editorValue" type="hidden" name="hidden_input">
<button>Save</button>
</form>
<script>
function contactForm(){
return {
initQuill(){
new Quill(this.$refs. editor, {theme: 'snow'});
},
submit(){
console.log(this.$refs. editor.__quill.root.innerHTML);
this.$refs.editorValue.value = this.$refs.editor.__quill.root.innerHTML;
}
}
}
</script>
Now is ok and works with basic. You can extend function with new features etc. Thx for help guys.
My page exist of a table where I can add new rows. If you want to add a new row a pop-up window appear where the new values can be added.
This new data is then saved to the database after submitting. If I again want to add a new row the input fields, they should be cleared.
The method I use, is working but isn't very clear.
Note: My code shows only a part of the input fields, to make it more clear. My pop-up window actually contains 20 input fields.
I would like to clear them all at once instead of clearing them one by one (like I am doing now).
Because I am already doing this for defining the v-model, pushing the new data to the database directly on the page and via post axios request.
Is there a cleaner way to do this?
Thanks for any input you could give me.
This is my code:
html part
<div class="col-2 md-2">
<button class="btn btn-success btn-sx" #click="showModal('add')">Add New</button>
<b-modal :ref="'add'" hide-footer title="Add new" size="lg">
<div class="row" >
<div class="col-4">
<b-form-group label="Category">
<b-form-input type="text" v-model="newCategory"></b-form-input>
</b-form-group>
</div>
<div class="col-4">
<b-form-group label="Name">
<b-form-input type="text" v-model="newName" placeholder="cd4"></b-form-input>
</b-form-group>
</div>
<div class="col-4">
<b-form-group label="Amount">
<b-form-input type="number" v-model="newAmount" ></b-form-input>
</b-form-group>
</div>
</div>
<div class="row" >
<div class="col-8">
</div>
<div class="col-4">
<div class="mt-2">
<b-button #click="hideModal('add')">Close</b-button>
<b-button #click="storeAntibody(antibodies.item)" variant="success">Save New Antibody</b-button>
</div>
</div>
</div>
</b-modal>
</div>
js part
<script>
import { async } from 'q';
export default {
props: ['speciedata'],
data() {
return {
species: this.speciedata,
newCategory: '',
newName: '',
newAmount:'',
}
},
computed: {
},
mounted () {
},
methods: {
showModal: function() {
this.$refs["add"].show()
},
hideModal: function(id, expId) {
this.$refs['add'].hide()
},
addRow: function(){
this.species.push({
category: this.newCategory,
name: this.newName,
amount: this.newAmount,
})
},
storeSpecie: async function() {
axios.post('/specie/store', {
category: this.newCategory,
name: this.newName,
amount: this.newAmount,
})
.then(this.addRow())
// Clear input
.then(
this.newName = '',
this.newCategory = '',
this.newAmount = '',
)
.then(this.hideModal('add'))
},
}
}
</script>
in your data of vuejs app , you have to set one object for displaying modal data like modalData then to reset data you can create one function and set default value by checking type of value using loop through modalData object keys
var app = new Vue({
el: '#app',
data: {
message:"Hi there",
modalData:{
key1:"value1",
key2:"value2",
key3:"value3",
key4:5,
key5:true,
key6:"val6"
}
},
methods: {
resetModalData: function(){
let stringDefault="";
let numberDefault=0;
let booleanDefault=false;
Object.keys(this.modalData).forEach(key => {
if(typeof(this.modalData[key])==="number"){
this.modalData[key]=numberDefault;
}else if(typeof(this.modalData[key])==="boolean") {
this.modalData[key]=booleanDefault;
}else{
// default type string
this.modalData[key]=stringDefault;
}
});
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
{{modalData}}
<br/>
<button #click="resetModalData">Reset Modal Data</button>
</div>
update : in your case :
data:{
species: this.speciedata,
modalData:{
newCategory: '',
newName: '',
newAmount:''
}
},
and after storing data :
storeSpecie: async function() {
axios.post('/specie/store', {
category: this.newCategory,
name: this.newName,
amount: this.newAmount,
})
.then(()=>{
this.addRow();
this.resetModalData();
this.hideModal('add')
}
},
In native Javascript you get the reset() method.
Here is how it is used :
document.getElementById("myForm").reset();
It will clear every input in the form.
I am new to Laravel and a complete noob to Vue. I searched many other Laravel/Vue posts but none seemed to be similar enough to get me to a solution. When attempting to load this component on my view I receive the following error
app.js:32654 [Vue warn]: Property or method "features" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
Please let me know what I am missing.
chrome.google.com/webstore/detail/vuejs-devtools/ shows that Vue is loaded
I would like to load data from an ajax call to my vue component. that can be updated on the fly by event handler
App.js
window.Vue = require('vue');
Vue.component('Example', require('./components/Example.vue'));
const app = new Vue({
el : '#app',
});
$(document).ready(function() {
$.ajaxSetup({
headers : {
'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
}
});
})
Example.vue
<template>
<div class="container projects-container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example Component</div>
<div class="panel-body">
<h1>I'm an example component!</h1>
<ul class="list-group">
<li class="list-group-item" v-for="feature in features">
{{ feature.properties.name }}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
},
}
</script>
bladefile
<head>
<meta name="csrf-token" content="INMA4kLlG32gfhf4Z3BBGIFxitrVCWzzqgqPfooEj">
// and yes Vue is loaded
</head>
<body>
<div id="app">
<example></example>
</div>
...
<script>
Vue.component('example',{
template: 'Example',
})
//returns the JSON listed below
someOtherObject.addListener('click', function(e) {
$.ajax({
url:json,
method:'GET',
success:function(msg){
app.data = JSON.parse(msg);
}
})
})
</script>
JSON
{
"type":"FeatureCollection",
"features":[
{
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[
-117.155083,
33.569672
]
},
"properties":{
"heading":null,
"face":"South",
"status":"1",
"name":"MEADOWLARK ",
"type":"Single Family Home",
"client_id":"26",
"client_name":"Pulte Homes",
"city_name":"French Valley"
}
},
{
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[
-117.151390,
33.543981
]
},
"properties":{
"heading":null,
"face":"South",
"status":"1",
"name":"Testing Project",
"type":"Single Family Home",
"client_id":"83",
"client_name":"Testing Account",
"city_name":"Temecula Valley"
}
},
{
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[
-117.223720,
33.571522
]
},
"properties":{
"heading":null,
"face":"South",
"status":"1",
"name":"Oak Ridge",
"type":"Single Family Home",
"client_id":"98",
"client_name":"Woodside 05S LP",
"city_name":"Beaumont"
}
}
]
}
The features array must be declared either as a prop or part of the component data.
As a prop:
<template>
<div class="container projects-container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example Component</div>
<div class="panel-body">
<h1>I'm an example component!</h1>
<ul class="list-group">
<li class="list-group-item" v-for="feature in features">
{{ feature.properties.name }}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
},
props: ['features']
}
</script>
As component data:
<template>
<div class="container projects-container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example Component</div>
<div class="panel-body">
<h1>I'm an example component!</h1>
<ul class="list-group">
<li class="list-group-item" v-for="feature in features">
{{ feature.properties.name }}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
},
data: function() {
return {features: []}
}
}
</script>
If you use a prop, you'll need to bind the prop in the template. If you use component data, you'll need to update the success callback function in the AJAX request to correctly update the data of the component rather than the app as a whole.
Also, beware of the reactivity caveats for loading new data, as outlined in the docs.
EDIT: Full example solution using component data
Here's a working example using a simplified version of your example component. Note that to do this I used the ref attribute so that the component could be addressed directly. Using refs is described in the docs as an "escape hatch" that should only be used when strictly necessary. A better pattern might be an external store, such as Vuex.
Vue.component( "example", {
template: '<div><h1>Example Component!</h1><ul v-if="features.length"><li v-for="feature in features">{{ feature.name }}</li></ul></div>',
data: function() {
return { features : [] }
}
});
var app = new Vue( { el: '#app' });
//A function to represent the AJAX callback
var doMockAjax = function() {
var mockData = [{name: 'One'},{name: 'Two'},{name: 'Three'}];
app.$refs.example.features = mockData;
}
document.getElementById('load-data').addEventListener('click', function(e) {
//This simulates the ajax callback by populating the array asynchronously
setTimeout(doMockAjax,1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<example ref="example"></example>
</div>
<button id="load-data">Load</button>
I made an autocomplete component and it works well in Chrome, but not in IE and Safari.
It displays the template twice in IE and Safari. It works but it shows the template in addition to the rendered HTML. See the image.
What did I do wrong?
<div id="main">
<autocomplete></autocomplete>
</div>
<template id="autocomplete">
<div>
<div class="col">
<section class="box clr1">
<div>
<div>
<input type="text" placeholder="Welk product zoekt U?" v-model="query" v-on:keyup="autoComplete" class="form-control">
<div class="panel-footer" v-if="results.length">
<ul class="list-group">
<li class="list-group-item" v-for="result in results">
<span style="text-decoration: underline;cursor:pointer" v-on:click="showDetail(result.id)">#{{ result.title }}</span>...
<div class="col">
<section class="box clr1">
<div>
<div v-for="detail in resultdetail">
<h1>#{{ detail.title }}</h1>
<h2>#{{ detail.page_title }}</h2>
<p v-html="detail.description"></p>...
Vue.component('autocomplete', {
template: '#autocomplete',
data: function () {
return {
show: false,
query: '',
results: [],
resultdetail: []
}
},
methods: {
autoComplete: function () {
this.results = [];
if (this.query.length > 1) {
axios.get('/getproductjson/' + this.query + '/0')
.then(function (response) {
this.results = response.data
}.bind(this))...
showDetail: function (productId) {
if (productId > 0) {
this.show = true;
this.resultdetail = [];
axios.get('/getproductjson/loremipsumdipsum/'+productId)
.then(function (response) {
this.resultdetail = response.data
}.bind(this))...
}
});
new Vue({
el: '#main'
});
Result:
Internet explorer does not support the template tag.
What you're seeing in Internet Explorer is your instantiated Vue, and, since IE doesn't implement template it just shows your template on screen.
In IE if you want to store your template in the DOM you typically have to use the a script template.
<script type="text/x-template" id="autocomplete">
...
</script>
I can't get the preview working with the fineuploader when using the manual triggering , I have put the drawthumbnail into the submit and submitted event but nothing works. I am using one of the stackoverflow examples as a base. I am sure that the event is triggered as the log fires:
[FineUploader 4.1.0] Attempting to update thumbnail based on server response.
[FineUploader 4.1.0] Rendering template in DOM.
[FineUploader 4.1.0] Template rendering complete
[FineUploader 4.1.0] Received 1 files or inputs.
On submit
Calling draw thumbnail on id: 0 with filename: 2013-01-06 17.14.37.jpg
On submitted
Calling draw thumbnail on id: 0 with filename: 2013-01-06 17.14.37.jpg
$('#myFineUploaderContainer').fineUploader({
debug: true,
template: "qq-simple-thumbnails-template",
thumbnails: {
placeholders: {
waitingPath: "/static//img/loading.gif",
notAvailablePath: "/static//img/loading.gif"
}},
request: {
endpoint: '/ajaxuploadmms',
params: {
'csrf_token': 'XXXXX',
'csrf_name': 'csrfmiddlewaretoken',
'csrf_xname': 'X-CSRFToken',
},
customHeaders: {
'X-CSRFToken': 'XXXXX',
'test': 'test',}},
autoUpload: false,
validation: {
allowedExtensions: ['jpeg', 'jpg', 'gif', 'png']
},
showMessage: function(message) {
// Using Bootstrap's classes
$('#myFineUploaderContainer').append('<div class="alert alert-error">' + message + '</div>');
}
}).on('upload', function(event, id, name) {
var enteredMessage = $('#message').val();
var group = $('.dropdown-menu li a').val();
$(this).fineUploader('setParams', {'group': window.group,'message': enteredMessage, 'csrfmiddlewaretoken': 'XXXXX'}, id);
}).on('submit', function (event, id, filename) {
console.log('On submit');
console.log('Calling draw thumbnail on id: ' +id+ ' with filename: ' +filename );
$(this).fineUploader("drawThumbnail", id, document.getElementById('picture'), 200, false);
}).on('submitted', function (event, id, filename) {
console.log('On submitted');
console.log('Calling draw thumbnail on id: ' +id+ ' with filename: ' +filename );
$(this).fineUploader('drawThumbnail', id, document.getElementById('picture'), 200, false);
}).on('complete', function (event, id, name, response) {
console.log('Complete callback called on id: '+id+'. Response was: '+JSON.stringify(response));
//remove active class from progress bar. remove cancel button from filename
$fileItem = $(this).fineUploader("getItemByFileId", id);
$fileName = $(this).fineUploader("getName", id);
if (response.success) {
$fileItem.find(".progress").removeClass("active").removeClass("progress-info").removeClass("progress-striped").addClass("progress-success");
$fileItem.find(".qq-upload-cancel").remove();
$fileItem.find(".qq-upload-status-text").addClass("green-text");
$fileItem.find(".qq-upload-status-text").html("- Completed");
}
if (response.error) {
$fileItem.find(".progress").removeClass("active").removeClass("progress-info").removeClass("progress-striped").addClass("progress-danger");
$fileItem.find(".bar").removeClass("bar-success").addClass("bar-danger");
$fileItem.find(".qq-upload-cancel").remove();
$fileItem.find(".qq-upload-status-text").addClass("red-text");
$fileItem.find(".qq-upload-status-text").html("- Upload failed!");
$("#fineUploader").prepend('<div id="flashMessage" class="alert alert-error"><button type="button" class="close" data-dismiss="alert">×</button><p>Upload failed on <b>'+$fileName+'</b>! Please try uploading it again.</p></div>');
}
//check to see if there are any uploads happening still. if not, reload the page use getInProgress() API call
$uploadingFiles = $(this).fineUploader("getInProgress");
//close the modal if no uploads are in progress. refresh media index. pop up success banner.
if ($uploadingFiles < 1) {
//uploads_done();
}
});
$('#uploadSelectedFiles').click(function() {
$('#myFineUploaderContainer').fineUploader('uploadStoredFiles');
});
});
</script>
<script type="text/template" id="qq-simple-thumbnails-template">
<div class="qq-uploader-selector qq-uploader">
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span>Drop files here to upload</span>
</div>
<div class="qq-upload-button-selector qq-upload-button">
<div>Upload a file</div>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list">
<li>
<div class="qq-progress-bar-container-selector progress">
<div class="qq-progress-bar-selector progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
<span class="qq-upload-file-selector qq-upload-file"></span>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<a class="qq-upload-cancel-selector qq-upload-cancel" href="#">Cancel</a>
<a class="qq-upload-retry-selector qq-upload-retry" href="#">Retry</a>
<a class="qq-upload-delete-selector qq-upload-delete" href="#">Delete</a>
<span class="qq-upload-status-text-selector qq-upload-status-text"></span>
</li>
</ul>
</div>
</script>
</div>
EDITED:
I have chrome and this is the supported features
qq.supportedFeatures
Object {uploading: true, ajaxUploading: false, fileDrop: false, folderDrop: false, chunking: false…}
ajaxUploading: false
canDetermineSize: false
chunking: false
deleteFileCors: false
deleteFileCorsXdr: false
deleteFileCorsXhr: false
fileDrop: false
folderDrop: false
folderSelection: true
imagePreviews: false
imageValidation: false
itemSizeValidation: false
pause: false
progressBar: false
resume: false
uploadCors: true
uploadCustomHeaders: false
uploadNonMultipart: false
uploadViaPaste: false
uploading: true
__proto__: Object
There is no element in your markup with an ID of "picture", though you are asking Fine Uploader to render the thumbnail to this element. Also, the markup in your question is invalid. You have a closing div without an opening div.