Develop Reference

Is there an event in an MVC 5 View or jquery raised when a partial view has been loaded and its elements are accessible

I have an MVC 5 view that acts as a parent view. Based on certain activities a user performs, I will load a partial view into the parent view. The partial view is loaded as part of a javascript function call. In my javascript call, I am loading my partial view with the content returned in the "data" variable below:
$.get(url, function (data) {
$('#id-ContainerForMainFormPartialView').html(data);
});
The data is written to an HTML div as follows:
<div class="container" id="id-ContainerForMainFormPartialView">
</div>
Immediately after the $.get call I run the following statement to disable a button that is part of the view that has been returned and written to the div:
$('#idAddLineItem').prop("disabled", true);
When the javascript function has completed the button is not disabled. Yet, I am able to disable the button using the same disable statement above using a button. I think that after the $.get invocation has written the partial view it is too soon to try and do something to any elements that are part of the partial view.
Is there an event I can hook into or something that will signal me when the time is right to try and do something to any of the elements of the partial view that has been loaded such as disabling a button which is what I am trying to do? Something like the javascript addEventListener() method that allows you to run code when certain events happen but in this case I need it to fire after a partial-view load is considered completely rendered and ready to use. An example would be greatly appreciated.
Thanks in advance.

Based on blex's statement the solution is as follows:
The correct way to disable a button that's part of a partial view being output:
// Correct Approach
$.get(url, function (data) {
$('#id-ContainerForMainFormPartialView').html(data);
$('#idAddLineItem').prop("disabled", true);
});
The incorrect way to disable a button that's part of a partial view being output:
//Incorrect Approach
$.get(url, function (data) {
$('#id-ContainerForMainFormPartialView').html(data);
});
$('#idAddLineItem').prop("disabled", true);
I originally had the disable statement outside the $.get call which allowed the code to run past it before the view was ready due to the asynchronous nature. Placing it inside the $.get allows it to not run until the partial view is done being output.

How to check if angular spinner is active

I am working on angularJS web application. I have a modal popup on which I show spinner while loading screen. Now there is need to identify if spinner is active (by using it's name) in html template. Can anybody please let me know how can achieve this in angular. I google for answer but no success yet.
Please help..!!

How you are showing the spinner, must be a image inside a div and setting it's display to block i suppose.
so you can use ng-show="isLoading"
and set $scope.isLoading = true when you open the pop-up and so this will make the spinner display and inside your service ( http) call on success handler you can reset it to - $scope.isLoading = false so that it hides the spinner.
is that what you looking for?

Here is the basic logic:
In your controller initialize a $scope variable as so:
$scope.showSpinner = false;
Then inside the relevant js function, that executes on modal open, run this:
$scope.showSpinner = true;
You should also have a spinner in your view html which displays the spinner when rendered, for example:
<div id="spinner" ng-if="showSpinner"> </div>
If you need more info please post your code..

Updating HTML title after AJAX page load

When I load new pages via AJAX I need to of course update the HTML title to match the new page. The code below is something I have used successfully in past projects but for some reason it's not working here.
ajaxLoad = function(html) {
init();
// init google map
initMap();
// change html title
var HTMLtitle = $(".content > section:first-of-type").attr("data-title");
$(document).prop('title', HTMLtitle);
document.title = HTMLtitle;
// Used for popState event (back/forward browser buttons)
changedPage = true;
}
This is just a part of the javascript and you can view the rest in context if needed on the live site.
Live site: http://dma.nz/practice/
Click the top right links in the main nav to go to other pages. In my testing the title seems to update sometimes on the first page change but then never works on subsequent page changes. Most times it doesn't work at all and the title never updates. All of those top level pages have the proper HTML title defined in the data attribute, but some part of the function is failing and not updating the title and I cannot find where it's borked.
Can anyone please offer help on what I'm doing wrong or propose a better way to update the title on each AJAX page load?

As you're aware of the javascript error in initMap function
Uncaught TypeError: Cannot read property 'firstChild' of null
That exception breaks all your javascript below that line. Just fix it and your code will work, just like your main page: http://dma.nz/practice/

AngularJS execute code when changing pages that use same controller

I have a PhoneGap app, that has multiple html pages.
I use one controller, called AppController, that loads the data for the startup screen and default pages.
I added a new page to the navigation bar, which, when clicked & opened should load up data from the server with a php call, so it should only make a php call, when the page is shown.
This page uses the same controller as the rest of the app.
I am really new to AngularJS, so I might've programmed it in a bad way, but the rest of the data for the home page is loaded in the appController like this
myApp.controller('AppController', function ($scope, $timeout, sharedProperties) {
$scope.items= {};
$scope.items[item1] = {....} //LOADING UP the items collection
}
How can I hook up an "onload" event or something, that would only fire when the page is shown?

There are so many ways you could do that, one of them:
// inside your controller
angular.element(document).ready(function () {
// your code
});
another one:
<div ng-controller="myCtrl" ng-init="someinitfunc()"></div>

How about using ng-init() directive on your next page ?

Run Code When a Partial View is Shown

First, I'm sure I'm missing a best-practice way to navigate to and load partial views. So, if I'm going about this all the wrong way, please let me know. I have a feeling I'm making this more difficult than it needs to be.
What I'm trying to accomplish is having my web site behave like a single page app. In order to do that, I have many partial views within divs. I hide all divs but the active one. I'm not sure how to run code in a partial view only when it is shown.
Here is the div and partial view that I'm concerned with in this scenario (this is in Index.cshtml):
<div id="app">
#Html.Partial("~/Views/PartialViews/App.cshtml")
</div>
And this is the JavaScript that shows that partial view (also in Index.cshtml):
function showApp(id) {
hideAll();
$('#txtAppId').val(id); // This is how I'm passing data to the partial view
$('#app').show();
}
This works well (at least as far as showing the partial view), but how can I get code in App.cshtml to run only when it is shown like this?
In App.cshtml (the partial view):
<script>
$(function() {
// Note: This will execute as soon as the main page is loaded. I don't want
// code to execute right away, but only when this view is shown.
});
function doSomething() {
// Only when this view is shown do I want code to execute here.
}
</script>
How can I have doSomething() run when the partial view is shown?

Invoke the function after you show the partial view, in index.cshtml
function showApp(id) {
hideAll();
$('#txtAppId').val(id); // This is how I'm passing data to the partial view
$('#app').show();
doSomething(); //Here invoke it.
}
You cannot directly detect when an element changes its visibility and run some script, here you have the control of when it becomes visible so invoke the method once you make it visible.