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.
Related
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>
I am following a tutorial in Jasmine and serverless. The problem I am facing is around Javascript.
There is a public directory which has an index.html
Jasmine tests are in public/tests directory. It also has an index.html.
Following JS code (SpecHelper.js below) is suppose to find markups with class markup in public/index.html and copy that code in <body> of public/tests/index.html but it isn't doing so. I am unable to find the issue.
public/index.html
<body>
<div class='markup'>
<div class='view-container container'>
<div class='one-half column'>
<h3>Learn JS, one puzzle at a time</h3>
<a href='' class='button button-primary'>Start now!</a>
</div>
<div class='one-half column'>
<img src='/images/HeroImage.jpg'/>
</div>
</div>
</div>
</body>
SpecHelper.js
var fixture;
function loadFixture(path) {
var html;
jQuery.ajax({
url: '/index.html',
success: function(result) {
html = result;
},
async: false
});
return $.parseHTML(html);
}
function resetFixture() {
if (!fixture) {
var index = $('<div>').append(loadFixture('/index.html'));
var markup = index.find('div.markup');
fixture = $('<div class="fixture" style="display: none">').append(markup);
$('body').append(fixture.clone());
} else {
$('.fixture').replaceWith(fixture.clone());
}
}
beforeEach(function () {
resetFixture();
});
public/tests/index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jasmine Spec Runner v2.3.4</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.3.4/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-2.3.4/jasmine.css">
<!-- App Dependencies -->
<script src="lib/jquery-2.1.4.js"></script>
<script src="/vendor.js"></script>
<!-- Test libraries -->
<script type="text/javascript" src="lib/jasmine-2.3.4/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-2.3.4/jasmine-html.js"></script>
<script type="text/javascript" src="lib/jasmine-2.3.4/boot.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src="/app.js"></script>
<!-- include spec files here... -->
<script type="text/javascript" src="SpecHelper.js"></script>
<script type="text/javascript" src="app_spec.js"></script>
</head>
<body>
<!--This is always empty! -->
</body>
</html>
The test in Jasmine fails with following error
1 spec, 1 failure
Spec List | Failures
learnJS can show problem view
Expected 0 to equal 1.
Try this
fixture = $('<div class="fixture" style="display: none">').append(markup.html());
Then maybe
$('body').append(fixture.clone().html());
got it working..phew ... had to clear browser cache by going to developer tools, networks. I noticed that most files were being picked from memory. Right clicked and cleared cache and cookies.
My bootpag is not loading the pagination.I have spend several hour checking the rest of the code and it works good.The problem is that I'm unable to figure out why does not bootpag load.
Here is my code:
dashboard.php//Users dashboard
<?php
session_start();
......
......
$pages = ceil($get_total_rows[0]/$item_per_page);
?>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/js_user.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#results").load("views/apps/get_apps_record.php"); //initial page number to load
$(".paging_link").bootpag({
total: <?php echo $pages; ?>
}).on("page", function(e, num){
e.preventDefault();
$("#results").prepend('<div class="loading-indication"><img src="ajax-loader.gif" /> Loading...</div>');
$("#results").load("views/apps/get_apps_record.php", {'page':num});
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Dashboard</title>
</head>
<body>
//loading the apps.php here
....
<script src="js/jquery-1.12.4.min.js"></script>
....
</body>
</html>
apps.php//the pagination is here
...
<div id="results" class="list-group"></div>
<div class="paging_link"></div>
....
In the #results the output is being loaded but the pagination is not showing up.
Any ideas?
Was missing:
<script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
face palm!!!
I think you are misspelled.
Please add your css files on head then
Add jquery ,then
Add bootstrap.min.js ,then
Add custom js scripts
Pretty simple test app, but for some reason, the template is not rendering and so far I just try one template only. Only blank page showing. no error
// The Application
// ---------------
// Our overall **AppView** is the top-level piece of UI.
app.AppMainView = Backbone.View.extend({
// Instead of generating a new element, bind to the existing skeleton of
// the App already present in the HTML.
el: '#nested-viewer',
view1Template: _.template( $('#view1').html() ),
view2Template: _.template( $('#view2').html() ),
view3Template: _.template( $('#view3').html() ),
// New
// Delegated events for creating new items, and clearing completed ones.
events: {
'keyup [nv-data="myinput"]': 'changedData',
},
// At initialization we bind to the relevant events on the `Todos`
// collection, when items are added or changed. Kick things off by
// loading any preexisting todos that might be saved in *localStorage*.
initialize: function() {
console.log("init")
this.dataStorage1=new app.dataStorage();
console.log(this.dataStorage1)
// this.listenTo(app.Fund, 'change',this.adjustAllDivison);
},
// New
// Re-rendering the App just means refreshing the statistics -- the rest
// of the app doesn't change.
render: function() {
this.$el.html(this.view1Template());
},
changedData: function(){
console.log("changedData");
},
resetAllDivison: function(){
console.log("resetAllDivison")
},
});
// js/app.js
var app = app || {};
$(function() {
// Kick things off by creating the **App**.
new app.AppMainView();
});
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Nested View</title>
<link rel="stylesheet" href="src/app/style.css">
<link rel="stylesheet" href="/library/dragdealer/0.9.8/css/dragdealer.css">
</head>
<body>
<div id="nested-viewer">
</div>
<!-- Templates -->
<script type="text/template" id="view1">
<div class="view1s">
<input nv-data="myinput" type="text" id="input1" name="" value="123" placeholder="">
</div>
</script>
<script type="text/template" id="view2">
<div class="view2s">
<p id="display2">View 2 </p>
</div>
</script>
<script type="text/template" id="view3">
<div class="view3s">
<p id="display3">View 3</p>
</div>
</script>
<!-- Loading Templates + Vendor Scripts -->
<script type="text/template" id="item-template"></script>
<!-- Addons -->
<script src="/library/dragdealer/0.9.8/js/dragdealer.js"></script>
<!-- Main Framework -->
<script src="src/assets/lib/jquery.js"></script>
<script src="src/assets/lib/underscore.js"></script>
<script src="src/assets/lib/backbone.js"></script>
<script src="src/assets/lib/backbone.localStorage.js"></script>
<!-- Modules -->
<!-- Main -->
<!-- Nested View -->
<script src="src/app/modules/NestedView/models/dataStore.js"></script>
<script src="src/app/modules/NestedView/views/AppMainView.js"></script>
<!--
<script src="src/app/modules/NestedView/views/view1.js"></script>
<script src="src/app/modules/NestedView/views/view2.js"></script>
<script src="src/app/modules/NestedView/views/view3.js"></script>
-->
<!-- App Base -->
<script src="src/app/router.js"></script>
<script src="src/app/app.js"></script>
</body>
</html>
You actually don't append the View's el to DOM. You don't even call the view instance's render method. You could do it on initialization, i.e. in your initialize method or after creating the instance.
var mainView = new app.AppMainView();
mainView.render();
mainView.$el.appendTo(document.body);
Edit: I just noticed that you are passing a selector to the view (el: '#nested-viewer'). This means that just need to call the render method as the element exists in the DOM.
I am following this tutorial to integrate SignalR to my project http://venkatbaggu.com/signalr-database-update-notifications-asp-net-mvc-usiing-sql-dependency/
So basically this is my View where I want to show my table.
#{
ViewBag.Title = "PatientInfo";
}
<h2>PatientInfo</h2>
<h3>#ViewBag.pName</h3>
<h5>#ViewBag.glucoseT</h5>
#if (Session["LogedUserFirstname"] != null)
{
<text>
<p>Welcome #Session["LogedUserFirstname"].ToString()</p>
</text>
#Html.ActionLink("Log Out", "Logout", "Home")
<div class="row">
<div class="col-md-12">
<div id="messagesTable"></div>
</div>
</div>
<script src="/Scripts/jquery.signalR-2.2.0.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="/SignalR/Hubs"></script>
<script type="text/javascript">
$(function () {
// Declare a proxy to reference the hub.
var notifications = $.connection.dataHub;
//debugger;
// Create a function that the hub can call to broadcast messages.
notifications.client.updateMessages = function () {
getAllMessages()
};
// Start the connection.
$.connection.hub.start().done(function () {
alert("connection started")
getAllMessages();
}).fail(function (e) {
alert(e);
});
});
function getAllMessages() {
var tbl = $('#messagesTable');
$.ajax({
url: '/home/GetMessages',
contentType: 'application/html ; charset:utf-8',
type: 'GET',
dataType: 'html'
}).success(function (result) {
tbl.empty().append(result);
}).error(function () {
});
}
</script>
}
My project is running but the table doesn't appear at all. I started by pasting the view because I believe that the scripts are not executed in the first place; The Alert Message is NOT being shown even if I try to add one directly after
$(function () {
alert("I am an alert box!");
This is my Layout.cshtml file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="SignalR/Hubs"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#p_table").dataTable();
});
</script>
#RenderSection("scripts", required: false)
</body>
</html>
I am using Visual Studio 2012, MVC4.
Please Help..
Make sure you have placed all your script tags from the view inside the scripts section of the view:
#section scripts {
... your <script> tags come here
}
The reason why your alerts don't work is because you have directly put them inside the body of the view which gets rendered at the #RenderBody() call of the Layout. But as you can see it's only at the end of this Layout that we have references to the scripts such as jQuery and signalr.
Now they will appear at the proper location: #RenderSection("scripts", required: false).
By the way use the console window in your webbrowser to see potential script errors you might have. For example in your case it would display that jQuery is not defined error.
Another remark: don't include signalR script twice: right now you seem to have included jquery.signalR-2.2.0.js in your view and jquery.signalR-2.2.0.min.js in your Layout.