I have text area for summernote like this,,
<div class="form-group">
<label>CONTENT ENGLISH</label>
<textarea name="news[content_english]" class="hide" id="news-content-english"><?php echo $news ? htmlentities($news->content_english) : '' ?></textarea>
<div id="summernote-news-content-english"></div>
</div>
i use javascript to input to database like this,
if ($('#news-content-english').val() !== '') {
$('#summernote-news-content-english').code($('#news-content-english').val());
}
$('#form-news')
.submit(function () {
var content = $('#summernote-news-content-english').code();
if (content !== '') {
$('#news-content-english').val(content);
} else {
alert('news content can\'t be empty');
return false;
}
});
but I have a problem, when using the text area with summernote the data in that field does not enter while the data that other than using summernote can enter, what's the problem?
i use summernote 0.8.12
Related
My question is: Should I create 2 folders: one for temporary and another one for original? I'm using a component for uploading images. When I upload an image, It is stored in s3 and it is retrieved again to be shown in a small image. My problem here is If I upload 1 image and then I decide to upload another one, I uploaded 2 files in the S3 bucket and so on ... without pressing add category.
Finally: I'm using Vue 2 and Laravel 7.x, thanks.
I'm not so familiar with storing process but I need help to decide what is more efficient, thanks.
category.vue
<template>
<Modal v-model="addModal" :closable="false" :mask-closable="false" title="Add a category">
<Input v-model="data.categoryName" placeholder="Add category..."/>
<div class="space"></div>
<Upload ref="uploads" action="/app/upload" :format="['jpg','jpeg','png']" :
headers="{'x-csrf-token': token, 'X-Requested-With': 'XMLHttpRequest'}" :max-size="2048"
:on-error="handleError" :on-exceeded-size="handleMaxSize" :on-format-error="handleFormatError"
:on-success="handleSuccess" type="drag">
<div style="padding: 20px 0">
<Icon size="52" style="color: #3399ff" type="ios-cloud-upload"></Icon>
<p> Click or drag files here to upload </p>
</div>
</Upload>
<div v-if="data.iconImage" class="demo-upload-list">
<img :src="`${data.iconImage}`"/>
<div class="demo-upload-list-cover">
<Icon type="ios-trash-outline" #click="deleteImage"></Icon>
</div>
</div>
<div slot="footer">
<Button type="default" #click="addModal=false">Close</Button>
<Button :disabled="isAdding" :loading="isAdding" type="primary" #click="addCategory">
{{ isAdding ? 'Adding ..' : 'Add a category' }}
</Button>
</div>
</Modal>
</template>
<script>
// Other parts of this section are removed for clarity
export default {
methods: {
async addCategory() {
console.log('1', this.data.iconImage)
if (this.data.categoryName.trim() === '') return this.e('This Category is required')
if (this.data.iconImage.trim() === '') return this.e('This Icon Image is required')
this.data.iconImage = `${this.data.iconImage}`
console.log('2', this.data.iconImage)
const res = await this.callApi('post', 'app/create_category', this.data)
if (res.status === 200) {
this.categoryLists.unshift(res.data)
this.s('Category has been succesfully')
this.addModal = false
this.data.categoryName = ''
this.data.iconImage = ''
this.$refs.uploads.clearFiles()
} else {
if (res.status === 422) {
if (res.data.errors.categoryName) {
this.e(res.data.errors.categoryName[0])
}
if (res.data.errors.iconImage) {
this.e(res.data.errors.iconImage[0])
}
} else {
this.swr()
}
}
},
},
}
</script>
My controller for addCategory
public function addCategory(Request $request)
{
$this->validate($request, [
'categoryName' => 'required',
'iconImage' => 'required',
]);
$category = new Category();
$category->categoryName = $request->categoryName;
$category->iconImage = $request->iconImage;
$category->save();
return response()->json($category);
}
In my project using laravel 7. I'm using vue as frontend framework.
First in my controller I send only one attribute from my query into my template:
$sites = Site::with('users')->where('user_id', Auth::user()->id)->get();
// This is the part
$website_name = '';
if (sizeof($sites) == 0) {
// I fetch website attribute
$website_name = Auth::user()->website;
}
return view('axcess.sites.edit', [
'sites' => $sites,
'website_name' => $website_name // Send it into blade template
]);
In my blade template I send $website_name into component
<div class="row">
<axcess-sites-edit
:websiteName="{{ $website_name }}"
:isNewUser="{{ sizeof($sites) == 0 }}"
></axcess-sites-edit>
</div>
The full vue component is this:
<template>
<div class="col-md-8">
<form>
<div class="form-group">
<input class="form-control" :disabled="isNewUser" v-model="website" />
</div>
</form>
</div>
</template>
<script>
export default {
props: {
websiteName: String,
isNewUser: Boolean
},
data: function() {
return {
website: this.websiteName
}
}
}
</script>
Finally display the page as empty, in my console only display this error:
The problem comes from (:) symbol from http://example.com. There exists a solution for this to display into the input value.
I'm new to vueJS.
I want to add a required validator in image using vee-validate.
Built-in required validador isn't working so I created a custom validator img_required.
here's what I've done so far.
.vue html part
<ValidationProvider rules="image|img_required" bail="false" v-slot="{ errors, validate }">
<div class="row row-xs mg-t-20 mx-0">
<label class="col-sm-4 form-control-label">
<span class="tx-danger">*</span> Image:
</label>
<div
#dragover.prevent
#change="validate"
#drop.prevent
class="file-wrapper col-sm-8 mg-t-10 mg-sm-t-0"
>
<div v-if="imgUrl">
<button #click="imageNull" class="img-close">
<b-icon icon="x"></b-icon>
</button>
<img style="height: 127px" :src="imgUrl" />
</div>
<input type="text" hidden v-model="imgUrl" />
<div v-if="!imgUrl" #drop="handleImage($event, 'drop')">
<input
type="file"
class="form-control"
name="file"
accept="image/*"
#change="handleImage($event, 'input'); validate()"
/>
Drop image
</div>
</div>
</div>
<div v-for="error in errors" :key="error">{{ error }}</div>
</ValidationProvider>
I can't use v-model in input type file so I created a dummy hidden input field and passed imgUrl in v-model <input type="text" hidden v-model="imgUrl" />
imgUrl gets image src from file drop or input file.
I added a close button to nullify imgUrl variable.
<button #click="imageNull" class="img-close">
<b-icon icon="x"></b-icon>
</button>
I pass this imgUrl to vee-validate extend method.
.vue script part
data() {
return {
imgUrl: ""
}
},
methods: {
handleImage(e, action) {
var file;
if (action == "input") file = e.target.files[0];
else if (action == "drop") file = e.dataTransfer.files[0];
var reader = new FileReader();
reader.onload = (e) => {
this.imgUrl = e.target.result;
};
reader.readAsDataURL(file);
},
imageNull() {
this.imgUrl = "";
},
}
here's validation.js file
extend('img_required', {
validate(imgUrl) {
console.log(imgUrl);
return imgUrl !== "";
},
message() {
return "Image is required!";
}
});
Here I'm checking if imgUrl is an empty base64 string or not.
And when I hit close button, imgUrl nullifies.
The issue here is when I print this imgUrl it shows event.target.files.
I'm new to vue.js. Please tell me if I'm doing something wrong
I think the problem is that you're handleImage function is not correct
Try this;
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
this.imgUrl = reader.result;
};
i am creating a form for searching a client, using either id or email both are set to be unique. Application made on Codeignitor.
I have created a form with two radio buttons, one for search with ID and another for search with mail+dob.
Depending on the radio button selected, corresponding input fields shown.
In controller, it choose the model function based on the radio button value.
This is I coded, i need to pass the value of radio button to Controller.php file
Form(only included the radio button)
$(document).ready(function() {
$("#usingdob").hide();
$("#usingmail").hide();
$("input:radio").click(function() {
if ($(this).val() == "id") {
$("#usingId").show();
$("#usingdob").hide();
$("#usingmail").hide();
} else {
$("#usingId").hide();
$("#usingdob").show();
$("#usingmail").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4">
<label class="radio-inline">
<input type="radio" name="optradio" value="id" checked>Using ID </label></div>
<div class="col-md-4">
<label class="radio-inline">
<input type="radio" name="optradio" value="mail">Using DOB</label>
</div>
I expected to get the radio button value correctlyenter image description here
JS:
$('input[name="optradio"]').click(function(){
var optradio = $(this).val();
//or
var optradio = $("input[name='optradio']:checked").val();
if(optradio == 'id'){
//do your hide/show stuff
}else{
//do your hide/show stuff
}
});
//on search button press call this function
function passToController(){
var optradio = $("input[name='optradio']:checked").val();
$.ajax({
beforeSend: function () {
},
complete: function () {
},
type: "POST",
url: "<?php echo site_url('controller/cmethod'); ?>",
data: ({optradio : optradio}),
success: function (data) {
}
});
}
Try this
<script type="text/javascript">
$( document ).ready(function() {
$("#usingdob, #usingmail").hide();
$('input[name="radio"]').click(function() {
if($(this).val() == "id") {
$("#usingId").show();
$("#usingdob, #usingmail").hide();
} else {
$("#usingId").hide();
$("#usingdob, #usingmail").show();
}
});
});
</script>
One thing I noticed is that you have 'mail' as a value in the DOB option. Another is that there seems to be 3 options and yet you only have 2 radios?
I adjusted the mail value to dob and created dummy divs to test the code. It seems to work.
$(document).ready(function() {
$("#usingdob").hide();
$("#usingmail").hide();
$("input:radio").click(function() {
console.log($(this).val());
if ($(this).val() == "id") {
$("#usingId").show();
$("#usingdob").hide();
$("#usingmail").hide();
} else {
$("#usingId").hide();
$("#usingdob").show();
$("#usingmail").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4">
<label class="radio-inline">
<input type="radio" name="optradio" value="id" checked>Using ID </label></div>
<div class="col-md-4">
<label class="radio-inline">
<input type="radio" name="optradio" value="dob">Using DOB</label>
</div>
<div id="usingId">
Using Id div
</div>
<div id="usingdob">
Using dob div
</div>
<div id="usingmail">
Using mail div
</div>
As far as passing the value to the controller goes, ideally the inputs should be in a form. When you submit the form, the selected value can be passed to the php.
<?php
if (isset($_POST['submit'])) {
if(isset($_POST['optradio']))
{
Radio selection is :".$_POST['optradio']; // Radio selection
}
?>
If you want to get currently checked radio button value Try below line which will return current radio button value
var radioValue = $("input[name='gender']:checked").val();
if(radioValue)
{
alert("Your are a - " + radioValue);
}
i´m running into a problem with hammer an it´s tap event.
I´m using this script to display an hidden div on tap event.
Inside of this div construct, i have an a tag with an link, but it break apart, and i don´t know why.
<div id="_news_8_" class="news_latest small-12 medium-6 columns">
<div class="news-info">
<div class="news-info-content table tap-object">
<div class="table-cell align-middle">
<h2>Headline</h2>
<h6>Subheadline</h6>
<p class="more">> Detail <span class="invisible">Text</span></p>
</div>
</div>
</div>
<div id="_slidesnews_8_" class="_bstretch_">
...
</div>
</div>
and the script
$tapObject = $('.tap-object');
[].slice.call($tapObject).forEach(function(element) {
hammertap = new Hammer(element);
hammertap.on('tap', function(event) {
if (event.target !== activeTap) {
if (activeTap !== undefined) {
$(activeTap).removeClass('on');
}
$(event.target).addClass('on');
}
activeTap = event.target;
});
});
so what´s going wrong here?
here´s a live demo: http://holmgallery.com/index.php/collection.html
Down under the Header Gallery, tap on one of the objects
Ok, Got it - so using the jQuery Wrapper Plugin, give´s me more Control over Delegation. Now the a.href work´s as it should.
var $rootObject = $('.news_latest');
[].slice.call($rootObject).forEach(function(element) {
hammertap = new Hammer(element);
$(element).hammer({domEvents:true}).on("tap", '.tap-object', function(event) {
if (event.currentTarget !== lastTap) {
if (lastTap !== undefined) {
$(lastTap).removeClass('on');
}
$(event.currentTarget).addClass('on');
lastTap = event.currentTarget;
}
});
});