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
Post a Comment