script written inside a page affects in another page - javascript

I have multiple pages that loads inside an div while navigate, the script written inside page 1 overlaps with the script written in page 2. Likewise the script that loaded in previous page also loads in the current page. I use load() to load an html page
i have tried remove(), off(click) but not succeed
$(document).off('click','.areaClk');
$(document).on('click','.areaClk',function(){
$(this).addClass('keyenable');
});
code in page 1 should not works in page2

well,you can use "window.location.pathname" to get the current webpage url on which your script is applying.If you dont want your script to apply for a specific page you can do something like below
//here give url where you want your script to apply
if (window.location.pathname == "localhost/mysite/page1")
{
// add script that you want to execute only for specific page
alert("applying only for page 1");
}

Related

jQuery - how to get the final link after redirects to load() the content from URL?

I want to use jQuery's load() function to load content from an element on another page getting link from the current page. This is currently my code:
$(document).ready(function() {
var $target = $('#post').find('h2 a').attr('href');
$(".content").load($target + ".breadcrumb");
});
But this doesn't load content from the linked page, because the link isn't direct. There is a link that redirects to the final page. So jQuery loads a redirect from that link and takes me to the final page, instead of loading it on the current one.
How can I take the final URL and then assign it to the variable, then load the content from the final link without redirect?
E.g attr of a href is "example.com/reports/29025/?action=find".
When you click on this link you are redirected to e.g: "example.com/foundurl".
jQuery loads only {"redirect":"example.com/reports/29025/?action=find","message":""} from "example.com/reports/29025/?action=find" then redirects whole page to final instead of load

Open hidden window with JavaScript and show it later

I have ASP.Net website, I would like to load 2 pages at the same time. The main page should load the second page. I want to make the second page hidden until the user call it. I want to do this because the second page is doing some calculations first. I tried this
<script>
var mypage=window.open('page.aspx','_blank','toolbar=no,status=no,menubar=no,scrollbars=no,resizable=no,left=10000, top=10000, width=10, height=10, visible=none', '');
mypage.blur();
</script>
But this did nothing, and the second page is still visible.

Handling url targeted PHP page with custom jQuery loaded content

First I used include('pageName.php'); for every page I wanted to load.
Now I decided to rewrite everything and to load a page in a <div id="page_content"></div> with the jQuery function: $('#page_content').load(pageurl, {access:true});
I hope this is the best practice. Because I want to reduce load time on my web application by not refreshing the whole website with all CSS and JS files but just to refresh content when clicked on a new page.
Currently I am using the following function to load pages into the division and to pushState to history:
//Dynload pages
$("a[rel='dynload']").click(function(e) {
e.preventDefault();
var page = $(this).attr("page");
var pageurl = "pages/" + page + ".php";
$('#page_content').load(pageurl, {access:true});
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',page);
}
//stop refreshing to the page given in
return false;
});
This works perfectly.
I have this button that triggers this function and gives for attribute page="index_content" . The function will load this page to the division and the state is being pushed into the history.
However. We get an url something like this: https://mywebsite.com/index_content
The problem is, when I load this specific URL into my browser I get : "Page not found" ofcourse, because it is trying to search for the index_content folder which does not exist.
Is there a way to check the url by my PHP/jQuery script and to load the correct page into the division? If not, how can I solve this for a generic case.
When I add a new page, I want to spend no- to very less time on the pageswitcher function.
In that way I can also handle non-existing pages.
Thanks in advance!

Displaying loading gif within html object

I have a main page with a number of buttons. When a button is pressed the target page is loaded as an object within a div on this main page where target is the page to be displayed within the object.
<script>
.... check which button is pressed and assign path to target
var objectContent = "<object type=\"text/html\" data=\"" + target + "\" height=\"500px\" width=\"100%\" style=\"overflow:auto; min-height:400px;\"></object>";
document.getElementById('content').innerHTML = objectContent;
</script>
html
<div id='content'>
</div>
All works and the target page loads fine within the main page div.
Sometimes it can take a while to load the content and so I would make use of a loading gif. I have been using one on whole pages but I would like one just on the content within the div.
In a target page I have the following to display the loader:
<script>
$(".loader").fadeIn("fast");
</script>
and this to hide it once the page is loaded
<script>
$(document).ready(function(){
$(".loader").hide();
});
</script>
This is not working. The page loads fine but no loading gif. No errors.
If I debug in the browser I see the gif as I step through so it must be loading and hiding, but not when I load the page normally. I suspect it is loading too late or hiding too soon.
Does my javascript show the loader as soon as the page starts to load? I have placed it at the beginning of the body.
Or is something I am doing to hide it before the page is fully loaded? Either way, can anyone see what I am doing wrong?
UPDATE AND ANSWER
Add the onload to the object tag as follows:
var out = "<object ... onload=\"contentLoaded(this)\"></object>";
<script>
function contentLoaded() {
$(".loader").hide();
};
</script>
Then why not leave the .loader element empty and do something like this
$('.loader').fadeIn('fast').html('<img src="loading.gif" />');
And this
$('.loader').hide().html('');
Is the trigger for the loading gif showing only within the loaded-in page?
If so, by the time the browser receives the instruction to show the loader, it's already fetched the data.
I imagine the majority of the time is spent waiting for the content so try showing the loader just before this happens:
document.getElementById('content').innerHTML = objectContent;
You could always create a localised loader image, set within the innerHTML, as you said you had a global one already.

Complicated issue in breaking out of an iFrame and loading the 'return url'

I've the following issue using iframes.
I've an iFrame 'frameParent'. Inside frameParent i've a page 'parentPage.aspx' with several links in the format
http://test.aspx?pageURL=http://something.aspx?returnUrl=http://domain/parentPage.aspx
So when you click the link test.aspx gets loaded inside frameParent. Inside test.aspx i've a frame 'childFrame'. Using a JS function in test.aspx, i take the pageURL
http://something.aspx?returnUrl=http://domain/parentPage.aspx
and set it as the src for childFrame.
So something.aspx gets loaded inside 'childFrame' with returnUrl as the same parentPage.aspx.
After clicking OK or Cancel in something.aspx i return back to parentPage.aspx. But i dont want to load parentPage.aspx in childFrame (since something.aspx is in childFrame). I want to break out and load it in the parentFrame.
How can i do that?
Hope i've explained well.
loads one frame up
loads in the very top frame if there are multiple nested frames.

Categories