i have a existing controller and template:
<div id="outputTableforApp" ng-controller="OutputTableModelCtrl">
<div id ="outputtablemodel_panel" ng-show="editMode">
</div>
</div>
it works perfectly. But now i need to delete the template from the project (which has a fix place in the DOM) and somehow make it appear dynamically when man a button click.
when i tried that with jQuery
$('<div id="outputTableforApp" ng-controller="OutputTableModelCtrl"><div id ="outputtablemodel_panel" ng-show="editMode">\n\
</div></div>').appendTo($('#div1'));
My Angular module didn't work at all. So i guess i need to register the module somehow again every time when someone presses the button, is that the case ? if so ,how could i do it ?
You can use ng-show so do this:
<div id="outputTableforApp" ng-controller="OutputTableModelCtrl" ng-show="showApp">
and when the button is clicked call a function (using ng-click) in your controller script that makes it that showApp is true(make sure you use $scope.showApp in the function).
Related
Working on one project and find this interesting attribute [data-contenturl] and did not find any information about it.
The main sense of this code is that the action of the controller returns a partial view. This link is part of the tabs widget and should insert content from a partial view to the #tab-body-id element. This partial view contains jquery widget with initializing spec and data-bind. The main issue is that on first load everything works great but on the second and subsequent old jquery objects try to send request to data-bind request but the element is one that`s why causes errors in console. I tried to destroy these elements, unbind them, insert empty content to #tab-body-id before the second tab load but nothing helps.
Could someone please explain how this attribute works? I could forget about something. I`ll be glad for any ideas!
<a href="#tab-body-id" data-toggle="tab" data-contenturl="#Url.Action("actionName", "controllerName",
new{ argument })">
And one more moment as additional information.
When i remove this attribute from and insert code
<div id="tab-body-id">
#{ Html.RenderPartial("route to my partial", Model.Id); }
</div>
directly to my #tab-body-id all works fine, becouse it is only one request during initialization of view...
I am very new to this and I'm having challenges with the way I type out my code.
Currently on my page there is the following button:
<a ng-if="vm.cart.canRequestQuote" href="/Rfq" class="btn primary btn-request-quote tst_cartPage_submitQuote" ng-bind="vm.cart.isSalesperson ? 'Create a Quote' : 'Request a Quote'" ng-disabled="vm.cart.isAwaitingApproval">Request a Quote</a>
I am trying to hide/show this button (using JavaScript) based on whether or not the following is loaded on the page:
<div ng-if="product.quoteRequired" class="quote-required">
Please help. I've tried a number of different scripts but I think because the button is a child of the div.tst_cartPage_buttons that I'm not typing the element out properly in JavaScript
Thank you for any guidance you can give.
you can use a jquery framework (https://jquery.com/) and type:
if ($('#idOfElementToSearch')!=null) $('#elementToHide').hide()
the $ function is useful for easily finding the elements because it uses the css selectors
$('.btn .primary .btn-request-quote .tst_cartPage_submitQuote').hide()
hide all element that have this 4 class
or if you don't want use a framework you can use Document.getElementById() or getelementbyclass instead of $ function, but is more harder
Maybe you should try hidding the button with the same condition being used on your second element.
Something like:
<a ng-if="product.quoteRequired" href="/Rfq" class="btn primary btn-request-quote tst_cartPage_submitQuote" ng-bind="vm.cart.isSalesperson ? 'Create a Quote' : 'Request a Quote'" ng-disabled="vm.cart.isAwaitingApproval">Request a Quote</a>
Also, you are using AngularJS instead of Angular 2+. I would recommend moving into Angular 2+ (currently at 8 version) to get the best of type support with Typescript.
I have a template which is nested inside another template which I want to load when i click on a button.
So the nested template is loaded dynamically. This is what I have done so far.
This is the main body.html (this loads when a url is provided in the browser e.g. http://url#/newtemplate)
<div ui-view> </div>
Other section of the code has been removed for brevity
This is the new_template.html which I expects it to show when I click a button.
When I put a template name directly like below i.e. when I hard code it
<div ui-view="number1"></div>
It loads the template fully.
This is the dynamic model
<button ng-model="template_name" ng-value="number1">Button1</button>
<div ui-view="{{template_name}}"></div>
{{template_name}}
The above does not load the template as I expected. but it shows the string number1 when
the button is clicked
What can I do for it to load the template....
This is my controller
.state('parent',{
url: '/newtemplate',
views:{
'':{
templateUrl: "parent.tpl",
contoller:"controller",
},
'number1#parent':{
templateUrl:"number1.tpl",
contoller:"formcontroller"
},
'number2#parent':{
templateUrl:"number2.tpl",
contoller:"formcontroller"
},
'number3#parent':{
templateUrl:"number3.tpl",
contoller:"formcontroller"
}
}
})
Strange enough when I used the dot notation it did not work so I have to use the absolute naming method.
I also noticed that when I added the nested views as shown above the time it takes before the template gets loaded take a very long time.
Please I would appreciate any help which can allow me to load a nested view at runtime (possibly very fast)
Expecting more answer
I still hope that the I can make use of ui-view/ui-router because of the ability to make use of controller.
I'm not sure you can use uiView to load html dynamically.
I would try another possible solutions:
Use directives
Using ngInclude
I'll leave you an example with ngInclude: https://next.plnkr.co/edit/M5hl71mXdAGth2TE?open=lib%2Fscript.js&deferRun=1&preview
I have a JSP page with 6 custom widgets in a TabContainer. The code looks something like this:
<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region: 'center', gutters:false">
<div data-dojo-type="dijit/layout/ContentPane" title="<b>Registries</b>">
<div data-dojo-type="my/custom/Widget"></div>
</div>
...(5 more ContentPanes like this)
</div>
When the page loads, each tab loads each widget and it's pretty slow. Most of the time, I only need to access one of those tabs and don't care about the others, so I decided I want to load this content dynamically.
When the href property is specified for a Dojo ContentPane, that content will not be loaded or parsed until that tab is selected. The only problem is, that means I would have to create 6 new .html files that have nothing besides in them. It's like a declarative way to programmatically load widgets... kind of weird.
Is there a way I can simply tell the ContentPane I just want it to dynamically load my custom widget instead of having to create html markup? Currently, I created a Spring controller method that accepts a String with a "widget" property and returns a string that is a div with the data-dojo-type set to the widget name, which is a programmatic way define declarative markup to be loaded programatically... it just keeps getting weirder! So now all of my content panes look like this:
<div data-dojo-type="dijit/layout/ContentPane" title="<b>Registries</b>" data-dojo-props='href:"rest/dynamicWidgetHtml/my.custom.Widget/"'></div>
Where "my.custom.Widget" is a spring controller path variable.
Any way to simplify this and eliminate the need for calling the server to build the div so the widget can be dynamically loaded when the tab is selected?
Would like to know how familiar are you with JavaScript and Dojo widgets.?
I have tried to answer the questions with some assumptions.
1) Assuming that data-dojo-type="my/custom/Widget" is a custom dojo widget i.e dojo widget contained in a javascript file.
2) You are able to attach a function to the onShow event of the ContentPane as shown below.
First is you need to attach a function to the contentPane "onShow" event. say myFirstTabContentPaneShowAction()
and specify a element tag with a unique ID. I have used widget1 as an example below. The onShow event will be fired when you select the tab.
<div dojoType="dijit.layout.ContentPane" onShow="myFirstTabContentPaneShowAction()">
<div id="widget1" ></div>
</div>
The myFirstTabContentPaneShowAction() will be as follows.
function myFirstTabContentPaneShowAction() {
require ( ["dojo/parser", "dojo/dom", "my/custom/Widget"] , function ( parser, dom) {
widgetHandle = parser.instantiate([dom.byId("widget1")], {data-dojo-type: "my.custom.Widget"});
});
Hope it helps.
I have the next code to replace content using Backbone.js
jsfiddle
I don't know why the checkbox button grows when the content is replaced.
Simply, I use the next code to checkbox
$('.checkWeek').button();
I think the reason is because you keep calling the $('.checkWeek').button(); on every click so JQuery does something funny and adds a span within a span which causes the size to grow.
A simple fix is to not call the $('.checkWeek').button(); if the button already exists (or shown)
// if button already exists then dont add it again.
if(!$('label[for=checkWeekM]').hasClass('ui-button'))
$('.checkWeek').button();
Look here: http://jsfiddle.net/Thxtr/3/
At the moment code stores the templates in div tags - every time you call button the template is modified. You can avoid that by using a script tag with type text/template so that it won't be executed as Javascript.
Rigth now:
<div data-template-name="central-home">
<div data-template-name="">
<input type="checkbox" class="checkWeek" id="checkWeekM" />
<label for="checkWeekM">L</label>
</div>
</div>
Change to:
<script data-template-name="central-home">
<div data-template-name="">
<input type="checkbox" class="checkWeek" id="checkWeekM" /><label for="checkWeekM">L</label>
</div>
</script>
With the Javascript unchanged the template will not be found. So you also have to update this line:
content.view = ...$.trim($("[data-template-name='"+ template_name +"'] div").html()...
With the requirement for the template to be inside a div removed:
content.view = ...$.trim($("[data-template-name='"+ template_name +"']").html() ...
Working fiddle
I'm guessing that $('.checkWeek').button() only needs to be called once per .checkweek element, or maybe just once in total.
If so then possible workarounds would be :
to execute $('.checkWeek').button() conditionally (though I'm not sure what the test might be).
to make the $('.checkWeek') selector more selective, ie select only the freshly added element.
if a destroy option exists, to call $('.checkWeek').button('destroy').button() (or similar - you will have to search through the plugin's API documentation).
Without a more complete understanding of the app (and the plugins), I can't tell which of these possibilities is most appropriate.