i18next: overwrites nested items - javascript

I'm using i18next to translate my form. It works fine but I have problems with nested items, for example:
<div style="margin-bottom: 25px" class="input-group">
<div class="checkbox">
<label class="form" data-i18n="form.checkbox">
<input type="checkbox" name="checkbox" value="true" required>
</label>
</div>
</div>
After applying the translation, the actual HTML code is like this:
<div style="margin-bottom: 25px" class="input-group">
<div class="checkbox">
<label class="form" data-i18n="form.checkbox">
translated value (no more <input> tag!)
</label>
</div>
</div>
It overwrites the innerHTML with the translation string.
Instead I need to "save" existing items and append the translation after them.
What is the correct use of i18next on a checkbox form entry?

I had the same problem and I solved it like this:
$('[data-i18n]').each(function each() {
const el = $(this);
const contents = el.contents();
el.text(i18n.t($(this).attr('data-i18n')))
.append(contents);
});
Edit:
The above is oversimplifying the problem because, as you pointed out, it won't work for custom attributes.
Therefore I searched a bit more and I found out it's already supported by jquery-i18next#append-content like this:
<label class="form" data-i18n="[append]form.checkbox">
<input type="checkbox" name="checkbox" value="true" required>
</label>
You can either specify a custom attribute or one of the special attributes like prepend, append, etc. to specify where you want the translated text to appear. More info on jquery i18next doc
Example on jsfiddle

I solved in this way:
<div class="checkbox">
<label class="form">
<input id="input_flag2" type="checkbox" name="disclaimer2" value="true" required>
<span data-i18n="form.checkbox"></span>
</label>
</div>
The span tag does the trick, embedding the translated content.

Related

find html element, without proper class name or id, with javascript

I have this HTML code
<div class="option-wrapper">
<label class="">
<input type="checkbox" name="name" value="1" data-type-xml="select" aria-label="Untitled">
<span lang="" class="option-label active">1</span>
</label>
<label class="">
<input type="checkbox" name="name" value="2" data-type-xml="select" aria-label="Untitled">
<span lang="" class="option-label active">2</span>
</label>
</div>
im trying to find the labels and to set a "style="display: none;"
like this <label class="" style="display: none;>
my problem is, I only need one of the labels in this div. But I don't have a class name or id to find one label. Do u guys know a solution for this?
Use document.getElementsByTagName('label') instead for all end then get them with the array offset. Or - to select the first - use document.getElementByTagName('label'). Notice the singular version of the second selector.
Or, a more general selector which you can use with either classes or tags or any other query string would be document.querySelector('label') or document.querySelectorAll('label')

I am using pdf js library for representing pdf files by pdf flipbook library but search is not working here

I am using https://github.com/erayakartuna/pdf-flipbook, I want to implement search functionality for this, I did check out some other solution on stackoverflow but looks like viewer.js is customized in this library.
I would like to get any help possible on this issue.
It does finds the matches as the count shows that but it does not goes to the page when I click on next match button.
Thanks.
Previous
Next
<div id="findbarOptionsOneContainer">
<input type="checkbox" id="findHighlightAll" class="toolbarField" tabindex="94">
<label for="findHighlightAll" class="toolbarLabel" data-l10n-id="find_highlight">Highlight all</label>
<input type="checkbox" id="findMatchCase" class="toolbarField" tabindex="95">
<label for="findMatchCase" class="toolbarLabel" data-l10n-id="find_match_case_label">Match case</label>
</div>
<div id="findbarOptionsTwoContainer">
<input type="checkbox" id="findEntireWord" class="toolbarField" tabindex="96">
<label for="findEntireWord" class="toolbarLabel" data-l10n-id="find_entire_word_label">Whole words</label>
<span id="findResultsCount" class="toolbarLabel hidden"></span>
</div>
<div id="findbarMessageContainer">
<span id="findMsg" class="toolbarLabel"></span>
</div>
</div> <!-- findbar -->

change a form element by ID with javascript

The problem:
Working within a Saas environment that processes a form in a way that needs to be altered. It's software-as-a-service so unique changes system wide are not an option.
Attempted Solution:
Attempting to use Javascript which the system is adding to the header area of the page to change the value of a form ID so when the form is submitted it contains the altered value.
The Code:
HTML
<div class="form-group " data-field="how_to_apply">
<label class="form-label">How to Apply </label>
<div id="application-settings" class="form--move-left clearfix row">
<div class="form-group form-group__half">
<input id="via-email" name="ha" value="1" checked="checked" onclick="displayInput(false, 'how_to_apply_1');" type="radio" />
<label for="via-email" class="form-label">
By Email<br/>
</label>
<input value="systemapplied#emailaddress.com" class="form-control" name="how_to_apply" id="how_to_apply_1" type="email" />
</div>
<div class="form-group form-group__half">
<input id="via-site" name="ha" value="2" onclick="displayInput(false, 'how_to_apply_2');" type="radio" />
<label for="via-site" class="form-label">
By URL
</label>
<input value="" class="form-control" name="how_to_apply" id="how_to_apply_2" disabled="disabled" type="url" required placeholder="e.g. http://www.yourwebsite.com"/>
</div>
</div>
Attempting to change the email address assigned to how_to_apply_1 ID
Javascript Used
document.getElementById("how_to_apply_1").value = "new#emailaddress.com";
It is important to add that this works as expected in a CodePen area but does not on the live site so my assumption is that there is something over writing this someplace I am not seeing, or I need to use something else to force the change, I don't know. Any suggestions or help would be GREATLY appreciated
Thanks in advance...
You need to run your script when the DOM is ready. You can wrap your script in DOMContentLoaded event like this:
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("how_to_apply_1").value = "new#emailaddress.com";
});

Angular ngSwitch hiding label element?

I have some AngularJS code to dynamically create form elements based on an array with form details (input type, value, etc.)
Here's the example code I have for a text input:
<div ng-repeat="input in input_array">
<div ng-switch on="input.input_type">
<div ng-switch-when="text">
<label class="item item-input">
<input type="text" placeholder="Hello World">
</label>
</div>
</div>
</div>
As you can see, the top-level div is repeated for every form element in the array. The problem, is that when input.input_type equals "text", it doesn't show unless I remove the label tags! I've tried doing label tags without any attributes (<label>...</label>) and it still doesn't show the input unless I remove them.
This is pretty strange, does anyone have any ideas why it would do that? Thanks!
EDIT: Now I've tried removing the input and putting text in (<label>Hello!</label>), and it shows up.....so it just doesn't allow inputs wrapped in a label element? o.O
You need to close your input tag.
<div ng-repeat="input in input_array">
<div ng-switch on="input.input_type">
<div ng-switch-when="text">
<label class="item item-input">
<input type="text" placeholder="Hello World"/>
</label>
</div>
</div>
</div>

jQuery Selector Not Functioning as Expected

I am running into an issue with some jQuery code. I cannot get the selector to function properly. The selector is suppose to wrap all inputs on my page with a div except for checkboxes and radios. Here is the jQuery selector I am using to try and accomplish this:
//Wrap input tags in col-sm-9
$("#custom-form-builder input[type!=radio], input[type!=checkbox]").not('#custom-form-builder .datepickercontroller').wrap('<div class="col-sm-9">');
Here is my HTML code:
<div class="form-group required checkboxerrr">
<label class="col-sm-3 control-label">Multiselect</label>
<div class="col-sm-9 control-class">
<div class="checkbox check-info">
<input type="checkbox" checked="checked" value="1" id="checkbox5">
<label for="checkbox5" class="no-asterisk">Action</label>
</div>
<div class="checkbox check-info">
<input type="checkbox" checked="checked" value="1" id="checkbox6">
<label for="checkbox6" class="no-asterisk">Mark as read</label>
</div>
</div>
</div>
After this jQuery selector is executed, the radios are not wrapped in this: <div class="col-sm-9">. However, my checkboxes are. Here is the final HTML after the jQuery selector is executed:
<div class="form-group required checkboxerrr">
<label class="col-sm-3 control-label">Multiselect</label>
<div class="control-class col-sm-9">
<div class="checkbox check-info">
<div class="col-sm-9"><input type="checkbox" checked="checked" value="1" id="checkbox5"></div>
<label for="checkbox5" class="no-asterisk col-sm-3 control-label">Action</label>
</div>
<div class="checkbox check-info">
<div class="col-sm-9"><input type="checkbox" checked="checked" value="1" id="checkbox6"></div>
<label for="checkbox6" class="no-asterisk col-sm-3 control-label">Mark as read</label>
</div>
</div>
Any help is appreciated!
Your selector is invalid for input type. You have to use not selector.
$("#custom-form-builder input:not[type=radio], input:not[type=checkbox]").not('#custom-form-builder .datepickercontroller').wrap('<div class="col-sm-9">');
Based on your original code I guess you want the input elements to satisfy the following conditions:
A descendant of #custom-form-builder
Neither a checkbox or a radio element
Does not have the class datepickercontrol
However, your selector, "#custom-form-builder input[type!=radio], input[type!=checkbox]", is a little problematic (in terms of logic), as it:
Ignores non-radio inputs in #custom-form-builder, but
Ignores non-checkbox input in the entire HTML document
There are several ways that you can do this.
Use .not(), a jQuery method
The advantage of using .not() is that you can always access the parent element and/or perform DOM traversal of the cached elements within jQuery by chaining additional methods.
$("#custom-form-builder :input")
.not('input[type="checkbox"], input[type="text"], .datepickercontrol')
.wrap('<div class="col-sm-9" />');
Bonus: Use .filter(), a jQuery method
The .filter() function allows you to conditionally remove items that are initially fetched by your selector. You can then apply chained methods after this function onto a subset of elements after filtering. This approach may sound long-winded for a simple application, but is very useful for complicated conditional filtering.
$("#custom-form-builder :input")
.filter(function() {
return ($(this).attr('type') != 'checkbox' && $(this).attr('type') != 'radio' && !$(this).hasClass('.datepickercontrol'));
})
.wrap('<div class="col-sm-9" />');
wrong syntax in your code try this:
$("#custom-form-builder").not('input[type=radio]').not('input[type=checkbox]')not('#custom-form-builder .datepickercontroller').wrap('<div class="col-sm-9">');

Categories

Resources