Whenever I Save the index.js in react.js#17.0.1 version file in vscode, code is reformatted in ugly way and shows the error as in this picture:
I have tried all the possible solutions available on Google, but no results.
From uninstalling and reinstalling vscode to prettier uninstall, restart vscode, install again and restart vscode again, create-react-app again and again and all that. How can I get on the right track?
The reason for it is using a formatting extension.
Steps to solve the issue
Disable the formatting extension.
Remove the extra spaces from the code.
Save it
That should solve the problem!
Changing the file from index.js to index.jsx and re-writing the tags as well as the "hello world" worked for me.
Then, I changed back the index.jsx to index.js and the error didn't come up again.. Not sure why...
On Visual Studio Code look for a wheel icon , that lies under the account icon [ which is like a human figure ] and is on lower left side in my case.
If you hover over the wheel => Manage label appears.
Click on the wheel and a menu pops ups where you'll see Extensions . Click on Extensions . Now look for JS-CSS-HTML-formatter among your extensions . Right next to JS-CSS-HTML-formatter you'll see again the wheel icon ; click it and choose from the pop up menu Disable or Uninstall
For further documentation ,consult :
https://marketplace.visualstudio.com/items?itemName=lonefy.vscode-JS-CSS-HTML-formatter
To use HTML syntax you need to specify .jsx or .tsx file extension.
If you wish to make React elements without JSX syntax use createElement(...)
Creating React Elements
We recommend using JSX to describe what your UI should look like. Each JSX element is just syntactic sugar for calling React.createElement(). You will not typically invoke the following methods directly if you are using JSX.
createElement()
createFactory()
source: https://reactjs.org/docs/react-api.html
First, you have to rename your file from ".js" to ".jsx"
Then, you can try this syntax :
const element = <h1>this is something written in js</h1>;
ReactDOM.render(element, document.getElementById('root'));
=> JSX tags (<Component />) are not standard javascript and have no special meaning if you put them inside a .js file
=> if you want to create element in a .js file, take a look to https://developer.mozilla.org/fr/docs/Web/API/Document/createElement or https://reactjs.org/docs/react-api.html
Rename your file extension from .js file to .jsx
At the bottom of the screen, you'll see the language mode (currently set to Javascript).
-> Click on 'Set Language Mode'
-> Then set your Language Mode to 'JavaScript React'
maybe it is because of your vscode's formatter extension .be sure to format your code with js code formatter.
Tried creating DHX spreadsheet into my react application, followed the website guide https://dhtmlx.com/docs/products/dhtmlxSpreadsheet-for-React/#how-it-works.
However when the spreadsheet is rendered out in my application, i notice that no matter what i do i can't select the Column A to D.
Have anyone faced this issue as i did?
https://gitlab.com/patrickklze/trying_dhx_spreadsheet.git
Screenshot of the issue
Found and fix the issue.
Somehow it inherits the main css file and text align everything to middle which causes the columns to have bugs.
Add a inline styling on the component tag in your app.js for example:
<span style={{textAlign:"left"}}>
<SpreadsheetComponent />
</span>
Would solve the issue.
I have the following code that is not working.
<p:selectManyCheckbox id="make" value="#{priceList.searchMakeId}" >
<p:ajax event="click" process="#form" update="recordCountPanel" immediate="true" listener="#{priceList.reCountRecords}" />
<f:selectItems value="#{priceList.vehicleMakeItems}" />
</p:selectManyCheckbox>
Bean method
public void reCountRecords() throws MWSException {
The method is never called. When I replace the p:selectManyCheckbox with h:electManyCheckbox or with p:selectManyMenu Then when clicking/changing these components, the bean method is called.
I can't find in the generated shtml source any onlclick or onchange event on the primefaces checkbox.
So I'm guessing something is not rendered correctly when I use p:selectManyCheckbox
But since I don't have any errors on my server or in browsr javascript I'm clueless of what is causing the problem.
I tried with primefaces 6.0 6.1.6 and 6.1.8 . All the same result.
Any ideas?
I found out one of my collegues wrote a custom rendere for the selectManyCheckbox. But did it for PF 3 (some issues with responsive designs) And it was never updated and since I updated to PF6 it caused problems. Removing the custom rendere fixed the issue I had and also fixed the problem with the responsive design.
Simple problem here - but cant seem to find answer. I have added the angucomplete-alt to my project - I believe that I have added it all correctly - meaning, registering it and having the js file available when the page loads. But for some reason when I click on the input and start to type - nothing happens. I am unable to type in the textbox/input. below is my code for the control. - im double checking how things are wired up on the back end. - thanks in advance.
and this exact code works in another project - configured differently - but the markup for the control is the same
<angucomplete-alt id="searchGroupsAutoComplete"
placeholder="{{searchPlaceholder}}"
pause="400"
text-searching="{{searchingText}}"
selected-object="selectedAnObjectFn"
remote-url="/api/search/SearchByQueryStrings"
remote-url-request-formatter="formatSearchDataFn"
remote-url-response-formatter="formatReturnDataFn"
remote-url-data-field="Content"
title-field="Name"
description-field="EntityType"
image-field="ThumbnailUrl"
minlength="1" />
Remove maxlength="{{maxlength}}" of INPUT tag in $templateCache.put(TEMPLATE_URL,..... (angucomplete-alt.js)
so it worked, but I don't known why.
I'm working to customize liferay's Calendar portlet and have created a hook for this.
I want to show all the "Related Assets" associated with a Calendar Event directly in the list page itself where all the Events are displayed instead of the Event's detail view page.
Currently liferay shows the "Related Assets" only when we click on the Event to view the details of that Event.
Can anyone help me?
Environment: Liferay 6.1
Thanks a lot
Sabrina
I assume you already have liferay's source code and you know how to create a hook.
The JSPs you would be modifying would be in this path:
portal-web/docroot/html/portlet/calendar
So here are some steps to help you solve your query:
You need to modify the event_iterator.jspf: row.addText(event.getTitle(), rowURL);
You have to adjust the following code taken from view_event.jsp in event_iterator.jspf.
<%
AssetEntry layoutAssetEntry = AssetEntryLocalServiceUtil.getEntry(CalEvent.class.getName(), event.getEventId());
%>
<%-- <liferay-util:buffer> is a tag which stores all that is written inside
its body in a single variable string, in this case "relatedAssetsLinksBuffer"
--%>
<liferay-util:buffer var="relatedAssetsLinksBuffer">
<c:if test="<%= enableRelatedAssets %>">
<%=event.getTitle() %>
<div class="entry-links">
<liferay-ui:asset-links
assetEntryId="<%= layoutAssetEntry.getEntryId() %>"
/>
</div>
</c:if>
</liferay-util:buffer>
Now the line in step-1 becomes: row.addText(relatedAssetsLinksBuffer, rowURL);
I have not tried this but I think it would work or will atleast give you some help in solving your query.
Tip for Hooks (might be useful in future):
Liferay follows a convention in storing its JSPs, so for custom-jsps Hook (i.e. a hook created for modifying liferay's JSP) you just need to search for that particular JSP & modify it.
For Eg: You wanted to modify the first page of calendar portlet. So liferay portlet's first page is always view.jsp located in the folder with the same name as the portlet-name in this case "Calendar" and view.jsp will contain some tags like <%# include /> or <liferay-util:include /> which would include other files to show the content. So you can always start with a view.jsp and navigate ahead. By the way the names of the JSPs are also most of the time self-explanatory.
Hope this helps.