I'm using wysihtml5 with bootstrap-wysihtml5 to save html templates (and at some point I need to load them on wysihtml5). I want to be able to allow the input tag on the editor.
The user workflow should be this:
Create a template with a "input=text" and a "input=checkbox" and save it.
Load the saved template on wysiwyg5 (it will show the inputs so the user can check the checkbox, input some value on the other, add some another HTML, etc)
Save all data again (including the input values/checked status)
In the Bootstrap-wysihtml5 parserRules I added:
"input": { check_attributes: { "type": "alt", "name":"alt","id":"alt", "value": "alt" }},
And this works fine to add (on HTML source view) <input/> elements but I cannot save the value the user insert on the inputs.
Any hints on how to accomplish this?
Edit 1:
Here is a fiddle showing the problem: http://jsfiddle.net/KuA9Z/1/
For me this works:
$('#id-of-textarea').val()
This returns:
<input type="text"> Some text.
If this does not work, can you provide a fiddle with your code?
I am using my own fork https://github.com/Waxolunist/bootstrap3-wysihtml5-bower/ with bootstrap3.
Related
I was trying to understand how can we make drop-down values in dialog box easily authorable?
Select lists in dialogs can load their options dynamically from anywhere, so long as they are provided as an array of values in JSON format (from the docs):
[
{
value: "pink",
text: "Pink",
qtip: "Real Pink"
}
]
So one solution would be to:
Create a new template that would allow an editor to add/remove values from a list — make this editable for content authors as per any other content (e.g. using the page properties, or components that you can drag onto that template).
Create a Servlet that will parse those values & output them in the expected JSON.
Register that servlet, e.g. via a path (/bin/selectvalues).
Using the cqinclude xtype to load in your values:
i.e.
<select
type="select"
xtype="selection"
options="/bin/selectvalues"/>
If you are looking for a drop-in solution for this, take a look at http://adobe-consulting-services.github.io/acs-aem-commons/features/generic-lists.html. This supports easily authorable lists of name/value pairs which can be used (without writing additional code) in:
Classic UI Dialogs
Touch UI Dialogs
Touch UI Asset Metadata Editor
I have a question about the wrappers/accordeons. I now have multiple wrappers and in each wrapper there is a form. Now, I want one sendbutton on the end of the page. The sendbutton which will send all the forms that have been filled in at once.
How can I do that?
I don't know why you want to break input into different forms and then submit them again at once. Would it not make sense to use one form and submit the data and process it the way you want using the processFormData hook? may be because you want the accordion to group you form fields. Let me help you this way:
Create your form in the format shown below. Make sure the form has a tabless layout to be able to use fieldsets.
Create a fieldset without a label. You may add the class ce_accordion just in case you have some styling attached to it.
Create a field of type html and add the following markup.
<div class="toggler">Form 1 headline here</div>
Create another field with the following markup
<div class="toggler">
Now create your input fields from here. for example a text field,textares.
Create a field of type html to close html markup created in step 3
</div>
Create a fieldset wrapper end here.
The above steps can be repeated as many as how many groups of fields you want to create in an accordion.
Now create you submit button here and it will send all your data the way you want.
Just a by the way:
If some one submits a form in a wrapper that is closed, how will he know which wrapper has error fields?
$(document).ready(function() {
$(".ce_accordion").each(function(index,el) {
if($(this).find("p.error")){
$(this).addClass("hasErrors");
$(this).find("div.toggler").addClass("active").attr("aria-expanded","true");
}
});
});
You can now add a style for .hasErrors rule
I want to be able to format a field in Joomla. I'm creating a form that has a number of inputs and I want to format the inputs to have a yellow background and be of various lengths. Currently my form is produced in the standard Joomla way:
<div class="tablecol1">
<?php echo $this->form->getLabel('dob'); ?>:
</div>
<div class="tablecol2">
<?php echo $this->form->getInput('dob'); ?>
</div>
I've looked through the JForm stuff but I can't figure out how to control the format of the generated input box?
help would be great thanks
Setting a class for the inputs would be the quickest and easiest way as mentioned by MasterAM. You can then style it however you wish using CSS.
If you need to change the HTML or particular attributes that are not possible to set through the default parameters, then the next option is to create your own field type.
You can either override the existing ones or create ones with new names. For example you could copy the checkbox field (/library/joomla/form/fields/checkbox.php) into your own folder (/components/com_mycomponent/form/fields).
If you leave it as JFormFieldCheckbox it will override the default one. If you rename it - e.g. JFormFieldCustomCheckbox then you can have your own one.
The primary function you will want to look at is getInput(). This generates the HTML and will let you create your own input html with whatever attributes you wish.
To use custom attributes/settings from your form xml file, in your getInput() function you will use something like:
$fieldsize = $this->element['field_size'];
One part of my meteor application is a semi-collaborative table where users can edit different rows at the same time. When a user is editing a row, the static text values need to switch to input boxes so that the values can be edited and then saved. I would like a template/helper to do this, essentially I want:
<td>
{{#if iAmEditing}}
{{foo}}
{{else}}
<input type="text" name="foo" value="{{foo}}">
</td>
except that there are several columns with different values of "foo" and I don't want to copy and paste this several times. What's the right way to approach this with templates and helpers?
Another approach might be to use the HTML5 contenteditable attribute. Either way, what is the right way to template these values with handlebars?
You should be able to integrate with Bootstrap Editable
For reference, an answer to the original question...
As of today, handlebars partials can't accept anything other than a context argument, but helpers can. Hence. you can define a helper that sets up the context for the template:
Coffeescript:
Handlebars.registerHelper "eventCell", (context, field, editable) ->
return new Handlebars.SafeString(
Template._eventCell
_id: context._id
field: field
value: context[field]
editable: editable
)
Template:
<template name="_eventCell">
<td><div data-ref="{{field}}" class="{{#if editable}}editable{{/if}}">
{{value}}
</div></td>
</template>
Then, I just use the following to render each field:
{{eventCell this "province" iAmEditing}}
I ended up integrating with bootstrap editable, so the template is a little different than my original question. Also, I'm not sure if this is the best way to do it, but it's a lot cleaner than what I had before.
meteor-editable is a new project implementing something like x-editable, but nicely integrated with Meteor reactivity. Unfortunately inline editing is not supported yet (you have to use a popover the way it's set up now).
I wanted to find a way to upload a single file*, in the background, have it start automatically after file selection, and not require a flash uploader, so I am trying to use two great mechanisms (jQuery.Form and JQuery MultiFile) together. I haven't succeeded, but I'm pretty sure it's because I'm missing something fundamental.
Just using MultiFile, I define the form as follows...
<form id="photoForm" action="image.php" method="post" enctype="multipart/form-data">
The file input button is defined as...
<input id="photoButton" "name="sourceFile" class="photoButton max-1 accept-jpg" type="file">
And the Javascript is...
$('#photoButton').MultiFile({
afterFileSelect: function(){
document.getElementById("photoForm").submit();
}
});
This works perfectly. As soon as the user selects a single file, MultiFile submits the form to the server.
If instead of using MultiFile, as shown above, let's say I include a Submit button along with the JQuery Form plugin defined as follows...
var options = {
success: respondToUpload
};
$('#photoForm').ajaxForm(options);
... this also works perfectly. When the Submit button is clicked, the form is uploaded in the background.
What I don't know how to do is get these two to work together. If I use Javascript to submit the form (as shown in the MultiFile example above), the form is submitted but the JQuery.Form function is not called, so the form does not get submitted in the background.
I thought that maybe I needed to change the form registration as follows...
$('#photoForm').submit(function() {
$('#photoForm').ajaxForm(options);
});
...but that didn't solve the problem. The same is true when I tried .ajaxSubmit instead of .ajaxForm.
What am I missing?
BTW: I know it might sound strange to use MultiFile for single-file uploads, but the idea is that the number of files will be dynamic based on the user's account. So, I'm starting with one but the number changes depending on conditions.
The answer turns out to be embarrassingly simple.
Instead of programmatically submitting using...
document.getElementById("photoForm").submit();
... I used...
$("#photoForm").submit();
Also, since I only need to upload multiple files on occasion, I used a simpler technique...
1) The form is the same as my original...
<form id="photoForm" action="image.php" method="post" enctype="multipart/form-data">
2) The file input field is basically the same...
<input id="photoFile" "name="sourceFile" style="cursor:pointer;" type="file">
3) If the file input field changes, submit is executed...
$("#photoFile").change(function() {
$("#photoForm").submit();
});
4) The AjaxForm listener does its thing...
var options = {
success: respondToUpload
};
$('#photoForm').ajaxForm(options);