How to add focus to the input contained in the div from which a class have been removed using jQuery

Question

The code given below is a jQuery function which loads a bootstrap modal triggered by onclick event. This modal has an option of Add Category which on click shows an input field that was kept hidden previously. The problem is that I want to focus the input which appears after the click.

// code to show through on click
window.getModalForm_3=function(context){
  $('#ajaxModal').remove();
  var defaults = {
    title: 'Edit',
    action: '',
    helpText:'',
    icon: '',
    placeholder: '',
    name:'', name2:'', name3:'', name4:'', name5:'', name6:'', name7:'',
    value: '', value2: '', value3: '', value4: '', value5: '', value6: '', value7: '',
  };
  var context = $.extend(defaults, context);

  var modal = '<div class="modal fade" id="ajaxModal" tabindex="-1" role="dialog" aria-labelledby="ajaxModalLabel">';
      modal += '<div class="modal-dialog" role="document">';
      modal += '<div class="modal-content">';
      modal += '<div class="modal-header">';
      modal += '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
      modal += '<h4 class="modal-title color-dark">'+ context.title +'</h4>';
      modal += '</div>';
      modal += '<form class="form-horizontal clearfix" action="'+ context.action +'" method="post">';
      modal += '<input type="hidden" name="_method" value="PUT">';
      modal += '<div class="modal-body">';
      modal += '<div class="col-full p-l-20 p-t-5 p-r-20 p-b-20">';
      modal += '<div class="col-full p-b-10">'+ context.helpText +'</div>';

      modal += '<div class="p-t-20 strong">Primary category</div>';

      modal += '<div class="col-full">';
      modal += '<div class="form-group form-group-mat m-l-0 m-r-0 m-t-0 m-b-20 box-60-plus pull-left">';
      modal += '<input id="category_id" name="category_id" value="'+ context.id +'" type="hidden"/>';
      modal += '<input id="category" type="text" class="form-control" name="category" value="'+ context.value +'" required autocomplete="off" spellcheck="false" maxlength="255">';
      modal += '<label for="category" class="control-label"><i class="fa fa-'+ context.icon +' m-r-5"></i>'+ context.placeholder +'</label><i class="bar"></i>';
      modal += '<div id="error_category" class=""></div>';
      modal += '</div>';
      modal += '<div id="categoryList"></div>';
      modal += '</div>';

      modal += '<div class="p-t-20 strong">Additional categories</div>';


      modal += '<div class="col-full '+ (context.name2 == "" ? "hidden" : "") +'">';
      modal += '<div class="form-group form-group-mat m-l-0 m-r-0 m-t-0 m-b-20 box-60-plus pull-left">';
      modal += '<input id="'+ context.name2 +'" type="text" class="form-control" name="'+ context.name2 +'" value="'+ context.value2 +'" required autocomplete="off" spellcheck="false" maxlength="255">';
      modal += '<label for="'+ context.name2 +'" class="control-label"><i class="fa fa-'+ context.icon +' m-r-5"></i>'+ context.placeholder +'</label><i class="bar"></i>';
      modal += '<div id="error_'+ context.name2 +'" class=""></div>';
      modal += '</div>';
      modal += '<div class="pull-left m-t-5 m-l-15 l-h-1 hideCategoryInputInModal" style="font-size: 30px;"><a href="#" style="text-decoration: none;">&times;</a></div>';
      modal += '</div>';

      modal += '<div class="col-full '+ (context.name3 == "" ? "hidden" : "") +'">';
      modal += '<div class="form-group form-group-mat m-l-0 m-r-0 m-t-0 m-b-20 box-60-plus pull-left">';
      modal += '<input id="'+ context.name3 +'" type="text" class="form-control" name="'+ context.name3 +'" value="'+ context.value3 +'" required autocomplete="off" spellcheck="false" maxlength="255">';
      modal += '<label for="'+ context.name3 +'" class="control-label"><i class="fa fa-'+ context.icon +' m-r-5"></i>'+ context.placeholder +'</label><i class="bar"></i>';
      modal += '<div id="error_'+ context.name3 +'" class=""></div>';
      modal += '</div>';
      modal += '<div class="pull-left m-t-5 m-l-15 l-h-1 hideCategoryInputInModal" style="font-size: 30px;"><a href="#" style="text-decoration: none;">&times;</a></div>';
      modal += '</div>';

      modal += '<div class="col-full '+ (context.name4 == "" ? "hidden" : "") +'">';
      modal += '<div class="form-group form-group-mat m-l-0 m-r-0 m-t-0 m-b-20 box-60-plus pull-left">';
      modal += '<input id="'+ context.name4 +'" type="text" class="form-control" name="'+ context.name4 +'" value="'+ context.value4 +'" required autocomplete="off" spellcheck="false" maxlength="255">';
      modal += '<label for="'+ context.name4 +'" class="control-label"><i class="fa fa-'+ context.icon +' m-r-5"></i>'+ context.placeholder +'</label><i class="bar"></i>';
      modal += '<div id="error_'+ context.name4 +'" class=""></div>';
      modal += '</div>';
      modal += '<div class="pull-left m-t-5 m-l-15 l-h-1 hideCategoryInputInModal" style="font-size: 30px;"><a href="#" style="text-decoration: none;">&times;</a></div>';
      modal += '</div>';

      modal += '<div class="col-full '+ (context.name5 == "" ? "hidden" : "") +'">';
      modal += '<div class="form-group form-group-mat m-l-0 m-r-0 m-t-0 m-b-20 box-60-plus pull-left">';
      modal += '<input id="'+ context.name5 +'" type="text" class="form-control" name="'+ context.name5 +'" value="'+ context.value5 +'" required autocomplete="off" spellcheck="false" maxlength="255">';
      modal += '<label for="'+ context.name5 +'" class="control-label"><i class="fa fa-'+ context.icon +' m-r-5"></i>'+ context.placeholder +'</label><i class="bar"></i>';
      modal += '<div id="error_'+ context.name5 +'" class=""></div>';
      modal += '</div>';
      modal += '<div class="pull-left m-t-5 m-l-15 l-h-1 hideCategoryInputInModal" style="font-size: 30px;"><a href="#" style="text-decoration: none;">&times;</a></div>';
      modal += '</div>';

      modal += '<div id="showNextCategoryInModal" class="col-full '+ (context.name5 != "" ? "hidden" : "") +'">';
      modal += '<div class="form-group form-group-mat m-l-0 m-r-0 m-t-20 m-b-10 strong"><a href="#" style="text-decoration: none;">Add another category</a></div>';
      modal += '</div>';


      modal += '</div>';
      modal += '</div>';
      modal += '<div class="modal-footer">';
      modal += '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
      modal += '<button type="button" class="btn btn-primary">Save changes</button>';
      modal += '</div>';
      modal += '</form>';
      modal += '</div>';
      modal += '</div>';
      modal += '</div>';
      $("body").append(modal);
      $('#ajaxModal')
        .on("shown.bs.modal", function() { $(this).find(".form-control:first").focusCursorAtEnd(); })
        .modal({ backdrop: 'static', keyboard: false });
      $("#showNextCategoryInModal").on('click', function(e) {
        e.preventDefault();

        ($( ".col-full.hidden" ).first()).find("input.form-control").focus(); // This is the line where I am facing problem

        $( ".col-full.hidden" ).first().removeClass("hidden");
        if (!($(".col-full.hidden")[0])) {
          $("#showNextCategoryInModal").addClass( "hidden" );
        }
      });
      $(".hideCategoryInputInModal").on("click", function (e) {
        e.preventDefault();
        $(this).closest('div.col-full').addClass( "hidden" );
        $(this).closest('div.col-full').find("input").attr("value", "");
        if (($(".col-full.hidden")[0])) {
          $("#showNextCategoryInModal").removeClass( "hidden" );
        }
      });
};

I have tried find(), next(), prev(), and much more but failed to achieve the desired result.

Image of the modal:

Answer 1

After many efforts, this code worked for me.

Changed this

($( ".col-full.hidden" ).first()).find("input.form-control").focus();

to this

$( ".col-full.hidden > div > input" ).first().addClass("focused");
$( ".col-full.hidden" ).first().removeClass("hidden");
$("input.form-control.focused").last().focus();

Answer 2

You have multiple inputs that has the selector input.form-control you should find a unique one and focus on it. If we assume that you will show the latest one:

($( ".col-full:not(.hidden)" ).first()).find("input.form-control").last().focus();

Answer 3

i think you should first remove the hidden class

$( ".col-full.hidden" ).first().removeClass("hidden");

and then add focus by accessing last element, which will be one which is recently appeared

$( ".col-full" ).last().find("input.form-control").focus()

Answer 4

It would be helpful if I can see html codes.(HTML sources code in developer mode)

Try to focus after its shown.

$("#showNextCategoryInModal").on('click', function(e) {
    e.preventDefault();

    $( ".col-full.hidden" ).first().removeClass("hidden");
    if (!($(".col-full.hidden")[0])) {
      $("#showNextCategoryInModal").addClass( "hidden" );
    }

    $( ".col-full" ).last().find("input.form-control").focus(); 
});