Develop Reference

How can I prevent refreshing HTML Video element (iFrame as well) on React State Update?

I'm a React noobie.
I'm working on my current project which I use HTML video Element.
I'd like to add chapters to Video by using React state, but when I try, Video Element refreshes and playback location moves to the beginning.
How Can I prevent refreshing Video HTML on React State Update?

Try creating a separate video component and pass URL as a prop. Wrap that in React.memo. Now that component will re-render only when the URL changes.
const Parent = () => (<div><VideoComponent url={"SOME_URL"}/></div>)
const VideoComponent = React.memo(function MyVideoComponent({url}) {
// only renders if url have changed!
return (<video src={url}></video>)
});

How to make pagination and content render on browser back button in Vue cli?

I am trying to make in Vue.js CLI table with pagination and pages I have API backend and everything.
Now I have URL with "?page=1" and I want when I click on browser back button my table and pagination render on the same page what is URL. Right now on browser back button only URL change but the content stays the same.
But I hear there is a global fix with Vue router for that does anyone know how to do that?

I'm not sure if this is what you are talking about, but in this vue school video they talk about the Vue Router not always picking up on changes if the same component is being used. You can handle it by adding a key to the router-view with value $route.path. Then any change to the path will trigger a reload of the component.

You could put a watcher on the route:
computed : {
page () {
return this.$route.params.page
}
},
watch : {
page (val) {
updateContent(val)
}
},
mounted () {
updateContent(this.page)
}

How To refresh an angular component

I'm building a mobile app using ionic 4 and it's two languages ar and en, the menu drawer is a pre-built component.
So I need to refresh the drawer component to get's the right styles based on the dom direction rtl or ltr
What I'm doing now is just location.reload reloading the whole app but I don't think that a good approach for doing that

Simplest way to do is to call ngOnInit something like
fn() {
this.ngOnInit();
}
Or try this
this.router.navigateByUrl('/RefreshComponent', { skipLocationChange: true })
.then(() => {
this.router.navigate(['Your actualComponent']);
});

call this method whenever you want to reload your page .
that will reload the page
window.location.reload();

For Refreshing or re drawing the component use the changeDetectionStratergy
so inject the ChangeDetectionRef Service in the component where you using the build-in component so on any event call the detectChange method for redrawing the component.

How to update route without re-rendering page (opening / closing a modal that has its own route)?

In my routes I have set-up a slug for a particular route like so:
Main route: /members
Sub route: /members/:slug
Now when I go to www.website.com/members/some-slug
I will try to detect whether there's a slug or not with:
if (this.props.match.params.slug) {
// If have slug, open a modal window with data that corresponds to that slug
this.showModal(this.props.match.params.slug);
}
What's happening is that showModal will change the state of a Modal component to true (thus reveal it) and also trigger an API call to get the details pertaining to the slug parameter that's passed (e.g. the slug sarah-smith is used for a GET request as a param to get Sarah Smith's details).
So all of these are fine so far. However, the issue is the re-rendering of the page when I either:
Open the modal
Close the modal
We have transitions for each element on the page so if you visit a route, the elements will have a subtle fade-in transition.
When a modal is clicked what I do is (member.name being the slug):
<Link
to={`/member/${member.name}`}
</Link>
Which causes a re-routing hence you can see those small transitions in the background while the modal is fading into view (as if I am opening /member/slug for the first time).
Same with the modal close button, if I click on it, what I do is invoke:
closeModal() {
this.props.history.push("/member");
}
Which re-renders the entire page /member page and not just close the modal. I can't just use this.setState({ showModal: false }); since that wouldn't change the route back to /member.
Is there a way to resolve this? Or another way of doing it so that the page doesn't re-render while changing the URL?

You can wrap your modal in route like this.
Modal
Then this.props.history.push("/path");

I think React-Router docs already have such examples. You can check following
https://reacttraining.com/react-router/web/example/modal-gallery.
There is npm module available as well https://github.com/davidmfoley/react-router-modal

VueJS Components using scrollIntoView()

I'm trying to use a Jump-To-Div kind of feature using document.getElementById().scrollIntoView() in a vue component.
The feature works fine if I call the function when I'm in the component. But if I try to call the function from the parent component using a ref, the element is not scrolled into view.
The parent component is a page and the children components are tabs in the page.
This is the child Vue Component in the parent component :-
<el-tab-pane label="Solution Details" name="Solution Details" v-loading="loading">
<solution-details
:formData="response"
ref="solutionDetails"
#done="$emit('done')">
</solution-details>
</el-tab-pane>
So there is a SolutionDetails.Vue child component which has a ref="solutionDetails".
I am calling this method in the parent component using the ref for the child component:
handleClick(command) {
this.activeTab = 'Solution Details';
this.$refs.solutionDetails.showCurrent(command);
},
There is a showCurrent function in the child component which should get executed for a argument "command". This is that function in the child component.
methods: {
showCurrent(index) {
document.getElementById(index).scrollIntoView();
},
As you can see, showCurrent should get the element in the page and should scroll into view. If SolutionDetails.vue is the active tab, then the corresponding element is being scrolled into view perfectly fine. But I'm executing the parent function from some other tab, then the this.activeTab = 'Solution Details'; is executing, ie. the active tab is changing to SolutionDetails.vue but the requested element is not scrolled into view.
What should I do to scroll to a element when some other tab is the activeTab?

The problem is that scrollIntoView is called before the tab is rendered on the page because renders are asynchronous. Essentially, when you call
this.activeTab = 'Solution Details';
Vue does not immediately render the page, it just queues a render. However immediately after that you tell Vue to look for the rendered element and scroll to it. It's not there yet.
I think my first stab at solving this would be to use $nextTick.
this.$nextTick(() => this.$refs.solutionDetails.showCurrent(command))
That should wait for the render that needs to happen to occur before you attempt to scroll into view.

Actually you have to reference the element in the component. Something like this for example:
this.$refs.[ref name here].$el.scrollIntoView({ behavior: 'smooth' });

1: Give the element you want a ref name. Inside the function on the parent element , it's better to try to console.log(this.$refs.[ref_name]) to check which part will have the effect. It is not always the parent element. Really depends on your CSS structure. When submit the form and get error message, then the view go to the part you want.
if(this.errorMessage) {
this.$refs.[ref_name].scrollIntoView();
}
2: For Vue.JS Multi Steps Form
It is normal to use step for process like signup.
What we have now is the view will stay the same as the first step.
For example, if step one form is quite long with scrolling then go to step two the view will stay at the bottom.
What we can do here to keep the view on the top:
Give the top element a ref name like ref="top".
In all the steps submit functions, just add this to keep the next page on the top:
this.$refs.top.scrollIntoView();