Develop Reference

How do I hide my class element when data-reviews is less than 5?

I have tried using basic JavaScript when data-reviews="2" and it worked, but what I need is when data-reviews is less than 5 or any specific number, the whole <span> section should be hidden. I need assistance on this. I am trying to achieve the same outcome but I want to hide this, when data reviews has < 5.
<div class="collection-list-badge">
<span class="stamped-product-reviews-badge" data-id="5649263493270" style="display:block;">
<span class="stamped-badge" data-rating="5.0" data-lang="en" aria-label="Rated 5.0 out 42reviews"></span>
</span>
<span class="stamped-badge-caption" data-reviews="42" data-rating="5.0" data-label="reviews" aria-label="42 reviews" data-version="2">42</span>
</div>

Loop over the badge elements. For each collection badge select the review element. Parse the data-reviews attribute with parseInt. Check if the review is less than 5. If so, remove the collection badge element.
const collectionListBadges = document.querySelectorAll('.collection-list-badge');
for (const collectionListBadge of collectionListBadges) {
const reviewsElement = collectionListBadge.querySelector('[data-reviews]');
const amountOfReviews = parseInt(reviewsElement.getAttribute('data-reviews'));
if (amountOfReviews < 5) {
collectionListBadge.remove();
}
}
<div class="collection-list-badge">
<span class="stamped-product-reviews-badge" data-id="5649263493270" style="display:block;">
<span class="stamped-badge" data-rating="5.0" data-lang="en" aria-label="Rated 5.0 out 42reviews"></span>
</span>
<span class="stamped-badge-caption" data-reviews="42" data-rating="5.0" data-label="reviews" aria-label="42 reviews" data-version="2">42</span>
</div>
<div class="collection-list-badge">
<span class="stamped-product-reviews-badge" data-id="5649263493270" style="display:block;">
<span class="stamped-badge" data-rating="4.0" data-lang="en" aria-label="Rated 4.0 out 38reviews"></span>
</span>
<span class="stamped-badge-caption" data-reviews="4" data-rating="4.0" data-label="reviews" aria-label="38 reviews" data-version="2">4</span>
</div>

How i can check if a <P> inside a <Div> contain data

I have the following field inside my SharePoint office 365 page:-
here is the related markup:-
<div class="ms-rtestate-write ms-rteflags-0 ms-rtestate-field" id="ProjectClosureSummary_cdd30532-e128-4dcd-b9bd-baf3e12a4c04_$TextField_inplacerte"
role="textbox" aria-haspopup="true"
aria-labelledby="ProjectClosureSummary_cdd30532-e128-4dcd-b9bd-baf3e12a4c04_$TextField_inplacerte_label" style="min-height:84px" contenteditable="true"
aria-autocomplete="both" aria-multiline="true" rtedirty="true">
<p>
need to ge this text!!
<span id="ms-rterangecursor-start" rtenodeid="1">
</span>
<span id="ms-rterangecursor-end"></span><br>
</p>
</div>
now using javascript or jQuery i need to check if the field contain data? but i am not sure how i can get the text which is inside a <p> inside a <div>?

Maybe you could try something like this:
text = $('p').text();

Please take reference from below code:
var parentdiv = document.getElementById('parent');
var childNode = parentdiv.hasChildNodes() ? parentdiv.children[0] : ''
console.log(childNode.textContent || childNode.innerText);
<div id="parent"><p>hello world</p></div>

Set the length of input text as per the language choosen for input in javascript

I have a div where there is an input given to user. I have to apply a validation that restrict the user to input 50 words if the input is in English else if it is in "Japanese" then it should allow only 35 words only. So I have to set the validation for these two inputs. Currently restriction is there and it restricts on the basis of Settings of website i.e if website settings is on for English then it will allow 50 words only regardless of what would be the input in "English" or "Japanese". So I want restriction on input rather than is should be based on website settings
Here I want to add some JS code on click event or something like that to make the th:maxlength dynamic so that length can be restrict on the basis of input in "alertmessage" field
$('#alertMessage').on("click", function(e) {
$("#sendMessageDuringThunder").addClass("text-white");
$('#alertMessage').addClass('highlight-input-message');
$('#alertMessageTable').fadeIn().css('display', 'inline-block');
$('.notification-div').removeClass('rounded-bottom');
$('.noti-alert-dismissible').removeClass('rounded-bottom rounded-right');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-inline-class" th:if="${notification.notification=='thunder-alert'}">
<th:block th:with="maxLength=${session.usercontext.getDefaultLanguage()=='en'?50:35}">
<div th:classappend="${notification.currentStatus}?visible:hide" id="alertMessageBlock">
<input id="alert-issued-on" type="hidden" th:attr="issuedOn=${notification.generatedOn}" />
<input id="alertMessage" autocomplete="off" class="d-down-none input-message" th:maxlength="${maxLength}" name="alertMessage" type="text" th:placeholder="#{label.write.message}" />
<i id="sendMsgIP" class="fas fa-spinner fa-lg fa-spin cursor hidden d-down-none px-1"></i>
<i class="fas fa-chevron-circle-right cursor notification-alert-heading-grey d-down-none px-1 fa-lg" id="sendMessageDuringThunder"></i>
</div>
</th:block>
</div>

$(selector).attr(maxlength,value)
In value you can provide actual value.
For Example:
$("#inputID").attr(maxlength,50)

How to submit a value of hidden input in Meteorjs

In my meteor app, I submit the value of the picker number by clicking sbmit button bellow
When I tried to submit it with Enter key (keyboard), it does not work, knowing that i set a hidden input and trying to submit it; I think the problem come from the hidden input so after a hours of search I don't know how to submit a hidden input, any help please; here my code
<template name="range">
<div class="row">
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
<div class="valueSliders">
<div class="verticleNumberSelect">
<span class="firstNumber">
<span class="up"> </span>
<span class="numberValue" tabindex="1">0</span>
<span class="down"></span>
</span>
<span class="secondNumber">
<span class="up"></span>
<span class="numberValue" tabindex="1">0</span>
<span class="down"></span>
</span>
<span class="thirdNumber">
<span class="up"></span>
<span class="numberValue" tabindex="1">0</span>
<span class="down"></span>
</span>
<span class="fourthNumber">
<span class="up"></span>
<span class="numberValue" tabindex="1">0</span>
<span class="down"></span>
</span>
<form>
<input type="hidden" id="verticleNumber" />
<input type="submit" style="visibility: hidden; position: absolute;" />
</form>
</div>
</div>
</div>
</template>
and my js is
Template.range.events({
'submit form': function (event) {
event.preventDefault();
if (Session.get('times') && Session.get('times') > 0) {
var RESPONSE, responseClass;
var GUESS = $('#verticleNumber').val();
if (GUESS > ANSWER) {
RESPONSE = "-";
responseClass = 'lower';
}
else if (GUESS < ANSWER) {
RESPONSE = "+";
responseClass = 'higher';
}
else if (GUESS == ANSWER) {
RESPONSE = "✔";
responseClass = 'win';
}
}
}
});
I set the value of hidden input dynamically and it's a value chosen by the player with picker number, I means the value of verticleNumber; answer it random value
Thank's a lot

The enter key only works on a form if it is considered focused - I think form only having one hidden input is preventing that from ever occurring. Assuming that your submit function is not being called at all, I'd actually break Meteor convention and do a jQuery event listener in your template's onCreated function:
$(document).keypress(function(e) {
if(e.which == 13) {
console.log('enter pressed');
// Your code here to get values and do stuff.
}
});

Issue in updating local model in angular xeditable

I am trying to create a form , where one text field value depends on another text box.
With reference to angularjs, By default xeditable update local model after clicking save.But i would like to update the model instantly and show the updated value in another text box
<span editable-text="user.name" e-ng-model="user.name" e-name="name"></span>
<span editable-text="user.username" e-ng-model="user.username" e-name="username"></span>
I have enclosed the sample working code in jsfiddle

#Pravin I think that I found a solution. I had the situation where I needs update the xeditable model when user select the dictionary entry on typeahead input. I was looking the solution and I found the following way:
<span editable-text="p.name" e-name="name" e-form="productForm" e-required
e-typeahead="product as product.name for product in getProducts($viewValue) | filter:$viewValue | limitTo: 8"
e-typeahead-editable="true" e-ng-maxlength="256" e-typeahead-focus-first="false"
e-typeahead-on-select='onSelectProductFromDictionary($item, $model, productForm)'>
{{ p.name }}
</span>
And the method which update the xeditable data:
$scope.onSelectProductFromDictionary = function ($item, $model, form) {
angular.forEach(form.$editables, function(editable) {
if (editable.name === 'name') {
return;
}
editable.scope.$data = $model.something; // this is a dictionary model
editable.save(); // move the value from edit input to view xeditable value
editable.hide(); // hide the specific xeditable input if you needs
});
};
I hope it helps.
UPDATE [JSFIDDLE]
https://jsfiddle.net/fLc2sdd2/

Its updating
check this
Working Demo
html
<h4>Angular-xeditable Editable form (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
<form editable-form name="editableForm" onaftersave="saveUser()">
<div>
<!-- editable username (text with validation) -->
<span class="title">Name: </span>
<span editable-text="user.name" e-ng-model="user.name" e-name="name" e-required>{{ user.name || 'empty' }}</span>
</div>
<div>
<!-- editable username (text with validation) -->
<span class="title">User name: </span>
<span editable-text="user.username" e-ng-model="user.username" e-name="username" e-required>{{ user.username || 'empty' }}</span>
</div>
<div>
<!-- button to show form -->
<button type="button" class="btn btn-default" ng-click="editableForm.$show()" ng-show="!editableForm.$visible">
Edit
</button>
<!-- buttons to submit / cancel form -->
<span ng-show="editableForm.$visible">
<button type="submit" class="btn btn-primary" ng-disabled="editableForm.$waiting">
Save
</button>
<button type="button" class="btn btn-default" ng-disabled="editableForm.$waiting" ng-click="editableForm.$cancel()">
Cancel
</button>
</span>
<br> {{user}}
</div>
</form>
</div>