CODEWITHSUNDEEP
jqueryajaxangularjs
Shaggy
Shaggy

Reputation: 5830

jquery focus does not work in ajax loaded content

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.

Upvotes: 3

Views: 3378

Answers (6)

Saty
Saty

Reputation: 22532

you can set focus by using html5 too

<input type="text" class="textbox shareinput" ng-model="UserDetails.firstName" name="firstname" autofocus>

Upvotes: 0

Ebrahim Golkhani
Ebrahim Golkhani

Reputation: 71

give you'r input and form id, and run this code

$('#formId').find('#inputId').focus();

Upvotes: 2

cfv1000
cfv1000

Reputation: 463

Try this

$(function(){
  $('#target').load('load.html', function(){
    $('input[name="name"]', $('#target')).focus();
  });
})

http://plnkr.co/edit/6zaymsYyIHtOs6LxZRw2

Upvotes: 0

websky
websky

Reputation: 3172

$( document ).ready(function() {
    $('input[name=firstname]').focus();
});

full example

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$( document ).ready(function() {
    $('input[name=firstname]').focus();
});
</script>
</head>
<body>
<input type="text" name="firstname" />
</body>
</html>

https://api.jquery.com/focus/

Upvotes: 0

Mairaj Ahmad
Mairaj Ahmad

Reputation: 14624

Give your input an id and than try this

<input type="text" class="textbox shareinput" id="firstName" / >
$('input[id$=firstName]').foucs();

This should work.

Upvotes: 0

Matias Fernandez Martinez
Matias Fernandez Martinez

Reputation: 1885

  • @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

Upvotes: 3

Related Questions