I currently want to add some react components to my asp.net page.
It consists of various partial pages which are loaded into the page as well.
The problem I am facing is connected to partial pages, webpack and react. I am using webpack to generate a bundle which also contains all react components.
In one of these components which I take for example now, I am waiting for the window load event before I render the component on a div, which is part of a partial page.
However, considering I am loading the bundle on the .cshtml which also renders the partial pages, the window load function is firing before the partial page is loaded and therefore before the div is available.
React is therefore showing an error, mentioning that the target container is not available.
How can I get around this issue? Is there an javascript event I could use to wait for this target container?
one way is to call React mounting in the same place your mounting div is
<div></div><script>mount react</script>
or use onshow event
<div onshow=" ... call script " />
another option is in react to wait for div to become available and use setTimeout for waiting, I am not aware HTML has the event for specific div not loaded, as it cannot reference it
Related
I have created one spa using JQuery. SPA is done via writing a custom router where we add visible classname to a page div to make that page visible and we remove the same classname from all the other pages using jquery like this,
$(".main-content .page").removeClass("visible");
const page = $(`#${pageId}`);
page.addClass("visible");
Now I am migrating this site to use react components here and there through out the website. I have one component on one of the page that shows product data based on the id in the URL but the problem is that it doesn't rerender even if I change the URL. It is not able to detect the change as state or props are not changing.
is there a way to force rerender this component from my other JS code?
The solution was pretty straight forward but it is not mentioned anywhere.
The official guide says to use this below code at the end of the file so that when our js file will be loaded by the browser and run then it will render our react code but the thing is we can call this method from anywhere to force rerender our component/ replace our component with the new instance.
To force rerender it, calling below method that adds the react code to the div worked.
ReactDOM.render(<ProductDetails />, document.getElementById("product-details"));
Using this we can even pass the new props also if we want to.
I have got a website, that is lazyloading react scripts from different sources. For each script loaded, we provide a div with the name of the script as id. As soon as the script is loaded, it searches for the div with the id and renders the components.
As the site is displayed on a stationary tablet it does not reload very often and the memory footprint gets pretty big. Is there a way to completely unload a react script without reloading the website? Is there even a way to just unload any
kind of script? I guess the garbage collector is responsible for this, but currently its not even removing scripts / components that have unmounted a long time ago.
As I was searching for a solution, I found this thread about angular. I'm basicly looking for a way to do the same with react (Even tho I didn't test the angular solution).
Before removing the script tag and the container DOM node, you can use unmountComponentAtNode to allow React to do its cleanup.
ReactDOM.unmountComponentAtNode(document.getElementById('root'));
Use a design pattern that uses conditional rendering and check in the componentDidMount if either data is returned or the specific section is to be rendered.
I have a page created using React. Up until now everything was working great. But now the page loads and as soon as the page is loaded all components freeze and I cannot interact with them. It is important to note that the browser is working fine and it is not the browser that freezes.
If it helps, I am using webpack to host the page.
Here is a sample.
Basically I have a component that is like a parent to all other components. The parent component gets data from a server and passes along to other components.
The parent also passes along methods that I can use to call from children component and interact with server again and this is basically the pattern through all the project. I have sadly no idea why it started freezing even though everything including styles loads perfectly. I just cannot interact with it and press buttons and such
One thing that can freeze things is if in the onClicks you do:
<button onClick={this.setSector('legal')}>
rather than:
<button onClick={() => this.setSector('legal')}>
We have a parent site that provides the real estate for our applications to be added. The flow is described as below
Parent site has a menu.
One of the "links" on the menu points to our
application
When you click on it, the parent site internally parses
the response from our application (including html and javascript)
and loads it within a container. Sort of a portlet. This parsing is problematic, because once the javascript is loaded, it remains in the head tag.
Thereafter, we can use our code to control the application in a SPI manner.
Problem arises, when the user clicks on the menu again, because steps 1-4 get repeated. Thus we end up reloading javascript, which fails spectacularly. Some of the problems include
Angular is reloaded.
Modules get reloaded.
If I defer the loading of Angular conditionally via document.write, then I have to ensure that angular is loaded before the modules are defined.
If I manually bootstrap the application, then I cannot bootstrap it again and I need flags to maintain.
I was able to write a script to ensure that everything is loaded only once, but now the problem is that the DOM does not get "processed" once the user clicks the link again. It is as if the entire DOM content has refreshed with the angular tags and directives, and the javascript is already loaded, but it does not "process" this new DOM content.
What can I do to ensure that newly added DOM via a third party plugin/script/code is recognized by existing angular code?
I am having some issues with a Wicket ListPanel. The whole ListPanel is refreshed via Ajax from a filter that is defined on the same page. This schema works quite well under normal circumstances.
One part of the ListPanel is a component that needs some specific JS and CSS files for it's proper functioning. These are declared in the wicket:head section of the specific component.
When the page is loaded for the first time and the list has at least one item, everything works fine. However, when the list is empty when page is rendered, the child component of the ListPanel is never loaded and the CSS/JS imports are not considered. If, afterwards you refresh the DIV with an AJAX request, the wicket:head section of that component is not reloaded, so the Javascript code is broken.
My assumption is that Wicket will consider the wicket:head section during normal page render, but not when a component is updated via AJAX.
So, my question is, what would be a good approach to get the resources I need without having to push the imports up to a component that doesn't use the resources directly? I know pushing them up to other components or the page will do the job, but I don't really think it's clean, I like to have things where they belong, and if a component is the only one to use some resources, they should only be loaded there.
In your listPanel
#Override
public void renderHead(IHeaderResponse response) {
super.renderHead(response);
response.renderOnDomReadyJavaScript("someDomReadyJSFunction();");
}
your JS should have a function to be called on domready, that will do the work in wicket 1.5.x
for wicket 6 check this