href link to an element by id in Google Apps Script - google-apps-script

i have a problem linking an element by Id using Google Apps Script.
I'm using Materialize and in particular i want to use the tab structure.
I share with you my Code
<script>
$(document).ready(function(){
$('ul.tabs').tabs();
});
$(document).ready(function(){
$('ul.tabs').tabs('select_tab', 'tab_id');
});
</script>
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<meta name="viewport" width="device-width">
<?!= include("RegLeague-css"); ?>
</head>
<body class='grey lighten-4'>
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3">Test 1</li>
<li class="tab col s3"><a class="active" href="#test2">Test2</a> </li>
</ul>
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<?!= include("RegLeague-js"); ?>
</body>
</html>
Basically when I click on 1 link it doesn't redirect me to the id in the Html, but it link me to a site which is link/userCodeAppPanel#test1. I'm sure that is a problem with Google Apps Script because I tried the same code on Visual Studio and opened it with Live Server and it does work.
Could someone help me understand the problem, it should appear like in the picture below in the end
Thanks
enter image description here

The problem is this line:
<base target="_top">
In Apps Script Web Apps, in order to jump to other elements in the current page, you should be using _self instead:
<base target="_self">
Or, since _self is the default value, get rid of the target attribute or even the <base> tag altogether.
Reference:
<base>: The Document Base URL element

Related

Bootstrap is not working even though included

Hi Guys I have a problem about bootstrap bootstrap.min.css jquery.min.js and bootstrap.min.js are already included in my project but I cannot use well well-sm class and when I add manually by links this time divs engage you can see in the picture. where is the problem I don't understand?
my code :
#model xx.Web.Models.MiniRepairViewModel
#{
Layout = null;
}
<div class="pageWrapper">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
#Html.Action("Breadcrumb", "Manage")
<div class="TextBody">
<div class="container">
#Html.Action("LeftMenu", "Manage") //menu engage
<div class="col-threeQuarters">
#using (Ajax.BeginForm("MiniRepairServiceAdd", "Ajax", new AjaxOptions { OnSuccess = "jsFilt", OnFailure = "OnFailure" }))
{
<ul class="Form">
<li class="oneColumsFull">
#Html.DropDownListFor(x => x.GetCityModel.a, (IEnumerable<SelectListItem>)ViewBag.CitiesList, "select", new { name = "x", id = "y" })
</li>
<li id="ilce" class="twoColumsFull" style="display:none;">
</li>
<li class="oneColums"><input type="text" name="serviceName" id="serviceName" placeholder="Service"></li>
<li class="button"><input class=".bh-sl-reset" id="reset" type="button" value="clear" onclick="javascript: window.location.reload();"></li>
<li class="button"><input type="submit" value="search" name="search"></li>
</ul>
}
<div id="myDiv" class="well well-sm"> </div> //not working
</div>
</div>
</div>
</div>
I am not sure if colThreeQuarters is a bootstrap class, the actual class is col
<div class="container">
<div class="row">
<div class="col-md-9> // 3quarters
</div>
</div>
</div>
You Need to include headtag before Bodytag and add the bootstrap cdn in that head and write you js cdn at bottom of body tag.
SO the code structure will be like this
<html>
<head>
<bootstrap cdn>
</head>
<body>
your content
...
..
<js cdns>
</body>
</html>
This is because you are not loading your bootstrap cdn at right place. You should load all your scripts files inside your head tag as #yashwardhan said.
this mean:
Go to your code, find </head> tag and load all your scripts and css file just before this tag.
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
and use the right bootstrap syntax. colThreeQuarters is not a bootstrap class
Why you should do this, is explained here:-
Where should I put <script> tags in HTML markup?

Getting script to run when button clicked in Electron

I am working on an application in Electron, on this page I have put a button however the script does not run when clicked. Any help would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<link class="menu-bar" rel="stylesheet" href="../css/index.css">
<link class="main" rel="stylesheet" href="../css/ceaser.css">
<meta charset="utf-8">
<title>Cipher Program</title>
</head>
<body>
<!-- Navigation Bar -->
<ul class = "menu-bar">
<li> Menu </li>
<li><a class="active" href="ceaser.html">Ceaser Cipher</a></li>
<li>Vernam Cipher </li>
<li>Frequency Analysis</li>
</ul>
<div class="main">
<h1>Ceaser Cipher</h1>
<button type="button" onclick="test()">Click me </button>
<script type="text/javascript">
function test() {
console.log("got this far")
}
</script>
</div>
</body>
Add some cdn for .js to work with javascript library functions as i see theres no library imported to work with javascript like
<script src="your_js/cdn"....></script>
Console.log will display text in a terminal window. If you are trying to display something in a browser you have to change the DOM.
<!DOCTYPE html>
<html>
<head>
<link class="menu-bar" rel="stylesheet" href="../css/index.css">
<link class="main" rel="stylesheet" href="../css/ceaser.css">
<meta charset="utf-8">
<title>Cipher Program</title>
</head>
<body>
<!-- Navigation Bar -->
<ul class = "menu-bar">
<li> Menu </li>
<li><a class="active" href="ceaser.html">Ceaser Cipher</a></li>
<li>Vernam Cipher </li>
<li>Frequency Analysis</li>
</ul>
<div class="main">
<h1>Ceaser Cipher</h1>
<div id="message"></div>
<button type="button" onclick="test()">Click me </button>
<script type="text/javascript">
function test() {
console.log("got this far");
document.getElementById("message").appendChild(document.createTextNode("You see me now"));
}
</script>
</div>
</body>
Simplest way is to create an empty "div" with id of your choosing. Then in javascript use the document object "document" and it's functions like ".write" or ".appendChild" to change the DOM.
You should be able to run the above code in the stack overflow sandbox and see that the output to terminal (console.log) is different than the browser rendered DOM (getElementById("message").appendChild)
your Code should output something in the Browserconsole.
You can open the Developertools afaik with Ctrl+Alt+i.
To output / connect with the Mainapplication you should use IPC.
See: https://electronjs.org/docs/api/ipc-main
Greets

Ng-repeat not showing JSON data in Angular-UI

I am trying to pull in data from a JSON file and use it to populate a navigation menu, composed of divs that collapse using the Angular UI collapsible function.
Here is my code (also on Plunker here):
<!DOCTYPE html>
<html ng-app="samApp">
<head>
<link data-require="bootstrap-css#3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="angular-ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body>
<div CollapseCtrl navdata ng-repeat="items in item">
<div class="nav-super">{{items.img}}</div>
<div collapse="isCollapsed">
<div class="nav-sub">{{items.img}}</div>
</div>
</div>
</body>
</html>
My issues are:
I cannot make the elements within the collapsible take the json information. If I set ng-repeat on one of the divs, the sub or super div will not take it. Setting ng-repeat on the outermost div results in none of the sub divs taking the repeat.
I have enclosed my controllers in directives and assigned both directives, for the collapsing function and the HTTP GET, to the same div.
I do believe you're looking for something like this:
<!DOCTYPE html>
<html ng-app="samApp">
<head>
<link data-require="bootstrap-css#3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="angular-ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-controller="navDataController">
<ul>
<li ng-repeat="item in items">
<span ng-click="action(item)">{{item.img}}</span>
<ul ng-show="item.isCollapsed">
<li ng-repeat="sub in item.subcontent">
<span>{{sub.title}} {{sub.}}</span>
</li>
</ul>
</li>
</ul>
</body>
</html>
http://plnkr.co/edit/DlVqJOzQwjxdCVjStvZg?p=preview
The example works, but it's a bit crude; learn basics to make it sweet.
Also modified your plunkr to work:
http://plnkr.co/edit/jxVGxl7h8gBlFLQ9zyTW?p=preview
HTML
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="angular-ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-app="samApp" ng-controller="CollapseCtrl">
<div ng-repeat="item in items">
<div class="nav-super" ng-click="item.isCollapsed=!item.isCollapsed">{{item.img}}</div>
<div collapse="item.isCollapsed">
<div class="nav-sub" ng-repeat="subElement in item.subcontent">{{subElement.title}}</div>
</div>
</div>
</body>
</html>
JS
var app = angular.module('samApp', ['ui.bootstrap']);
app.service('navdata', function($http) {
var myServiceObj = {
myData: {},
getData: function() {
$http.get('data.json').success(function(data, status, headers, config) {
angular.copy(data, myServiceObj.myData);
});
}
}
myServiceObj.getData();
return myServiceObj;
});
app.controller('CollapseCtrl', function($scope, navdata) {
$scope.items = navdata.myData;
});
Basically directives are meant for adding encapsulated behavior or DOM element manipulation. I think a service makes more sense for taking care of the requests to the server and storing the data to be used by various controllers.
I also used the data to store the isCollapsed boolean so you may want to loop over the data and set that to false if you want them closed initially or otherwise just reverse your boolean logic in the collapse expression.
You had all the right logic just in the wrong places, also read up on the ng-repeat documentation it's a piece I visit often.

Angularjs not working

I am working on web project where i am working on angular js to display images and if i click an image it will zoomed. I have created one sample application its working fine but when i started to create one sample application it gives warning for its internal tags.
My Html file where it gives warnings(for ng-app,ng-controller,ng-src,ng-repeat) ..
<!DOCTYPE html>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <script src="http://code.angular.org/angular-1.0.0rc4.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="${pageContext.request.contextPath}/js/underscore-min.js"></script>
<link rel="stylesheet"
href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
<script src="${pageContext.request.contextPath}/css/album.css"></script>
<title>Angular album</title>
</head>
<body>
jsp
<div ng-controller="AlbumCtrl">
<div id="albumImage">
<img ng-src="{{currentImage.image}}" alt="{{currentImage.description}}">
</div>
<div id = "thumbWrapper">
<ul id="thumbList">
<li ng-repeat ="image in images" ng-click="setCurrentImage(image)">
<img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
</li>
</ul>
</div>
</div>
</body>
</html>
Seems that your problem is here:
<div ng-controller="AlbumCtrl">
I don't see where this controller is defined. It's possible you got your file extension wrong, and that's why:
<script src="${pageContext.request.contextPath}/css/album.css"></script>
<!-- I would have expected to see .js, not .css, in the path above -->

jQuery Mobile: How to create a linked row with title and description

There is an example in jQuery Mobile: Up and Running which shows an interactive list containing title, description, and a link
http://my.safaribooksonline.com/book/-/9781449331085/4dot-lists/id2712982
I can't find the code for this, and the only way I have so far been able to reproduce the same effect is to nest an <hX> element inside the <a>, which I understand is bad practice.
Can anyone suggest the correct way to achieve this? The example below works, but only by nesting the inside the .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>List Example</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="example">
<div data-role="header" data-theme="c">
<h2>List Example</h2>
</div>
<div data-role="content">
<ul data-role="listview" >
<li>
<a href="#">
<h3>Title1</h3>
<p>Description1</p>
</a>
</li>
<li>
<a href="#">
<h3>Title2</h3>
<p>Description2</p>
</a>
</li>
</ul>
</div>
</body>
</html>
From the JQM docs (under "Text formatting & counts")
To add text hierarchy, use headings to increase font emphasis and use
paragraphs to reduce emphasis.
So that seems to be the correct way to do it. That said you can nest whatever you want in the li and style it using `CSS'.