How to Add Amazon Affliate Banner in vue app - javascript

I want to add the Amazon affliate banner to a component in my vue web application.
Below is the Amazon code.
<script type="text/javascript" language="javascript">
var aax_size='160x600';
var aax_pubname = 'samplename';
var aax_src='***';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>
However adding this in the index.html wasn't giving expected results.
I want this to add to a vue component. The below code doesn't even show the banner.
mycomponent.vue
<template>
<div>
<!-- Some contents -->
</div>
</template>
<script type="text/javascript" language="javascript">
var aax_size='160x600';
var aax_pubname = 'samplename';
var aax_src='***';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>
<script>
export default {
// Vue options api code
}
</script>

Related

AMP with javascript

I've gone through AMP-script documentation and I've been stuck for 1 day, trying to make this work.
I need to import JS remotely and use it in local. This is how I use it without AMP.
<!-- html -->
<span id="progressive_span">UPDATING</span>
<!-- js -->
<script src="https://tickers.ABC.com/hello.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function (event) {
var ticker = new Ticker({ info: 2 });
ticker.attachToTextBox('progressive_span');
ticker.SetCurrencySign('IDR ');
ticker.tick();
});
</script>
import amp-script component.
<!doctype html>
<html ⚡>
<head>
...
<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
<meta name="amp-script-src" content="sha384-8T8pKdbkYmCLBlmEg0YkG9znnZfyf0AgBGSvAkuh5yeiOhD9K1PSaHOO3TjlrEkt"/>
<body>
Wrap the html element/s with the amp-script component:
<amp-script width="200" height="100" script="ticker">
<span id="progressive_span">UPDATING</span>
</amp-script>
The JS file
<!-- Fetch remote js-->
<amp-script src="https://tickers.ABC.com/hello.js"></amp-script>
<!-- js-->
<script id="ticker" type="text/plain" target="amp-script">
document.addEventListener('DOMContentLoaded', function (event) {
var ticker = new Ticker({ info: 2 });
ticker.attachToTextBox('progressive_span');
ticker.SetCurrencySign('IDR ');
ticker.tick();
});
</script>
But it seems ticker function is not loaded.

Add sticky sidebar

I'm trying to use sticky sidebar with theiaStickySidebar from Github projects. As it described in above link, this should be an easy work. I use below HTML construction:
<aside class="sidebar">
<div class="theiaStickySidebar">
...
</div>
</aside>
This all these scripts need to work.
And also using scripts mentioned at Github page as below:
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="dist/ResizeSensor.min.js"></script>
<script type="text/javascript" src="dist/theia-sticky-sidebar.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content, .sidebar').theiaStickySidebar({
// Settings
additionalMarginTop: 30
});
});
</script>
But this doesn't work currectly.
Have I done something wrong in this process?
Jquery selector seems wrong. Use .ssidebar or theiaStickySidebar depending on which one you want as the sidebar.
eg.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content, .ssidebar').theiaStickySidebar({
// Settings
additionalMarginTop: 30
});
});
</script>
I just didn't delete extra class .content. For:
<aside class="sidebar">
<div class="theiaStickySidebar">
...
</div>
</aside>
Must use:
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="dist/ResizeSensor.min.js"></script>
<script type="text/javascript" src="dist/theia-sticky-sidebar.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.sidebar').theiaStickySidebar({
// Settings
additionalMarginTop: 30
});
});
</script>

AngularJS Tried to load more than once

My Angular JS app is displaying this message in the console :
angular.min.js tried to load more than once.
The app is fully working but is loading all the ajax requests several times before having any response.
I really don't understand what is could be. I don't even know what code to show you.
If anyone wants to help me, just tell me what part of my code you'd like to see and I'll copy paste it here...
thank you
UPDATE :
index.blade.php :
#extends('master')
#section('controller') ng-controller="AppController" #endsection
#section('content')
<div class="app" id="app"
ng-class="{'app-header-fixed':app.settings.headerFixed, 'app-aside-fixed':app.settings.asideFixed, 'app-aside-folded':app.settings.asideFolded}"
ui-view></div>
<!-- jQuery -->
<script src="js/jquery/jquery.min.js"></script>
<script src="js/libs/moment.min.js"></script>
<script>
window.__user = {{Auth::user()->toJson()}};
window.__user_details = {{Auth::user()->details->toJson()}};
window.__company = {{ Auth::user()->getCompany()->toJson()}}
<?php if( Department::where('company_id', Auth::user()->company_id)->first() ): ?>
window.__startDepartment = {{ Department::where('company_id','=',Auth::user()->company_id)->first()->id }}
<?php endif; ?>
#if(Auth::user()->user_level == 4)
window.__companies = {{ Company::all()->toJson() }}
#endif;
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<!-- Angular -->
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-cookies.min.js"></script>
<script src="js/angular/angular-animate.min.js"></script>
<script src="js/angular/angular-ui-router.min.js"></script>
<script src="js/angular/angular-translate.js"></script>
<script src="js/angular/ngStorage.min.js"></script>
<script src="js/angular/ui-load.js"></script>
<script src="js/angular/ui-jq.js"></script>
<script src="js/angular/ui-validate.js"></script>
<script src="js/angular/ui-bootstrap-tpls.min.js"></script>
<script src="js/libs/timer.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-cookies.min.js"></script>
<script src="js/angular/angular-animate.min.js"></script>
<script src="js/angular/angular-ui-router.min.js"></script>
<script src="js/angular/angular-translate.js"></script>
<script src="js/angular/ngStorage.min.js"></script>
<script src="js/angular/ui-load.js"></script>
<script src="js/angular/ui-jq.js"></script>
<script src="js/angular/ui-tree.js"></script>
<script src="js/angular/ui-validate.js"></script>
<script src="js/angular/ui-bootstrap-tpls.min.js"></script>
<script src="js/libs/timer.js"></script>
<!-- App -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/functions.js"></script>
<script src="js/controllers/AppController.js"></script>
<script src="js/controllers/DashboardController.js"></script>
<script src="js/controllers/DemoControllers.js"></script>
<script src="js/controllers/LeaveControllers.js"></script>
<script src="js/controllers/ReporterControllers.js"></script>
<script src="js/controllers/TimeslotControllers.js"></script>
<script src="js/controllers/TasksControllers.js"></script>
<script src="js/controllers/MessagesControllers.js"></script>
<script src="js/controllers/ResourceControllers.js"></script>
<script src="js/controllers/LocationControllers.js"></script>
<script src="js/controllers/StaffController.js"></script>
<script src="js/controllers/DepartmentControllers.js"></script>
<script src="js/controllers/OtherControllers.js"></script>
<script src="js/controllers/DatePickerInputController.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<!-- Lazy loading -->
<script>
window.intercomSettings = {
app_id: "eoo7q8o9",
user_id: '{{{ Auth::user()->id }}}',
name: '{{{ Auth::user()->first_name }}} {{{ Auth::user()->surname }}}',
email: '{{{ Auth::user()->email }}}',
user_type: '{{{ Auth::user()->getUserType() }}}',
company: '{{{ Auth::user()->getCompany()->name }}}'
};
</script>
<script>
(function () {
var w = window;
var ic = w.Intercom;
if (typeof ic === "function") {
ic('reattach_activator');
ic('update', intercomSettings);
} else {
var d = document;
var i = function () {
i.c(arguments)
};
i.q = [];
i.c = function (args) {
i.q.push(args)
};
w.Intercom = i;
function l() {
var s = d.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'https://widget.intercom.io/widget/eoo7q8o9';
var x = d.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
if (w.attachEvent) w.attachEvent('onload', l);
else w.addEventListener('load', l, false);
}
})()
</script>
#endsection
Looks like you're loading third party libraries twice
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-cookies.min.js"></script>
<script src="js/angular/angular-animate.min.js"></script>
<script src="js/angular/angular-ui-router.min.js"></script>
<script src="js/angular/angular-translate.js"></script>
<script src="js/angular/ngStorage.min.js"></script>
<script src="js/angular/ui-load.js"></script>
<script src="js/angular/ui-jq.js"></script>
<script src="js/angular/ui-validate.js"></script>
<script src="js/angular/ui-bootstrap-tpls.min.js"></script>
<script src="js/libs/timer.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-cookies.min.js"></script>
<script src="js/angular/angular-animate.min.js"></script>
<script src="js/angular/angular-ui-router.min.js"></script>
<script src="js/angular/angular-translate.js"></script>
<script src="js/angular/ngStorage.min.js"></script>
<script src="js/angular/ui-load.js"></script>
<script src="js/angular/ui-jq.js"></script>
<script src="js/angular/ui-tree.js"></script>
<script src="js/angular/ui-validate.js"></script>
<script src="js/angular/ui-bootstrap-tpls.min.js"></script>
<script src="js/libs/timer.js"></script>
There are multiple reasons to this. Can you show your routing code? These errors are often caused due to mix of routes or improper handling of the routing.

Showing a message in console in backbonejs

I am trying to show a message in console using backbone js. Here is what I have tried:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Backbone</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1> User Manager</h1>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.is.js/0.2.1/jquery.is.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<script>
var Router = Backbone.Router.extend({
routes: {
'' : 'home'
}
});
var router = new Router();
router.on('route:home', function () {
console.log('rout is loaded');
});
Backbone.history.start();
</script>
</body>
</html>
After trying this I am getting this error below:
Uncaught ReferenceError: jQuery is not defined on jquery.is.min.js:10
Uncaught TypeError: Property '$' of object # is not a function on backbone.js 1388
Uncaught TypeError: Cannot call method 'create' of undefined on measureIt.js:120
Whats wrong with my router?
The link which you are using is not a valid jquery link. Try changing it.
//invalid link
http://cdnjs.cloudflare.com/ajax/libs/jquery.is.js/0.2.1/jquery.is.min.js
Correct link
http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js
Seem like you're currently missing the core jQuery file. Try to include it.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.is.js/0.2.1/jquery.is.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
or if you want the CDN file from cloudflare then use:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.is.js/0.2.1/jquery.is.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>

how to load backbone initial data to another js file

here is my django rendered test page
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div id="todo">
</div>
<script type="text/template" id="item-template">
<div>
<input id="todo_complete" type="checkbox" <%= completed ? 'checked="checked"' : '' %>>
<%- title %>
</div>
</script>
<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script src="app.js"></script>
//the app.js is my backbone app
<script >
var foo_models = new fooCollection({{django_rendered_json_vaiable}})
//this is how I get backbone collection initial data
</script>
</body>
</html>
the above code is what I get so far, I get the backbone bootstrapped models as foo_models,
but this variable can't be access in my app.js file, then I found this question, which use AMD approach,but my app is fairly small,all I need is get the initial data in another js file,so I don't want to add require.js and I don't want to make this foo_models variable global。
so how can I do that?
* EDITED *
Just change these lines:
<script src="app.js"></script>
//the app.js is my backbone app
<script >
var foo_models = new fooCollection({{django_rendered_json_vaiable}})
//this is how I get backbone collection initial data
</script>
to:
<script >
var raw_foo_models = {{django_rendered_json_vaiable}};
</script>
<script src="app.js"></script>
Then, add this line:
var foo_models = new fooCollection(raw_foo_models);
somewhere in your app (after fooCollection has been defined).

Categories