Include a dynamic menu using JavaScript - javascript

I want to include a file based on the page name or another unique element using Javascript for each html page on my website.
The script would need to identify the element then load the correct file.
My website pages end with the extension .html -- If I could change them to .php I would and I would be set, but I cannot change the structure.
So for example, a script would check the beads.html for a unique element then it would load the beads-nav.html file that's associated with that element. jewelry.html would load the jewelry-nav.html file, etc.

You can load external pages via ajax.
With jquery it could be as easy as this: $('#result').load('ajax/test.html');
Taken from here.

Related

How to create instances of a html page and dynamically load into a list of the main page

I have main html page and then I need to add a dynamically created list of a template of another html file I created.
Basically I have a template for one item of the list in a separate HTML page.
So what I need to do is create instances of that html page, populate the correct data, and then add it to list of items on the main html page.
I would know how to do this in java but I am not sure how to do this in HTML / Javasript.
What is the preferred way to dynamically create html object instances.
Thanks
You can load the html template with jQuery load method
$("#container").load('path/template.html', function(){
// some code to populate your template
});
Note: this will only work through a web server, not locally as you will hit the browsers cross site origin policy. use apache or similar

How to remove Link And Scripts Element Dynamically

Suppose I have a web http://mayxaydungchina.com whose body contents can be dynamically populated using ajax or the Load() method.
How do I remove an existing to an external css file or an external <script> file from the head section of my web page?
I thought about using the append and prepend methods but I was thinking that they do not remove the existing link to an external css or an external script file.
I need to remove existing external css and scripts before adding new ones to help make my page load faster.

Force browser to refresh just 1 file

I work on a project where several CSS and JS files are loaded separately onto the page. We use query stings like .css?1234 to force browsers to refresh a file on load.
I have returned to the project to find that one file that needs to be refreshed is not refreshed. I want to refresh one file at a time using the browser inspect element until I find what fixes the issue. Adding query strings to each individual file is not easy in this particular project.
Is there a way to only refresh a single CSS or JS file using the browser inspect element?
Try to remove the include tag and re-add it.

Add query string to script tag link in asp.net to break Cache

Hope someone can help me on this. I manage an ASP.Net website and usually update script files and css files very often. I add current time appended into a single string as a query string parameter (eg: profileImage.jpg?123021) which makes the browser to look for the file without getting it from cache.
How can I do the same thing to all script tags and css links from the server side so that it loads the latest version of the file.
Any help appreciated.
Amila
If your asp.net website uses Master Pages, it should be easy to make these changes in the Master Page file. Look a file with the extension .master. If you are not sure how to make the specific edit, post the <head> area from the master page markup in a new question.
MSDN Master Pages: http://msdn.microsoft.com/en-us/library/wtxbf3hh(v=vs.100).aspx
If your site does not use master pages, then you'd need to create some server-side logic that affects the <head> section of the page. Below are some links to related QA's about injecting script and styles from the server side.
ASP.NET: How to (programmatically) attach a <script> tag, containing a link to .js, to <head>?
How to Add script codes before the </body> tag ASP.NET

How can I load js files in specific pages using jQueryMobile?

It's a known fact that jQueryMobile loads pages with ajax and is not including in DOM the header content in every pages.
I need to load a custom js file in some pages, how can I achieve this? Until now I have placed the .js files in the body, but there are some problems with the code there too so it's not a good workaround. Until I can find a solution I will use the rel="external" workaround, but I really need to find an answer to my question.
You could try including the custom script within the data-role="page" div in pages where you want to use those javascript.
From JQM docs:
Another approach for page-specific scripting would be to include
scripts at the end of the body element. If you include your custom
scripting this way, be aware that these scripts will execute when that
page is loaded via Ajax or regular HTTP, so if these scripts are the
same on every page, you'll likely run into problems. If you're
including scripts this way, we'd recommend enclosing your page content
in a data-role="page" element, and placing scripts that are referenced
on every page outside of that element. Scripts that are unique to that
page can be placed in that element, to ensure that they execute when
the page is fetched via Ajax.
You could use some javascript to dynamically add the js file to the DOM.
This is demoed here: http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

Categories

Resources