Autosave content of TinyMce editor on change event (with laravel 7)? - ajax

I want to autosave the content of tinyMce editor
I'm using tinmce version 5.2.2 with laravel V7
tinymce configuration in app.js
require('./bootstrap');
require('tinymce/themes/silver');
require('tinymce/plugins/image');
require('tinymce/plugins/code');
require('tinymce/plugins/save');
import tinymce from 'tinymce';
tinymce.init({
selector:'textarea#inputQuestionTitle',
height:400,
setup: function(editor) {
editor.on('Change Keyup', function () {
editor.save();
//tinyMCE.triggerSave() <-- also tried
});
}
With following View
#extends('dashboard.layout')
#section('content')
<form id='addQ' action="{{route('questions.store')}}" method="post" enctype="multipart/form-data" >
#csrf
<div class="form-row align-items-center " >
<div class="col-md-12">
<label class="sr-only" for="inputQuestionTitle">Title</label>
<textarea name="title" class="form-control mb-2 " id="inputQuestionTitle" placeholder="Question Title"> </textarea>
</div>
</div>
<div class="form-row">
<button type="submit" class="btn btn-primary mb-2">Add new category </button>
</div>
</form>
<script type="text/javascript" src="{{asset('js/app.js')}}"></script>
<script type="text/javascript">
$(function(){
$('#addQ').submit(function(e){
e.preventDefault();
var frmdata = $(this).serialize();
console.log(frmdata);
});
});
</script>
#endsection
Outputs
I had using jquery to show input request with console.log
As showed in output title field does not returns any value
Please tell me how i autosave the content of tinymce editor and send it with input request ..
I had also tried to tinymce.triggerSave() before serialize() method of ajax so that input request will take tinymce content but not works

Instead of trying to update the textarea via the triggerSave() or save() methods while someone is editing the content I would just place tinymce.triggerSave() at the very beginning of the function that submits the page. This will ensure that the triggerSave() is called directly before you grab the content from the textarea.

Related

Passing the Div id to another vue component in laravel

I created a simple real-time chat application using vue js in laravel.
I am having a problem with the automatic scroll of the div when there is a new data.
What I want is the div to automatically scroll down to the bottom of the div when there is a new data.
Here is my code so far.
Chat.vue file
<template>
<div class="panel-block">
<div class="chat" v-if="chats.length != 0" style="height: 400px;" id="myDiv">
<div v-for="chat in chats" style="overflow: auto;" >
<div class="chat-right" v-if="chat.user_id == userid">
{{ chat.chat }}
</div>
<div class="chat-left" v-else>
{{ chat.chat}}
</div>
</div>
</div>
<div v-else class="no-message">
<br><br><br><br><br>
There are no messages
</div>
<chat-composer v-bind:userid="userid" v-bind:chats="chats" v-bind:adminid="adminid"></chat-composer>
</div>
</template>
<script>
export default {
props: ['chats','userid','adminid'],
}
</script>
ChatComposer.vue file
<template>
<div class="panel-block field">
<div class="input-group">
<input type="text" class="form-control" v-on:keyup.enter="sendChat" v-model="chat">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" v-on:click="sendChat">Send Chat</button>
</span>
</div>
</div>
</template>
<script>
export default{
props: ['chats','userid','adminid'],
data() {
return{
chat: ''
}
},
methods: {
sendChat: function(e) {
if(this.chat != ''){
var data = {
chat: this.chat,
admin_id: this.adminid,
user_id: this.userid
}
this.chat = '';
axios.post('/chat/sendChat', data).then((response) => {
this.chats.push(data)
})
this.scrollToEnd();
}
},
scrollToEnd: function() {
var container = this.$el.querySelector("#myDiv");
container.scrollTop = container.scrollHeight;
}
}
}
</script>
I am passing a div id from the Chat.vue file to the ChatComposer.vue file.
As you can see in the ChatComposer.vue file there is a function called scrollToEnd where in it gets the height of the div id from Chat.vue file.
When the sendchat function is triggered i called the scrollToEnd function.
I guess hes not getting the value from the div id because I am getting an error - Cannot read property 'scrollHeight' of null.
Any help would be appreciated.
Thanks in advance.
the scope of this.$el.querySelector will be limited to only ChatComposer.vue hence child component can not able to access div of parent component #myDiv .
You can trigger event as below in ChatComposer
this.$emit('scroll');
In parent component write ScollToEnd method and use $ref to assign new height
<chat-composer v-bind:userid="userid" v-bind:chats="chats" v-bind:adminid="adminid" #scroll="ScollToEnd"></chat-composer>
..

ckeditor.replace not working when page is loaded but works fine when executed from console

I am using ckeditor in a web application, when I added the ckeditor.replace code in the html template I get an error " Uncaught TypeError: Cannot call method 'getEditor' of undefined ". On the same page if I endter CKEDITOR.replace('id_taskDetails'); in the console I see all the buttons.
BTW, I get the alert.
I tried the solution from here: Inline CKEditor with toolbar on generated code
This stops the error but still no toolbar.
What am I missing?
<script>
alert('foo');
CKEDITOR.replace('id_taskDetails');
</script>
<div id="content">
<form action="/createTask/Test1/" enctype="multipart/form-data" method="post" class="basic-grey">
<p><label for="id_taskName">Task Name:</label> <input id="id_taskName" maxlength="64" name="taskName" type="text" /></p>
<p><label for="id_taskDetails">Details:</label> <textarea cols="60" id="id_taskDetails" name="taskDetails" rows="40">
</textarea></p>
<input type="submit" class="button" name="save" value="Next">
</form>
Looks like I need to post a question on StackOverflow before I get it right.
I used the jquery load function to make sure the page completely loaded before calling the ckeditor replace call and it works fine now.
<script>
$(window).load(function () {
CKEDITOR.replace('id_taskDetails');
});
</script>
CKEDITOR.replace must be executed when the element which you try to replace exists, so after it.
<p><label for="id_taskDetails">Details:</label> <textarea cols="60" id="id_taskDetails" name="taskDetails" rows="40">
</textarea></p>
<script>
CKEDITOR.replace('id_taskDetails');
</script>

jquery mobile trigger create enchances some elements but not all

I think this may be a bug in Jquery Mobile, but it could also be user error (mine).
For a jquery mobile page, I am manually calling $(..).trigger("create") after loading in some html asynchronously. I am finding an odd - to me anyway - behaviour, which is that <input>s of type text on the loaded html are not enhanced to have JQM's styling, whereas <input>s that are of type button are.
Here's a stripped-down version that replicates the problem. Basically, a page loads and injects foo.html. Part of foo.html is a placeholder div that is subsequently loaded and injected with bar.html. bar.html contains a link that opens a popup. When it's clicked and the popup opens, buttons are styled correctly; inputs are not.
Note: I call trigger("create") on the parent of the injected content.
Further note: calling trigger("create") on the grandparent of where bar.html is injected makes everything be styled correctly, including inputs on the popup. See below for code.
in the body of my basic html page:
<div data-role="page" id="grandparent" data-theme="a">
<h3>A very basic page</h3>
</div>
the script in that page's head:
<script type="text/javascript">
$(document).ready(function() {
var path = "pathToFiles/";
$("#grandparent").load(path + "foo.html", null, function() {
$("#grandparent").trigger("create");
//now load bar
$("#bar_placeholder").load(path + "bar.html", null, function() {
/*this does NOT enhance text <input> on popup*/
$("#bar_placeholder").trigger("create");
/*this DOES enhance text <input> on popup*/
//$("#grandparent").trigger("create");
});
});
});
</script>
here is foo.html
<div data-role="content" id="foo">
<h3>Foo before placeholder...</h3>
<div id="bar_placeholder" data-role="content"></div>
<h3>...foo after placeholder</h3>
<label for="foo_input" class="ui-hidden-accessible">foo input IS enhanced:</label>
<input id="foo_input" value="" placeholder="i AM enhanced" data-theme="a" type="text" />
<input type="button" id="foo_button" value="Foo Button"/>
</div>
and here is bar.html:
bar popup button
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<h3>Bar header</h3>
<label for="bar_input" class="ui-hidden-accessible">bar text input NOT enhanced</label>
<input name="bar_input" id="bar_input" placeholder="i am NOT enhanced" data-theme="a" type="text"/>
<input type="button" data-theme="a" value="bar button"/>
</div>

submit form at each step using Jquery form wizard

I am using Jquery Form wizard plugin in a MVC application. http://thecodemine.org/
I have a form with 4 steps. in one of step i have upload functionality.
I want submit functionality at each step and also back and next steps. later steps are optional.
I was able to add a submit button in navigation. On clicking it, form data related to active step is only submitted and other data is null.
For more clarity of my issue:
View :
<form id="myform" method="post" action="/Controller/Action">
<div id="fieldWrapper">
<fieldset class="step fieldset" id="first">
<legend class="legend">First step</legend>
Some input controls
</fieldset>
<fieldset class="step fieldset" id="second">
<legend class="legend">Second step</legend>
some more input controls (optional)
</fieldset>
<fieldset class="step fieldset" id="third">
<legend class="legend">Third step</legend>
some more input controls with filu upload
(optional)
</fieldset>
<fieldset class="step fieldset" id="fourth">
<legend class="legend">Fourth step</legend>
some more input controls (optional)
</fieldset>
</div>
<div id="demoNavigation">
<input class="navigation_button" id="back" value="Back" type="reset" />
<button type="submit" id="submitBtn">Submit and Finish</button>
<input class="navigation_button" id="next" value="Next" type="submit" />
</div>
</form>
Script:
<script type="text/javascript">
$(function () {
$("#myform").formwizard({
validationEnabled: true,
focusFirstInput: false,
disableUIStyles: true,
textSubmit: 'Submit and Finish',
textNext: 'Continue to next step',
next: "input:submit"
}
);
});
</script>
Updated the Jquery.form.wizard.js to so that the submit button hides at last step.
Now on each step i have submit button and navigation button.
When i submit form on second step, form data in second step is only posted and rest is not posted.
I went through the samples but could not find the appropriate one.
Can anyone suggest how to achieve this?
I went through the documentation and jquery.form.wizard.js file to get beeter understanding of what is done.
I just have to write some script as follows:
<script type="text/javascript">
$(function () {
$("#myform").formwizard({
validationEnabled: true,
focusFirstInput: false,
disableUIStyles: true,
textSubmit: 'Submit and Finish',
textNext: 'Continue to next step',
next: "input:submit"
}
);
});
$('#submitBtn').click(function () {
var stepInfo = $('#myform').formwizard('state');
for (var i = 0; i < stepInfo.activatedSteps.length; i++) {
stepInfo.steps.filter("#" + stepInfo.activatedSteps[i]).find(":input").not(".wizard-ignore").removeAttr("disabled");
}
});
</script>

What is the proper way to edit items in a listview when using Kendo UI Mobile & MVVM?

What is the proper way to edit items in a listview when using Kendo UI Mobile & MVVM?
I don't get the expected results when using the following:
HTML
<div id="itemsView"
data-role="view"
data-model="vm">
<ul data-role="listview" data-bind="source: items"
data-template="itemsTemplate">
</ul>
<script id="itemsTemplate" type="text/x-kendo-template">
<li>
#=Name#
</li>
</script>
<input type="text" data-bind="value: newValue" />
<button data-role="button" data-bind="click: update">update</button>
</div>​
JavaScript
var vm = kendo.observable({
items: [{
Name: "Item1"}],
newValue: '',
update: function(e) {
var item = this.get("items")[0];
item.set("Name", this.get("newValue"));
//adding the follwoing line makes it work as expected
kendo.bind($('#itemsView'), vm);
}
});
kendoApp = new kendo.mobile.Application(document.body, {
transition: "slide"});​
I expect the listview to reflect the change to the Name property of that item. Instead, a new item is added to the listview. Examining the array reveals that there is no additional item, and that the change was made. (re)Binding the view to the view-model updates the list to reflect the change. Re-Binding after a change like this doesn't seem to make any sense.
Here is the jsfiddle:
http://jsfiddle.net/5aCYp/2/
Not sure if I understand your question properly: but this is how I did something similar with Kendo Web UI, I expect mobile is not so different from Web UI from API perspective.
$element.kendoListView({
dataSource: list,
template: idt,
editTemplate: iet,
autoBind: true
});
The way I bind the listview is different, but I guess you can get similar results with your method as well.
I pass two templates to the list view, one for displaying and one for editing.
Display template contains a button (or any element) with css class k-edit to which kendo will automatically bind the listview edit action.
display template:
<div class="item">
# if (city) { #
#: city #<br />
# } #
# if (postCode) { #
#: postCode #<br />
# } #
<div class="btn">
<span class="k-icon k-edit"></span>Edit
<span class="k-icon k-delete"></span>Delete
</div>
</div>
Edit template
<div class="item editable">
<div>City</div>
<div>
<input type="text" data-bind="value: city" name="city" required="required" validationmessage="*" />
<span data-for="city" class="k-invalid-msg"></span>
</div>
<div>Post Code</div>
<div>
<input type="text" data-bind="value: postCode" name="postCode" required="required" validationmessage="*" />
<span data-for="postCode" class="k-invalid-msg"></span>
</div>
<div class="btn">
<span class="k-icon k-update"></span>Save
<span class="k-icon k-cancel"></span>Cancel
</div>
</div>
Clicking that element will put the current element on edit mode using the editTemplate.
Then on the editTemplate there is another button with k-update class, again to which kendo will automatically bind and call the save method on the data source.
Hopefully this will give you more ideas on how to solve your issue.
The problem was caused by the <li> in the template. The widget already supplies the <li> so the additional <li> messes up the rendering. This question was answered by Petyo in the kendo ui forums

Resources