I've imported javascript files in public-> index.html, but whenever I change the page it stops working.
And it comes back as soon as i reload the same page.
Can anyone help me out with this how should I call external javascript file?
In light of your comment
I've converted html theme to react. In index.html I've imported
carousel js [...] When I load the website for first time it works
properly but when go to some other page and then come back to the home
page carousel stops working.
It sounds like you use an older, non-react script. DON'T DO THIS!
You are not allowed to change the DOM if you use React. Every change must go through react to work.
The reason it won't work on the second viewing is that you don't look at the same HTML elements, but freshly rendered ones.
The first render, where you had the carousel working was completely deleted when you viewed another page. And then, when you came back, React rendered the first page again. But you never re-started the carousel, so of course it doesn't work.
The solution is to use a carousel library built for React. I'm sure there are hundreds of them.
Once a script file is loaded, it stays available, so it sounds like you have some kind of logic error in your code.
Related
Are there any alternate way of below code to set app language? Below code refresh the whole page always that gives bad experience to users.
window.location.search = "sap-language=EN";
This is also one way to achieve.
sap.ui.getCore().getConfiguration().setLanguage("EN");
However, some standard controls after rendered don't change the labels. Let me know if there are any other way that help here because loading whole page doesn't make any sense.
You can use Ajax by getting all the new markup and replacing the existing content by the reloaded content.
It might create some issues with other running scripts like loading images and sliders etc that holds a reference to an element so you have to reinitialize every single script that is running on settimeout() on your page.
Moreover you can use jQuery Localisation plugin
I am adding the scroll event in javascript for one of my pages. The code is like this:
document.getElementById("myProject").addEventListener("scroll", myFunction);
function myFunction() {
document.getElementById("scrollEvent").innerHTML = "These are all my projects so far";
}
So, when users start scrolling, they will see a text "These are all my projects so far".
My problem is how to stop showing this text when users move to another page.
Please help ( I am a verrrry fresh developer)
Thanks so much
A few thoughts.
Without knowing your dev environment (e.g. are you using MVC with a framework?), I will assume you are simply talking about separate/individual HTML pages.
Each HTML page can have its own javascript. Just like HTML and CSS, there is no need to have the same javascript functions on every page. (You don't have the same HTML content on every page, right?) Usually, we divide up the javascript into multiple files - some files are added to every page, some are specific to a certain page. It is easiest to have one (external) javascript file that you reference on every page, and then specific javascript code for each page - either in a second external file that is referenced, or on the HTML page inside <script>//js here</script> tags.
If the DIV with ID myProject is not on the other page, then the javascript won't do anything. However, it is not good to have broken javascript on a page, so make sure it is not included on other pages.
If you are using a framework, like CodeIgniter or ReactJS or Angular, please tell us so we can adjust our answers accordingly.
If the case is a switching between browser tabs, you can use two different events like below.
$(window).blur(function(e) {
// stop scroll event, when switching to another tab
document.getElementById("myProject").removeEventListener("scroll");
});
$(window).focus(function(e) {
// start scroll event
document.getElementById("myProject").addEventListener("scroll", myFunction);
});
I am not sure what you are actually looking for, because when user switch between tabs, he can not see the text anymore no matter there is a scroll event or not. If you are concern about performance, then the above solution would help.
It really scares me that I might want to know this thing so much. That's the whole essence of SPA (Single-Page Application). I am curious about Vue.js rendering pages. I will list some of my knowledge and If I'm wrong, please correct me. Things I think I know:
There's a which might be a tree-structure parsed from html.
Then, DOM RENDER TREE IS constructoted from css and that DOM-TREE
After that, rendering page means data is shown on the screen.
What about Vue.js? I know it has virtual DOM. If I change something with Javascript in Vue.js, the real change happens in virtual DOM because it's faster and then syncing with the real template happens. If all that is right(if wrong, please tell me) then my question is the following:
When I use Vue Router and click some link to change the page, When new page gets shown, beforeMount() is called, then if i click back button to go the previous page, beforeMount() is called also. When using Vue Router and back button, does page rendering happens again or it's saved somewhere and to make it faster, it gets all the html from cache? So If I go to some page, then click back or Vue Router link, and page rendering starts from scratch, why would it be fast?
In my opinion, page rendering happens when there's some data changed or it's the first time I am accessing that specific URL. For the second time accessing, if data has not changed, it doesn't render the page from scratch. What do you think ? Thank you.
I'm coding in MeteorJS
I'm using a bootstrap based theme.
The dropdowns etc based on bootstrap, driven by plugin javascript code, don't work. Javascript code I write separately (to handle a login button, for example) does work.
There are no errors generated in the console at any time.
Any idea on the potential issues/how to debug this?
The most commom issue by FAR is the unique way that Meteor renders pages.
A normal theme is created with a traditional load order in mind:
a browser goes to a page and starts to parse the HTML from TOP to BOTTOM
As it goes from top to bottom it builds the DOM nodes of the page.
The browser loads the scripts tags that are down at the very bottom of the page, after most of the HTML code.
99.9% of the time these scripts at the bottom of the page require certain DOM nodes to be in existence for them to work. In the traditional top-down approach, this isn't a problem because all the relevant HTML is above these script tags.
Meteor does not have a top-down approach. If anything, it inserts sections of HTML into the page at different times, which means if you are coding in a top-down way, it's highly likely that at least some of your theme's script files get loaded before the HTML that they need to run are rendered on the page.
Your example of a login button event handling is a perfect example.
You first need the browser to parse
<button id="login-button"></button>
into a DOM node so that your accompanying event handler can work:
$('#login-button').click(function(){ //do something});
What that code is doing is first looking for something with #login-button, then attaching a click event listener to it. If #login-button doesn't exist by the time it runs, it has nothing to attach the listener to, and therefore your event handler won't run when the button is eventually clicked.
I converted my brewery's website to use meteor. In the conversion process I have run into a bug in the integration of some library code. The original site uses lightbox2 http://lokeshdhakar.com/projects/lightbox2/ to pop up a modal of a graphic we designed.
In the meteor version the modal looks like its about to load but then instead just navigates directly to the image asset the modal is supposed to display. Click 'View the Brew Diagram' at http://twbrewing.meteor.com/beers to see the problem in action.
To me it looks like the library code is working but for some reason does not prevent the default browser action. I tried using a preventDefault() on the click event for that, but then nothing happens at all. Ideas?
Wrap the HTML in {{#constant}}...{{/constant}} and run any lightbox code in a template render function, e.g.
Template.pictures.rendered = function() {
lightBoxInit();
}
I don't actually know what the lightbox function is called... it's either something that they will tell you in the docs to run on pageload, or that is wrapped in a $(document).ready() call in the source. Even better is if there's an API call to run on the elements directly (something like $('img').lightbox() or $('img').each(function(el) { lightbox(el) }).
Sorry I'm not so familiar with lightbox but this is the strategy you need and what you need to look for :)
Note that the rendered function is called on rerendering too. This is fine for most libraries but if you notice any strange behaviour you'll need to add some logic to ensure that the relevant links are not processed twice (either by using a .data boolean or by destroying and recreating the wrapper).