textarea html tag not taking space between words - textarea

I have a contact form with standard input fields, in which all fields working well but when i try to put something in message box (textarea input tag ) it is not taking space between two words..

In the file mb.bgndGallery.js, there is the following function:
keyboard:function(el){
$(document).on("keydown.bgndGallery",function(e){
switch(e.keyCode){
case 32:
if(el.opt.paused){
$.mbBgndGallery.play(el);
el.opt.paused=false;
}else{
el.opt.paused=true;
$.mbBgndGallery.pause(el);
}
e.preventDefault();
break;
}
});
}
Keystroke '32' is representing the 'spacebar' and this one is causing troubles. You either remove this case or disable the keyboard functionality of this plugin (at the top of the file).
$.mbBgndGallery ={
name:"mb.bgndGallery",
author:"Matteo Bicocchi",
version:"1.8.0",
defaults:{
activateKeyboard:false
}

Related

OfficeJS Read text from Drop-down List Content Control

This is part of my Word Template automation that we use internally. I have one drop-down list content control (seen under Developer Tag) which is pre-populated with 5 items. This drop down list is placed along with other Rich Text content control in a document.
I'm able to read the values from rich text content controls without any issue, using this in Script Lab:
async function modifyGetAllControls() {
await Word.run(async (context) => {
let getAllContentControls = context.document.contentControls.getByTitle("richTextBox");
getAllContentControls.load("tag, text, length");
await context.sync();
for (let i = 0; i < getAllContentControls.items.length; i++) {
console.log(getAllContentControls.items[i].text);
} }); }
I get the value printed in Console.log. Everyones happy.
Now I try the same code for my dropdown list content control with title "dropDownContent"
I get length as "0" for getAllContentControls.items.length so it never goes inside that for loop.
Is there anyway to read the text from drop down list box please(which will be selected by the end user)? I've tried loading "lists" as well along with "tag, text, length", but no success.
Many thanks
"Currently, only rich text content controls are supported." from Word.ContentControl. So there is no way to read from a drop down control.

best_in_place retains original values after update

I'm using best_in_place to do in-page editing of a table of data
in a ruby-on-rails app. The in-place editing works, but I have a
corner case that fails. A pair of items in the row (device_name,
generic_name) must be unique. If they are not unique, the server-side
code passes back a set of names with a changed generic_name to make
the pair unique. I use the following coffeescript to update the
display.
jQuery ->
$('.best_in_place[data-bip-object="full_dpoint"]').bind(
"ajax:success", (event, d) ->▫
return if ! d?
data = JSON.parse(d)
if ! data.dpoint?
return
else
item_to_edit = "#best_in_place_full_dpoint_" + data.dpoint.dpoint_id + "_generic_name"
$(item_to_edit).text(data.dpoint.generic_name)
)
This code works (IE it properly updates the page with the server-supplied
new generic name) , but if I then click back in the 'generic_name'
field, (to go into edit mode), the default edit text changes back
to what it was at the very beginning (page download time). I have
experimented with setting many different page elements to the new
generic name, including all of the following:
$(item_to_edit).attr('data-bip-original-content', data.dpoint.generic_name)
$(item_to_edit).attr('data-bip-value', data.dpoint.generic_name)
$(item_to_edit).attr('original-value', data.dpoint.generic_name)
$(item_to_edit).attr('bipValue', data.dpoint.generic_name)
$(item_to_edit).attr('bipvalue', data.dpoint.generic_name)
All to no avail. I have poked around in the dom trying to find where the original
value might be stored, but haven't found anything other than these.
Any ideas?
TIA.
Leonard
Try it
javascript:
$(document).ready(function () {
/* Activating Best In Place */
jQuery(".best_in_place").best_in_place();
var old_value;
$(document).on('change', '.not_abort', function (e) {
console.log(e.target.value);
old_value = e.target.value;
});
$(document).on('ajax:error', '.not_abort', function (e) {
console.log(e);
e.target.innerHTML = old_value;
$(e.target).data('bipOriginalContent', old_value);
});
})
view:
best_in_place #device_name, :email, class: 'not_abort'

Livevalidation - how to ignore hidden field?

I have a form with a dropdown showing 1 through 10.
If user chooses 1-9, then a specific secondary paragraph field should show.
And if the user chooses 10, then a different paragraph field should show.
I figured out some javascript for showing the second form fields (likely isn't the most elegant way to do it so suggestions welcome).
Then I used livevalidation code so that if the user doesn't make any selection (dropdown choice stays on Choose One instead of 1-10), then a error will appear under the dropdown field instead of the form submitting.
Now I'd like to take it a step further and require the secondary field that shows but make the field that gets hidden not be required.
So if 1 -9 is chosen, the second field shows AND will be the only field required.
But if 10 is chosen, then its specific second field will show and be the only required field.
I tried a couple of things, but couldn't get the form to submit b/c I think the hidden field was still being required.
Here's my JS for determining the dropdown and showing the second field:
<script type="text/javascript">
function selectionChanged()
{
if(document.getElementById("field0").value == "blank")
{
document.getElementById("formElement1").style.display="none";
document.getElementById("formElement2").style.display="none";
}
else if(document.getElementById("field0").value == "10")
{
document.getElementById("formElement1").style.display="none";
document.getElementById("formElement2").style.display="inline";
}
else
{
document.getElementById("formElement1").style.display="inline";
document.getElementById("formElement2").style.display="none";
}
return true;
}
</script>
And here's the code for the livevalidation to show error if dropdown choice is not made and is left on Choose One:
<script type="text/javascript" >var field0 = new LiveValidation('field0', {onlyOnSubmit: true });
field0.add( Validate.Exclusion, { within: [ 'blank' ], failureMessage: 'Please make a selection' } );</script>
Hope that makes sense and someone can help.
Thanks!

autocomplete of words in the middle (jQuery UI)

Anyone know good sample code using jQuery UI's autocomplete widget that can autocomplete words in the middle of a text box, not just autocomplete of the word at the end only?
I'm using the jquery UI autocomplete widget for a component that supports entry of multiple tags. It's like like stack overflow's tag editor, but simpler: no fancy formatting in the autocomplete dropdown, no "tag" background images in the edit box. I started with the jQuery UI Autocomplete Multiple sample and modified it.
It's working OK, except autocomplete doesn't work for tags in the middle of a multi-tag string. For example, if I type C Fortran and then put the caret right after C and type +, I'd expect to see C++ in the autocomplete list but instead I see Fortran again.
Here's the code so far: http://jsfiddle.net/WCfyB/4/
This is the same problem described by autocomplete in middle of text (like Google Plus), but the problem in that question was simpler because he could rely on an empty # in the text to signal when to show the autocomplete. In my case, I can't just rely on the text-- I actually need to find out where the caret is and autocomplete for the word where the caret is.
I could build this myself using caret or another plugin, but was wondering if there was already a jQuery-UI-based sample online that I could use without re-inventing another wheel, especially if there are browser-specific corner cases to worry about. Ideally, it'd behave like this: whenever the user places the caret inside or at the end of a tag (where tags are always separated by 1+ spaces), autocomplete is shown for that tag. Know a good sample?
I don't know of any examples like this, but here's something that you could start with:
var availableTags = [ ... ];
function split(val) {
return val.split(/ \s*/);
}
function extractLast(term) {
return split(term).pop();
}
$("#tags")
.bind("keydown", function(event) {
// don't navigate away from the field on tab when selecting an item
if (event.keyCode === $.ui.keyCode.TAB
&& $(this).data("autocomplete").menu.active) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function(request, response) {
var results = [],
selectionStart = this.element[0].selectionStart
term = extractLast(request.term.substring(0, selectionStart));
if (term.length > 0) {
results = $.ui.autocomplete.filter(availableTags, term);
}
response(results);
},
focus: function() {
return false; // prevent value inserted on focus
},
select: function(event, ui) {
var terms = split(this.value.substring(0, this.selectionStart));
terms.pop(); // remove the current input
terms.push(ui.item.value); // add the selected item
this.value =
$.trim(terms.join(" ") + this.value.substring(this.selectionStart)) + " ";
return false;
}
});
Example: http://jsfiddle.net/WCfyB/7/
The major caveat here is that the selectionStart method does not work in IE. You can replace those function calls with one of those plugins you mentioned in your question.

Grails: How do I make a g:textfield to load some data and display it in other g:textfield?

I have two g:textfields
in the first one I should write a number lets say 12 and in the g:textfield next to it it should load the predetermined name for number 12.
The first one is named 'shipper' and the other 'shipperName'
Whenever I write the code 12 in the 'shipper' txtfield, it should return the name of the shipper in the 'shipperName' box.
Thanks in advance!
Examples:
If I write the number 12 it should return USPS
http://i53.tinypic.com/2i90mc.jpg
And every number should have a different 'shipperName'
Thanks again!
That's quite easy if you'll use jQuery. Check out the event handlers ("blur" is the one you want which occurs when the user leaves the numerical box).
For example:
$("#shipper").blur(function() {
$("#shipperName").load(
"${createLink(controller: 'shipper', action: 'resolveShipper')}?id=" +
$("#shipper").val()
);
});
The $(this).val() at the end is the value of the input field the user just left.
And the "ShipperController.resolveShipper" action would look something like this:
def resolveShipper = {
render text: Shipper.get(params.id).name, contentType: "text/plain"
}
There are other things you might want to do, like automatically filling in the shipperName field as the user types without leaving the edit field, probably after a delay. However the event handler stays the same, just the event is changing (from "blur" to "change" or something like this)
To relate two strings, it's easiest to use an object to create a dictionary/ map, as shown below;
$('#input1').bind('keyup',function() {
var map = {
"1":"One",
"2":"Fish",
"3":"Bar"
};
$('#input2').val(map[$(this).val()]);
});
You can see this in action here: http://www.jsfiddle.net/dCy6f/
If you want the second value only to update when the user has finished typing into the first input field, change "keyup" to "change".

Resources