locked
Star rating in Update Panel which are on Bootstrap Tabs RRS feed

  • Question

  • User454094798 posted

    Hi All,

    I am having star rating inputs in 2 bootstrap tabs on a webpage.

    Tab1 Tab2

    In Tab1, i have 

    <input id="avgrating" runat="server" type="number" data-size="xxs" style="cursor:default;" readonly="readonly" data-show-caption="false" data-show-clear="false" class="rating" />

    in Tab2, i have 

    <input id="anotherrating" runat="server" type="number" data-size="xxs" style="cursor:default;" readonly="readonly" data-show-caption="false" data-show-clear="false" class="rating" />

    and each tab has separate update panels.... in partial page load i am replacing original rating input with another.

      function pageLoad(sender, args) {
                    if (args.get_isPartialLoad()) {
                        $(function () {
                            $('input[type="number"]').each(function () {                          
                                var value = $(this).val();                            
                                var id = $(this).attr('id');
                                alert(value+' '+id);
                                var width = value * 20;
                                var elem = "<div class='rating-container rating-xxs rating-animate rating-disabled'><div class='rating'>" +
                                    "<span class='empty-stars'><span class='star'><i class='glyphicon glyphicon-star-empty'></i></span><span class='star'><i class='glyphicon glyphicon-star-empty'></i></span><span class='star'><i class='glyphicon glyphicon-star-empty'></i></span><span class='star'><i class='glyphicon glyphicon-star-empty'></i></span><span class='star'><i class='glyphicon glyphicon-star-empty'></i></span></span>" +
                                    "<span class='filled-stars' style='width: " + width + "%;'><span class='star'><i class='glyphicon glyphicon-star'></i></span><span class='star'><i class='glyphicon glyphicon-star'></i></span><span class='star'><i class='glyphicon glyphicon-star'></i></span><span class='star'><i class='glyphicon glyphicon-star'></i></span><span class='star'><i class='glyphicon glyphicon-star'></i></span></span>" +
                                    "</div><input id='"+id+"' type='number' data-size='xxs' value='" + value + "' data-show-caption='false' data-show-clear='false' class='rating hide'></div></div>"
                                $(this).replaceWith(elem);                            
                            })
                        });
                    }
                };

    This works fine for the input on the same tab. But if the post back happens in Tab1 then an additional star rating is added in Tab2. 

    If the postback happens in Tab2, then an additional star rating is added in Tab1.

    How can i prevent additional star rating inputs which are appending on another tab?

    Hope the scenario is clear.

    Monday, September 19, 2016 11:51 PM

Answers

  • User1724605321 posted

    Hi Tanu ,

    I think the problem is because "$('input[type="number"]').each(function () {    " will loop all input which type is number on the page , then input on Tab1 and Tab2 will both be updated. You could find specified input control in the tab which you want to update . For example, if tab1 id is "tab1" ,then find the input like : $("#tab1 :input[type='number']").each(function (e) {

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 20, 2016 9:01 AM

All replies

  • User1724605321 posted

    Hi Tanu ,

    I think the problem is because "$('input[type="number"]').each(function () {    " will loop all input which type is number on the page , then input on Tab1 and Tab2 will both be updated. You could find specified input control in the tab which you want to update . For example, if tab1 id is "tab1" ,then find the input like : $("#tab1 :input[type='number']").each(function (e) {

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 20, 2016 9:01 AM
  • User454094798 posted

    Thanks Nan Yu. 

    Tuesday, September 20, 2016 7:30 PM