How do I get my data to display based on URL data? - javascript

I'm trying to get some dynamic content to display based on UTMs in my URL. While I can call the function in the browser to get the content to display, it isn't doing so on page load. (Function works, but my timing must be off)
I've tried to change the order in which I call jQuery and my JS file, but either way it doesn't show unless I paste my function into chrome dev tools.
Here's the relevant part of the function:
// regex to find the URL param above
var dynamicContent = getParameterByName('dc');
$(document).ready(function() {
if (dynamicContent == 'fintech') {
$('#fintech').show();
}
else if (dynamicContent == 'martech') {
$('#martech').show();
}
//... excluded remaining options
else {
$('#default-content').show();
}
And the HTML:
<span id="default-content" class="dynamic-content">Tech</span>
<span id="fintech" class="dynamic-content">Fintech</span>
<span id="martech" class="dynamic-content">Martech</span>
<!-- excluded remaining options -->
And here's my header in case there's a different way I should be calling everything:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="assets/dynamic.js" type="text/javascript"></script>
</head>
Again, as copying/pasting my code into dev tools after the page load works, how do I time it so that this function runs on page load?
Thanks.

Maybe try this:
$(window).on('load', function () {
var dynamicContent = getParameterByName('dc');
if (dynamicContent == 'fintech') {
$('#fintech').show();
}
else if (dynamicContent == 'martech') {
$('#martech').show();
}
//... excluded remaining options
else {
$('#default-content').show();
}
});

Related

Difficulties running JavaScript (from .js file) in an Angular application

I am trying to incorporate a Javascript function (contained in app.js), which I am trying to run from the index.html of my Angular 2 application.
Initially I used a CLI program called Office Add-in generator to make a non-angular application, in which this JavaScript works.
However when using the Add-in generator in an Angular application the app.js file is not automatically generated. Manually copy pasting the app.js file and <script> link does not work either. I realise I have only provided a couple of files worth of code, let me know if I should edit more in, or provide a github link?
The error in chrome is net::ERR_ABORTED not defined with a 404 message. (relating to the app.js file)
~~~~HTML~~~~~
<head>
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.css">
<meta charset="utf-8">
<title>Microsoft Graph Connect sample</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js" type="text/javascript"></script>
<script>
window.history.replaceState = function(){};
window.history.pushState = function(){};
</script>
</head>
<body>
<app-root></app-root>
<button onclick="setItemBody()">Paste to email</button>
<script type="text/javascript" src="node_modules/core-js/client/core.js"></script>
<script type="text/javascript" src="node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="node_modules/office-ui-fabric-js/dist/js/fabric.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
~~~~~~~app.js~~~~~~~~
var item;
Office.initialize = function () {
item = Office.context.mailbox.item;
// Checks for the DOM to load using the jQuery ready function.
$(document).ready(function () {
// After the DOM is loaded, app-specific code can run.
// Set data in the body of the composed item.
// setItemBody();
});
}
// Get the body type of the composed item, and set data in
// in the appropriate data type in the item body.
function setItemBody() {
item.body.getTypeAsync(
function (result) {
if (result.status == Office.AsyncResultStatus.Failed){
write(result.error.message);
}
else {
// Successfully got the type of item body.
// Set data of the appropriate type in body.
if (result.value == Office.MailboxEnums.BodyType.Html) {
// Body is of HTML type.
// Specify HTML in the coercionType parameter
// of setSelectedDataAsync.
item.body.setSelectedDataAsync(
'<b>These are the times I am available:</b><br>Monday -- 8:30 to 9:00<br>Tuesday -- 1:00 to 5:00<br>Thursday -- 4:00 to 5:00<br>',
{ coercionType: Office.CoercionType.Html,
asyncContext: { var3: 1, var4: 2 } },
function (asyncResult) {
if (asyncResult.status ==
Office.AsyncResultStatus.Failed){
write(asyncResult.error.message);
}
else {
// Successfully set data in item body.
// Do whatever appropriate for your scenario,
// using the arguments var3 and var4 as applicable.
}
});
}
else {
// Body is of text type.
item.body.setSelectedDataAsync(
' Kindly note we now open 7 days a week.',
{ coercionType: Office.CoercionType.Text,
asyncContext: { var3: 1, var4: 2 } },
function (asyncResult) {
if (asyncResult.status ==
Office.AsyncResultStatus.Failed){
write(asyncResult.error.message);
}
else {
// Successfully set data in item body.
// Do whatever appropriate for your scenario,
// using the arguments var3 and var4 as applicable.
}
});
}
}
});
}
// Writes to a div with id='message' on the page.
function write(message){
document.getElementById('message').innerText += message;
}
Actually you should not just put your js files in index.html better add in .angular-cli.json file.. and about js not working in ng2+ project.. check out https://angular.io/guide/attribute-directives I think you must make wrapper. check this as well https://medium.com/#NetanelBasal/typescript-integrate-jquery-plugin-in-your-project-e28c6887d8dc

Clickstream Tracking in Veeva CRM

I am working with Veeva CRM, trying to use Click Stream Tracking. I have the code which I am using and trying to track the Presentation id, Product Key Message, track an Element Description and Answer.
Can anybody help with the code that I am using.
Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>CLM_CERT_HCPName</title>
<!-- Bootstrap -->
<link href="css/style.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<script src="js/veeva-library-3.0.js"></script>
<script>
function start(){
header_getAccountName();
}
function header_getAccountName(){ com.veeva.clm.getDataForCurrentObject("Account","Name",header_displayAccountName)}
function header_displayAccountName(result){
var AccountNameHTML = document.getElementById("hcpName");
AccountNameHTML.innerHTML += result.Account.Name;com.veeva.clm.getDataForCurrentObject("Presentation","Survey_vod__c",header_getSurveyID);
}
function mySaveObject(){
//This is the start of my JSON object
var myCallClickStream = {Call_vod__c, Key_Message_vod__c};
//i am using my JSON obj name with the field API name of the call clickstream object obj.apiName then set the value. obj.apiName= value;]
// Create the record using the com.veeva.clm.createRecord
com.veeva.clm.createRecord("Call_ClickStream_vod_c", myCallClickStream, printSavedResults)}
function printSavedResults(result){
alert(JSON.stingify(result));
}
</script>
</head>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
I have also some sample code to try out but not sure what I am doing wrong.
function mySaveObject(){
var myCallClickStream = {};
myCallClickStream.Text_Entered_vod__c = "i will put some text here";
com.veeva.clm.createRecord("Call_Clickstream_vod__c", myCallClickStream, printSavedResults)
}
function printSavedResults(result) {
alert(JSON.stringify(result));
}
Not sure if you still need help on this or not. But my team uses a simple method in every project to simplify the tracking process. The below was modified to fit some of your naming conventions/needs.
// clmDescription - string submitted as the description to be tracked
// clmAnswer - string submitted as the answer to be tracked`
// callback - call back function which will be used to return the information
function mySaveObject( clmDescription, clmAnswer, clmCallback ) {
var url = window.location.pathname,
filename = url.substring(url.lastIndexOf('/') + 1),
clmTrackingID = filename.replace(".html", "");
var myCallClickStream = {};
myCallClickStream.Track_Element_Id_vod__c = clmTrackingID;
myCallClickStream.Track_Element_Type_vod__c = clmDescription;
myCallClickStream.Selected_Items_vod__c = clmAnswer;
myCallClickStream.Track_Element_Description_vod__c = clmAnswer;
// var myJSONText = JSON.stringify( myCallClickStream );
com.veeva.clm.createRecord( Call_Clickstream_vod__c, myCallClickStream, clmCallback );
}
Simply call the method and pass in your parameters, including your callback method.
Hope this helps!

Pop-up based on location (Specifically the UK)

I have a very internationalised website, however I need to produce a pop-up specifically for our UK customers.
What I require is:
On page load: Is the user from the UK?
If yes then show div.
Else
Div remains hidden.
You can do this using freegeoip.
Since you mentioned that you want to use plain JavaScript (not jQuery), you should use JSONP to get the country:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>UK localisation</title>
</head>
<body>
<div id="myDiv" style="display:none">
<h1>Kittens</h1>
</div>
<script>
function toggleDiv(content) {
console.log(content.country_code);
if(content.country_code === 'GB') //Or GBR, or UK, I'm not sure.
{
document.getElementById('myDiv').style.display = "inline";
}
else
{
alert("You are not from UK, you are from " + content.country_code);
document.getElementById('myDiv').style.display = "none";
}
}
window.onload = function()
{
// create script element
var script = document.createElement('script');
// passing src with callback name
script.src = 'http://freegeoip.net/json/?callback=toggleDiv';
// insert script to document and load content
document.body.appendChild(script);
}
</script>
</body>
</html>

grid 960 - while executing inspectSection in dmx960 grid, js error occurred.

I'm trying to run this grid extention in DW CS5. I'm a front end person so debugging other people's code isn't my thing. So when I try set the grid precepts I get this error:
while executing inspectSection in dmx960 grid, js error occurred.
Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Barefoot Development Group</title>
<link href="CSS/Style.css" rel="stylesheet" type="text/css">
<link href="CSS/text.css" rel="stylesheet" type="text/css">
<link href="CSS/reset.css" rel="stylesheet" type="text/css">
</head>
<body>
<!------start container------->
<div id = "container" class ="container_16"></div>
<div id = "social_search" class = "grid_16"></div>
<div id = "social_links" class = "grid_1 alpha"></div>
<!------Main container-------->
<!------Header start---------->
<!------Social Links---------->
<!-------End social links------>
<!----start Social icons -------->
<!----end social icons----->
</body>
</html>
I tried deleting the cache in Config folder and reinstalling the extension. Didn't work. I checked the log files and found this:
JS Error: theElem.getAttribute is not a function filename:
C:\Users\cvr\AppData\Roaming\Adobe\Dreamweaver
CS5\en_US\Configuration\Shared\DMXzone\960 Grid\dmx960grid_lib.js
lineno: 598
So I went to the JS file and here is what I found in this expression block:
function getGridClassNum(theElem) {
if (!theElem) return 0;
var cls = theElem.getAttribute("class");
if (!cls) return 0;
if (cls == 'clearfix') {
//Try to read the parent
var parent = getGridElement(theElem.parentNode);
if (parent && parent.nodeType === Node.ELEMENT_NODE) {
return getGridClassNum(parent);
}
} else {
var numMatch = cls.match(new RegExp("\\b(grid|container)_(\\d+)\\b"));
if (numMatch && numMatch.length > 1) {
return parseFloat(numMatch[2]);
// //decrease with prefix and suffix
// - getGridClassNameNum(theElem, 'prefix')
// - getGridClassNameNum(theElem, 'suffix');
}
}
return 0;
}
I don't see anything particularly amiss here. But perhaps a more expert debugger can tell me if there is something going on here. Here is what confuses me - I was looking for the function inspectSection but I couldn't find it. I'm left scratching my head here.
Could this be a problem of including the script directly into the html doc?
Thanks!

Javascript : External Functions won't work

I have been using javascript for the last couple of days and have decided to use it for my website. I also decided to use external functions in a single .js file
function imageLoad() {
var path,domain,cut;
path = window.location.pathname;
domain = "WEBSITE DOMAIN ADDRESS";
cut = path.substring(domain.length,path.length);
/* Still in progress */
}
function pageStart() {
var image-on = 0;
var imgArray = new Array();
alert("boo"); /* Used to check the script will run */
}
Now that's a simple process. Nothing too complex. And I have done the following (it is a code extract of my template)
<script type="text/javascript" src="main_script.js"></script>
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>Grandpa Pixel</title>
</head>
<body onload="pageStart();">
Now that should do the trick. On body loading, it should cause an alert "boo". But it doesn't. It just loads the page normally. However If I make the external script ONLY contain the line alert("boo"), it works perfectly. Can I ask why this is the case? Does this mean you can only have one function per external file?
check this:
function pageStart() {
var image_on = 0;
var imgArray = new Array();
alert("boo"); /* Used to check the script will run */
}
HTML
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>Grandpa Pixel</title>
<script type="text/javascript" src="main_script.js"></script>
</head>
<body onload="pageStart();">
recommended using Firebug or other debuggers.
ERRORS
SyntaxError: missing ; before statement
var image-on = 0;
main_script.js (line 12, col 13)
ReferenceError: pageStart is not defined
pageStart();
SOLUTION
change
var image-on = 0;
with
var imageOn = 0;
it would be cleaner to put the <script> tag into the <header> tag.

Categories

Resources