jquery - modify html after load from external file

Question

I have some javascript in a .js file that include html code from an external file .htm

After load the html I want to modify the attribute of input text, but I can't do it:

myScript.js

$(".plus").click(function(){
    function addRow() {
    //I read the current number of rows..
    var rowsNumber = $("#rows").val();
    //set the progressive number for the new row
    rowsNumber++;
    var row = rowsNumber;  
    var row = 1;
   //load the html from a file
    $.get("defaultHtmlForRow.htm", function(data) {
        $("#rowList").after(data);
    });
    //#descriptionDefault is the id of input type text loaded from defaultHtmlForRow.htm
    $("#descriptionDefault").attr('id', 'description'+row ); //i want to rename the id like id="description1"
    //#priceDefault is the id of input type text loaded from defaultHtmlForRow.htm
    $("#priceDefault").attr('id', 'price'+row ); //i want to reename the id like id="price1"
    //the default value for #priceDefault (now, if correct, #price1) is 30.00, this alert will be tell me "30.00" but I see "undefined"
    //below, I want to verify that it's all correct
    var newPrice = $("#price"+row).val();
    alert(newPrice); //tell me "undefined"... like I can't read the attribute and value from defaultHtmlForRow.htm
    }
    addRow();
});

index.htm

<!-- index.htm -->
<!-- the first code... -->
<input type="hidden" id="rows" name="rows" value="1" />
<div id="rowList">
</div>

<script src="path_to/myScript.js"></script>
<!-- the end code... -->
<!-- end of index.htm -->

defaultHtmlForRow.htm

<!-- the file defaultHtmlForRow.htm -->
<div class="form-group" id="rowDefault">
  <div class="col-sm-1 col-lg-1">
    <input type="text" class="form-control" id="priceDefault" name="priceDefault" placeholder="Es: 30.00" value="" />		
  </div>
  <div class="col-sm-1 col-lg-1">
    <button type="button" class="btn btn-primary plus">
    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
    </button>
  </div>
</div>

Use the success callback function. $.get() is an asynchronous function. — MrUpsidown
– MrUpsidown, Commented Feb 20, 2018 at 18:13
Ok but, the html is correctly loaded, but I can't read the attribute or input value ! — quattrocorde
– quattrocorde, Commented Feb 20, 2018 at 18:15
Show your HTML as obviously you are doing something wrong but we can't guess what it is. I want to modify the attribute of input text which attribute? what input text? — MrUpsidown
– MrUpsidown, Commented Feb 20, 2018 at 19:49
Your code will result in a failed/invalid markup after the first click. You append a new duplicate id in id="rowDefault". and also in id="priceDefault" — Mark Schultheiss
– Mark Schultheiss, Commented Feb 20, 2018 at 21:47

Mark Schultheiss · Accepted Answer · 2018-02-20 22:31:25Z

Use classes in stuff you add. I "fake" the get and use a hidden element.

Note your "alert" shows nothing since the appended value is not set, I "fake" that by putting 3 in for a value.

Odd wrap of function in function so I remove that.

$(".plus").on('click', function() {
  console.log("adding");
  //I read the current number of rows..
  // might be better to do var rowsNumber = $('.rowDefault').length;
  var rowsNumber = $("#rows").val();
  //set the progressive number for the new row
  rowsNumber++;
  var row = rowsNumber;
  $("#rows").val(row); //set new value
  //var row = 1;
  // we fake this, use hidden HTML instead :)
  //load the html from a file
  //$.get("defaultHtmlForRow.htm", function(data) {
  //   $("#rowList").after(data);
  // });
  // fake out using class based markup
  var clonething = $('.hiddengem').find(".form-group.rowDefault").clone(true);
  clonething.find('.priceDefault').attr('id', 'priceDefault' + row);
  clonething.find('.priceDefault').attr('name', 'priceDefault' + row);
  $("#rowList").append(clonething).show();
  console.log($("#rowList").find('.rowDefault').length)
  // this does not exist so comment it out
  //#descriptionDefault is the id of input type text loaded from defaultHtmlForRow.htm
  // $("#descriptionDefault").attr('id', 'description' + row); //i want to rename the id like id="description1"
  //below, I want to verify that it's all correct
  var newPrice = $("#priceDefault" + row).val();
  alert(newPrice);
});

.hiddengem {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="hidden" id="rows" name="rows" value="1" />
<div id="rowList"></div>
<button class="plus">add one</button>

<div class="hiddengem">
  <div class="form-group rowDefault">
    <div class="col-sm-1 col-lg-1">
      <input type="text" class="form-control priceDefault" name="priceDefault" placeholder="Es: 30.00" value="3" />
    </div>
    <div class="col-sm-1 col-lg-1">
      <button type="button" class="btn btn-primary plus">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
        </button>
    </div>
  </div>
</div>

Better:

$(".plus").on('click', function() {
  var n = 'priceDefault' +  $('.rowDefault').length;
  var clonething = $('.hiddengem').find(".form-group.rowDefault").clone(true);
  clonething.find('.priceDefault').attr('id', n).attr('name', n);
  $("#rowList").append(clonething);
  // verify results
  console.log($("#rowList").find('.rowDefault').length)
});

.hiddengem {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="rowList"></div>
<div class="col-sm-1 col-lg-1">
  <button type="button" class="btn btn-primary plus"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
</div>

<div class="hiddengem">
  <div class="form-group rowDefault">
    <div class="col-sm-1 col-lg-1">
      <input type="text" class="form-control priceDefault" name="priceDefault" placeholder="Es: 30.00" value="" />
    </div>
  </div>
</div>

ok !! I try your example and it's ok ! I have also elaborated it with other input fields and buttons and it works !! thank You a Lot !

Collectives™ on Stack Overflow

jquery - modify html after load from external file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related