Ivin Raj
Reputation: 3429
Multiple Ajax loading problem in asp.net mvc
I am having a dropdown list and textbox. When I am selecting a dropdown value and entering value into the textbox and then by clicking submit button I am getting value in ajax function. If i click on submit button again value loading in same table but my requirement is to load the value by clearing the previously displayed value?
Jquery:
$(document).ready(function() {
$("#btnSubmit").click(function(e) {
e.preventDefault();
var search = jQuery('[id$=txtsearchType]').val();
var tittle = jQuery('[id$=txtName]').val();
if (search != ' ' && tittle != '') {
if (search == "getgeneric" || search == "getbrand") {
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: 'http://204.93.193.244:8080/apiems/' + search + '/' + tittle,
//data: "{ } ",
dataType: "json",
success: function(data) {
var items = '';
$.each(data, function(i, item) {
$("#findValue").show();
var rows = "<tr>" +
"<td>" + (i + 1) + "</td>" +
"<td>" + item[1] + "</td>" +
"<td>" + item[5] + "</td>" +
"<td>" + item[2] + "</td>" +
"<td>" + item[3] + "</td>" +
"<td>" + item[4] + "</td>" +
"<td>" + item[6] + "</td>" +
"<td>" + '<a href="@Url.Action("ViewProduct", "RestApi")?ID=' + item[0] + '&Name=' + data[i] + '&type=' + search + '"" class="glyphicon glyphicon-eye-open" title="View"></a>' +
"</tr>";
$('#example tbody').append(rows);
});
},
error: function(result) {
alert("Error" + result);
}
});
} else if (search == "getcompany") {
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: 'http://204.93.193.244:8080/apiems/' + search + '/' + tittle,
//data: "{ } ",
dataType: "json",
success: function(data) {
var items = '';
$.each(data, function(i, item) {
$("#findcompany").show();
var rows = "<tr>" +
"<td>" + (i + 1) + "</td>" +
"<td>" + item[1] + "</td>" +
"<td>" + item[2] + "</td>" +
"<td>" + item[3] + "</td>" +
"<td>" + item[4] + "</td>" +
"<td>" + '<a href="@Url.Action("ViewProduct", "RestApi")?ID=' + item[0] + '&Name=' + data[i] + '&type=' + search + '"" class="glyphicon glyphicon-eye-open" title="View"></a>' +
"</tr>";
$('#example tbody').append(rows);
});
},
error: function(result) {
alert("Error" + result);
}
});
} else if (search == "getsubstitue") {
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: 'http://204.93.193.244:8080/apiems/' + search + '/' + tittle,
//data: "{ } ",
dataType: "json",
success: function(data) {
var items = '';
$.each(data, function(i, item) {
$("#findsubstitue").show();
var ids = data[i];
var rows = "<tr>" +
"<td>" + (i + 1) + "</td>" +
"<td>" + item[1] + "</td>" +
"<td>" + item[2] + "</td>" +
"<td>" + item[3] + "</td>" +
"<td>" + item[4] + "</td>" +
"<td>" + item[5] + "</td>" +
"<td>" + '<a href="@Url.Action("ViewProduct", "RestApi")?ID=' + item[0] + '&Name=' + data[i] + '&type=' + search + '"" class="glyphicon glyphicon-eye-open" title="View"></a>' +
"</tr>";
$('#example tbody').append(rows);
});
},
error: function(result) {
alert("Error" + result);
}
});
} else if (search == "gettherapeutic") {
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: 'http://204.93.193.244:8080/apiems/' + search + '/' + tittle,
//data: "{ } ",
dataType: "json",
success: function(data) {
var items = '';
$.each(data, function(i, item) {
$("#findgettherapeutic").show();
var ids = data[i];
var rows = "<tr>" +
"<td>" + (i + 1) + "</td>" +
"<td>" + item + "</td>" +
"</tr>";
$('#example tbody').append(rows);
});
},
error: function(result) {
alert("Error" + result);
}
});
}
} else {
alert('Cannot blank must be filled out')
}
});
});
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="card">
<div class="card-block">
<div class="row">
<div class="col-lg-4">
<fieldset class="form-group">
@Html.LabelFor(model => Model.SearchType, new { @class = "form-label semibold control-label" })
<select class="select2-arrow" id="txtsearchType" name="searchType">
<option>-- Select Search Type --</option>
<option value="getgeneric">Generic Search</option>
<option value="getbrand">Brand Search</option>
<option value="getcompany">Company Search</option>
<option value="getsubstitue">Substitute Search</option>
<option value="gettherapeutic">Therapeutic wise Search</option>
</select>
@Html.ValidationMessageFor(model => model.SearchType, "", new { @style = "color:red" })
</fieldset>
</div>
<div class="col-lg-4">
<fieldset class="form-group">
<label class="form-label semibold control-label">Tittle</label> @Html.TextBoxFor(model => model.ProductName, new { @class = "form-control", @id = "txtName", placeholder = "Search Name" }) @Html.ValidationMessageFor(model => model.ProductName,
"", new { @style = "color:red" })
</fieldset>
</div>
</div>
<input type="submit" name="Submit" value="Search" id="btnSubmit" class="btn btn-rounded btn-inline btn-success" />
<span style="color:green">@ViewBag.Message</span>
<br />
<br /> @* getgeneric and getbrand *@
<div class="table-responsive" id="findValue" style="display:none;">
<table id="example" class="display table table-bordered" cellspacing="0" width="100%;">
<thead>
<tr>
<th>ID</th>
<th>Generic Name</th>
<th>Brand Name</th>
<th>Strength</th>
<th>Form</th>
<th>Pack</th>
<th>Price</th>
<th>Actions</th>
</thead>
<tbody></tbody>
</table>
</div>
@* getcompany *@
<div class="table-responsive" id="findcompany" style="display:none;">
<table id="example" class="display table table-bordered" cellspacing="0" width="100%;">
<thead>
<tr>
<th>ID</th>
<th>Brand Name</th>
<th>Form</th>
<th>Strength</th>
<th>Pack</th>
<th>Actions</th>
</thead>
<tbody></tbody>
</table>
</div>
@* getcompany *@
<div class="table-responsive" id="findsubstitue" style="display:none;">
<table id="example" class="display table table-bordered" cellspacing="0" width="100%;">
<thead>
<tr>
<th>ID</th>
<th>Brand Name</th>
<th>Manufacturer</th>
<th>Strength</th>
<th>Form</th>
<th>price</th>
<th>Actions</th>
</thead>
<tbody></tbody>
</table>
</div>
@* getcompany *@
<div class="table-responsive" id="findgettherapeutic" style="display:none;">
<table id="example" class="display table table-bordered" cellspacing="0" width="100%;">
<thead>
<tr>
<th>ID</th>
<th>Generic Name</th>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</section>
Upvotes: 0
Views: 38
Answers (2)
tdayi
Reputation: 142
if you take syntax error please share with me
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="card">
<div class="card-block">
<div class="row">
<div class="col-lg-4">
<fieldset class="form-group">
@Html.LabelFor(model => Model.SearchType, new { @class = "form-label semibold control-label" })
<select class="select2-arrow" id="txtsearchType" name="searchType">
<option>-- Select Search Type --</option>
<option value="getgeneric">Generic Search</option>
<option value="getbrand">Brand Search</option>
<option value="getcompany">Company Search</option>
<option value="getsubstitue">Substitute Search</option>
<option value="gettherapeutic">Therapeutic wise Search</option>
</select>
@Html.ValidationMessageFor(model => model.SearchType, "", new { @style = "color:red" })
</fieldset>
</div>
<div class="col-lg-4">
<fieldset class="form-group">
<label class="form-label semibold control-label">Tittle</label> @Html.TextBoxFor(model => model.ProductName, new { @class = "form-control", @id = "txtName", placeholder = "Search Name" }) @Html.ValidationMessageFor(model => model.ProductName, "", new { @style = "color:red" })
</fieldset>
</div>
</div>
<input type="submit" name="Submit" value="Search" id="btnSubmit" class="btn btn-rounded btn-inline btn-success" />
<span style="color:green">@ViewBag.Message</span>
<br />
<br /> @* getgeneric and getbrand *@
<div class="table-responsive" id="findValue" style="display:none;">
<table id="tblFindValue" class="display table table-bordered" cellspacing="0" width="100%;">
<thead>
<tr>
<th>ID</th>
<th>Generic Name</th>
<th>Brand Name</th>
<th>Strength</th>
<th>Form</th>
<th>Pack</th>
<th>Price</th>
<th>Actions</th>
</thead>
<tbody></tbody>
</table>
</div>
@* getcompany *@
<div class="table-responsive" id="findcompany" style="display:none;">
<table id="tblFindcompany" class="display table table-bordered" cellspacing="0" width="100%;">
<thead>
<tr>
<th>ID</th>
<th>Brand Name</th>
<th>Form</th>
<th>Strength</th>
<th>Pack</th>
<th>Actions</th>
</thead>
<tbody></tbody>
</table>
</div>
@* getcompany *@
<div class="table-responsive" id="findsubstitue" style="display:none;">
<table id="tblFindsubstitue" class="display table table-bordered" cellspacing="0" width="100%;">
<thead>
<tr>
<th>ID</th>
<th>Brand Name</th>
<th>Manufacturer</th>
<th>Strength</th>
<th>Form</th>
<th>price</th>
<th>Actions</th>
</thead>
<tbody></tbody>
</table>
</div>
@* getcompany *@
<div class="table-responsive" id="findgettherapeutic" style="display:none;">
<table id="tblFindgettherapeutic" class="display table table-bordered" cellspacing="0" width="100%;">
<thead>
<tr>
<th>ID</th>
<th>Generic Name</th>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</section>
JS:
$(document).ready(function () {
$("#btnSubmit").click(function (e) {
e.preventDefault();
var search = jQuery('#txtsearchType').val();
var tittle = jQuery('#txtName').val();
if (search == '' || tittle == '') {
alert('Cannot blank must be filled out');
return;
};
GetData(search, tittle, function (data) {
var $html = '';
var $table = null;
var $displayItem = null;
switch (switch_on) {
case "getgeneric":
case "getbrand":
$table = $('#tblFindValue > tbody');
$displayItem = $("#findValue");
$.each(data, function (i, item) {
$html += "<tr>" +
"<td>" + (i + 1) + "</td>" +
"<td>" + item[1] + "</td>" +
"<td>" + item[5] + "</td>" +
"<td>" + item[2] + "</td>" +
"<td>" + item[3] + "</td>" +
"<td>" + item[4] + "</td>" +
"<td>" + item[6] + "</td>" +
"<td>" + '<a href="@Url.Action("ViewProduct", "RestApi")?ID=' + item[0] + '&Name=' + data[i] + '&type=' + search + '"" class="glyphicon glyphicon-eye-open" title="View"></a>' +
"</tr>";
});
break;
case "getcompany":
$table = $('#tblFindcompany > tbody');
$displayItem = $("#findcompany");
$.each(data, function (i, item) {
$html += "<tr>" +
"<td>" + (i + 1) + "</td>" +
"<td>" + item[1] + "</td>" +
"<td>" + item[2] + "</td>" +
"<td>" + item[3] + "</td>" +
"<td>" + item[4] + "</td>" +
"<td>" + '<a href="@Url.Action("ViewProduct", "RestApi")?ID=' + item[0] + '&Name=' + data[i] + '&type=' + search + '"" class="glyphicon glyphicon-eye-open" title="View"></a>' +
"</tr>";
});
break;
case "getsubstitue":
$table = $('#tblFindsubstitue > tbody');
$displayItem = $("#findsubstitue");
$.each(data, function (i, item) {
var ids = data[i];
$html += "<tr>" +
"<td>" + (i + 1) + "</td>" +
"<td>" + item[1] + "</td>" +
"<td>" + item[2] + "</td>" +
"<td>" + item[3] + "</td>" +
"<td>" + item[4] + "</td>" +
"<td>" + item[5] + "</td>" +
"<td>" + '<a href="@Url.Action("ViewProduct", "RestApi")?ID=' + item[0] + '&Name=' + data[i] + '&type=' + search + '"" class="glyphicon glyphicon-eye-open" title="View"></a>' +
"</tr>";
});
break;
case "gettherapeutic":
$table = $('#tblFindgettherapeutic > tbody');
$displayItem = $("#findgettherapeutic");
$.each(data, function (i, item) {
var ids = data[i];
$html += "<tr>" +
"<td>" + (i + 1) + "</td>" +
"<td>" + item + "</td>" +
"</tr>";
});
break;
};
$table.empty().append($html);
$displayItem.show();
});
});
});
function GetData(search, tittle, successEvent) {
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: 'http://204.93.193.244:8080/apiems/' + search + '/' + tittle,
//data: "{ } ",
dataType: "json",
success: function (data) {
successEvent(data);
},
error: function (result) {
alert("Error" + result);
}
});
};
Upvotes: 1
Ahmet Taşgöz
Reputation: 1
Because your button type is "submit".Try to change your button type to "button". like this:
<input type="submit" name="Submit" value="Search" id="btnSubmit" class="btn btn-rounded btn-inline btn-success" />
<span style="color:green">@ViewBag.Message</span>
<input type="button" name="Submit" value="Search" id="btnSubmit" class="btn btn-rounded btn-inline btn-success" />
<span style="color:green">@ViewBag.Message</span>
Upvotes: 0
Related Questions
- Ajax call goes only one time ASP.Net MVC5
- Multiple AJAX in one window.onload
- Ajax Calls twice after first time calling MVC.NET
- jQuery load script executes many times
- multiple ajax calls jquery mvc
- How to avoid controller calling twice from div.load in ajax call
- How to handle loading js only once for ajax page that can be loaded multiple times
- AJAX App JavaScript Loading Issue
- Multiple AJAX loading in JQuery
- Multible jquery .load() methods not running concurrently in MVC 2