I'm trying to use a WYSIWYG editor in my Laravel application but I have a bug I can't solve.
What works:
A form that sends a post request with a text area filled (name = pitch)
So the request is well formed and I can retrieve it in my controller, everything is perfect
My Problem
When I add a WYSIWYG editor on this specific textarea (with Trumbowyg or Redactor, I tried both), then pitch disappears from the request and I can't get it on the controller.
I don't have any JS issue in the console, when I delete the call to the WYSIWYG editor, everything is fine, so I don't know where to search.
DB field for pitch is text (I tried switching it to string, but didn't work either).
Here is my view code:
<tr>
<td>{!! Form::label('pitch', 'Pitch') !!}</td>
<td>{!! Form::textarea('pitch','',array('class' => 'pitch')) !!}</td>
</tr>
<script type="text/javascript">
$(function()
{
$('#pitch').trumbowyg({
resetCss: true
});
});
</script>
And in the Controller, this code gives me null
dd($request->input('pitch'));
Mode Code Sample in this gist
Actually, a friend of mine helped me to catch the problem.
Thank you very much #Chris & # haakym
So the problem is an HTML conflict, my form was imbricated in a table and that made a parsing conflit so i put the begining and the closing of the form outside of the table and now it's fine.
I would certainly never have found that by myself because everything else was working fine, but you know that's what they call experience !
Related
When I use the editor and type "test" I get back the following:
"<html data-version="ckeditor"><body><p> </p>
<p><span style="font-family:Arial,Helvetica,sans-serif"><span style="font-size:11pt"><span style="font-size:11pt">test</span></span></span></p>
</body></html>"
The problem is the <p> </p>. I have no idea why its there but it is adding an empty line at the top when the value is saved/opened again.
I have tried various config settings:
config.autoParagraph = false;
config.fillEmptyBlocks = false;
config.enterMode = CKEDITOR.ENTER_DIV;
But none of them work. I cant see why its being added, Its completely unnecessary.
Can anyone tell me how I set it up so they don't get added through the config, if theres a way, or just let me know if there is not.
It's really strange markup which you receive from the CKEditor. I've build some example codepen, where implement standard CKEditor setup. Below editor is button which triggers receiving data from editor.
https://codepen.io/msamsel/pen/GMEqyo/
var editor = CKEDITOR.replace( 'editor' );
editor.getData();
Usually getData method should be used to obtain data from editor.
I hope this example will help. If not then, can you give more info what kind of CKEditor setup do you use and which version?
I'm having a problem with tapestry5. I would like to make an ajax forms in a loop like this one. The problem is that even when I don't put the loop and only make a form inside a table with ajax, tapestry give me this exception:
"Forms require that the request method be POST and that the t:formdata query parameter have values".
<table>
<t:zone t:id="zone" id="zone">
<t:form zone="^">
<label>email</label>
<intput t:type="TextField" t:id="email" value="profile.email"/>
<input t:type="submit" t:id="save" value="Save"/>
</t:form>
</t:zone>
</table>
The most strange thing is when I put the table inside the form, it works fine, but I need put it out. Someone knows what's happening?
Though I'm not completely sure why this exception is happening, you can solve it by using the AjaxFormLoop in stead. Check out the example on the Jumpstart page.
I have a datagrid (table) that when created, it sends two requests:
the first is an unwanted (not send by me) it has no parameters (only rows and pagination when pagination settings is active), it does go the the intended URL.
the second is what I programmed (it works fine, with the parameters I send).
So the question is, what fires that request ?
Note 1: I even add onBeforeLoad:function(){return false;} and still sends the unwanted request.
Note 2: The requests headers are the same, except for the Content-Length. (of course).
Note 3: Related question here: http://www.jeasyui.com/forum/index.php?topic=560.0 (I already check it)
Note 4: The version is: v1.10.4
Here is the code:
HTML
<table
id="data-grid"
class="easyui-datagrid"
style="width:690px; height:660px"
url=""
title=""
rownumbers="false"
pagination="false"
singleSelect="true"
pageList="[10,20,30,1000]"
pageSize="1000"
>
<thead>
<tr>
</tr>
</thead>
</table>
JavaScript
$('#data-grid').datagrid({
//Lets add the parameters
queryParams: {
status_a: a),
status_b: b,
},
url: '/path/path',
columns:[[.....]],
});
Here is the solution:
Remove class="easyui-datagrid" from the HTML inside the <table></table> definition.
When a element has 'class="easyui-datagrid"' attribute, it
will be auto created as datagrid component. You don't need to create
it again with javascript code. To prevent from making duplicate
request to server, don't create datagrid more than once. If you wish
to create datagrid in javascript, the simplest way is to remove
'class="easyui-datagrid"' from the element.
More information here: jeasy topic
I have this problem I'm facing. I have been working on a project using Grails based on the advice from a friend. I'm still a novice in using Grails, so any down to earth explanation would be highly welcomed.
My project is a web application which scans broken or dead links and displays them on a screen. The main application is written in Java, and it displays the output (good links, bad links, pages scanned) continuously on the system console as the scan goes on. I've finished implementing my UI, controllers, views, database using Grails. Now, I will like to display actively in a section of my GSP page say forager.gsp the current link being scanned, the current number of bad links found and the current page being scanned.
The attempts I have tried in implementing this active display include storing the output my application displays on the console in a table in my database. This table has a single row which is constantly updated as the current paged scanned changes, number of good links found changes and number of bad links found changes. As this particular table is being updated constantly, I've written an action in my controller which reads this single line and renders the result to my UI. The problem I'm now facing is that I need a way of constantly updating the result being displayed after an interval of time in my UI. I want the final output to look like
scanning: This page, Bad links: 8, good links: 200
So basically here is my controller action which reads the table from the database
import groovy.sql.Sql
class PHPController {
def index() {}
def dataSource
def ajax = {
def sql = new Sql(dataSource)
def errors = sql.rows("SELECT *from links")
render (view: 'index', template:'test', model:[errors:errors])
}
}
Here is the template I render test.gsp
<table border="0">
<g:each in="${ errors }" var="error">
<tr><td>${ error.address }</td><td>${ error.error}</td><td>${ error.pageLink}</td></tr>
</g:each>
</table>
For now I'm working with a test UI, which means this is not my UI but one I use for testing purposes, say index.gsp
<html>
<body>
<div><p>Pleaseeee, update only the ones below</p></div>
<script type="text/javascript">
function ClickMe(){
setInterval('document.getElementById("auto").click()',5000);
alert("Function works");
}
</script>
<div id="dont't touch">
<g:formRemote url="[controller:'PHP', action:'ajax']" update="ajaxDiv"
asynchronous="true" name="Form" onComplete="ClickMe()" after="ClickMe()">
<div>
<input id="auto" type="button" value="Click" />
</div>
</g:formRemote>
<div id="ajaxDiv">
<g:render template="/PHP/test"/>
</div>
</body>
</html>
The div I'm trying to update is "ajaxDiv". Anyone trying to answer this question can just assume that I dont have an index.gsp and can propose a solution from scratch. This is the first time I'm using Grails in my life so far, and also the first time I'm ever dealing with ajax in any form. The aim is to dynamically fetch data from my database and display the result. Or if someone knows how to directly mirror output from the system console unto the UI, that will also be great.
It sounds like a form would be appropriate for your needs. Check out the Grails documentation on forms. You should be able to render a form with the values you would like without too much trouble. Be sure to pay attention to your mapping and let me know if you have any questions after you have set index.gsp up to render a form for your values.
I am having a strange issue in Firefox 3.5.2 with F5 refresh.
Basically, when I focus on an input field and hit f5 the contents of that input field gets copied to the next form field after the F5 refresh.
But, if you inspect the HTML source code, the values are correctly loaded.
I am not having this issue in IE8 or Safari 4.0.3.
The problem does not occur if I do a hard refresh or run window.location.refresh(true).
After F5 Refresh: http://i805.photobucket.com/albums/yy339/abepark/after.jpg
Here's an overview of what's going on.
I believe the thing you should look into is the autocomplete attribute,
you should set it to off on the input box. However be careful since this will trigger two effects.
When you refresh the page it won't remember the old values
The default dropdown of the already used values on that input box will also be disabled.
If you want to keep the second behavior you should set the autocomplete attribute back to on with JS.
Browsers can remember form field contents over a refresh. This can really throw your scripting off if it is relying on the initial value of a field matching what's in the HTML. You could try to prevent it by calling form.reset() at the start.
Different browsers have different strategies for detecting when a form or a field is the same as in the previous page. If you have clashing names, or names that change on reload, it is very possible to end up confusing them. Would have to see some code to work it out for sure.
In the backend, I am using ASP.NET MVC 1.0 with the Spark View engine. When I examine the source code after an F5 refresh in Firefox 3.5.2, the page renders correctly; however, if you look at the page visually the adjacent form field field gets populated with the value from the previous field.
I included enough code so you can just get an idea of what I'm trying to do.
Again, the rendering is fine and the final view/HTML code is fine. It's what I see on the screen that is incorrect. I am using hidden vars; but the issue occurred before using it as well.
Note in the code below, I have 2 distinct ID fields: "date_{projectTask.ProjectTaskId}" and "finishDate_{projectTask.ProjectTaskId}, which gets renders to something like "date_1" and "finishDate_2".
<table>
<for each="ProjectTask projectTask in projectTasksByProjectPhase">
<input type="hidden" value="${projectTask.ProjectTaskId}" />
<tr>
<td class="date">
<div class="box">
<div class="datefield">
<input type="text" id="date_${projectTask.ProjectTaskId}" value="${startDate}" /><button type="button" id="show_${projectTask.ProjectTaskId}" title="Show Calendar"><img src="~/Content/yui/assets/calbtn.gif" width="18" height="18" alt="Calendar" ></button>
</div>
</div>
</td>
<td>
<div class="box">
<div class="datefield">
<input type="text" id="finishDate_${projectTask.ProjectTaskId}" value="${finishDate}" /><button type="button" id="finishShow_${projectTask.ProjectTaskId}" title="Show Calendar"><img src="~/Content/yui/assets/calbtn.gif" width="18" height="18" alt="Calendar" ></button>
</div>
</div>
</td>
</tr>
</for>
</table>
FYI: ${} are used to output variables in the Spark View engine.
I am also using the YUI 2.7 Connection to make Ajax calls to update the datebase for "change" and "enter/tab key press" events. I am able to verify that the AJAX calls are made correctly and the form field values are still valid.
The problem occurs when I just do a F5 refresh; for some reason, the "finishDate_1" gets populated with the value from "date_1".
This problem occurs just by clicking on "date_1" and hitting F5; so, the adjacent field just gets populated even if there are no AJAX calls.
Here's the Javascript code I call towards the end of the body"
YAHOO.util.Event.onDOMReady(
function() {
var idList = YAHOO.util.Dom.getElementsBy(function (el) { return (el.type == 'hidden'); }, 'input');
len = idList.length;
var startDatePickers = new Array();
var finishDatePickers = new Array();
for (var i = 0; i < len; i++) {
var id = idList[i].value
startDatePickers[i] = new DatePicker("date_" + id, "show_" + id, "cal_" + id);
startDatePickers[i].valueChanged.subscribe(updateDate, 'S');
finishDatePickers[i] = new DatePicker("finishDate_" + id, "finishShow_" + id, "finishCal_" + id);
finishDatePickers[i].valueChanged.subscribe(updateDate, 'F');
}
}
}
The form field gets copied over before any Javascript code is processed because I call the Javascript code towards the end of the body after all HTML is rendered. So, I'm guessing it's a refresh issue in Firefox? What do you guys think?
As you can see above, I created my own calender date picker objects which allows you to either enter the date in the text manually or by clicking on a button to view the calendar and select a date. Once you enter or select the date, an AJAX call will be made to update the datebase in the back end.
Thanks everybody for the quick responses.
#Anonymous: whoever you are, you are awesome!
#bobince: thanks for the feedback as well.
I added a dummy form tag with the attribute autocomplete="off" and that solved the problem!
I was scratching my head because I didn't get this issue in Safari 4.0.3 or Internet Explorer 8.
<form action="" autcomplete="off">
<!-- my code -->
</form>
The values were loading correctly in the back end (ASP.NET MVC 1.0/Spark View engine) and the HTML source code reflected this, but the input field values were not getting populated correctly. I was using the YUI Connection Manager and Javascript to support edit-in-place and the date pickers.
I tried changing the XHR call to a GET call instead of POST and the same issue was happening.
Anyway, the problem was that the Firefox was not setting the correct values for the input fields for F5 refreshes.
Again, thanks so much! You guys rock!
All element id's must be unique, if two elements have same id's then that could be reason why Firefox inserts same values to elments that didn't orginally have those values entered.
I had a similar problem related to my question at Input control shows incorrect value, even 'though inspect element shows the right value is there
The problem occurred for me in Firefox, but not Chrome, for some but not all controls on the form, and when I pressed F5, but not ctrl-F5.
The "dummy form" seems to have resolved it for me.