I have a problem when rendering components based on conditional in reactJS.
My expectation is the paragraph will be shown all of the content if it is in pdf view. Meanwhile, it will be displayed a part of the content with the "Show more" button if it is on the edit page.
Both pages use ComponentA to render the paragraph.
I have an isPdf prop which was passed from the parent to check pdf file:
const ComponentA = ({isPdf}) => {...}
Render component:
{!isPdf ? <RsReadMore width={1000}>{actualContent}</RsReadMore> : <RsFullContent>{actualContent}</RsFullContent>}
When I print isPdf on the console to test. It displays true on pdf page and false on edit page (Correct).
However, it still shows a part of the content with the "Show more" button on both two pages.
Which are some reasons that make this happen and how to solve it?
Related
So the thing is a normal alert works like Alert("msg to be displayed"); but I want to use the Alerts of material UI. They Work like returning a JSX component. <Alert severity="success">This is a success alert — check it out!</Alert>.
I was able to implement this but the problem is the place where I pass the JSX, It occurs in that Grid, which is not at the Top of the web-app. So how to overcome this such that I can just pass Alert from anywhere and it pops at top area of the app.
I've 4-5 Hierarchical components and I tried to pass the Alert trigger through props from each of the component, it worked but It is a lot of hassle .
-Define a variable called alert in the state of your index file
-Create a function called setAlert that makes the alert equal to the jsx you need
-Create another function hideAlert that sets the alert to an empty string or whatever you might find convenient to not display the alert
-Place the alert variable in the return of your main app component.
-Make sure the alert is placed inside a div with position absolute and correct styling.
-Pass the setAlert and hideAlert functions via context or simply by passing props to all the other components.
Voila!
I have the following code:
https://jsfiddle.net/audiodude/pq9aczdu/33/
If you go to the Item View, then jump to page 10, say, it displays "page 10 of ??" (you're on page 10) and the input box agrees.
If you jump to page 20, same thing, so far so good.
However, if you then use the back button in your browser, it says "page 10 of ??" but the input box still says page 20.
I know that the Vue Router likes to reuse components when the path doesn't change, and my understanding is that the "this.page" data value on the ItemPagination component isn't getting updated. But I thought I was following good practice by separating the initialPage prop from the data that is bound to the model.
How do I get the input box to update on the browser BACK action? I can't use onBeforeRouteUpdate on ItemPagination because it's not the top level component being rendered so never receives that event.
Thanks!
Add the following to your ItemPagination component to keep an eye on changes to the route and query parameters
watch: {
$route (to) {
this.page = to.query.page || 1
}
}
See https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes
I have a list of checkbox in a two tabs page, the problem I have is the page jumps to topscreen when I click on a checkbox in the first tab and this code gets called :
this.getOwnerComponent().setModel(mymodel,"mymodel")
If I navigate between the tabs and go back it doesn't happen anymore, this only happens when i click checkbox before navigating.
My checkbox :
<CheckBox app:mydata="a" select="onSelect" ></CheckBox>
N.B : this only happens if i'm trying to overwrites a model I created in Component.js (mymodel). If I set another model to the componentowner using another name it works fine
So I am working on a website that will have a lot of recipes. I want to have a button that sends whatever recipe is being displayed to that page for printing. However, the way I have each page set up is making this complicated. I have a page for each type and have the recipes displayed via the use of divs and javascript. You click a recipe from a list and that calls a function to make the corresponding recipe go from 'none' to 'block'. Here is my current code
$('.main').each(function() {
if(style.display=="block"){
var divData = $('.card').html();
window.location.href = "print.html";
document.write(divData);
}
});
How can I alter this code so it calls in the one that has its display set to "block"?
You should try using a print stylesheet based on the active recipe class.
Here's more info about print stylesheets
https://css-tricks.com/print-stylesheet-approaches-blacklist-vs-whitelist/
Hi I want to hide an adf component automatically.I have a selectOneChoice that contain some number (from 1 to 12).
Example when I select 2, it show's two field automatically without clicking any button..
i used this function to hide a declared componenet but just when i click a button..
function enableField(actionEvent) {
var nameInputText = actionEvent.getSource().findComponent("soc1");
nameInputText.setProperty("visible", true);
actionEvent.cancel();
}
i set the componement "soc1" visible = true than through the javascript function i change it..
SO the probleme here is how to read the number from the selectonechoise and how to set the component visible directly without clicking any button.
Actually Rendered won't do what you want. You want to use Visible property instead. Rendered causes the actual markup for the component not to be rendered on the page, so a Partial Refresh will not cause it to appear. Rendered is reserved, usually, to hide items that are secure. We set rendered property to false on the item(s), but then refresh the parent containing component - usually a layout manager - then it works. So either refresh the layout manager that contains the item or use Visible. I demonstrated this exact use case last week in class and it works as described.
Basicaly, you don't need javascript solution or any programming to achieve this.
You should set attributes rendered(this way component won't be rendered at the page at all) and partialTriggers that points to selectOneChoice component for components you want to show or hide. Also you have to set autoSubmit="true" for your selectOneChoice component.
<af:selectOneChoice id="soc1" autoSubmit="true" .../>
<af:panelGroupLayout id="plg1" partialTriggers="soc1">
<af:outputText id="ot1" rendered="#{bindings.lov.inputValue le 1}" inputValue="text1"/>
</af:panelGroupLayout>
Note: its not working code, just a sample
It will work following way, on valueChange event at selectOneChoice component value is submitted and partialRefresh fires for components that have it in partialTriggers specified. And rendered attribute will either render or remove component depending on it's EL expression. Components that should be managed wrapped into another component to make sure PPR reach it when they ain't rendered.