I'm experimenting with the jQuery UI tab control, and have three tabs that each load a different page through AJAX. The pages that are loaded are complete html-pages, with their own Javascript and CSS.
Scripts that are inline in the html body are ok, so are CSS in the style-attribute on tags, but Javascript and CSS in the head of the loaded pages are not used at all.
How can I make use of the Javascript and CSS in the head of the loaded pages? Or do I have to include all CSS and Javascript in the page containing the tab control?
The AJAX load is going to filter out anything that's not in the body element. You can put the CSS/Javascript tags in the body and they will be added to your page, but I would avoid that if at all possible. If you're not careful, you'll end up including things multiple times.
I suggest putting the common stuff like jQuery itself, plugins, etc. on the page containing the tabs and only put tab-specific scripts on the bits that are loaded via AJAX. You'll need to be careful to manage ids -- they have to be globally unique, not unique within the tab. Sticking with classes may be a better way to handle this or preface your ids with the tab name. For CSS I would try to make it so the CSS applies to the entire page, including tabs, and load it with the page.
YMMV.
You could add this line in your head:
<link rel="stylesheet" id="yourid" type="text/css" />
and this after your ajax call:
document.getElementById('yourid').href='css/'+yourvariable+'.css';}
And you can do the same for scripts (change rel and type).
Related
I am building a simple single page application which contains some divs which I would like to fill with content from my wordpress website.
In order to do that, I am using ajax load and inserting the loaded content into my divs:
$('#my_div').load("https://example.com/page/")
The problem is that my application uses css from bootstrap which is different from the css from my wordpress website. However, because classes and IDs are identical, the css from the loaded page is replacing the css from my app.
How can I avoid that problem? I don't want to use iframes. Would it be possible to automatically rename every Class and ID name from the imported page so that it does not conflict?
I think the best way is to use get instead of load and replace the classes inside with replace if possible. In your case you can do like this:
$.get("https://example.com/page/", function(data) {
// replace classes
$("#my_div").replaceWith(data);
});
I would like to be able to prevent a CSS file from applying to the inside of a DIV tag.
The CSS file is included in the <head> section of a HTML document. I cannot remove the file or change it. All I have control of is the inside of that DIV tag. The HTML document is generated with MediaWiki, so I'm not allowed to use iFrames. I cannot host my content anywhere else, but I can take external resources such as CSS and javascript, upload them, and include them in the inside of my DIV.
Currently, I have Jquery, and I can include all sorts of external libraries.
Using jQuery to find the <link rel="stylesheet" href=...> and then .remove()ing it does work, but that messes up the rest of the page, which I am prevented from doing by a LOT of red tape.
Is there a way to "javascriptically" do something to the stylesheet such that it applies only to anything that's not inside my DIV? Maybe using the :not() selector?
I have no idea, and I have never touched the not selector before. Please help. Thank you.
You can't make prevent CSS from applying to a part of the document, even if you could change it (which is doable with Javascript as long as you don't care about users with no Javascript). You have two options basically:
Override the CSS. Probably the least painful way is to take some CSS reset stylesheet and prefix every rule so that #1 it only applies to your div, #2 it has high enough specificity to override all MediaWiki rules. You can then apply your own styles on top of that.
Make the div not part of the document. You could create an iframe in Javascript and move the contents of the DIV there. (Shadow DOM would be a nicer approach but there is not much browser support yet.)
I'm creating a simple website and now I'm using the Ajaxify library to make page transitions look great.
The problem is: my pages have both a global CSS file (used in the whole site) and specific CSS files (one file for each page, with specific content).
When I change page with Ajaxify, it pushes the content, however doesn't push the specific CSS links in the head, so the site gets buggy. Any ideas on how to modify Ajaxify to also look for link tags and push them?
Thanks in advance.
If you are using jQuery (which I think is a requirement for Ajaxify), then you can easily manually append new style sheets to the head after the page transition has completed:
$('head').append('<link rel="stylesheet" href="page-specific-style.css" type="text/css" />');
If I have different pages that I fetch using PJAX, the scripts I use one the first page I access persist to the second, and any page accessed after that through PJAX.
I've tried resetting functions, and things of the sort, which is too much work. Is it possible that on PJAX page change I can reset all Javascript bindings?
Is partial per-page Javascript possible? (such as retaining jQuery on page change but removing other scripts that are per-page)
Since a Javascript file can be referenced just by appending a <script> tag, can the opposite be done? (I know that removing that script tag doesn't remove the script)
Your inner "frames" should not contain any Javascript. You should place all your Javascript in functions that are available at the very top level of your page, and then you can hook in to page changes using the PJAX API to enable/disable functionality as appropriate.
I am using jquery ajax to load content from one page into a div on the current one, similar to the way gmail switches between inbox, trash, etc. I am using jQuery's load method
$("#divGlobal").load("newPage.html #container");
to load the content I need into my div.
newpage.html #container also has associated javascript & css files associated with it. Right now I am loading them by appending the necessary <script> and <link> tags to <head> but it does not always work. The files always load (I am watching XHR info in Firefox) but do not always seem to work correctly.
For instance, if I load page1.html & associated files (including jQuery functions for UI), everything works fine. However, if I then load page2.html and go back to page1.html, the files load but the jQuery functions are not responding.
Is there a better way of loading javascript & css files associated with the content I am loading?
Reloading the same javascript that you have previously loaded may not do what you want because all the variables and functions are already defined from the previous load and some state may already be in place from the previous load. Loading it again into the same page doesn't start from scratch which is probably what you want.
If you control the pages you're loading, then you can write the javascript in a way that will work by just having the scripts in the content load specifically designed so that they set the state exactly how you want it and clean up any previously loaded state, but you would have to write them that way in order to work that way. This would include resetting any DOM modifications, event handlers, global variables, etc... that the first invocation of the script may have modified.