2

I used a knockout datePicker as mentioned below

<input type="text" data-bind="datepickertext:[], value:[], disable:$root.Isdisable" id="date" class="col-xs-11">

datepicker pops the callender for first load and icon click. After the ajax call the calender is not poped out on icon click.

The ajax call is

self.Save = function(VAL, eventType) { if (data == true) { if (value == 'Submit') { $.ajax({ url: renderurlpath, contentType: 'application/json; charset=utf-8', cache: false, type: 'GET', success: function(result) { $('#divContentPlaceHolder').innerHTML = ''; $('#divContentPlaceHolder').html(result); debugger $('#image_loading').modal('hide'); }, error: function(xhr, status, error) { $('#image_loading').modal('hide'); alert("AJAX Error!"); } }); }

The partial View i am loading into #divContentPlaceHolder is

<fieldset id="fieldset" style="clear:both;display:none"> <div id="CollapseReason" class="panel-collapse collapse in" data-bind="with:$root.PQCCDA"> <div class="panel-body" style=" background: #F7F7F7; border: solid 1px #ccc;" data-bind="with:$data.PQCCDAROV"> <!---new code--> <div class="col-xs-6 no-padding"> <div class="col-xs-12 pq-txt">Reason </div> <div class="col-xs-12"> <textarea placeholder="Reason for " class="col-xs-12" data-bind="value:$data.ReasonforVisit" rows="4" cols="50"></textarea> </div> </div> <div class="col-xs-6 sub-title-pq"> <div class="col-xs-12 pq-txt">date </div> <input type="text" data-bind="datepickertext:[], value:[], disable:$root.Isdisable" id="date" class="col-xs-11"> <!---new code--> <div class="vspace10 col-xs-12">&nbsp;</div> </div> </div> </fieldset> <script src="~/js/knockout-3.2.0.js"></script> <script src="~/js/knockout-jquery-ui-binding.js"></script> <script src="~/Scripts/PortalScripts/jquery-ui.js"></script> <script src="~/Scripts/PortalScripts/PQCCDA.js"></script>

the html code of #divContentPlaceHolder is

@Scripts.Render("~/bundles/jquery") <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> @Scripts.Render("~/bundles/jqueryval") @Scripts.Render("~/bundles/bootstrap") <div id="divContentPlaceHolder" class="col-sm-12 no-padding"> </div>

thanks in advance

Improve this question
7
  • No Knockout call, not Ajax call, where is the rest of your code? Commented Oct 27, 2015 at 6:04
  • Please check out the edited Question @BrianOgden Commented Oct 27, 2015 at 6:10
  • And the HTML need to see #divContentPlaceHolder, I suggest adding a code snippet if you can, you can include your knockoutjs library,jQuery etc Commented Oct 27, 2015 at 6:15
  • Thanks for the reply, i am Actually loading the partial view into the #divContentPlaceHolder. i placed the scripts in the partial view it self. @BrianOgden Commented Oct 27, 2015 at 6:18
  • Is the <input type="text"...datapicker a child of #divContentPlaceHolder? Commented Oct 27, 2015 at 6:23

2 Answers 2

Reset to default
1

So the are multiple things wrong here. First off, you are loading Javascript files from your Parital, this could cause multiple strange executions of Javascript, overwritten Javascript variables already active in the DOM and who knows what else. It doesn't matter because your doing it wrong.

You script scripts like ~/js/knockout-3.2.0.js should be in your _Layout.cshtml or the View.cshtml that you load your partial into or part of you script bundles, and bundles should be in _Layout.cshtml but they can be in the View if that is the only place you are going to use them but all the bundles you displayed in your code should probably be in _Layout.cshtml. You are not being efficient or getting faster page load times in most of the worlds' internet bandwidth trying to load these Javascript files on the fly, as needed basis via the Partial view if that is your thinking.

This alone you HAVE to change and never do again, never load Javascript libs from a partial, Ajax loaded into the DOM, or @HTML.Partial ASP.NET rendered. And that will still not fix your problem.

Somewhere you are calling ko.applybindings. That is on content on the page that is loaded. You have to call ko.applybindings again and you can use the jQuery Ajax promise returned via chaining to do it:

 $.ajax({ url: renderurlpath, contentType: 'application/json; charset=utf-8', cache: false, type: 'GET', success: function(result) { $('#divContentPlaceHolder').innerHTML = ''; $('#divContentPlaceHolder').html(result); debugger $('#image_loading').modal('hide'); }, error: function(xhr, status, error) { $('#image_loading').modal('hide'); alert("AJAX Error!"); } }) .then(function () { ko.applyBindings(AppViewModel, document.getElementById("divContentPlaceHolder")); });

In addition, any bundles you are loading in a View.cshtml, should be in a @section scripts{} in your View.cshtml and then right above your </body tag in your _Layout.cshtml you should have a @Section.Render("scripts") defined. This way your code is cleaner, your Javascript files load last as they should, the only Caveat here is sometimes your jQuery lib needs to be in your <head></head> because over time you just start using jQuery so quickly on page load and its not available yet because it's right above the </body> element. This is just a caveat and happens with some more complex web applications.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks Brian Ogden according the information provided i found the script which is overridden in the partial view and i made a bundle of it and referenced in layout rather than using single reference in partial view detailed answer is posted
0

As according to Brian Ogden Post i had made these Changes in the partial view

<fieldset id="fieldset" style="clear:both;display:none"> <div id="CollapseReason" class="panel-collapse collapse in" data-bind="with:$root.PQCCDA"> <div class="panel-body" style=" background: #F7F7F7; border: solid 1px #ccc;" data-bind="with:$data.PQCCDAROV"> <!---new code--> <div class="col-xs-6 no-padding"> <div class="col-xs-12 pq-txt">Reason </div> <div class="col-xs-12"> <textarea placeholder="Reason for " class="col-xs-12" data-bind="value:$data.ReasonforVisit" rows="4" cols="50"></textarea> </div> </div> <div class="col-xs-6 sub-title-pq"> <div class="col-xs-12 pq-txt">date </div> <input type="text" data-bind="datepickertext:[], value:[], disable:$root.Isdisable" id="date" class="col-xs-11"> <!---new code--> <div class="vspace10 col-xs-12">&nbsp;</div> </div> </div> </fieldset> @* <script src="~/js/knockout-3.2.0.js"></script> <script src="~/js/knockout-jquery-ui-binding.js"></script> <script src="~/Scripts/PortalScripts/jquery-ui.js"></script> *Commented Scripts In partial View* *@ <script src="~/Scripts/PortalScripts/PQCCDA.js"></script>

In BundleConfig.cs

public class BundleConfig { // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862 public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jqueryuiknock").Include( "~/Scripts/PortalScripts/jquery-ui.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.validate*")); bundles.Add(new ScriptBundle("~/bundles/Knockout").Include( "~/js/knockout-3.2.0.js", "~/js/knockout-jquery-ui-binding.js")); } }

And In layout I rendered the scripts which declared in BundleConfig.cs

@Scripts.Render("~/bundles/jqueryval") @Scripts.Render("~/bundles/bootstrap") *@Scripts.Render("~/bundles/jqueryuiknock") <div id="divContentPlaceHolder" class="col-sm-12 no-padding"> </div>
Improve this answer

2 Comments

Did you not need to call ko.applyBindings again?
ya I called ko.applyBindings for only once @BrianOgden

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.