My scenario is as follows:
I'm currently using DOJO framework 1.9, with BIRT reporting tool 4.2. BIRT creates a form element (dynamically) in a page, and all input fields (which are from dojo) comes under this form.
And when I try to validate the form (on submit), I can't do that, since the form is not DOJO form.
So, is there any way to convert this HTML form to DOJO form (dijit.form) programmatically?
Or, in general, Is it possible to change a HTML element to DOJO widget programmatically?
You can implement both solutions with dojo. You can create a Dojo widget programmatically or declaratively. You can convert any HTML element to DOJO widget programmatically.
E.g of button created programmatically by Id.
<body class="claro">
<div>
<!--HTML Button element with id ="btn2"-->
<button id="btn2"></button>
</div>
<script>
require(["dijit/form/Button", "dojo/domReady!"], function(Button) {
var button2 = new Button({
iconClass: "dijitIconNewTask",
showLabel: false,
label: "Click Me!", // analogous to title when showLabel is false
onClick: function(){ console.log("Second button was clicked!"); }
}, "btn2");//this is the id of HTML element.
button2.startup();
});
</script>
</body>
View Programmatic Demo Here
In the same way you can create any Dojo widget programmatically.
Related
I have an traditional asp.net application which reads HTML template and renders it inside div control. Using bootstrap xeditable user can edit certain parts of the template (only text). This template is later used to send emails. This functionality is working fine. Now I am rewriting this application using AngularJs and WebApi. I am using angular route to route to different pages (plain html) of the application. I am able to load the template using directive. now I want to allow user to edit the text and save the complete template so that it can be used later for sending email.
MyTemplate.html
<p>this is some text</p>
<p>this is some more text</p>
<p>this is some another text</p>
Directive
myapp.directive("customDirective", function () {
return {
templateUrl: 'MyTemplate.html'
};
});
Notify.html
<div>
<h2>{{message}}</h2>
<input type="button" ng-click="Redirect()" value="Report" />
</div>
<custom-directive></custom-directive>
I want that user should be able to edit the text in MyTemplate.html and save it as complete template for later use. Is this achievable?
Do not store it in file. Store the template in your database. Provide a default value there, so something shows if the user has not modified it yet.
In you directive, load the template from your database through your API. After you do that, append the template to the contents of your directive inside your link callback function and compile the directive (if needed).
myapp.directive("customDirective", ($compile, yourService) => {
return {
link: (scope, elem) => {
yourService.fetchTemplate().then(template => {
elem.html(template);
$compile(elem.contents())(scope);
});
}
}
});
Please make sure to sanitise your data properly. It could be fairly dangerous injecting and compiling template created by the user.
I hope this points you in the right direction.
Edit
You might not event need the $compile step. It depends on what kind of template you have in mind. If it is just a simple element without any connection to angular, simply skip the $compile line.
Edit 2 - Display the template on click
Please note the following is just a very simplified version, but it should point you in the right direction.
In your parent controller
$scope.state = {
displayTemplate: false
};
In your template
<my-template-directive ng-if="state.displayTemplate"></my-template-directive>
<button ng-click="state.displayTemplate = true">Show Template</button>
I have a button here.
<button type="button">#item.StepsToList steps to list</button>
I want the button to go to the page similar to my action below.
/ManageSpaces/id/Overview
I'm trying to do this by putting this action link inside the button.
#Html.ActionLink("Manage Yoga Space and Calendar", "Overview", new {controller = "ManageSpaces", action = "Overview", id = item.YogaSpaceId })
How to make the action link above work inside the button tag?
Buttons aren't for navigation. That's what hyperlinks are for. Putting a non-anchor <a> inside of a <button> isn't valid, either. If your focus is on the look of a button, your choices are to
use a button. Capture the click event and navigate the page using window.location, or
use a hyperlink. Add a CSS framework such as Bootstrap or Foundation, and apply one of their button styles.
Assuming you're familiar with jQuery at all, something like this works for the former point:
<button class="link-button" data-url="/some/url">I navigate somewhere</button>
<script>
$('.link-button').on('click', function(e) {
window.location = $(this).data('url');
});
</script>
For the latter point, Bootstrap and Foundation both have dedicated styles for making just about anything look like a "button":
Bootstrap
I navigate somewhere
Foundation
I navigate somewhere
It's unclear what you're trying to achieve. Do you want to simply navigate to a new page? If so you should use an Html.ActionLink by itself instead of a <button> - that's what they're for. You can style the resulting <a> element to look like a button. If you want to post a form to a new action method, you should specify that in your call to Html.BeginForm, then the button will automatically submit to that action when clicked.
#Html.ActionLink("Manage Yoga Space and Calendar", "Overview", new { controller = "ManageSpaces", action = "Overview", id = item.YogaSpaceId }, new { #class = "btn btn-default " })
I created a button
<button type="button" ng-click="chooseOptions()" id="chooseOptionButton" ng-bind="whatToDisplay()"></button>
Which shows a <div ng-show=appearOnChoice>on click and toggles back when clicking again!
$scope.chooseOptions=function(){
$scope.appearOnChoice=!$scope.appearOnChoice;
}
However, I also want this element to hide again, when the user clicks anywhere outside this div
element. How can I do this? I need strictly stick with AngularJS and not use jQuery.
Hope you can help me with that.
EDIT: I tried to adapt some of the events of bootstrap datepicker, but I am not sure how to apply it properly
$scope.$on('datepicker.focus', focusElement);
scope.$watch('isOpen', function(value) {
if (value) {
scope.$broadcast('datepicker.focus');
scope.position = appendToBody ? $position.offset(element) : $position.position(element);
scope.position.top = scope.position.top + element.prop('offsetHeight');
$document.bind('click', documentClickBind);
} else {
$document.unbind('click', documentClickBind);
}
});
var focusElement = function() {
$timeout(function() {
self.element[0].focus();
}, 0 , false);
};
How can I adapt this to my case?!
I think that you dont have to write a function, you can use ng-init to create a model, ng-show to show/hide the div based on the value of the model, and with ng-click change the value of the model. See example below:
var myapp = angular.module('myapp',[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-init="showDiv = true;" >
<div ng-show="showDiv"> SHOOOOOOOOW </div>
<button ng-click="showDiv = !showDiv;">Click me</button>
</div>
</div>
You can set the model value to be false when the user is clicking everywhere else, and set it again to true when it clicks the button. If you made a fiddle I can help you easier :)
If the DIV has focus, then you can use the ng-blur directive on the DIV to run set appearOnChoice to false. However, if the DIV does not already have focus (which it won't if you are depending on the button to make it visible), you will need to manipulate the DOM in your code (to provide focus) OR create a custom directive to set focus so that the ng-blur directive will work. Check out possibilities for that with this link.
alternatively, you can add an ng-click directive to every clickable object on your view that will hide the DIV when fired. But I don't really think that's the best way to go...
The easiest and cleanest way to handle the click away is to register and event on the document that will remove the element when anything other than it, or its children, are clicked.
For an example of a service that does this see GitHub EnzeyNet/Services
Sorry about the lack of documentation there but after injecting the service you would use it like this.
var divElem
nzService.registerClickAwayAction(function() {
divElem.remove();
}, divElem);
I simply solved it by using a ui bootstrap dropdown. This comes along with an is-open option and closes on click outside.
What is the process of adding a widget to a page dynamically? Essentially I have an "Add Widget" button on a view which is hooked up to a function addWidget() in the viewmodel. Basically, when someone hit's the button, I want to dynamically create an instance of a durandal widget and add it to the DOM. My code looks like this:
var addWidget = function () {
var parent = $('<div></div>')
.attr('data-bind', 'widget: { kind:\'myWidget\'}')
.appendTo($('#dashboardContent'))
.get(0);
return widget.create(parent, { id: 'Hello World' });
}
I can see in the browser developer tools that the widget HTML (view) is added to the DOM, but it's not rendering the widget, and activate is not being called on the widget.
What am I missing?
From the looks of it you are trying to use jQuery to add the widget to the DOM. Just thinking out loud the problems are that A: jQuery has no idea what activate is (that is handled by Durandal's router) and B: Nothing will get bound properly. If you are trying to add widgets, why not create an observableArray that contains widgets and just add them into there? That may sound a bit silly, and I am not sure the best way to approach it, but basically it could look like this
In your view model -
var myWidgets = observableArray();
myWidgets.push(someObjectsToComposeTheWidget);
And in your view -
<ul data-bind="foreach: myWidgets">
<li data-bind="widget: {kind:'yourWidget', items: somethingGoesHere, headerProperty:'name'}">/div>
<ul>
This will allow you to dynamically add and display the widgets without having to get messy and use jQuery to display things.
I'm new to Razor. I have my web pages complete but I'm at the point where I want to add a print button to my form.
I see where I can add a print button with Asp.Net here but I cannot find where I add it with Razor using MVC.
If there is a thread on this, point me in the right direction, but I didn't find one.
Am I to add a css and use javascript?
Anyone have any suggestions?
I used this answer:
Print ASP.NET Web Form
<input type="button" value="Print Form" onclick="window.print()" />
And it worked perfectly.
You can add any javascript event to any html-helper. For example to add Html-Attribute to Link.
#Html.ActionLink(
"print window",
"Print",
new { id = "someId" },
new { onclick = "window.print();" })