I have this in the congfig file to prevent the <p> element
force_br_newlines: true,
force_p_newlines: false,
forced_root_block: '',
I am able to insert <br/> when I hit the enter key but I also want <p> element in the form as default element and wrapped by whatever I enter.
Related
view screen I am using https://amp.dev/documentation/components/amp-autocomplete/ and I am able show in results id and name concated in one string, but I need show only name and store id in hidden input.
code screen
<amp-autocomplete filter="substring" filter-value="name" min-characters="2" src="/ajax/get_active_clinics.php" class="name_autocomplete">
<input type="text" placeholder="Numele clinicii" name="clinic_name" id="clinic_name"
{literal}on="change:AMP.setState({clinic_name_validation: true, form_message_validation:true})"{/literal}>
<span class="hide"
[class]="formResponse.clinic_name && !clinic_name_validation ? 'show input_validation_error' : 'hide'">Clinica este obligatorie</span>
<template type="amp-mustache" id="amp-template-custom">
{literal}
<div class="city-item" data-value="ID - {{id}}, {{name}}">
<div class="autocomplete-results-item-holder">
<div class="autocomplete-results-item-img">
<amp-img src="{{link}}" alt="{{name}}" width="40" height="40"></amp-img>
</div>
<div class="autocomplete-results-item-text">{{name}}</div>
</div>
</div>
{/literal}
</template>
</amp-autocomplete>
You can use the select event on amp-autocomplete to get the event.value which will return the value of the data-value attribute of the selected item.
https://amp.dev/documentation/components/amp-autocomplete/#events
You can then call the split() string method on the result.
You'll need to modify the data-value in your mustache template like so:
<div class="city-item" data-value="{{id}},{{name}}">
Then add the following code to your autocomplete, this will assign the split values to 2 temporary state properties.
<amp-autocomplete
...
on="select: AMP.setState({
clinicName: event.value.split(',')[0],
clinicId: event.value.split(',')[1]
})"
>
Once these values are in state you can then access them using bound values. Note the [value] attribute, this will update the inputs value when state changes. It's worth mentioning that the change in value won't trigger the change event listener on your input here as it's only triggered on user interaction.
<input
type="text"
placeholder="Numele clinicii"
name="clinic_name"
id="clinic_name"
[value]="clinicName"
on="change:AMP.setState({
clinic_name_validation: true,
form_message_validation:true
})"
/>
Last thing you'll need to do is add the hidden input for Clinic ID, again this will need to be bound to the temporary state property clinicId.
<input
type="hidden"
name="clinic_id"
[value]="clinicId"
>
I am testing this code and it is working here http://www.w3schools.com/js/tryit.asp?filename=tryjs_debugger but not on my Joomla page. The Chrome console error is at the bottom of the post
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function toggleDiv(divId) {
$("#"+divId).toggle();
}
</script>
Toggle Button
<div id="myContent" style="background-color: #aaa; padding: 5px 10px;">
The content in this div will hide and show (toggle) when the toggle is pressed.
</div>
63-tet.html:168 Uncaught TypeError: Cannot read property 'toggle' of nulltoggleDiv # 63-tet.html:168(anonymous function) # VM4704:1
I have cheched the source page and my code is sent back to me by the server untouched:
<div itemprop="articleBody">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function toggleDiv(divId) {
$("#"+divId).toggle();
}
</script>
Toggle Button
<div id="myContent" style="background-color: #aaa; padding: 5px 10px;">
The content in this div will hide and show (toggle) when the toggle is pressed.
</div> </div>
It sounds like Joomla is filtering/ black-listing certain keywords. You can see that it is trying to call the function:
nulltoggleDiv and access the toggle property of that.
If you press f12 and search for "toggleDiv" you should be able to see the actual html after it has been deformed.
Check out this document:
https://docs.joomla.org/Help16:Content_Article_Manager#Filtering_Options_.28HTML.29
from doc:
Black List Filters
The default filter method in Joomla! is 'Black List'. The default 'Black List' contains the following tags to exclude:
'applet', 'body', 'bgsound', 'base', 'basefont', 'embed', 'frame', 'frameset', 'head', 'html', 'id', 'iframe', 'ilayer', 'layer', 'link', 'meta', 'name', 'object', 'script', 'style', 'title', 'xml'
The default 'Black List' contains the following attributes to exclude:
'action', 'background', 'codebase', 'dynsrc', 'lowsrc'
You can 'Black List' (disallow) additional tags and attributes by adding to the Filter tags and Filter attributes fields, separating each tag or attribute name with a space or comma. If you select a Filter Type of "Black List", this list will always be used, plus any additional tags and attributes you add.
The problems seems to be with this reference
$("#"+divId).toggle();
After I replaced the above with
var element = document.getElementById(divId);
element.toggle();
the code worked
I'm creating a button with Form at Laravel:
{!! Form::submit('<i class="fa fa-trash"></i>', ["class"=>"btn btn-default"]) !!}
The button text becomes:
<i class="fa fa-trash"></i>
I see only this string, not the icon: how to fix it?
Try to use Form::button instead of Form::submit:
{{ Form::button('<i class="fa fa-trash"></i>', ['type' => 'submit', 'class' => 'btn btn-default'] ) }}
It will create a button tag with type submit instead of an input tag.
This way the html of the icon should be rendered inside the tag content and should be visible.
Instead, by using an input tag like you are doing, the html string of the icon would be printend inside the value attribute of the input tag, and here it couldn't be rendered as valid html
following the instructions at:
http://www.farinspace.com/multiple-wordpress-wysiwyg-visual-editors/
i've got some nice WYSIWYG editors in my metaboxes
my markup looks like:
<div class="sortable">
<div class="sortme">
<?php $mb->the_field('extra_content2'); ?>
<div class="customEditor"><textarea name="<?php $mb->the_name(); ?>"><?php echo wp_richedit_pre($mb->get_the_value()); ?></textarea></div>
</div>
<div class="sortme"
<?php $mb->the_field('extra_content3'); ?>
<div class="customEditor"><textarea name="<?php $mb->the_name(); ?>"><?php echo wp_richedit_pre($mb->get_the_value()); ?></textarea></div>
</div>
</div>
which is just WP_alchemy (also from farinspace.com) for a textarea wrapped in a div
and the script that tells tinymce to kick in:
function my_admin_print_footer_scripts()
{
?><script type="text/javascript">/* <![CDATA[ */
jQuery(function($)
{
var i=1;
$('.customEditor textarea').each(function(e)
{
var id = $(this).attr('id');
if (!id)
{
id = 'customEditor-' + i++;
$(this).attr('id',id);
}
tinyMCE.execCommand('mceAddControl', false, id);
});
});
/* ]]> */</script><?php
}
// important: note the priority of 99, the js needs to be placed after tinymce loads
add_action('admin_print_footer_scripts','my_admin_print_footer_scripts',99);
that part works fine. but when i try to kick in jqueryUI sortable:
$('.sortable').sortable();
it lets me sort the multiple .sortme divs, but the content in the editors disappears. how can i make the text persist? it works just fine w/o the tinymce editors, so I presume it is a conflict w/ that somehow.
This ( $('.sortable').sortable(); ) won't work with tinymce editors. Tinymce does not like being dragged around the dom. In order to make it work you first need to shut down Tinymce
tinyMCE.execCommand('mceRemoveControl', false, id);
then sort and then reinitialize them
tinyMCE.execCommand('mceAddControl', false, id);
Have have this line of code in my form when I create a new item. Though when I edit the item, the default selection isn't the one that is selected. Do I need to set the initial value?
<%= f.select :category, options_for_select(Item::CATEGORIES) %>
options_for_select accepts second param which identifies the selected value.
try
<%= f.collection_select :category_id, Item::CATEGORIES, :downcase, :titleize %>
It assumes your Item::CATEGORIES gives a array of strings of categories.
for each category in Item::CATEGORIES, category.downcase will be used as the option's value, while category.titleize will be used as the option's text.
ie.
<option value="<%= cate.downcase %>"><%= cate.titleize %></option>
======
or you could:
<%= f.select :category, options_for_select(Item::CATEGORIES, #cur_obj.category.id) %>