How do I modularize HTML and JavaScript widgets? - javascript

I have a menu widget that I am trying to include on multiple pages. I have tried putting them in one php file and using php include. But the script part is being inserted right into the middle of the HTML and it comes before jQuery (at the bottom of the page) so it doesn't work.
How do I put the script part of the widget into the proper place (at the bottom of the page) while at the same time keeping the HTML and script together (in a file)?

Related

Just adding js script to typo3

I have the following problem.
I have a typo3 page without any template I made by myself, but it gets in some way the style and the behavior of the other pages (I mean navigation, footer and so on). Now I have written some HTML inside the page by creating an HTML element.
In this HTML element, I included some js-code, which uses jQuery. The problem is, that the page loads the jquery at the footer and my scripts are loading before (in the HTML element). So my script does not recognize jQuery. How can I add my scripts at the whole end of the page? I know, that it has something to do with templates, but when I create a new template for the page, the whole content disappears.
Would be nice to get any help.
Cheers,
Andrej
It is usually good practice to read all your JS from a single file placed in the footer of the page. Add this to the setup section of your page template:
page.includeJSFooter.scripts = fileadmin/js/scripts.js
Then remove the JS from the HTML template and put into this file. This file could hold all your custom JS and possibly even all the libraries you use on the page (if you are not loading them from a CDN).
Bonus: the JS doesn't have to be re-loaded on every page view but can be read from cache.
For reference: https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#includejsfooter-array
I hope by template you mean a template record where you store your TypoScript? Otherwise this answer is not what you are looking for. :)
You can just add an extension template on your page that only adds to the rest of the TypoScript but does not override anything. To do so, go to the template module, choose "info/modify" in the dropdown at the top and use this button
Explanation: an extension template has the checkboxes for clearing the constants and the setup not checked and will not mess with the rest of your site's TypoScript:

Insert html pages into wordpress

I have an html site with a page of info for each county in the US. I want to convert this into a new wordpress site. I can do this one by one but my issue comes when I have mass changes to affiliate code or common text. I would have to got to each page and manually change it. but with over 3000 pages it would be way to time consuming. I dont want to use Iframes but would like to know if there is a way to call the html pages into the wordpress page that makes sense seo wise.
I am open to creating a page for each county or have one page with text or buttons on it with each county listed and when clicked will insert the info below. I know alot about static html coding but am new to php.
If you dont want Iframes, I think there only remain two options. I don't know if they will work in WordPress though.
1. PHP Include
With the very simple PHP include() statement, you can include the old html files in your new website. If you have a HTML-file for example, name your file yourname.php and add this in the position you want your old page to appear:
<?php include(path_to_old_page/name.html); ?>
This will include the full old page, but the file needs to be on the same server.
2. AJAX
With JavaScript you can perform XHTTP-requests to load files from the server. This is easiest when using jQuery. Here you can use the $(selector).load(path_to_old_page/name.html) statement. This will load the file in the HTML elements to which the selector applies.
(The selector works the same as CSS selectors, see the w3schools page for more)
This will also include the full old page, when it is on the same server
You can have your static pages in WordPress as well. Like if you want to create a new county named "example" you can create new WordPress page named "example" by entering title " example" .... now come to content. Just copy page content (only "example" county related html code from your static website) and place that code inside newly created WordPress "example" page. Make sure you add this html content inside 'text' tab in editor. Your page will be created with all your existing data ... now you can view this page and can use this page's URL where ever you want.

javascript will not load unless page is refreshed

I am working on a website that was started off by someone else. That person built the whole thing in one 1000-line html file, and links to different 'pages' just reference other sections in the main html file. So my task is to break the page apart into seperate html pages. Unfortunately, now the seperate pages do not load the javascript unless the page is refreshed.
Is there a standard way to fix this problem without forcing the user to manually refresh the page?
If you break that one big page into several smaller pages, make sure you include the JavaScript (and CSS) in the new pages. The most efficient way to do this is to have the JavaScript in an external JavaScript file, and bring that file into the new pages by putting the script tag inside the new pages' head tags like so:
<head>
<script src="path/to/javascript/app_name.js"></script>
</head>
When the user clicks on a hyperlink to see one of the new pages, when the browser receives the response from the server, it will parse the response and execute the JavaScript.
If I understand your problem correctly, I would wrap whatever "detailsScreen.js" does into a function and call it after you changed the page content.

How to get javascript in main page to append to elements in ajax loaded div using jquery?

I'm using the jquery load function to switch out a div. Whenever I load a certain element via ajax that needs javascript to run -it won't work in the div. I know that this is because the element didn't exist in the dom on the initial page load.
I've googled for days and haven't found an answer that can give me an easy to understand explanation. Essentiallly, I'm told to just use .on or $getScript.
However, this doesn't seem to be the appropriate answer.
Since, each element loaded in the div has similar properties -I simply want to load the jquery library, and the same two external scripts in my index page's head section -and then make sure that those scripts stay "live" or append to the simple html content that is being externally loaded in the div via ajax.
So, for example, if page 1 has a div named bouncingcats, and page 2 has a div named bouncingdogs -that both require an external javascript named 'bounce' -I want to load the javascript file 'bounce' ONE TIME in the head section of my index page -and then dynamically swap out the div named bouncinganimals on my index page with either cats or dogs.
So far, it seems as if the only advice I'm getting is to just put the jquery library AND the bounce.js file at the end of page 1 and at the end of page 2. This, of course works -but it seems too redundant and of course slows down the ajax load.
Do you know of a way in which I could just load the jquery library and the external javascript page in my index page head once, and have them run when I load content via ajax into my div?
An issue that I have is that I didn't write the script bounce.js myself -and it is already minimized -so changing the script could prove to be extremely difficult. Is there something I can just wrap around the external javascript links themselves?

Calling a JavaScript function from another view

I'm new to ASP.NET MVC and was wondering where JS functions for the views go. I have a table element in a view that displays the #RenderBody part of _Layout, and in it's th elements, I have -
<th id="one" oncontextmenu = "return menu(this)">label one</th>
Where should the function main(..) be located? Can it be in the script tag on the _Layout page or are individual view pages allowed to have their own script tags where this should go?
I've worked in WebForms before, so moving to MVC, I'm having trouble visualizing how to put all the pieces together. Help please!
Once you defined your script in your layout page u can use it anywhere else.there is no limitation in calling javascrip function cross-view.
It can be in the Same view file surrounded by a script tag
It can be in the Layout.cshtml file surrounded by script tag
It can be in a external javascript file referred in the same view
It can be in a external javascript file referred in the
Layout.cshtml view
Layout.cshtml works similar to Master page. so whatever you include there will available to all the views which uses the layout.

Categories