I have a fully functional html file right now that has a lot of content, and I'd like to increase readability by storing the table in a separate file. The table data is about 3,000 lines of html. The current structure is:
HTML:
<body>
<!-- Lots of content -->
<table>
<!-- Lots of data -->
</table>
<!-- Other content -->
<script>
<!-- Set up as table as datatable (jQuery plug-in) -->
<!-- Add dynamic formatting to table -->
</script>
</body>
How can I replace the <table>...</table> with just a call to another html file that contains all of the data, so that I can still do all of the javascript stuff to the table?
Using jQuery, you can do this with a GET command and then appending it do a div in your body where you want the table to end up.
The code for importing data would look like this:
$.ajax(
{url:"tabledata.html",
dataType:"text"}).done(
function(data){
$('#id_of_div_to_append_to').html(data);
});
Also, you'd need to add a div to append the data in your HTML:
<body>
<!-- Lots of content -->
<div id = "id_of_div_to_append_to"></div>
<!-- Other content -->
<script>
<!-- Set up as table as datatable (jQuery plug-in) -->
<!-- Add dynamic formatting to table -->
</script>
</body>
This is a very complex solution to my question, but if you have the time to learn Angular, I'd recommend it:
https://www.codeschool.com/courses/shaping-up-with-angular-js
Angular allowed me to make my html much more readable and dynamic.
Related
I'm building a website and want to display a widget linking to a podcast from BuzzSprout. I built the site in HTML while trying out designs and now am trying to convert it to VueJS.
In HTML only, this was the element and script tag that displayed the widget:
<div id="buzzsprout-large-player-1717833"></div>
<script
type="text/javascript"
charset="utf-8"
src="https://www.buzzsprout.com/1717833.js?container_id=buzzsprout-large-player-1717833&player=large"
></script>
When I've tried to wrap this into a Vue component, I get the following error:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.
I'm pretty new to Vue, so there's a good chance I've just missed something as to how this needs to be set up.
Could anyone give me a pointer on how I need to rearrange this to successfully render the widget?
Full component code for Widget.vue:
<template>
<div class="episodeWidget">
<div class="page-heading">
<h1>Episodes</h1>
</div>
<p>
<strong>
Here you'll find everything that we've got to show for our efforts. A
pantheon of admittedly mediocre content.
</strong>
</p>
<p>Just pick an episode of your choice and hit play!</p>
<!--<div id="buzzsprout-large-player-1717833"></div>
<script
type="text/javascript"
charset="utf-8"
src="https://www.buzzsprout.com/1717833.js?container_id=buzzsprout-large-player-1717833&player=large"
></script>-->
</div>
</template>
<script>
export default {
name: "EpisodeWidget",
props: {
msg: String,
},
};
</script>
It would be better to insert the <script> tag into your page using JS - you can add something like this into your component's created() hook, for example:
const scriptTag = document.createElement('script');
scriptTag.src = 'https://www.buzzsprout.com/1717833.js?container_id=buzzsprout-large-player-1717833&player=large';
scriptTag.setAttribute('charset', 'utf-8');
document.head.appendChild(scriptTag);
You can leave the HTML snippet in your component template: <div id="buzzsprout-large-player-1717833"></div>
I have made a webpage on Sharepoint with bootstrap and the content is populated with javascript. I am using popover in a table. The table is generated via javascript. The strange thing is that the popover works only after I made a refresh of the page/reloaded it with F5.
A popover outside of the table works fine and by first load. As well as the code runs fine without problems on my local machine, but on sharepoint it breaks down.
Here some code - initialization:
<script src="jquery-3.5.1.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
then the function for generating the table is called:
<body onload="javascript: GenerateTable();">
followed by the popper call:
$(function () {
$('.example-popover').popover({
})
})
The result is a table which contains the following line with the popper:
<td>Here is a question which needs a popper as info!
<div class="row justify-content-end">
Info
</div>
</td>
It seems to me like it an issue with the loading order - but can't figure out why it works locally but not on Sharepoint.
I import js from CDN, it works well in my environment.
Test code for your reference:
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body >
<td>Here is a question which needs a popper as info!
<div class="row justify-content-end">
Info
</div>
</td>
</body>
<script>
$(function () {
$('.badge').popover();
})
</script>
Test result:
If you need further assistance,please share the full code.
The problem was the order of the javascript execution. As the code is loaded from an external javascript file the order how the code is loaded is not known.
Thus it is recommended to put the javascript function from the html file into an explicit function into the javascript file. Then the function has to be called explicitly.
Javascript File:
function PopperCall(){
$('.example-popover').popover({});
$('.popover-dismiss').popover({trigger: 'focus'});
$('[data-toggle="popover"]').popover();
}
In the HTML the loading is done by:
<body onload="javascript: GenerateTable(); PopperCall();">
I’m “developing” a web site from Sharetribe (this is a website to create marketplaces). Sharetribe limited the “freedom” of a developer. We can add anything to the <head> of the website. So in the <head> I can change the CSS of the website, and this is great because I can change the appearance of the website.
What I’d like to do is to add HTML tags, like buttons, divs, etc. If I can do that, it would be great.
I believe this can’t be done, but first, I’d like to question — who knows, maybe I’m wrong.
It's a bit hacky, but you can use javascript to "insert" or "append" html to the body of the webpage through the head.
If you only have access to the head element, but not to the body, then you could try to use Javascript to add elements into the body. This only works if script tags are allowed and it has to be said that it is not really a good way of coding. But if it is the only way...
My idea (to make it a bit easier) : Include jQuery and add elements to the body by using the append function. So: you go to the jQuery downloads page, download the file and include it in the head tag. Now, you can access the body tag and insert some custom code like this:
$("body").append('<h1>Hi! I am a headline</h1>');
Pure JavaScript way:
var sibling = document.querySelector('.sibling');
var newSibling = document.createElement('div');
newSibling.className = 'sibling';
newSibling.innerHTML = 'Appended before the below div';
document.body.insertBefore(newSibling, sibling);
<body>
<!-- Already Existing HTML -->
<div class="sibling">I wish I had a sibling</div>
</body>
Quick jQuery way:
Include jQuery inside your head. Include the custom jQuery code inside <script></script> within <head>.
$(document).ready(function() {
$('.sibling').append('<div class="sibling">Hey! I am here</div>');
$('.child').wrap('<div class="child">You are not orphan anymore!</div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!-- Already Existing HTML -->
<div class="child">I wish I had a parent</div>
<div class="sibling">I wish I had a sibling</div>
</body>
I am using LifeRay.
Have some css files in the header section coming thru LifeRay header template (common for all portlets),
and another css file in a portlet (specific to one portlet).
The portlet code is inside portlet - view.JSP.
The generated HTML output is like:
<html..>
<head>
...
...
<link href="base.css" ../>
<link id="custom" href="custom.css" />
...
...
</head>
<body>
...
...
<div class='portlet...'>
...
...
<link href="port.css" ../>
..
...
</div>
..
..
</body>
</html>
Here, problem is I wanted to have "custom.css" to be loaded at last, but due to liferay structure port.css is getting loaded in the last, after liferay-header template.
One solution is, I can simply have the custom.css inclusion near the bottom of the liferay template (or say, footer template), so that it'll be loaded last (after portlet's port.css), but it's against W3C recommendation - to have all CSS in head section.
Now, I wrote a little script in my portlet .jsp, that will dynamically load the port.css before custom.css, using jquery.
portlet -- view.jsp --
$("<link href='port.css' ../>").insertBefore( $("#custom") );
..
..
Now, with this approach, in FireBug, I can see the port.css listed "before" custom.css - as expected.
I even observed the styles are applied with proper sequence/priority from both the css.
My queries are:
- How good/correct is this approach?
- Is there any limitation/constraint to this?
- Any Browser issue??
Any thoughts on this?
In a single page application, how to use Knockout.js effectively to achieve MVVM. Is there a way to create views (Html files) and viewmodels (javascript files) separately? That can be referred in another HTML master file.
I tried iframe, but it allows user to navigate to individual views. Is there any other way?
Thanks in advance.
Yes, I think this is possible. If you create each view as a template in a separate html file and then load and append the appropriate template to the documents body when you instantiate you viewmodel.
in pseudo-code you'd get something like:
<!-- your page -->
<div id="bindModelHere">
<!-- ko template: loadedTemplate -->
<!-- /ko -->
</div>
<script type="text/javascript">
$(document).ready(function () {
var viewModel = new yourViewModel();
ko.applyBindings(viewModel, document.getElementById('bindModelHere'));
});
</script>
//your javascript
function yourViewModel (){
this.loadedTemplate = ko.observable();
//Load template from server with a get and append to document body
//when loaded and appended do: loadedTemplate("idForTemplate");
}
<!-- the template/view in a separate file-->
<script type="text/html" id="idForTemplate">
<!-- your html -->
</script>
this way you could load your views/templates using ajax and just load the view you'd need.