Targeting variables for pluralisation with javascript - - javascript

I'm working on an integration of the search tool algolia within one of my projects. I have the following lines of code (with dummy variables added for completeness):
var nbHits = 1
var processingTimeMS = 200
$('#hits-stat').html('<div class="float-right p-3">Found <b>' +
nbHits + '</b> results in <b>' + processingTimeMS + '</b>ms. ' +
'Powered by Algolia</div>'
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-12" id="hits-stat">
</div>
</div>
What I'm looking for is an easy way to target the "results" in the element above and make it pluralised, e.g., for let nbHits = 1 I want this to read "result". Is there such a method that would take up approx 3/4 lines of code maximum such that I am not adding too many kb's to my script? I've seen a few examples which are adding approx 20kbs.
I'm sure I should be using React/Vue but I'm still jQuerying my life away :'(

$('#hits-stat').html('<div class="float-right p-3">Found <b>' +
nbHits + `</b> result${nbHits==1 ? '' : 's'} in <b>` + processingTimeMS + '</b>ms. ' +
'Powered by Algolia</div>'
);

You can use conditional statement inside .html() like so:
$('#hits-stat').html('<div class="float-right p-3">Found <b>' +
nbHits + (nbHits > 1 ? '</b> results in <b>' : '</b> result in <b>')+ processingTimeMS + '</b>ms. ' +
'Powered by Algolia</div>'
);

Related

Problems posting data forms created by javascript

I now am struggling with this for a couple of days and want to finish it.. Let's explain the html/js/php project. Via select boxes people can choose products and an amount. These products will be inserted via javascript into a basket.
Inside the basket I made an attribute with a form. In this form the products will be added with javascript with < li > tags. I understood that li tags could not be posted so I made a hidden input for every product. When I try to post the data after that it does not work.
In Opera and Chrome he just gives an empty array and in Firefox he gives an 404 Not found exception on the post. Let's explain some code:
First the html page. This is the shop with the products and the basket.
In the javascript a fuction get calls when the 'add' button is clickes:
(this is the code that add's the elements to the html)
function addProduct() {
var productAdded = $('<li class="product" name="product' + i + '">' +
'<input type="hidden" name="p' + i + '"value="' + product + "/" + qty + "/" + price + '" />' +
'<div class="product-image">' +
'<a href="image">' +
'<img src="images/' + product + '.jpg" alt="placeholder"></a>' +
'</div>' +
'<div class="product-details">' +
'<a style="color: black;">' + product + '</a>' +
'<span class="price">€ ' + price + '</span><br>' +
'<div class="quantity">' +
'<label>Aantal: ' + qty + '</label> <div class="actions">' +
' <a href="#0" class="delete-item" >Delete</a></div></div></div></li>');
cartList.prepend(productAdded);
}
The **Php ** part of the endpage that needs to get the Form data is the following:
<div class="row">
<div class="col-md-2 col-sm-12 ">
<h3>Bestelling:</h3>
</div>
<div id="bestellingklant">
<?php
print_r($_POST);
?>
</div>
</div>
There maybe are some better ways to do this. But I can't see any mistake and I tried a lot of things. It seems though not so difficult. This is the Error i get with Firefox:
Thanks a lot

Apply filters in AngularJS controller

I am newbee to angular and have this filter to translate the text (localization) which works well in my html/view:
<input type="button" class="btn btn-link" value="{{'weeklyOrdersPage.reposting' | translate}}" ng-click="sortBy('reposting')" />
What this does is to take the value from one resource file and display text and it works very well.
Now, I need to do something similar in controller where I am rendering a google map using javascript api. I need to set the text of the marker based on the language i choose. I tried this and it didn't work:
var markerConter = '<div class="infoWindowContent">' +
'<div><b>' + $filter('translate')("{{'weeklyOrdersPage.panelId'}}") + ': </b>' + panel.id + '</div>' +
'<div><b>' + $filter('translate')("{{'weeklyOrdersPage.panelClassification'}}") + ': </b>' + panel.panelClassification + '</div>' +
'<div><b>' + $filter('translate')('{{weeklyOrdersPage.quality}}') + ': </b>' + panel.format + '</div>'
'</div>';
Any pointers on how to move forward?
You don't need to use {{}} when writing code in controller
$filter('translate')('weeklyOrdersPage.panelId')
$filter('translate')('weeklyOrdersPage.panelClassification')
$filter('translate')('weeklyOrdersPage.quality')
That should solve the problem.

append jquery does not work

i am creating a search suggestion and i want to create a div and put suggestion elements like full name, image and ... in it.
so i have a empty div in my HTML code that my suggestions will be added to it.
<input type="text" name="query" autocomplete="off" id="base_main_search_box">
<button type="button" value="" id="base_main_search_box_button"></button>
<div id="main_searchSuggestion">
</div>
i want to appear search suggestions when user key up in input type.
so i create jQuery function.
my jQuery function is:
$('#base_main_search_box').keyup(function () {
$.ajax({url:'http://localhost:8000/search_suggestion/',success:function(result){
$(addSuggestion).append('<div class="base_searchSuggestionItem">' +
'<img src="' + result.movie_images[i] + '" class="base_searchSuggestionItem_image">' +
'<div class="base_searchSuggestionItem_info">' +
'<p class="base_searchSuggestionItem_info_name">' +
'<a href="">' +
result.movie_names[0] +
'</a>' +
'(' +
result.movie_yearProduction[0] +
')' +
'</p>' +
'<p class="base_searchSuggestionItem_info_description">' +
result.movie_descriptions[0] +
'</p>' +
'</div>' +
'</div>');
console.log('final: '+addSuggestion.innerHTML);
}
}});
});
the output is:
"final: undefined"
it is not correct.
As per the docs
.html() is not available on XML documents so you need to add it to DOM before setting or checking its HTML.
change the sequence as following
$(addSuggestion).append(search_item);
$(search_item).html(
div_innerHTML
);
console.log('div_innerHTML: '+div_innerHTML);
console.log('search_item: '+$(search_item).innerHTML);

I want to add/retrieve data from MS Dynamics CRM Online 2015 using pure Javascript

I would like to update an entity with some data from another entity in the load through javascript in CRM 2015 is possible?
In CRM 2011 I used the code below:
var xml = '' +
'<?xml version=\'1.0\' encoding=\'utf-8\'?>' +
'<soap:Envelope xmlns:soap=\'http://schemas.xmlsoap.org/soap/envelope/\' xmlns:xsi=\'http://www.w3.org/2001/XMLSchema-instance\' xmlns:xsd=\'http://www.w3.org/2001/XMLSchema\'>' +
' <soap:Header>' +
' <CrmAuthenticationToken xmlns=\'http://schemas.microsoft.com/crm/2007/WebServices\'>' +
' <AuthenticationType xmlns=\'http://schemas.microsoft.com/crm/2007/CoreTypes\'>0</AuthenticationType>' +
' <OrganizationName xmlns=\'http://schemas.microsoft.com/crm/2007/CoreTypes\'>OrganizationName </OrganizationName>' +
' <CallerId xmlns=\'http://schemas.microsoft.com/crm/2007/CoreTypes\'>00000000-0000-0000-0000-000000000000</CallerId>' +
' </CrmAuthenticationToken>' +
' </soap:Header>' +
' <soap:Body>' +
' <RetrieveMultiple xmlns=\'http://schemas.microsoft.com/crm/2007/WebServices\'>' +
' <query xmlns:q1=\'http://schemas.microsoft.com/crm/2006/Query\' xsi:type=\'q1:QueryExpression\'>' +
' <q1:EntityName></q1:EntityName>' +
' <q1:ColumnSet xsi:type=\'q1:ColumnSet\'>' +
' <q1:Attributes>' +
' <q1:Attribute></q1:Attribute>' +
' </q1:Attributes>' +
' </q1:ColumnSet>' +
' <q1:Distinct>false</q1:Distinct>' +
' <q1:Criteria>' +
' <q1:FilterOperator>And</q1:FilterOperator>' +
' <q1:Conditions>' +
' <q1:Condition>' +
' <q1:AttributeName>new_estadoid</q1:AttributeName>' +
'<q1:Operator>Equal</q1:Operator>' +
'<q1:Values>' +
'<q1:Value xsi:type=\'xsd:string\'>' + "" + '</q1:Value>' +
'</q1:Values>' +
' </q1:Condition>' +
' </q1:Conditions>' +
' </q1:Criteria>' +
' </query>' +
' </RetrieveMultiple>' +
' </soap:Body>' +
'</soap:Envelope>' +
'';
Have a look at the CRM SDK, it includes a javascript file SDK.REST.js that will allow you to execute your RetrieveMultipleRecords with a simple call.
Recommend you download (Dynamics CRM SDK):
https://msdn.microsoft.com/en-us/library/hh547453.aspx
And this page show you how to use the SDK.REST.js to retrieve records from CRM:
https://msdn.microsoft.com/en-us/library/gg985387.aspx
In short, you can then call the SDK.REST.retrieveMultipleRecords() function and get the data you need from within JavaScript.
Not sure about it, but what you are doing may be a little too complex for this task. You could accomplish this without javascript.
I'm working on the same issues on MS CRM 2013 on-premises, and can share you what i've learned, hope it applies to you too.
You can build a workflow (Process: https://technet.microsoft.com/en-us/library/dn531067.aspx) on the system that gets triggered before a new record is created on the entity that requires the information, adding dynamic values from the source entity to display at the Create Form as it is loaded.
You can relate to this article that explain some of the steps of this solution:
https://www.salentica.com/crm-2013-real-time-workflows/
*Is important to note that both entities must be related with a Relationship defined in the system.

How to Solve this "missing ) argument after list"?

This looks like a trivial question, but I am not sure how to deal with it. I have a DIV tag generated from javascript that goes like this:
$('#results')
.append('<DIV id='
+ A.pid
+ ' onmouseover=function(){google.maps.event.trigger(marker, 'mouseover');};><H3>'
+ A.name
+ '</H3></DIV>');
Firebug is giving me an error "missing ) argument after list" as it does not recognise the ) immediately after 'mouseover'. How do I resolve this?
UPDATE:
I understand this is about escaping quote, just that doing \'mouseover\' produces a syntax error upon mouseover of the DIV and doing "mouseover" produces a blank document.
The syntax error reads: function(){google.maps.event.trigger(marker,
You need to escape quote if it's inside another quote:
var x = "I don't like you!";
var y = 'I don\'t like you!';
var z = 'echo "this text?";';
To implement it on your case, it would be like this:
'<DIV id='
+ A.pid
+ ' onmouseover=function(){google.maps.event.trigger(marker, \'mouseover\');};><H3>'
+ A.name
+ '</H3></DIV>'
You issue is in the use of the ' character to delimit both the function and the arguments in your call.
Either switch one set of ' out for " or use \' around the values of the argument
$('#results')
.append('<DIV id='
+ A.pid
+ ' onmouseover=function(){google.maps.event.trigger(marker, "mouseover");};><H3>'
+ A.name
+ '</H3></DIV>');
//OR
$('#results')
.append('<DIV id='
+ A.pid
+ ' onmouseover=function(){google.maps.event.trigger(marker, \'mouseover\');};><H3>'
+ A.name
+ '</H3></DIV>');
Try to generate the following string
'<DIV id=' +
A.pid +
' onmouseover=\"google.maps.event.trigger(marker, \'mouseover\');\"> <H3>' +
A.name + '</H3></DIV>'
You need to put " around the values of your html attributes. Otherwise the browser thinks the attribute ends at the next whitespace and that is exactly right after the (marker, part.
$('#results')
.append('<DIV id="'
+ A.pid + '"'
+ ' onmouseover="function(){google.maps.event.trigger(marker, \'mouseover\');};"><H3>'
+ A.name
+ '</H3></DIV>');
Several things
Stop putting HTML in all caps. This is the 21st century not the 20th century.
You don't need an anonymous function for the onmouseover event.
Wrap attribute values in either single or double quotes (I use double below).
Read about JavaScript strings and quotes. Here is a tutorial.
Try this
$('#results').append('<div id="' +
A.pid +
'" onmouseover="google.maps.event.trigger(marker, \'mouseover\');"><h3>' +
A.name +
'</h3></div>');

Categories