I'm using ui.bootstrap.modal with a templateUrl. Within my template HTML, I have a "div" element that serves as a container for a third-party component (SlickGrid). When initializing my third-party component, I specify it's containing element using a jQuery selector expression. However, the selector can't seem to find my container element when executed from either within the modal's controller or within my 'opened' promise logic as resolved by modal. I believe the problem is that my dialog HTML hasn't yet been added to the DOM and thus isn't visible to the controller or 'opened' promise. I should add that the dialog itself renders just fine; it's just that I can't reference its container element from ... any context? Perhaps modal doesn't support this use-case? Any thoughts/suggestions would be appreciated!
Thanks, Garry
If i'm not mistaken your question.
You can use bs.modal.shown in your modal shown event
$(your-modal).on("bs.modal.shown",function(){});
I had this problem while using bootstrap-table inside a ui.boostrap.modal - when I initialize my modal, the selector wasn't able to find the <table> element & so couldn't be initialized itself.
The answer was to use the rendered promise, rather than opened. rendered resolves once the template has been added to the DOM, allowing you to select elements defined in the template as you would normally.
Below is a sample of how my implementation was done:
My View
<div ng-controller="MyAngularController" ng-init="init()">
<!-- The actual page content goes here - irrelevant to the example -->
<script type="text/ng-template" id="myngtemplate.html">
<table id="mygrid">
<!-- My bootstrap-table column definitions here -->
</tabie>
</script>
</div>
My JavaScript
// the below was implemented in my page's AngularJS controller,
// left out the controller implementation to make the example more consise
var modal = $uibModal.open({
animation: true,
size: 'lg',
templateUrl: 'myngtemplate.html'
});
modal.rendered.then(function () {
// $('#mygrid') could not find the table element before this
$('#mygrid').bootstrapTable({
data: getModalData()
});
});
Related
Hi have a parent page in which i have used knockout js to bind model with html element.
Now i make a ajax call to receive a partialviewresult which i place it in a div conbtainer.
All works fine if use the inbuilt mvc model binding.
But when i go for knockout in my partial view as well. I get the errorcannot applybindings multiple times knockout in MVC partial view.
I have even tried using
ko.applybindings(new vm(),document.getelementbyId("div1"))
ko.applybindings(new vm1(),document.getelementbyId("div2"))
But still get the same error. Is it not possible to get the partial view result from the action method and use knockout in partial view ? I do not want hide the div in my parent page and get a JsonResult and bind it to my div element.
If you have the following (general layout):
<div id="parent">
content
<div id="partialTarget"></div>
</div>
and you've already applied your bindings to #parent, you have to clean #partialTarget before applying the viewmodel again. #partialTarget has already been bound from the first pass, so to apply the bindings to the loaded contents, you need to do something like this:
var reapplyBindings = function(element){
var vm = ko.dataFor(element);
if( vm ) {
ko.cleanNode(element);
ko.applyBindings(vm, element);
}
};
element.load(‘path/to/fragment.html’, function() {
//the [0] selector is needed to be sure we have an actual dom element, not the jQuery wrapper
reapplyBindings(element[0]);
//do whatever you’re already doing
});
I'm developing my first "complex" application on Dart and I'm finding some trouble on how to work with more than one view (I want to develop the application to run within a single page).
First of all, I'm assuming that this (using Polymer) is the right approach to work with various views (or "app screens") of the application. However, if it's not, I would like to know (of course). And by "app screens", I'm saying something like creating various forms in Java.
So, for instance, I have two buttons at the top of the page. When you click the first one, it shows a view with an user registration area. When you click the second button, it shows a view with an editable grid.
Could you give me some code example of this simple app?
You can use CSS style properties for a polymer element like you do for any native element.
You can query like this:
Element e = querySelector('my-form');
and then hide/display it:
e.style.display = 'none';
e.style.display = 'block';
After(!) you initialized polymer, you can use the element's class (if existent):
#CustomTag(...)
class MyForm ... {
...
}
MyForm e = querySelector('my-form') as MyForm;
Then you can go ahead and set attributes of your class (if you need it) or use the style property because the class inherits from HtmlElement.
You could also use classes for this. Dart comes with some "toggle" functionality:
element.classes.toggle('hidden');
element.classes.toggle('shown');
Regards, Robert
You could use the template if functionality.
This way views that are currently not active are automatically removed from the DOM and automatically inserted again when the model attribut changes.
<polymer-element name='app-element'>
<template>
<template if='{{appModel.view == 'view1'}}'>
<view1></view1>
</template>
<template if='{{appModel.view == 'view2'}}'>
<view2></view2>
</template>
</template>
<script ...>
</polymer-element>
I'm trying to convert my MVC app's _Layout page to use a knockout viewmodel instead of Razor syntax. So far, all of my content pages have syntax like the following to render javascript ViewModels (for Index view):
<script type="text/javascript">
$(document).ready(ko.applyBindings(new IndexVm(
#Html.Raw(JsonConvert.SerializeObject(Model, new JsonSerializerSettings() { ContractResolver = new CamelCasePropertyNamesContractResolver() })))));
</script>
This has been working great so far. Now, in my Layout, I tried to use the same approach with the following:
<script type="text/javascript">
$(document).ready(ko.applyBindings(new LayoutVm(
#Html.Raw(JsonConvert.SerializeObject(ViewBag, new JsonSerializerSettings() { ContractResolver = new CamelCasePropertyNamesContractResolver() })))));
</script>
If the content page doesn't have an inner viewmodel declaration, this works. But when I load up the Index page (with the first snippet), I get the following:
Uncaught Error: You cannot apply bindings multiple times to the same element.
I'm a bit stumped as to why this isn't working. Any help would be much appreciated!
You must understand that ASP.NET will accomplish certain tasks on the server before sending an HTML document to the browser. It will interpret the Razor statements as well as assemble the partial views, views and layout together into a single HTML document on the server.
Knockout is framework that works on the client (browser). If you apply bindings in your _Layout.cshtml and your Index.cshtml, you be applying bindings twice in the assembled HTML document. In Knockout, you can't apply bindings multiple times on the same HTML elements.
What you will need to do is add an id attribute with a meaningful value to certain HTML elements. Then, you will need to add a second parameter to your different ko.applyBindings which will be the element id.
Now you can always control the descending bindings yourself if you have a case where there are nested elements. You can specify a statement that will stop the binding of a parent element from going down the child elements. Find out more about this on http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html.
Well you can do this by simply providing placeholders in html:
<div id="index">
<!-- index page goes here -->
</div>
and
<div id="layout">
<!-- layout page goes here -->
</div>
Then you can apply view model as follows:
<script type="text/javascript">
$(document).ready(ko.applyBindings(new IndexVm(
#Html.Raw(JsonConvert.SerializeObject(Model, new JsonSerializerSettings() { ContractResolver = new CamelCasePropertyNamesContractResolver() }))), document.getElementById('index')));
</script>
and
<script type="text/javascript">
$(document).ready(ko.applyBindings(new LayoutVm(
#Html.Raw(JsonConvert.SerializeObject(ViewBag, new JsonSerializerSettings() { ContractResolver = new CamelCasePropertyNamesContractResolver() }))), document.getElementById('layout')));
</script>
ko.applyBindings can take two parameters, the first being your viewmodel, and the second being an optional root node for the binding context to be set. if no value is supplied, the root node default is window.document.body. if you call applyBindings twice without specifying different root nodes, then it will give you the error you are receiving.
keep in mind, that you do not want to overlap nodes that are being bound. if you need to call applyBindings twice for two separate viewmodels, you must specify different elements to bind to:
ko.applyBindings(new MenuVM(), document.getElementById('menu'));
ko.applyBindings(new ContentVM(), document.getElementById('sub-content'));
edit
based on rwisch45's comment, an option is to have a single viewmodel be bound to the entire page, and set child viewmodels inside the main viewmodel.
http://jsfiddle.net/TNR89/
Following is my view which contains a div in which partial views are rendered based on actions performed in the view.
//Boiler Plate HTML
<div id="PartialViewHolder">
#Html.Partial(Model.PartialView, Model)
</div>
//Boiler Plate HTML
The partial views are rendered via an ajax call which is as follows
//The url is supplied based on some actions in the main view
function AjaxCall(url){
$.ajax({
url: url,
cache: false,
success: function (html) {
$("#PartialViewHolder").empty();
$("#PartialViewHolder").html(html);
},
error: function (result) {
alert("Error: " + result.status + ": " + result.statusText);
}
});
}
The main page also loads a few other scripts which are common to the partial views. These scripts work when the page is first rendered, i.e when the default partial view is rendered. However these scripts stop working for partial views which are loaded by the ajax call. I believe that these scripts need to be reloaded when the DOM elements change. I am looking for a clean way to reload those scripts when the partial view div is reloaded.
You need to do a bit of reading about Event binding. http://api.jquery.com/on/
Tricky to understand at first but worth it once you do.
Assuming you've got some code like this.
<div class="container">
<div class="partial">
Click here to do stuff
</div>
</div>
JS Code like the example below will only work for objects present when you do the binding (usually document.ready()) It seems like this is the situation you are describing.
$(".magic-link").click(function(){
alert("Magic link clicked");
return false;
})
If you want the event to fire on objects that haven't yet been loaded onto the page then you need to bind an event handler to the container div i.e. the bit which doesn't change.
Like this
$(".container").on("click", ".magic-link", function(){
alert("Magic link clicked");
return false;
});
The event bubbles up to the event handler and fires the event. This has another advantage that one event handler and potentially handle events from hundreds of objects.
As a guideline try to bind the listener to the nearest parent object that will not change. In the case of the example this is the Container div. This keeps the bubbling to a minimum.
I have a view, say show.js.erb. And I have a link in another view such that
link_to "MyLink", my_object_path, :remote => true
successfully returns the show.js.erb view. My question is, from within that view, is there any way to access the element that triggered the AJAX call without having to resort to generating an id specific to individual elements a la ...
I want to be able to use this view callback to open a small dialog next to whatever element was clicked on, but I can't seem to find a way to access the triggering element.
I tried using $(this) but that doesn't work.
I'd like to do something along the lines of
$(this).after("some new html here");
My solution was to bind a pre-submit class to the element, in my case a popup modal window. It's a similar solution to the post linked to above in that it uses the pre-submit bindings, but tailored to use classes instead.
In public/javascripts/application.rb:
jQuery(function($) {
$(".poppable").bind("ajax:loading", function() { $(this).addClass("popped"); });
});
Then in my view for the popup content (e.g. app/views/mymodel/popup.js.erb):
var p = $(".poppable.popped");
p.removeClass("popped");
/* Do what I need to with p ... */
If this doesn't look kosher, I'm all ears but it works for now.