Menu
I am trying to set focus on element which was generated using ajax .load method.
DesignHome.aspx
<!-- All Jquery Scripts Go Here -->
<script src="../../Scripts/angular.min.js?v=7" type="text/javascript"></script>
<script type="text/javascript">
var app = angular.module("module", []);
</script>
<script src="../../Scripts/DataFactory/DataFactory.js?v=7" type="text/javascript"></script>
<script src="../../Scripts/Controller/RegistrationController.js?v=7" type="text/javascript"></script>
<div id="divPopupRegistration" class="RegistrationPopup hide" style="overflow: hidden;
z-index: 999" ng-app="module">
<div id="divFullRegistration" class="Full hide">
</div>
</div>
<script type="text/javascript">
function partialRegistrationForm() {
$('#divFullRegistration').load('../RegistrationPages/PartialRegistration.htm', function (data) {
$('input[name=firstname]').focus();
});
}
</script>
PartialRegistration.htm
<!-- Again i have to load this, if i wont then it will not work. Reason unknown -->
<script type="text/javascript" src="../../Scripts/angular.min.js?v=7.0.0"></script>
<body ng-cloak>
<div ng-controller="partialcontroller" id="parentDiv" ng-init="init()">
<div class="registrationBg" runat="server" id="PartialRegistration">
<div class="regcontent">
<ul class="bxslider">
<li id="liContact">
<form name="formContactInfoPartial" novalidate>
<div class="popupContent" id="ContactInfo">
<div class="left column1">
<div class="lable">
First Name<span>*</span></div>
<input type="text" class="textbox shareinput" ng-model="UserDetails.firstName" name="firstname"
onkeypress="return isAlphabet(event);" ng-required="true" tabindex="0" maxlength="20"
ng-class="{'has-error': submitted && formContactInfoPartial.firstname.$invalid}" />
</div>
<!-- Then all remaining markup and closing tags -->
<script>
// My focus code breaks here !
</script>
Error what i am getting
Uncaught RangeError: Maximum call stack size exceeded
What i tried as alternate
$('input[name="firstname"]').on("focus", function () { });
AND
setTimeout(function () { $('input[name="firstname"]').focus(); }, 500);
But it doesnt work for me.
329
@Shaggy Why are you using an Ajax to obtain the template? If you
inject HTML manually without using Angular you are risking the cycles
of $apply and $digest correctly and the data bind.
Using AngularJS what you should do is:
Use ng-include to add the template whenever you need it to.(Also would work using ng-transclude)
Create a attribute directive to receive focus
In this example the template is added when you press the button
<div id="divFullRegistration" ng-include="partialTemplate" class="Full hide"></div>
And add a get-focus directive on your template
<input get-focus="true"/>
I hope this helps you. If you want to do it using ng-transclude or directives let us know.
Regards
68
give you'r input and form id, and run this code
$('#formId').find('#inputId').focus();
answered Dec 15 '25 08:12
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With