I used the following statement to create a ckeditor:
= f.text_area :message, :class=>'ckeditor', :ckeditor => {:language => "us"}
if I use f.cktextarea as specified in https://github.com/galetahub/ckeditor, I get only a normal text area.
and if I call .ckeditor() on the text area also I dont get one.
I get ckeditor only if I add ckeditor class to the text area.
But even if I have a ckeditor, the value isnt being submitted when I submit the form.
What should I do?
On inspection I get my text area as:
<textarea class="ckeditor" cols="40" id="email_message" name="email[message]" rows="20" style="visibility: hidden; display: none;"></textarea>
followed by the ckeditor code...
How should I solve this?
Try this:
<%= f.cktext_area :message, :ckeditor => {:language => "us"} %>
<script type='text/javascript' charset='UTF-8'>
$(document).ready(function(){
$('form[data-remote]').bind("ajax:before", function(){
for (instance in CKEDITOR.instances){
CKEDITOR.instances[instance].updateElement();
}
});
});
</script>
$('.formSubmit').submit( function()
{
var data = CKEDITOR.instances.editor1.getData();
$.ajax({
type: 'POST',
url: 'ck_bienban_1_luu.php',// url of phpcode save
data: {
data: data,
},
success: function() {
//
},
});
return(false);
}
);
.formSubmit is class name of form,
var data = CKEDITOR.instances.editor1.getData(); this is data of textarea
Related
I created a localstorage for the form on rails, when I tried the js code above for the
<textarea id="text"></textarea> tag it worked,
but when I tried the code like this, <%= f.text_area :title, class:"quill_container", id:"text" %> it only managed to retrieve the key, the value couldn't be retrieved
javascript code
<script type="text/javascript">
$(function() {
if (localStorage) {
var content = localStorage.getItem("autoSave");
if(content) {
$('#text').text(content);
}
}
I've been trying to pass data from my Rails view to the Vue component as described here
Everything works much as expected, but I'm rather stumped as to how to access the data that I'm passing in via props. Not appearing in the Vue developer tools anywhere and I'm not able to find it by fiddling with/inside the Vue object.
Could someone point me in the right direction. I'm fairly green with Vue, so struggling to even know what to search for :/
show.html.erb
<%= javascript_pack_tag 'test_vue' %>
<%= stylesheet_pack_tag 'test_vue' %>
<%= content_tag :div, id: "test", data: {
message: "this wont!",
name: "nor will this!" }.to_json do %>
<% end %>
test.vue
<template>
<div id="app">
<p>{{test}}{{message}}{{name}}</p>
</div>
</template>
<script>
export default {
data: function () {
return {
test: 'This will display',
}
}
}
</script>
<style>
</style>
test_vue.js
import Vue from 'vue'
import Test from './test.vue'
document.addEventListener('DOMContentLoaded', () => {
const node = document.getElementById('test')
const props = JSON.parse(node.getAttribute('data'))
new Vue({
render: h => h(Test, { props })
}).$mount('#test');
})
Looks like all you need to do is declare the properties in your component:
<template>
<div id="app">
<p>{{test}}{{message}}{{name}}</p>
</div>
</template>
<script>
export default {
props: ["message","name"],
data: function () {
return {
test: 'This will display',
}
}
}
</script>
<style>
</style>
This would be the relevant documentation.
A child component needs to explicitly declare the props it expects to
receive using the props option
I have form on a jQuery ui-tab, which loads data onto a list displayed on the same ui-tab. I have managed to get the data loaded, and the display to return to same tab for a further item to be entered. However depending on the sort order of the list the new item is not always visually obvious, I want to fade in a message, but I can't get it to work along with returning to the same tab without a manual page refresh.
I have attached both the scripts I am trying to use.
Script A
<script> // this one loads data perfectly but no success message appears
$(document).ready(function() {
$("#addtodoitem").live( 'submit' , function(evt) {
evt.preventDefault();
$.ajax({
type: $(this).attr('method'),
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('.ui-tabs-panel:visible').html(data);
$('.itemadded').fadeIn(1000).delay(4000).fadeOut(1000);
};
});
});
});
Script B
<script> //this one shows the message and loads the data, but it also loads another
//copy of ui-tabs overlapping the original
$(document).ready(function() {
$('#addtodoitem').ajaxForm(function(data) {
$('.ui-tabs-panel:visible').html(data);
$(".itemadded").fadeIn(1000).delay(4000).fadeOut(1000);
}); return false;
});
HTML
<div id="tabs_5" class="tabs">
<h2 id="todo5" class="tablecaption">Add To-do</h2>
<p>To raise a new issue please enter the description of the issue below.</p>
<form id="addtodoitem" class="todo" method="post" action="todo_do.php?do=<?=$todo_do != '' ? "edit&to_id={$_GET['to_id']}" : 'add'?>&pub=1&site_ref=NA">
<input type="hidden" value="0" name="status" id="status">
<textarea name="todo" id="todo" placeholder="To raise a new issue, please type the details of the issue here"><?=$todo_free_text?></textarea> <br />
<input type="submit" value="Submit" class="button" />
</form>
<h2 class="tablecaption itemadded">Thank you, your item has been added to the list.</h2>
I got to a satisfactory solution by using a separate refresh link button and php page to cause the refresh after posting so the script is so:
<script type="text/javascript">
$(document).ready(function(){
$('#addtodo').click(function(e){
e.preventDefault();
if($('#todo').val()!="")
{
$.ajax({
type: 'POST',
url: 'todo_do.php',
data: { 'status': $('#status').val(),
'todo': $('#todo').val()
},
success: function(data){
$('.itemadded').slideDown(500).delay(2000).fadeOut(500);
$('.refreshtodo').slideDown(500);
$('#addtodoitem')[0].reset();
$('#tabs > ul').tabs({selected: 5 });
}
});
}
else{$('.nothing').slideDown(500).delay(1000).fadeOut(500)}
});
});
and the extra php page just contains
<?
header("Location: resident.php#tabs_5");
?>
I am looking at the book MVC 2 in Action. The chapter on autocomplete is at the end which I use as reference.
In the controller, the Json results that is returned is not transformed into a list for autocomplete. The book did not use Json but I could not use their alternative with a generic list.
So my View is;
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SHP.WebUI.Models.HolidayRequestViewModel>" %>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("input#SearchText").autocomplete('<%: Url.Action("FindNames", "Employee") %>');
});
</script>
<p>You must make sure that the correct person to approve your Annual Leave is currently selected</p>
<p>Your current approver is <%: Html.DisplayFor(model => model.ApproverName) %></p>
<p>If you want to change your approver, enter his/her name here and make your selection.</p>
<p><%: Html.TextBoxFor(model => model.SearchText) %></p>
<div id="test-panel" class="ui-state-default"> This panel will disappear on command.</div>
And my controller is;
public JsonResult FindNames(string q)
{
List<EmployeeName> filteredEmployees =
Employee.GetAllCurrentEmployeesNames().Where(x => x.Fullname.ToLower().Contains(q.ToLower())).ToList();
return Json(filteredEmployees, JsonRequestBehavior.AllowGet);
}
* EDITED *
The problem with sending the parameter has now been fixed by using "string q". Obvious eh? Now it is a case of getting the JSON returned into an autocomplete list.
If you are using jquery UI autocomplete the query string parameter is called term by default. So:
public ActionResult FindNames(string term)
Of course this could be personalized:
$('input#SearchText').autocomplete({
source: function(request, response) {
$.ajax({
url: '<%: Url.Action("FindNames", "Employee") %>',
dataType: 'json',
data: { searchText: request.term },
success: function(data) {
response(data);
}
});
}
});
The question is whether it is worth it.
I did a helper for this, you can use it without having to know jQuery at all
look how it works: http://demo.aspnetawesome.com/AutocompleteDemo
you can download the library from here: http://awesome.codeplex.com/
When I submit form using button it works fine (renders PartialView in the menuload div):
<% using (Ajax.BeginForm("Menu", null, new AjaxOptions { UpdateTargetId = "menuload", HttpMethod = "POST", LoadingElementId = "status-waiting" }, new { #id = "menuFormControl", enctype = "multipart/form-data"}))
{ %>
<input id="menuFormControlsubmit" type="submit" value="submit" ) />
<% } %>
But I want to do it using javascript, to load page parts. I try this:
<% using (Ajax.BeginForm("Menu", null, new AjaxOptions { UpdateTargetId = "menuload", HttpMethod = "POST", LoadingElementId = "status-waiting" }, new { #id = "menuFormControl", enctype = "multipart/form-data"})){ } %>
<script language="javascript" type="text/javascript">
$("#menuFormControl").submit();
</script>
But it renders my PartialView on a whole page.
The code of the controller:
public ActionResult Menu()
{
return PartialView("~/Views/Shared/MenuUserControl.ascx");
}
When you call
$("#menuFormControl").submit();
you are making the form be POSTed just like it would if you had used a traditional form (instead of an AJAX form). You will have to post the content of the form to the server using AJAX and insert the response.
Try something like
$.ajax({
type: 'POST',
url: '<%= Url.Action("Menu", "MyMenuController") %>',
data: $("#menuFormControl").serialize(),
success: function(){ $("#menuFormControl").html(data); /* This will insert the HTML returned from the server */ }
});
Why mixing MS Ajax with jQuery when you can do all this with jQuery only and in an unobtrusive way (not mixing javascript and html):
So you define your form as usual:
<% using (Html.BeginForm("index", "home", FormMethod.Post, new { id = "menuFormControl" })) { %>
<% } %>
<div id="menuload"></div>
And after including the form plugin in your page:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
You indicate that the form should be submitted with ajax:
$(function() {
$('#menuFormControl').ajaxForm();
});
And finally you can submit the form with javascript like this:
$('#menuFormControl').ajaxSubmit({
success: function(data) {
$('#menuload').html(data);
}
});
Thank you, Rune. Here is my code (working) now:
$.ajax({
beforeSend: function(){ //show image while loading
$("#status-waiting").show();
},
complete: function(){ //hide loading image
$("#status-waiting").hide();
},
type: 'POST',
url: '<%= Url.Action("Menu", "Home") %>',
data: $("#menuFormControl").serialize(),
success: function (data) {
$("#menuload").html(data); //insert result into the div
}
});