page load without refresh and clear to memory for scripts - javascript

I am developing an MVC web project. I clicked the button and then load the page without the refresh. So far okay but my script codes are working 2 times when I click the button again. My problem is explaining to step by step:
1- I click the X button and then load the X.cshtml without the page refresh into the #currentPage element. There are x.js in X.cshtml
2- x.js script codes are working.
3- I click the Y button and then load the Y.cshtml without the page refresh into the #currentPage element. There are X.cshtml in Y.cshtml
4- x.js script codes are working 2 times.
5- I click the X button again, however, x.js script codes are working 3 times.
A sample simple project
I think I need to remove the variables,functions etc. from memory right?
How to solve this? Thanks.

I assume that in the x.js an on-click listener is defined. Each time that you load the script a new listener is put on the button. Before loading the x.js you should remove the click listeners from the button $('#button').off('click');

Related

How to make a Javascript script run more than once in a page

My website has button A. When I click it a pop up div appears with yes no option. I must click yes. So I write a script so that when I click button A, the yes option is automatically clicked. It goes like this
buttonA.onclick = function(){
document.getElementById('buttonYes').click()
};
I load this into Tampermonkey. When the page loads, the code work for the first time. After that the button goes back to their original behavior. The Javascript somehome only works once when the page is newly loaded. Can someone suggest a way to make the code works all the time in the page and I don't need to reload the page for it to work.

eventlistener for backbutton not working in cordova app with multiple html files

I have a html5/jquery/cordova app for Android, and I need to control the Android backbutton.
The app contains 3 html files, each containing 3 div's with data-role='page':
index.html (#index01, #index02, #index03)
cars.html (#cars01, #cars02, #cars03)
cities.html (#cities01, #cities02, #cities03)
A menu navigates between the 3 files, each page has a button to navigate to the next page.
To control the behaviour of the Android backbutton, each of these files contains an eventlistener: document.addEventListener("backbutton", onBackKeyDown, false);
My scripts.js file contains function onBackKeyDown() {...} where the desired behaviour is specified. For now I do not have a problem with the contents of this function.
(FYI: when I press the backbutton from #index01 I want to exit the app, when I press the backbutton from #cars01 or #cities01 I want to navigate to #index01 and when I'm on one of the other pages I want to navigate to the 'previous' page. But: My question is not about this navigation!)
The problem that I do have, is that onBackKeyDown is only triggered when I'm on index.html. Whenever I navigate to cars.html or cities.html, from there to one of the subpages, and then press the Android backbutton, my function onBackKeyDown is never called.
I've tested this by putting alert("backbutton pressed"); as the very first line in the function. This alert only shows on index.html, not on the other two files.
So my question to you is: Does anybody know why this doesn't work? Or - even better - can anybody provide a solution? I've been struggling for weeks now.
Thank you for the comments, they helped me in the right direction.
Since I'm not using routing in my app, just 'basic' html pageflow, I realised there is no container around all the pages.
Furthermore the backbutton event is only part of the cordova library. And until now I only needed this on the main page. But since I want to have the backbutton functionality on all of my html documents, the solution was to add cordova.js to every one of the html documents.

chrome extension problems in content_script

i have my Main.js file in content_scripts. Main.js file provides a button and when the user click the html page is saved with reloading the html page.But when user clicks button for a second time the button is not working as some of the previous values where set when the button were clicked first time.Is there any way in chrome than Main.js will be automatically reload or execute as fresh script on every click.Windows.onload methos is not working on my Main.js file so how i solve this
It's not possible you can use location.reload function

Hyperlink + Javascript = One click?

Is it possible to integrate a javascript into a hyperlink? Or make it into some sort of batch script or whatnot, so when the page has loaded it calls the javascript which is a button on the page?
To explain it further:
We have this page:
http://work.acceptance.XXXX.com/XXXX_Raffle/Lists/Raffle/overview.aspx
The sharepoint page has a survey on it.
To get the "popup" window to show, so you can answer a question in the survey, you need to press a button which calls this script:
javascript:__doPostBack('ctl00$m$g_e999ab40_719f_42fb_bd61_d986f232bdd5$ctl01$ctl00$toolBarTbl$RptControls$ctl00$diidIONewItem','');
So, is it possible to somehow combine the page + the javascript, so all they have to do is press one link or alternatively, a hyperlink which goes to a file on a server which triggers all this, so they instantly get to the page + the javascript automatically pops so they dont have to press the button?
Keep in mind, when I say "hyperlink" I mean the kind of hyperlink you would see in an email. A simple link to a website or a server location.
I'm not very good at everything that has to do with programming and webdesign, but I do have access to the sharepoint, though I'd need serious guiding in how to add anything there other than simple webparts. It's SharePoint Server 2010.
Here is a picture of the button and what happens when you press it.
http://i.stack.imgur.com/gKCG5.jpg
Add an onload event to the page to get it to show the popup:
<script type="text/javascript">
window.onload = showPopup();
function showPopup() {
__doPostBack('ctl00$m$g_e999ab40_719f_42fb_bd61_d986f232bdd5$ctl01$ctl00$toolBarTbl$RptControls$ctl00$diidIONewItem','');
}
</script>
This needs to go on the page that you're linking to so that the link takes you to this page which then fires this onload. Put it before the closing tag on the page.
No. You cannot construct a URL that will load a document and then call some JavaScript.
You would have to modify the page you are linking to so it runs the JS automatically. It could look at the URL and run that function conditionally though (e.g. if (location.hash === '#foo') { ... }.)

jQuery ColorBox as POP UP. No Show Images

I am Using Colorbox for a Pop-Up that loads when the page loads. The Pop Up Calls an ASP page with 1 Image, and 1 Button that launches a Chat Window.
I got it to work on my local, but when I go remote the images dont appear (all the file paths are correct it looks like). The functionality is there and you can click on the invisible chat button, but no Images. If you have a second anytime this week OR next, I need this to work for my work.
>
The Page I am working on is: www.702wedding.com/linkto.asp
The Page it Calls is : www.702wedding.com/chat-with-us.asp
Also, can it be set on a 5 second Timer?
Thanks People!
You need to upload the image files to the webserver.
If you navigate to http://www.702wedding.com/images/chat-invites/chat-image-staff.png, you'll get a 404 Not Found error.

Categories

Resources