1

So I'm very new to the world of jQuery and while writing a simple code a faced a problem that I couldn't figure out the solution for. First of all, there's a function that updates the position of the form on the dropdown according to its index. And then there's another function that will change the position of the form on the page when a new position is selected on the dropdown list:

  $(document).ready(initialRank);
  
  function initialRank() {
        var itemIndex = $(".template-detail-field").length;
        $('.field-rank').each(function () {
            $(this).empty();
            var pos = $(".field-rank").index($(this))+1;
            for (var i = 1; i <= itemIndex; i++) {
                if (i == pos) $(this).append('<option value="'+ i +'" selected>' + i + '</option>');
                else $(this).append('<option value="' + i + '">' + i + '</option>');
            }  
    });
    }

    $(document).on("change", ".field-rank", function () {
        $(".template-detail-field").each(function () {
            var sel = $(this).find(".field-rank").val();
            var pre = $(".template-detail-field").eq(sel - 1);
            $(this).insertBefore(pre);  
        });
        initialRank();
            }
        });
     });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="template-detail-field">
<p> Testing stuff 1 </p>
<select class="field-rank"> 
<option value="1" selected>1</option>
</select>
</div>

<div class="template-detail-field">
<p> Testing stuff 2 </p>
<select class="field-rank"> 
<option value="2" selected>2</option>
</select>
</div>

<div class="template-detail-field">
<p> Testing stuff 4 </p>
<select class="field-rank"> 
<option value="4" selected>4</option>

As you can see, after changing position I call the function initialRank() so that it updates the positions displayed for each form accordingly. The problem is after I do this, the dropdown list won't accept any input, and by that I mean when I choose a new position on the list the form doesn't change its position nor does the new chosen position is selected.

But when I rewrite the initialRank() code inside the change() function everything works fine:

 $(document).ready(initialRank);
 
  function initialRank() {
        var itemIndex = $(".template-detail-field").length;
        $('.field-rank').each(function () {
            $(this).empty();
            var pos = $(".field-rank").index($(this))+1;
            for (var i = 1; i <= itemIndex; i++) {
                if (i == pos) $(this).append('<option value="'+ i +'" selected>' + i + '</option>');
                else $(this).append('<option value="' + i + '">' + i + '</option>');
            }  }); 
  }
  
 $(document).on("change", ".field-rank", function () {
        $(".template-detail-field").each(function () {
            var sel = $(this).find(".field-rank").val();
            var pre = $(".template-detail-field").eq(sel - 1);
            $(this).insertBefore(pre);  
        });
        var itemIndex = $(".template-detail-field").length;
        $('.field-rank').each(function () {
            $(this).empty();
            var pos = $(".field-rank").index($(this)) + 1;
            for (var i = 1; i <= itemIndex; i++) {
                if (i == pos) $(this).append('<option value="' + i + '" selected>' + i + '</option>');
                else $(this).append('<option value="' + i + '">' + i + '</option>');    
            }
        });
     });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="template-detail-field">
<p> Testing stuff 1 </p>
<select class="field-rank"> 
<option value="1" selected>1</option>
</select>
</div>

<div class="template-detail-field">
<p> Testing stuff 2 </p>
<select class="field-rank"> 
<option value="2" selected>2</option>
</select>
</div>

<div class="template-detail-field">
<p> Testing stuff 4 </p>
<select class="field-rank"> 
<option value="4" selected>4</option>

Can someone please explain to me what I was doing wrong. Thank you.

Veoxer
  • 358
  • 4
  • 19
  • Why is C# a tag? – Ari Seyhun Sep 05 '17 at 16:44
  • 1
    Can you add a [mcve]? –  Sep 05 '17 at 16:46
  • Wouldn't be better to [move the entire element](https://stackoverflow.com/q/1279957/3136474) to another parent instead of recreating it by appending ` – Dinei Sep 05 '17 at 16:46
  • You're definitely more likely to get quick, correct answers when you use stack snippets for code runnable in the browser https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/ –  Sep 05 '17 at 16:48
  • @DineiRockenbach Can you please be more specific on which element you're talking about. – Veoxer Sep 05 '17 at 16:49
  • @Will Thank you, sorry I didn't know about that. – Veoxer Sep 05 '17 at 16:50
  • NP, it's there for your benefit :) –  Sep 05 '17 at 16:56
  • @SiMohamed No, I can't, because I don't really know what exactly you're trying to achieve. I'd need to see a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve), as stated by Chris G, including HTML code, to provide more specific answer. – Dinei Sep 05 '17 at 17:48
  • @ChrisG I added the snippets, I hope you can help me now. Thank you. – Veoxer Sep 06 '17 at 09:35
  • @Will Can you check it out now? thank you. – Veoxer Sep 06 '17 at 09:35
  • @DineiRockenbach I hope it's clearer now. – Veoxer Sep 06 '17 at 09:36

0 Answers0