JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<select id="dropDownListId">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<table>
<tr>
<td>Hello</td>
<td></td>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="/images/Team_Logo.png" width="28" height="28" />
</a>
<a class="navbar-brand" href="/">MAP - </a>
<div class="navbar-brand">Matthew Homer</div>
</div>
<div class="navbar-collapse collapse" style="padding-left: 70px;">
<ul class="nav navbar-nav" style="padding-left: 70px;">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Admin <b class="caret"></b></a>
<ul class="dropdown-menu" id="menu0">
<li><a href="/CONG_Checked_Out">All Checked Out</a></li>
<li><a href="/CONG_CheckedIn">All Maps Available</a></li>
<li class="divider"></li>
<li><a href="/CONG_DNC">DNC Maintenance</a></li>
<li><a href="/CONG_USERS">User Setup</a></li>
<li><a href="/CONG_MAP_ACTIVITY">Map Activity</a></li>
...
JavaScript
$(document).ready(function(){
$(document).on("click", ".buttonClass", function(){
var tr = $(this).closest('tr');
var ddlVal = $("#dropDownListId :selected").val() // this will get the selected value
var td = tr.find('td');
var id = td.find('#item_MAP_ID').val();
alert(id);
alert(td[0].innerHTML);
alert(ddlVal);
var jsonData = {
selectVal: ddlVal,
cellVal: td[0].innerHTML
};
alert(JSON.stringify(jsonData));
ajaxCall("/Controller/Action", jsonData, "awww shit")
})
})
function ajaxCall(appUrl, jsonObject, errorCode) {
$.ajax({
url: appUrl,
data: JSON.stringify(jsonObject),
type: "POST",
contentType: "application/json; charset=utf-8",
success: function(result) {
return true;
},
error: function(result) {
console.log(result);
alert(
"Something went wrong with saving your changes. If the problem continues please report the issue to the system administrator. \nWhen reporting the issue please give error code " +
errorCode);
return result;
}
});
}