How can i display data using Jquery append()

Question

I've data

{product_name: "mushroom", id_p: 13, product_weight: "5", product_unit: "kg"}

How can I display product_weight after i select product name

 <td class="col-md-7">
    <select style="width:50%;" class="productcategory" id="prod_cat_id"  name="id_c[]">
        <option value="0" disabled="true" selected="true">category</option>
        @foreach($category as $c)
        <option value="{{$c->id_c}}" name="id_c" id="id_c">{{$c->category_name}}</option>
        @endforeach
    </select>
    <select style="width:48%;" class="productname" name="id_p[]">
        <option value="0" disabled="true" selected="true"> product</option>
    </select>
</td>
<td class="col-md-1">
    <div id="weights_wrapper" class="productweight" >
    </div>
</td>

i want to output productweight in weight_warpper

for(var i=0;i<data.length;i++){
     op+='<option value="'+data[i].id_p+'" name="id_p" data-product_weight="'+data[i].product_weight+'" data-product_unit="'+data[i].product_unit+'">'+data[i].product_name+'</option>';
}
$("select.productname").on("change",function(){
    var weight = $(this).find(":selected").data("product_weight");
    var unit = $(this).find(":selected").data("product_unit");
    var span = "<span>"+weight+unit+"</span>";
    $("#target_div_where_to_display_weight").html(span);
});

if I add new product my id weights_wrapper will change into weights_wrapper1 i want to output like not sure how to loop this

$("#target_div_where_to_display_weight '+ i +'  ").html(span);

here is my append

$(document).ready(function() {
        $('#add-form').click(function() {
            i++;
            $('#add-me').append(
    +'<div id="weights_wrapper'+ i +'" class="productweight" name="product_weight">'
)};

Your html example code in the question is also missing some of those data points that you reference in the js block, so its a bit confusing where that comes from. However I don't believe that impacts the actual question. Just clarity. — IncredibleHat
– IncredibleHat, Commented Oct 14, 2017 at 18:28
after I click my add-form button my <div id="weights_wrapper"> become to <div id="weights_wrapper1"> and when i change it it didnt display in weights_wrapper1 — user8663822
– user8663822, Commented Oct 14, 2017 at 18:33
if you dont mind here is my full code github.com/akirawinz/stock-proj/blob/master/ajaxcall.html @Randall — user8663822
– user8663822, Commented Oct 14, 2017 at 18:34

IncredibleHat · Accepted Answer · 2017-10-14 19:09:17Z

1

I had an answer prepared based on the snips you put in the question, which was as simple as one change, but after looking at the full code, I see you are adding multiple whole rows of product selections, which each having their own weight display div.

A few things need to be changed, and tackled. The biggest problem you are facing is that you need to isolate your index used for each product row you are going to have on the page. Simply relying on the overused 'i' is causing you issues, since 'i' is not initially defined to cover the static html's elements, and its reused in for loops, and such. Gets confusing!

The first time the page is made (the first row, with the static html) should have an initial index set for the id's to use. Then when you add more whole rows, they continue the index value from there.

Static first row:

        <tr>
            <td class="col-md-7">
                ... snip ...
                <select style="width:48%;" id="productname_1" id_index="1" class="productname" name="id_p[]">
                    <option value="0" disabled="true" selected="true"> product</option>
                </select>
            </td>
            <td class="col-md-1">
                <div id="weights_wrapper_1" class="productweight"></div>
            </td>
        </tr>

This would be considered row one, indexed to 1. Then when you add another whole row using the js, you need to first initialize that:

    var id_i = 1;// 1 meaning one row already exists in the static html

Then follow with the other js output where you build another row, be sure to follow the same format as the initial static row (same id naming convention). Substituting "id_i" for the "1", so that it builds the html with "productname_2" and "weights_wrapper_2" etc.

    $('#add-form').click(function() {
        id_i++;// will change to '2' on first click
        $('#add-me').append( ... the html build ... );
    }

If you will spot further above in the "select" element, I added "id_index='#'", which can be used by jquery, to use the right index number to reference which one of the "weights_wrapper_#" you want to put the weight info span into:

    $("select.productname").on("change",function(){
        ... snip ...
        var id_index = $(this).attr("id_index");
        $("#weights_wrapper_"+ id_index).html(span);
    }

answered Oct 14, 2017 at 19:09

IncredibleHat

4,1024 gold badges18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

IncredibleHat Over a year ago

This is abbreviated from all exact code and syntax to use and cover. I hope its enough to get the author started in the right direction for their question.

IncredibleHat Over a year ago

Its a complicated problem. You are so very close, just got a bit of a mix going on with those id's.

user8663822 Over a year ago

i think should get some sleep first i'll look into it tomorrow thank you sir =] Gn.

user8663822 Over a year ago

It's work and I already understand what you try to explain for me thank you .

Collectives™ on Stack Overflow

How can i display data using Jquery append()

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related