How can i call a method inside the angular component when i change the drop down in the partial view.
I have a Partial view with a drop down control and an angular component in my mvc page. When i change my drop down in the partial view(created using razor engine), i need to trigger a method inside the angular component.
I found a workaround.
Add a input on the angular component html
<input type="hidden" id="selDate"/>
attach an onChange event in the corresponding .ts file
$(function () {
$('#selDate').on('change', function () {
var dt = $('#selDate').val();
self.getIRData(dt);
});
});
set the value of the above control from the partial view(dropdown change event) and simulate an onChange event by adding Dispatchevent()
please let me know if you have any better workarounds
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
});
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'm trying to dynamically add checkbox and label elements to the document. Checkbox element has Knockout's data-bind attribute to bind its value to an observable value in the ViewModel. However when I try to style the checkboxes with jQuery Mobile by executing
$('input[type="checkbox"]').checkboxradio();
data-bind attributes will be removed. If I leave out the above line, data-bind attributes are properly set and the binding works.
Is there a way to have both jQuery Mobile styling and Knockout bindings at the same time?
I'm using jQuery Mobile RC1 and Knockout 1.2.1.
I have also encountered this problem. Unfortunately, all the suggestions here either did not work for me or had other issues. So I have created a simple custom binding that works in all versions of KO (including the latest v3):
ko.bindingHandlers.jqmChecked = {
init: ko.bindingHandlers.checked.init,
update: function (element, valueAccessor) {
//KO v3 and previous versions of KO handle this differently
//KO v3 does not use 'update' for 'checked' binding
if (ko.bindingHandlers.checked.update)
ko.bindingHandlers.checked.update.apply(this, arguments); //for KO < v3, delegate the call
else
ko.utils.unwrapObservable(valueAccessor()); //for KO v3, force a subscription to get further updates
if ($(element).data("mobile-checkboxradio")) //calling 'refresh' only if already enhanced by JQM
$(element).checkboxradio('refresh');
}
};
Should be used like this:
<input type="checkbox" data-bind="jqmChecked: someValue" id="checkbox1"/>
See a complete working example here:
http://jsfiddle.net/srgstm/ub6sq/
See: https://gist.github.com/1006808
Then you can do something like the following:
var $checkbox = $('input[type="checkbox"]');
$checkbox.checkboxradio();
$checkbox.dataBind({
your options..
});
Hope this'll help!
There is a problem with using knockouts default checked binding with styled objects like jQuery mobile does. It has the same issues that jQueryUi's Button/Buttonset functions. There is a label over the checkbox that indicates what is happening and it doesn't get updated properly via standard knockout checked binding.
It is discussed at http://therunningprogrammer.blogspot.com/2011/10/how-to-use-jquery-uis-button-with.html.
To use knockout directly with these styled objects from jQuery Mobile, the demonstrated code will have to be modified to handle the different DOM context. I'll post an update to the code when I can get some free time to do it.
EDIT
In Google Groups - Knockout, luv2hike posted a solution. You can see it working at http://jsfiddle.net/luv2hike/nrJBC/. Looks like a working fix for your problem.
I created a simple binding that works with jQuery Mobile 1.2.0 and Knockout 2.2.1 and works with default jQuery mobile checkboxes. This binding has no dependency on custom icons or JQuery Mobile's CSS styles. It also allows the use of regular checkbox markup in your HTML (<input type="checkbox" ... />) as opposed to using an alternate markup element like a div.
Here's the fiddle: http://jsfiddle.net/thedude458/52baX/
Note: Presently, the example only supports a single checkbox, not a list, as that is all I currently have a need for. It also assumes that the bound property is an observable.
Here is my heavily commented code on a custom handler I built for jQueryMobile checkboxes:
ko.bindingHandlers.checkbox = {
init: function(element, valueAccessor) {
// set the dom element to a checkbox and initialize it (for jquerymobile)
var checkbox = $(element);
checkbox.checkboxradio();
checkbox.attr('type', 'checkbox');
// register change event to update the model on changes to the dom
ko.utils.registerEventHandler(element, "change", function() {
valueAccessor()(
// off because it is before the ui has refreshed
$(this).siblings('label.ui-checkbox-off').length > 0
);
});
},
update: function(element, valueAccessor) {
// update the checked binding, i.e., check or uncheck the checkbox
ko.bindingHandlers.checked.update(element, valueAccessor)
// and refresh the element (for jquerymobile)
var checkbox = $(element);
checkbox.checkboxradio('refresh')
}
};
can anyone please help me about how to invoke a post method on changing the drop down list selection?
I have Index method in my controller which takes me to index page. There i have placed a dropdown list using Html.Dropdown containing items like 1,2,3,etc.
I want to call post method for Index whenever i makes any selection from the dropdown.
regards,
kapil
You can do this using JQuery
<select id="idXYZ" name="XYZ" onchange="SetUnit(this.value)">
<%= ViewData["YourValue"]%>
</select>
Now use JQuery
<script type="text/javascript">
function SetUnit(unit) {
$.post("/Admin/YourMethod?itemid=" + unit.toString(), function(data) {
var data = eval('(' + data + ')');
$("#idunit").html(data.Value);
});
}
</script>
Are you using JQuery? You could use $.post to post your data in the onchange event... I think in the web forms way it was using a _doPostBack call in the onchange event if you set AutoPostBack to true... not 100% sure about that.
HTH
I'm trying to create a dialog box in my ASP.NET application with an AJAX ActionLink.
The Ajax ActionLink inserts a partial view into a div in the current view.
I've called a function OnComplete (and I've tried OnSuccess, too) that calls the dialog function for JQuery UI, like so:
function() loaddialog {
$("ContainerwithInsertedPartialView").dialog();
}
Nevertheless, it display the dialog. Any ideas as to what I'm doing wrong?
You have your function definition wrong, for one. You need to use the id selector (prepend a hash) for another.
function loaddialog() {
$('#ContainerwithInsertedPartialView').dialog();
}