why jquery ajax update target id not work? -


i want show button when dropdown changes , when clicking button ajax request send controller , update div id="arraycontent" update not happen

@model webapplication1.models.myjson  @{       var jstypes = webapplication1.models.myjsontype.getjstypelistwithoutbool();      var dropdown = (ienumerable<selectlistitem>)new selectlist(jstypes, "typeindex", "type");      var dropdownid = $"dropdownarrayformat{ viewdata["myjsonlistindex"]}";      var buttonid = $"addmembertoarray{ viewdata["myjsonlistindex"]}";     }    <div style="background-color:#f79550;min-height:50px;">     <label>فرمت لیست :</label>      @html.dropdownlist(" ", dropdown, new { id = dropdownid })      <hr style="border:1px solid red" />      <button id="@buttonid" class="btn btn-xs btn-default invisible" value="@model.id"><i class="glyphicon glyphicon-plus-sign"></i></button>      <div class="col-md-12" style="margin-bottom:10px;">          <div id="arraycontent">          </div>      </div>  </div>      <script>  $(document).on('change', '#@dropdownid', function () {      $('#@buttonid').removeclass("invisible");  });    $('#@buttonid').on('click', function () {      $.ajax({          url: "/home/showarrayvalue/",          data: {              "typeindex": $('#@dropdownid').val(),              "jsonarrayid": $('#@buttonid').val(),          },          type: "post",          success: function (data) {              $('#arraycontent').html(data);          }      })  });  </script>

since mention page goes blank when clck button, think issue button possibly causing normal postback. default type of <button> element submit, cause postback when clicked.

two easy alternative ways fix it:

1) set button's type button: <button type="button" ...

2) use jquery preventdefault method on click event, stop normal behaviour of button:

$('#@buttonid').on('click', function (event) {     event.preventdefault(); ... 

Comments

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

javascript - Z-index in d3.js -