I'm creating a web application using dojo toolkit's TabConatiner.
Clicking fn_addTab("/page", this) on the Menu will show the page as a tab. It looks like an iframe.
But there is a problem. Tabs imported into 'href' attribute, script in jsp don't work. If the url mapped to the controller is shown in the tab, does not the script inside the jsp have to work as well?
home.js
function fn_addTab(url, node) {
require([
'dijit/registry',
'dijit/layout/ContentPane',
'dojo/domReady!'
], function(registry, ContentPane) {
const tabContainer = registry.byId("tabContainer");
...
let tab = registry.byId(tabId);
if(typeof tab === 'undefined') {
tab = new ContentPane({
id: tabId,
title: sidebarMenuText,
href: url,
closable: true
});
tabContainer.addChild(tab);
}
tabContainer.selectChild(tab);
fn_initActiveMenu(node);
});
}
page.jsp
<section class="wrapper">
<!-- page start -->
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="page-header">page 3</h2>
</div>
<div class="panel-body">
<button id="btn" type="button" onclick="helloWorld()">Click</button>
</div>
</div>
</div>
</div>
<!-- page end-->
</section>
<script>
function helloWorld() {
alert('helloWorld?');
}
</script>
That button is not working.
helloWorld() is not defined.
Controller
#RequestMapping(value = "/page")
public String page() {
return "page/page";
}
Fixed. Use dojox/layout/ContentPane, not dijit/layout/ContentPane.
https://dojotoolkit.org/reference-guide/1.10/dojox/layout/ContentPane.html
Related
How can I get value from my html action link, I tried to set the value in js function and it is work, and the problem is js not get the value form html file, and this forloop only the first one will call the Javascript function.
this is my js function
function selectTemplate() {
$('#choose').on('click', function () {
var objTemplate = $(".styTemplate").val();
$.post(strRoot + "/Home/Index/", { styTemplate: objTemplate });
});
};
and this is my vbhtml code
#For Each item In Model
Dim currentItem = item
'<!-- single-awesome-project start -->
#<div Class="col-md-4 col-sm-4 col-xs-12 #Html.DisplayFor(Function(modelItem) currentItem.strTemplateType)">
<div Class="single-awesome-project">
<div Class="awesome-img">
<img src="#Url.Content("~/Content/TemplateCSS/img/portfolio/" & currentItem.strTemplateType & ".jpg")" alt="" />
<div Class="add-actions text-center">
<div Class="project-dec">
<a Class="venobox" data-gall="myGallery" href="#Url.Content("~/Content/TemplateCSS/img/portfolio/" & currentItem.strTemplateType & ".jpg")">
<h4>#currentItem.strTemplateName</h4>
<span> Web Development</span>
#Html.ActionLink("Choose", "companyInfomation", "Home", New With {.id = "choose"}, New With {.styTemplate = currentItem.strTemplateName})
</a>
</div>
</div>
</div>
</div>
</div>
'<!-- single-awesome-project end -->
Next
</div>
<script>
selectTemplate();
</script>
Maybe it's better to use onclick attribute? Use this instead of Html.ActionLink:
Choose
Html:
<body ng-app ng-controller="OrderFormController">
<!--<h1 class="errorHeader">List of Classes</h1>-->
<header>
<div class="container">
<div id="branding">
<h1>Apex <span class="highlight"> Editor </span> </h1>
</div>
</div>
</header>
<div class="col-md-12 col-lg-12">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active">Apex Editor</li>
</ul>
</div>
<div class="panel-body">
<div>
<input type="text" name="apexClass" id="autocomplete" placeholder="Type the name of the Apex class you want to edit"/>
</div>
<div class="btn-group-vertical" style="padding: 1%">
<button type="button" class="btn btn-primary" id="editBtn">Edit</button>
</button>
</div>
<div class="tab-content" align="left">
<div id='error' style='display:none'>{{apexClassWrapperError.message}}</div>
<div>{{apexClassWrapper.name}}</div>
<img src="../img/ajax-loader.gif" id="loaderImage" style='display:none'>
<form>
<textarea ng-model="apexClassWrapper.body" id="code" name="code" readonly="true" >{{apexClassWrapper.body}}</textarea>
</form>
</div>
<button type="button" class="btn btn-primary" id="saveBtn" ng-click="postdata(apexClassWrapper)">Save</button>
</div>
</div>
</div>
<script src="../js/makeEditable.js"></script>
<script>
$(function() {
var editor = CodeMirror.fromTextArea(document.getElementById("code"),{
linenumber : true,
matchBrackes: true,
mode: "text/x-apex"
})
});
</script>
<footer>
<p>Web based Apex Editor</p>
<p>Developed By - Nagendra Kumar Singh</p>
</footer>
</body>
CSS and JS files included at top:
<script src="../js/codemirror.js"></script>
<script src="../js/apex.js"></script>
<script src="../js/matchbrackets.js"></script>
<link href="../css/codemirror.css" rel="stylesheet"/>
The controller is a simple one fetching the class through a RESTApi.
function OrderFormController($scope, $http) {
$('#autocomplete').autocomplete({
type: 'POST',
serviceUrl: 'http://localhost:8989/getSuggestion',
onSelect: function (suggestion) {
console.log('suggestion.value -> '+suggestion.value);
var data = {
apexClassName:suggestion.value
};
var config = {
params: data
};
$('#loaderImage').show();
$http.get("http://localhost:8989/getApexBody",config).then(function (response) {
$scope.apexClassWrapper = response.data;
$('#loaderImage').hide();
});
}
});
};
But I can only see {{apexClassWrapper.body}} in my text area, I dont see the real code when using CodeMirror, If I remove code mirror , I can see the class, but I cannot figure out a way to show the body with CodeMirror included.
There are no errors in console log and all the JS and CSS files are loaded perfectly. Please help.
Ok, So I think I may have figured it out. What I did is I set a timeout for the codemirror code to run as follows in the js file and removed it from the index.html.
$('#loaderImage').show();
$http.get("http://localhost:8989/getApexBody", config).then(function (response) {
$scope.apexClassWrapper = response.data;
$('#loaderImage').hide();
if(globalEditor) {
globalEditor.toTextArea();
}
setTimeout(function (test) {
var editor = CodeMirror.fromTextArea(document.getElementById('apexBody'), {
lineNumbers: true,
matchBrackets: true,
mode: "text/x-apex"
});
globalEditor = $('.CodeMirror')[0].CodeMirror;
}), 2000
});
The only issue in this answer is that, it creates multiple code editor window when I try to load different classes. How can I resolve that?
So finally got it working, defined a global variable and using the method toTextArea
I'm developing an app using Meteor Framework.
One of the features I am looking to implement is having a marquee text (like a scrolling bottom text).
I have added the package meteor-jquery-marquee and it works great with a single string. But whenever I try to modify the string, nothing happens, and it stays the same.
It's worth mentioning that I did try sessions, and it changes the text, however, the marquee animation stops, which defeats the purpose.
I have been stuck for hours trying to get it to work, some help would really save my butt here.
I've initialized the global variable in the client/main.js as
globalMessage = "Welcome to my proJECT";
And it scrolls with the marquee just fine.
Thank you in advance!
My code:
My body template
<template name="App_Body">
{{> Header}}
{{>Template.dynamic template=main}}
{{> Footer}}
<div style="color: white;" class="ui center aligned container">
<div class='marquee'>{{globalMessage}}</div>
</div>
</template>
body.js
Template.App_Body.helpers({
globalMessage () {
return globalMessage;
},
});
where I'm trying to edit the marquee:
<template name="dailyMessageControl">
<div class="container">
<br>
<br>
<div class="info pull-right"> <!-- column div -->
<div class="panel panel-default">
<div class="panel-heading clearfix">
<h1 class="panel-title text-center panel-relative"> Modify Daily Message</h1>
</div>
<div class="list-group">
<div class="list-group-item">
<p style="font-size: 30px;">Current Message: <br>{{globalMessage}}</p>
</div>
<div class="panel-footer">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Enter new messages</label>
<input type="text" name="newMsg" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="New Message">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div><!-- end column div -->
</div>
</template>
the .js
Template.dailyMessageControl.helpers({
globalMessage () {
return globalMessage;
},
});
Template.dailyMessageControl.events({
'submit form': function(){
event.preventDefault();
var newMsg = event.target.newMsg.value;
globalMessage = newMsg;
}
});
Your code clearly lacks reactivity, let's fix that.
Fist, initialize globalMessage as ReactiveVar instance (client/main.js):
globalMessage = new ReactiveVar('Welcome to my proJECT');
Next, code to react to its value change (body.js):
Remove globalMessage() helper
Add code that will track globalMessage variable and re-create $.marquee:
Template.App_Body.onRendered(function appBodyOnRendered() {
this.autorun(() => {
const value = globalMessage.get();
const $marquee = this.$('.marquee');
$marquee.marquee('destroy');
$marquee.html(value);
$marquee.marquee(); // add your marquee init options here
});
});
And, lastly, update code in dailyMessageControl template to work with ReactiveVar instance:
Template.dailyMessageControl.helpers({
globalMessage () {
return globalMessage.get(); // changed line
},
});
Template.dailyMessageControl.events({
'submit form': function(){
event.preventDefault();
var newMsg = event.target.newMsg.value;
globalMessage.set(newMsg); // changed line
}
});
I have a basic Angular.js app which is using ocLazyLoad for loading the application files. I am using the skeleton of the sbAdminApp template.
My problem is that when I use a template with an ng-click event, the click event is not being fired. It is not a scope problem because when I print the function's content to the view it is shown.
Here is some of my code:
For loading the files using ocLazyLoad:
$stateProvider.state('dashboard.importLotteries', {
templateUrl: '/Scripts/app/views/importLotteries.html',
url: '/importLotteries',
controller: 'LotteriesCtrl',
resolve: {
loadMyFiles: function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'sbAdminApp',
files: [
'/Scripts/app/scripts/services/lotteriesService.js',
'/Scripts/app/scripts/controllers/lotteries.js'
]
})
}
}
}
This is the importLotteries.html template file:
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Import Lotteries
</div>
{{importLotteries.toString()}}
<div class="panel-body">
<input type="button" ng-click="importLotteries()" value="Import"/>
<span ng-model="importStatus">
</span>
</div>
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
and this is the controller's code:
'use strict';
angular.module('sbAdminApp')
.controller('LotteriesCtrl', function ($scope, lotteriesService) {
$scope.importLotteries = function () {
alert("importing");
$scope.importStatus = "Loading...";
};
});
The result view looks like this:
So as you can see, the function exists on the scope but the click event is not firing and I don't get any errors.
I tried to search for a solution online for sometime now and couldn't find one, so any help will be greatly appreciated!
After further investigating the issue, I see that the event function (importLotteries) is undefined in the scope, but when I change the value to a string instead of a function the scope value is correct.
Try attaching a ng-href or href to the link and it'll be fired.
<input type="button" ng-click="importLotteries()" ng-href='#' value="Import"/>
Source:
[1] Angular ng-click with call to a controller function not working
I've a problem with TinyMCE.
When I load the TinyMCE textarea content (with jQuery) into my database, and then I see the result on a php page, I see html tag...in the picture you can find an example.
HTML
<div class="container pt">
<!-- +++++ Posts Lists +++++ -->
<div class="row mt">
<div class="col-lg-6 col-lg-offset-3 centered">
<h3>MY BLOG</h3>
<hr>
</div>
</div>
<div id="white">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2" id="menublog">
</div>
</div><!-- /row -->
</div> <!-- /container -->
</div><!-- /white -->
</div>
JQuery
$(document).ready(function() {
$("#Insert").click(function(){
event.preventDefault();
var user = "2", titolo = $('#titolo').val(), articolo = tinyMCE.activeEditor.getContent({format : 'raw'});
var id_immagine = $('#menuimmagini').val();
alert(id_immagine);
object = JSON.stringify({r: 'InsertPost', u: user, t: titolo, a: articolo, i:id_immagine});
$.post("server.php", { js_object: object },
function(msg){
console.log(msg);
if(msg)
{
alert("Post inserito con successo!");
location.reload();
}
});
});
});
OUTPUT JQUERY
$(document).ready(function() {
event.preventDefault();
object = JSON.stringify({r: 'InitializeBlog'});
$.post("servo.php", { js_object: object },
function(response)
{
var obj = jQuery.parseJSON(response);
$.each( obj, function( index ) {
$('#menublog').append("<p><img class=\"img-circle\" src=\"assets/img/user.png\" width=\"50px\" height=\"50px\"> <ba>Salvo Bertoncini</ba></p> <p><bd>Posted on "+obj[index].date+"</bd></p> <h4>"+obj[index].title+"</h4> <p><img class=\"img-responsive\" src=\"show.php?id="+obj[index].idimmagine+"\"></p> "+obj[index].articles+" <p>Continue Reading...</p><hr>");
});
}
);
});
All editor WYSWYG convert the content to html entities. you should use this library for example:
http://www.strictly-software.com/htmlencode