Embed HTML5 / JS Web App with parameters - javascript

I have been given a JSON url which returns some data. I need to create a javascript / html5 / css app that will grub this data and return it in a list.
Up to there I'm ok with doing this.
My issue is that I then need to be able to provide a <script></script> which the user can paste in any other website to display the web app.
The script or iframe need to be able to take parameters so it can filter the returned data.
Can anyone guide me in the right direction on instructions on how to do this?

The simplest way is using global variables.
Edit: added a way to "embed" the generated content. I use jQuery in the example, but it can be easily done with any other DOM manipulation library or plain JS.
The final user add an HTML element with a specific id and a <script> tag containing the parameters. We use a div element in the example.
<div id="generated-list"></div>
<script>
// the user defines parameters
var configParameters = {param1: 'some value', param2: ['is', 'array']};
</script>
The final user should paste your code. I have no idea how is your code, so I made this up:
<script>
// The user pastes your script here
// which may be a function accepting the defined parameters
function createList(configParameters) {
// create the necessary elements and append them to the element
// with the right id
// We create an empty ul element in the example
var newList = $('<ul></ul>');
$('#generated-list').append(newList);
}
</script>
Google analytics uses a similar approach

Related

OneNote JavaScript API access element

I have tried to create my first One Note Add In using the JavaScript API. I have tried the example in the MS documentaion (Build your first OneNote task pane add-in). This one works.
Now I want to try to change the formatting of an element in the document. For example I want to change the font colour of a text. However, I have not yet found a way to access the elements in a document.
Can I access elements in a document via a JS Add In to change their "style" property?
How can I do that?
Thanks
Micheal
Finally, I found a way to access the OneNote page content from the JS Add In. You can load the page content using
var page = context.application.getActivePage();
var pageContents = page.contents;
context.load(pageContents);
Now you have access to the page content in the qued commands.
return context.sync().then( function() {
var outline = pageContents.items[0].outline;
outline.appendHtml("<p>new paragraph</p>");
var p = outline.paragraphs;
context.load(p);
...
});
So consequently you can access element by element in document the hirarchy.

How to pass parameters to jquery via script tag

What my code does:
It switches out the class of a div when i push a button. So i can push a button and the class changes from "Class" to "SwitchToThisClass" which has a different set of properties.
<script src="JS/SideNav-ShowOrHide.js"></script>
Here is my code, how do i change it so i can put parameters in and i also want to use the same JS file to change multiple classes:
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('Class');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('SwitchToThisClass');
e.preventDefault();
});
})();
For example like this code that takes parameters and is clean, i want to be able to use the same JS file with different parameters. I want to switch out 'Class' and 'SwitchToThisClass', and take parameters instead.
HTML:
<script src="http://path.to/widget.js" data-width="200" data-height="200">
</script>
Outside JS file:
<script>
function getSyncScriptParams() {
var scripts = document.getElementsByTagName('script');
var lastScript = scripts[scripts.length-1];
var scriptName = lastScript;
return {
width : scriptName.getAttribute('data-width'),
height : scriptName.getAttribute('data-height')
};
}
</script>
Hope this makes sense, thanks for the help in advance.
In your purpose what you propose does not make much sense since there are better ways and more accessible and that will also allow you to modularize functions and pass parameters. However you have the possibility to add custom attributes to HTML tags if it is your final decision.
As you continue editing your question I continue editing my answer so.
Solution using data HTML attribute. and data HTML attribute documentation.
I personally do not like use it for script tag and I can not recommend it way.
Why? Because your source is a file not a function. A file have not parameters (said in some way). 'Visual' HTML tags/elements or stuff that is structure of the page is more related with this data binding. Unless your intention is to manipulate the tag itself in the first instance. What I think is never.
I would never use it to pass parameters to a contained function in the file.
Of course I am here giving my opinion. The solution exist.
Also you are facing old browsers support in your case.
What I understand you want have some static values in specific html file used to pass throught to a JS function contained in a JS file.
What you can do is first import your JS file that contains your JS function:
<script src="JS/SideNav-ShowOrHide.js"></script>
We suppose you have a function I have call 'changeFunction' in this file. Your function need to have some input parameters and then you can do from your HTML inmediatly after your file import.
<script>
var classFrom = "class1";
var classTo = "class2";
changeFunction(classFrom, classTo);
</script>
or directly:
<script>
changeFunction("class1","class2");
</script>
By other hand if what you need is manage classes of specific items give a look to how to add/remove classes from raw JS

Modify HTML Content Created by 3rd Party JS Script

I am creating a custom sign in experience for a customer using okta Sign in Widget. As part of this 'widget' the function creates an HTML login form. One of the tags this generates I want to modify the contents of after it has been generated on page load by the Okta widget.
I've created a fiddle where I used the following code to modify the contents but it doesn't seem to be working.
$(document).ready(function(){
var headingClass = document.getElementsByClassName("okta-form-title");
headingClass.innerHTML = "<h2>Public Offers</h2>";
}) ;
Please could someone advise on how to get this working.
getElementsByClassName will give you an array of elements with that class name. So you need to iterate over it, or if you are sure there is only one element, use getElementsByClassName[0]
Example:
$(document).ready(function(){
var headingClass = document.getElementsByClassName("okta-form-title");
headingClass[0].innerHTML = "<h2>Public Offers</h2>";
}) ;
More information: https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName

Get page text using javascript for Google Analytics custom variable

I want my javascriptcode to capture the text "Personenverzorging" and "Gespecialiseerde voetverzorging" for use within my Google Analytics custom Variables.
This text changes on every page so javascript cannot search on the exact term but it should know where to look within the HTML tags.
<div class="views-field views-field-name">
<span class="field-content">Personenverzorging</span>
</div>
<div class="views-field views-field-name-2">
<span class="field-content">Gespecialiseerde voetverzorging</span>
</div>
This is the Google Analytics code I am going to implement in my website using Google Tagmanager.
_gaq.push(['_setCustomVar',
2, // This custom var is set to slot #2. Required parameter.
'Sub-Section', // The 2nd-level name for your online content categories. Required parameter.
'Fashion', // Sets the value of "Sub-section" to "Fashion" for this particular article. Required parameter.
3 // Sets the scope to page-level. Optional parameter.
]);
Sub-section should be replaced by "Personenverzorging" and Fashion by "gespecialiseerde voetverzorging".
This is the code that I have. But it does not work. Can somebody steer me to the right direction?
Can I use a wildcard since the only unique classes within the page are views-field-name?
var elements = document.getElementsByClassName("views-field-name-*");
var string;
string = "'_setCustomVar',1"
for (var i = 0; i < elements.length; i++) {
string = string + ","+ elements[1].innerText;
string = elements[1].innerText;
document.write(elements[1].innerText);
}
Thanks a lot! I appreciate your help.
If you are using Google Tag Manager, I would use the dataLayer to pass page elements using dataLayer variables. It's going to be much more consistent from page-to-page. It's sort what Google Tag Manager is built to do.
For the example, I'll use 'Sub-section' and 'Fashion' as I do not understand Dutch or the hierarchy of your site, but this should be enough to get you started.
1) Create two new dataLayer variables marcros: one for Sub-section and one for sub-sub-section.
Call them something like subSection and subSubSection, and be sure that they are Version 1 of the dataLayer.
2) Add the dataLayer object to your website. It should look something like this:
<head>
dataLayer = [{
'subSection': 'Personenverzorging',
'subSubSection': 'gespecialiseerde voetverzorging'
}];
</head>
<body>
GTM CONTAINER CODE
</body>
3) Now, propagate the values you want for both 'subSection' and 'subSubSection' using your CMS's global variables. This should happen server-side. So when the page loads, the values will be in there.
4) Once you see that values coming through (you can either look at the source code of the page or type dataLayer in the dev console to inspect the object), you're ready to setup the custom variable.
From what it sounds like, you'll want the CV to trigger on every page. So go back into GTM, and go to your Google Analytics pageview track type, and go to More Settings > Custom Variables > New Custom Variables.
Create your new custom variables, there should be two: one for subSection and one for subSubSection. Pick your slot (1-5), add your name like Sub Section, and then for the value, click the building-block and select the {{subSection}} macro, and then set scope. Publish container, and view data in GA.

obtain url paramethers from a page called with JQuery's load() function

I have seen this question before but I haven't found a working solution.
The question is quite easy.
If I call a page like this.
div.load('page?foo=bar');
I want to be able to retrieve foo in some way an use it in a javascript called by page. But I only manage to obtain the paramethers of the parents url.
I know I can declare variables in the parents javascript code but that is not my preffered way.
So I really hope someone has a solution to this problem.
♥ you guys
You could use something like this to parse the URI:
http://blog.stevenlevithan.com/archives/parseuri
Then you can access the parameters easily from the parent page:
// Set the link that we want to load/examine
var link = 'page?foo=bar';
// Load the link content (as per your code)
div.load(link);
// Grab whatever variables we want from the link
var uri = parseUri(link);
var foo = uri.queryKey.hasOwnProperty('foo') ? uri.queryKey.foo : false;
alert(foo);
EDIT:
As bfavaretto already commented, the content loaded in via AJAX is just a string. It's not a page that will be aware of its URI.
However, if you really want the loaded content to be able to access its URI, just make it available in the content itself. For example:
$('#my_div').load('page?foo=bar)
And in the content of "page?foo=bar":
<div class="container" data-page-uri="{{ insert uri here with php, ruby, whatever }}">
<!-- my page content -->
</div>
Now in your loaded content, you can determine the URI by finding the relevant div with the "data-page-uri" data attribute. Once you have the link, you said that you know how to grab the parameters from it...
Hope that helps.
I think you have two solutions. One, if page has a hidden div, with the data needed, the second one, probably the ajax response object has the caller url. You should study the response xhr object.

Categories

Resources