I have a standalone html page that contains a dojo DataGrid that works just fine. I am including the relevant code below.
<script type="text/javascript">
var readStore, grid;
var gridLayout = [
new dojox.grid.cells.RowIndex({ name: "Row #", width: 5, styles: "text-align: left;" }),
{
name: "Name",
field: "name",
styles: "text-align:right;",
width:30
},
{
name: "Type",
field: "type",
width:20
}
];
function initGrid()
{
readStore=new dojox.data.QueryReadStore({url:"/EG3/orgUnit/getChildren", requestMethod:"get"});
console.info("readStore initialized");
grid=new dojox.grid.DataGrid({store:readStore,
id:"grid",
delayScroll:true,
structure:gridLayout,
query:{id:2},
loadingMessage:"Loading..."
}, document.createElement('div'));
dojo.byId("gridContainer").appendChild(grid.domNode);
grid.startup();
}
dojo.addOnLoad(initGrid);
</script>
</HEAD>
<BODY class="claro">
<div id="list" class="list">
Table goes here
<div id="gridContainer">
</div>
</div>
Now, the problem happens when I try to include this page as a contentpane within a TabContainer. The TabContainer loads the page markup as is and does not fire the onLoad script of the page that contains the grid.
<div dojoType="dijit.layout.TabContainer" region="center" tabStrip="true" id="orgUnitTabs">
<div dojoType="dojox.layout.ContentPane" title="Info" selected="true" id="orgInfo" jsId="orgInfo">
</div>
<div dojoType="dojox.layout.ContentPane" href="/EG3/app/orgUnit/orgUnitChildren.gsp" executeScripts="true" parseOnLoad="true" extractContent="true" title="Children" id="children" jsId="children">
Children of the selected Org
<script type="javascript" event="onLoad">
initGrid();
</script>
</div>
Any ideas on how the onLoad script of the child page can be fired?
Thanks in advance.
you should check if the param executeScripts set to TRUE, and if you wanna use declarative method, you have to parse the domNode manually, see the detailed dojo.parse method:http://docs.dojocampus.org/dojo/parser
Not sure what the right answer is, but if I were you, I would try doing it all programatically instead of declaratively, trap errors, use console outputs to see what's happening and log events as it loads.
Related
I have a small angular app that makes an api call based on a month/year from a drop down list in asp. It is meant for that api call to be made whenever year or month drop down lists are changed.
The first/original load works just fine. According to the debugger on any change I'm hitting the api on the change, and getting a return. The entire "card-widget"/ChartController div is disappearing (even with css properties commented out).
My ASP code:
<div id="card">
<div>
</div>
<div id="card-widget" ng-app="ChartApp" ng-controller="ChartController" style="width:350px; height: 350px;">
<div>
<asp:DropDownList ID="lstMonth" runat="server" ng-model="month" ng-change="updateChart()"></asp:DropDownList>
<asp:DropDownList ID="lstYear" runat="server" ng-model="year" ng-change="updateChart()"></asp:DropDownList>
</div>
<div>
<canvas id="Chart" height="350" width="350"></canvas>
</div>
</div>
<div id="card-widget-fail" style="width: 350px; height: 100px;">
<label>No chart</label>
</div>
</div>
My Angular code:
var app = angular.module("ChartApp", []);
app.controller('ChartController', function ($scope, $http) {
$scope.updateChart = function () { getChart() };
var dataChart = document.getElementById("Chart").getContext('2d');
var year = document.getElementById("<%=lstYear.ClientID %>");
var month = document.getElementById("<%=lstMonth.ClientID %>");
getChart();
function getChart() {
//api call to load chart data based off month.options[year.selectedIndex].text & year.options[year.selectedIndex].text
}
});
The reason getChart() is not being called is because it's not present on the $scope element. Use $scope.getChart = function() { ... } instead. I recommend reading this documentation page, specifically the part "Scope as Data-Model".
So I have a div, in which I have an a element. I want the other div to Render another page (RenderPage) as soon as the a element in the other div is clicked.
<div id="Left" style="width:29.49%; height:100%; border-style:solid; border-color:darkgray;">
<h1 id="Pages"> Articles </h1><br />
<a OnClick="LoadUE()">UE</a>
<a></a>
<script>
function LoadUnity() {
}
function LoadUE() {
document.getElementById("Body").innerHTML = #{RenderPage("Bottom.cshtml")};
}
</script>
</div>
<div id="Body" style="width:69.49%; height:100%;">
</div>
The RenderPage method only works on the server when the page is first executed. If you want to load partials in ASP.NET Web Pages (which is what you are using) from client script, you should remove the leading underscore from the file name and then create an AJAX request to load it. Here's an example that uses Fetch:
#section scripts{
<script>
function loadUE() {
fetch('/bottom')
.then((response) => {
return response.text();
})
.then((result) => {
document.getElementById('body').innerHTML = result;
});
});
</script>
}
As a side note, the ASP.NET Web Pages framework is pretty much dead. If you are just learning and have a choice, you should use Razor Pages instead: https://www.learnrazorpages.com/
I want to use the image title (meta data value from below screenshot) to auto display as each images caption underneath each image. Also for Accessibility purposes auto assign this meta value as the 'alt=""' value by default?
Current template code:
<link rel="stylesheet" href="#App.Path/dist/lib/blueimp/css/blueimp-gallery.min.css" data-enableoptimizations="true" />
<script type="text/javascript" src="#App.Path/dist/lib/blueimp/js/blueimp-gallery.min.js" data-enableoptimizations="bottom"></script>
<link rel="stylesheet" href="#App.Path/dist/app/view.css" data-enableoptimizations="true" />
#if(#Dnn.User.IsSuperUser)
{
#Content.Toolbar
} else {
#Edit.Toolbar(Content, actions: "edit,add")
}
<div id="blueimp-gallery-items-#Dnn.Module.ModuleID" style="display:none;">
#foreach (var pic in AsAdam(Content, "Images").Files)
{
<a href="#pic.Url?w=#App.Settings.CarouselImageWidth&h=#App.Settings.CarouselImageHeight&mode=crop" title="#(((dynamic)pic.Metadata).Title)" data-gallery="#blueimp-gallery-#Dnn.Module.ModuleID">
#(((dynamic)pic.Metadata).Title)
</a>
}
</div>
#* this is the rotator element *#
<div id='blueimp-gallery-#Dnn.Module.ModuleID' class='blueimp-gallery blueimp-gallery-carousel' data-carousel='true' data-start-slideshow="true">
<div class='slides'></div>
<h3 class='title'></h3>
<a class='prev'>‹</a>
<a class='next'>›</a>
<a class='play-pause'></a>
<ol class='indicator'></ol>
</div>
<script type="text/javascript">
$(document).ready(function () {
// initialize the carousel gallery
blueimp.Gallery($('[data-gallery="#blueimp-gallery-#Dnn.Module.ModuleID"]').get(), {
container: '#blueimp-gallery-#Dnn.Module.ModuleID',
carousel: true
}
);
});
</script>
Also note that when I click on meta data tag, the following error message pop up appears:
Note: Version: 9.2.0
UPDATE:
Changing "Image Metadata" to "ImageMetadata" worked thx.
Still having trouble adding alt tag to each image. title shows but when I set alt to same it doesn't?
<div id="blueimp-gallery-items-#Dnn.Module.ModuleID" style="display:none;">
#foreach (var pic in AsAdam(Content, "Images").Files)
{
<a href="#pic.Url?w=#App.Settings.CarouselImageWidth&h=#App.Settings.CarouselImageHeight&mode=crop" title="#(((dynamic)pic.Metadata).Title)" alt="#(((dynamic)pic.Metadata).Title)" data-gallery="#blueimp-gallery-#Dnn.Module.ModuleID">
#(((dynamic)pic.Metadata).Title)
</a>
}
</div>
So you're asking a few things at the same time.
number 1: to use the title you want to check if the image has metadata, and if yes, use that. This code should help (pic is the image-variable in your loop) :
#(pic => !pic.HasMetadata ? "" : ((dynamic)pic.Metadata).Title)
number 2 seems to be an issue in the configuration. as far as I can see, the metadata-button in the default toolbar works. I checked the internal and the field-configuration is wrong - you should change it from "Image Metadata" to "ImageMetadata"
I have created a test project with Meteor which uses Masonry. I added the package mrt:jquery-masonry(or isotope:isotope), and it works well at the beginning. However, the problem comes now.
Basically, I want to implement the feature that when user clicks the button, the page will be added one more div. Below is my code:
main.html
<body>
<div class="container">
{{> masonryContent}}
</div>
<script>
(function($){
var $container = $('.masonry-container');
$container.masonry({
columnWidth: 300,
gutterWidth: 50,
itemSelector: '.masonry-item'
})
}(jQuery));
</script>
</body>
style.css
.masonry-item {
width: 300px;
}
masonry-content.html
<template name="masonryContent">
<div class="masonry-container">
<div class="masonry-item">
<p>blabla...</p>
<p>
Button
</p>
</div>
<div class="masonry-item">
<p>test...</p>
</div>
<div class="masonry-item">
<p>another test...</p>
</div>
{{#if showItem}}
<div class="masonry-item">
<p>new added item...</p>
</div>
{{/if}}
</div>
</template>
masonry-content.js
Template.masonryContent.events({
"click #click-me": function(e) {
e.preventDefault();
Session.set('show_me', true);
}
});
Template.masonryContent.helpers({
showItem: function() {
return !!Session.get('show_me');
}
});
The problem is when I click the button, the new div was created; however, it wasn't placed by following Masonry rules. The new created item just overlapped to the first item, but I expect it performs the way to append to the last item.
I would appreciate if anyone could help me on this.
Thanks in advance!
As meteor does partial rendering the element needs to be there in the DOM for masonry to work. So there are two ways of getting over the problem
1) Hide or unhide the element when the button click happens
Or
2) re-render the DOM
You can use the chrome dev tools to see what DOM elements are touched/refreshed (Green color).
There is a typo in masonry in the template name insertion.
Check the package state, many mrt packages are not well supported anymore.
i have an aspx page containing following code
<body>
<script language="javascript" type="text/javascript">
function Hidee()
{
alert(window.frames["frame1"].document.getElementById("Label1").text);
}
</script>
<form id="form1" runat="server">
<div>
<iframe id="frame1" name="frame1" class="frame" frameborder="0" src="Default4.aspx"></iframe>
<a onclick="javascript:Hidee()" style="cursor: pointer">close</a>
</div>
</form>
</body>
in Default4 page i have a label with id Label1
when i click on close button i get undefined alert message
getElementById("Label1").text
An HTMLLabelElement doesn't have a text property.
If it's a simple label that contains only a single Text node, you can say:
getElementById('Label1').firstChild.data
If it might contain more complicated text and element nodes, you'd have to iterate over them to pick up the text, or use the DOM Level 3 Core textContent property, with backup for IE which doesn't support it:
var label= frames['frame1'].document.getElementById('Label1');
var text= ('textContent' in label)? label.textContent : label.innerText;
try with:
function Hidee() {
var ifr=document.getElementById("frame1"),
cd=ifr.contentDocument || ifr.contentWindow.document;
alert(cd.getElementById("Label1").innerHTML);
}