I want to get the value of the bfnsCode select tag onchange to servlet without page refreshing. And also the value of taxtCode. How should I do that? Here's my code...
JSP:
<label style="font-size: 17px;">BIR-Form Number</label><br>
<select name="bfnsCode" id="bfnsCode" class="sel" style="width: 245px; margin-left: 0;">
<option selected="selected" value=""></option>
<c:forEach var="bircode" items="${birtypelist}">
<option value="${bircode.bfnsCode}">${bircode.bfnsCode}</option>
</c:forEach>
</select>
<br><br>
<label style="font-size: 17px;">Tax Type</label><br>
<select name="taxtCode" id="taxtCode" class="sel" style="width: 245px; margin-left: 0;">
<option selected="selected" value=""></option>
<c:forEach var="taxcode" items="${taxtypelist}">
<option value="${taxcode.taxtCode}">${taxcode.taxtCode}</option>
</c:forEach>
</select>
<br><br>
<label style="font-size: 17px;">Account Code</label><br>
<select name="taxtDesc" id="taxtDesc" class="sel" style="width: 245px; margin-left: 0;">
<option selected="selected" value=""></option>
<c:forEach var="taxdesc" items="${taxdesclist}">
<option value="${taxdesc.taxtDesc}">${taxdesc.taxtDesc}</option>
</c:forEach>
</select>
servlet:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
TblBIRFormNoDAO birdao = DAOFactory.getDaoManager(TblBIRFormNo.class);
List<TblBIRFormNo> birtypelist = birdao.getAllBirFormNumber();
request.setAttribute("birtypelist", birtypelist);
String bir = request.getParameter("bfnsCode");
TblTaxTypeDAO taxdao = DAOFactory.getDaoManager(TblTaxType.class);
if(bir != null){
Debugger.print("BFNSCODE : "+bir);
List<TblTaxType> taxtypelist = null;
taxtypelist = taxdao.findAlltaxtCode(bir);
request.setAttribute("taxtypelist", taxtypelist);
}
String tax = request.getParameter("taxtCode");
TblTaxTypeDAO tdao = DAOFactory.getDaoManager(TblTaxType.class);
if(tax != null){
Debugger.print("TAXCODE : "+tax);
List<TblTaxType> taxdesclist = tdao.findAlltaxtDesc(bir, tax);
request.setAttribute("taxdesclist", taxdesclist);
}
request.getRequestDispatcher("/servlet-test.jsp").forward(request, response);
}
From this code in servlet the request getParameter gives a null value. How to get the right value when user selected a value in drop down list?
P.S
2nd drop down is based on 1st and 3rd drop down is based on 2nd so the 2nd and 3rd drop down is empty as of the moment because I'm not getting the value of parameter bfnsCode(1st drop down). Please help me out, I badly need this.
if you're new to ajax i would use jquery, it's very easy to do ajax with it.
Ajax get petition . The documentation is very easy and understandable
Related
While showing barcode using IDAutomationHC39M font, some times not loading the barcode instead showing number with asterisk. would be great any material on IDAutomationHC39M.
below is the code to generate barcode.
<td style="font-family: IDAutomationHC39M; font-size:12px;">*${dynaming_number}*</td>
I have had trouble in the past using inline styles. Have you tried creating CSS and a custom class?
Then again, it might just be the font-family you are using, try to load the font with the fontlibrary.org link, and then use "IDAHC39M Code 39 Barcode" instead of "IDAutomationHC39M".
var buttonGen = document.getElementById("btnGen");
buttonGen.onclick = function () {
var x = document.getElementById("textIn").value;
var fs;
// Change the font-size style to match the drop down
fs = document.getElementsByTagName("option")[document.getElementById("selList").selectedIndex].value;
document.getElementById("test").style.fontSize = fs + 'px';
document.getElementById("test").innerHTML =
'*' + // Start Code B
x + // The originally typed string
'*'; // Stop Code
}
td, th {
text-align: center;
padding: 6px;
}
.ss {
font-family: "IDAHC39M Code 39 Barcode";
font-size: 24px;
}
<head>
<link rel="stylesheet" media="screen, print" href="https://fontlibrary.org/face/idautomationhc39m-code-39-barcode" type="text/css"/>
</head>
<body>
Font Size:
<select id="selList">
<option value="24" selected>24px</option>
<option value="30">30px</option>
<option value="36">36px</option>
<option value="42">42px</option>
<option value="48">48px</option>
<option value="54">54px</option>
<option value="60">60px</option>
<option value="66">66px</option>
<option value="72">72px</option>
<option value="78">78px</option>
<option value="84">84px</option>
<option value="90">90px</option>
<option value="96">96px</option>
</select>
<input type="text" id="textIn"></input>
<input type="button" id="btnGen" value="Generate Code 39" tabindex=4/>
<div id="check"></div><br /><span id="test" class="ss">*Making the Web Beautiful*</span><br />
<p>This is a demonstration of use of the Free ID Automation 39 Font.</p>
</body>
I am passing Map which containg Integer and list from my controller class to view. Inside view I have select option in which i want to show only List value in option but i don't know how to implement this. Please help me to do this.
controller
Map<Integer, List<String>> deviceidsAndwhatToUpdateText = new HashedMap<Integer, List<String>>();
view
<select class="form-control select-checkbox"
id="WhatToUpdate" multiple="multiple">
<option th:each="idsAndText : ${deviceidsAndwhatToUpdateText}"
th:value="${idsAndText.value}"
th:utext="${idsAndText.value}">Wireframe</option>
</select>
This will list all the String in your map, is that what you want?
<select class="form-control select-checkbox" id="WhatToUpdate" multiple="multiple">
<th:block th:each="idsAndText : ${deviceidsAndwhatToUpdateText}">
<option th:each="text : ${idsAndText.value}" th:value="${text}" th:text="${text}" />
</th:block>
</select>
this is my contoller
public function add()
{
$data['gis'] = $this->Mymodel->get_gis_start();
$data['side'] = 'tampil/side';
$data['content']='ds/add_ds';
$this->load->view('tampil/main',$data);
}
this is my view
<td><select class="form-control select2" style="width: 100%;" name="pick_from" id="pick" onchange="populate(this.id,'drop')"><?php foreach($gis as $cit): ?>
<option value="<?php echo $cit->start_point; ?>"><?php echo $cit->start_point; ?></option><?php endforeach; ?>
</select></td>
<td><select class="form-control select2" style="width: 100%;" name="pick_till" id="drop"></select></td>
<td><input name="total_loads" class="form-control select2" style="width: 100%;" id="tl1" value="" onkeyup="sum(); sum();" placeholder="Total Loads Picked"></td>
this is my model
function get_gis_start()
{
$query = $this->db->get('gis');
return $query->result();
}
I want to populate second select with values selected from first dropdown and want to put the value of third input from database
my data base is
This is the image of the database from which i want to fetch start_point and fill the select with id="pick" and end_point and fill the values related to start_point in select id="drop" and put the value of total_distance to the input value="values related to first select and second select" how can I do that kindly tell my I am very much struck
See the answer with the link given here Codeigniter dropdown
I have a 3 drop down list. The 1st drop down is the parent and I want to populate the the 2nd drop down when user select a value from 1st, then populate the 3rd drop down based on 2nd. I'm using servlet to declare the values. Here's the code:
Servlet:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
TblBIRFormNoDAO birdao = DAOFactory.getDaoManager(TblBIRFormNo.class);
List<TblBIRFormNo> birtypelist = birdao.getAllBirFormNumber();
request.setAttribute("birtypelist", birtypelist);
String bir = request.getParameter("bfnsCode");
TblTaxTypeDAO taxdao = DAOFactory.getDaoManager(TblTaxType.class);
if(bir != null){
List<TblTaxType> taxtypelist = taxdao.findAlltaxtCode(bir);
String json = null;
json = new Gson().toJson(taxtypelist);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
String tax = request.getParameter("taxtCode");
TblTaxTypeDAO tdao = DAOFactory.getDaoManager(TblTaxType.class);
if(tax != null){
List<TblTaxType> taxdesclist = tdao.findAlltaxtDesc (tax);
String json = null;
json = new Gson().toJson(taxdesclist);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
request.getRequestDispatcher("/servlet-test.jsp").forward(request, response);
}
From this servlet. I'm getting the value of 1st drop down but it seems I can't get the value of the selected value that will use to populate the 2nd and 3rd.
jsp + AJAX:
<script type="text/javascript">
$(document).ready(function() {
$('#bfnsCode').change(function() {
$.get('Test', function(responseJson) {
var $select = $('#bfnsCode');
$select.find('option').remove();
$.each(responseJson, function(key, value) {
$('<option>').val(key).text(value).appendTo($select);
});
});
});
});
</script>
<label style="font-size: 17px;">BIR-Form Number</label><br>
<select name="bfnsCode" id="bfnsCode" class="sel" style="width: 245px; margin-left: 0;">
<option selected="selected" value=""></option>
<c:forEach var="bircode" items="${birtypelist}">
<option value="${bircode.bfnsCode}">${bircode.bfnsCode}</option>
</c:forEach>
</select>
<br><br>
<label style="font-size: 17px;">Tax Type</label><br>
<select name="taxtCode" id="taxtCode" class="sel" style="width: 245px; margin-left: 0;">
<option selected="selected" value=""></option>
<c:forEach var="taxtype" items="${taxtypelist}">
<option value=""></option>
</c:forEach>
</select>
<br><br>
<label style="font-size: 17px;">Account Code</label><br>
<select name="taxtDesc" id="taxtDesc" class="sel" style="width: 245px; margin-left: 0;">
<option selected="selected" value=""></option>
<c:forEach var="taxdesc" items="${taxdesclist}">
<option value="${taxdesc.taxtDesc}">${taxdesc.taxtDesc}</option>
</c:forEach>
</select>
This part, the only value that is showing is the 1st drop down. What are the missing codes for AJAX? or the servlet?
please find this reference it would be much helpful Reference
Scenario's that i could suggests you is ,,
1.Onload of the page you may get the first drop down to be loaded
2.Onchange of first write the ajax calls to pass the first drop down value as input in ajax calls and append the second select options
3.On change of second write the ajax calls to pass the second drop down value as input to the servlet in ajax calls and append the third select options
When the value of first drop down changes you have to pass the selected value to jquery get function such as this,
<script type="text/javascript">
$(document).ready(function() {
$('#bfnsCode').change(function() {
var $bfnscode=$("select#bfnsCode").val();
$.get('Test',{bfnsCode:$bfnscode},function(responseJson) {
var $select = $('#taxtCode');
$select.find('option').remove();
$.each(responseJson, function(key, value) {
$('<option>').val(key).text(value).appendTo($select);
});
});
});
});
You never passed parameter to your get function neither did you populate your second drop down with your response. You have tried to populate the same select option with no values from servlet. The above code should work for you. Good luck!
Update: I just noticed that you have tried to forward the request to jsp. You should not redirect your page when making AJAX calls since you are simply updating the drop down list and the jquery takes care of getting the response from servlet and updating the interface. Remove this from your servlet code,
request.getRequestDispatcher("/servlet-test.jsp").forward(request, response);//remove this line
I've tried everything here, and I must be missing something, as my ajax post to Django isn't returning anything. I've got it down to the bare bones at this point, just trying to get it working and no joy.
My view:
def saveProjectEntry(request):
form = ProjectEntryUpdateForm(request.POST)
if form.is_valid():
msg = json.dumps({'msg':'success'})
return HttpResponse(msg, mimetype='application/json')
else:
msg = json.dumps({'msg':'failed'})
return HttpResponse(msg, mimetype='application/json')
My url.py entry:
url(r'^chargeback/savepe/$','chargeback.views.saveProjectEntry'),
My jQuery:
$('#peUpdateForm').submit(function() {
$.ajax({
url:'/chargeback/savepe/',
data: $("#peUpdateForm").serialize(),
type: "POST",
success: function(e) {
alert("success");
},
error: function(e) {
alert("failed");
}
});
return false;
});
I also tried the jQuery post method:
$('#peUpdateForm').submit(function(e){
$.post('/chargeback/savepe/', $('#peUpdateForm').serialize(), function(data){
alert("success");
});
e.preventDefault();
});
I'm not getting anything. Not getting any of my alerts. Not getting any errors from the view (if I just navigate to the view directly I get the expected {'msg':'failed'} displayed in the browser, so the json response is fine. The url calls the correct view. The only thing I can think of is my jQuery code is wrong, but I can't figure out where, and there are no errors in the console. I've tested, in the console, the
$('#peUpdateForm').serialize()
and I get the expected value. Pulling my hair out here... Thanks.
EDIT: Adding HTML as my post method isn't even getting called when I place a breakpoint there, so something may be wrong with how my submit is being set up.
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable ui-dialog-buttons" style="outline: 0px; z-index: 1002; position: absolute; height: auto; width: 376px; top: 75px; left: 408px; display: block;" tabindex="-1" role="dialog" aria-labelledby="ui-id-8"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span id="ui-id-8" class="ui-dialog-title">Project Entry Update</span><span class="ui-icon ui-icon-closethick">close</span></div>
<div id="addPEForm" style="width: auto; min-height: 0px; height: 365px;" class="ui-dialog-content ui-widget-content" scrolltop="0" scrollleft="0">
<form method="post" id="peUpdateForm" action="">
<div style="display:none">
<input type="hidden" name="csrfmiddlewaretoken" value="wvzwSBl87vC1tbkbdfxsD82GnjtvJCSz"></div>
<p><label for="id_departmentid">Department:</label>
<select id="id_departmentid" class="projEntryControl" name="departmentid">
<option value="" selected="selected">Choose a Department</option>
<option value="1">ABND</option>
<option value="2">ATT</option>
<option value="3">AVI</option>
<option value="4">CCS</option>
<option value="5">PBW</option>
</select></p>
<p><label for="id_projectid">Project:</label>
<select id="id_projectid" class="projEntryControl" name="projectid">
<option value="-1">Choose a Project</option>
<option value="undefined">Bexar Street</option>
<option value="undefined">Chalk Hill</option>
<option value="undefined">Crown Road</option>
</select>
</p>
<p><label for="id_progNumId">Program Number:</label>
<select id="id_progNumId" class="projEntryControl" name="progNumId">
<option value="" selected="selected">Choose a Program Number</option>
<option value="1">31664</option>
<option value="2">DD-7081</option>
</select></p>
<p><label for="id_hoursWorked">Hours Worked:</label>
<input name="hoursWorked" value="0.0" class="projEntryControl" maxlength="5" type="text" id="id_hoursWorked"></p>
<p><label for="id_notes">Notes:</label>
<textarea id="id_notes" rows="10" cols="40" name="notes"></textarea></p>
</form>
</div>
...
AFAIK, Here's the way to do it right, if you want to keep the button outside:
$('#button').on('click', function(){
$.ajax({
data: $('#form').serialize(),
...});
});
This because `$('#form').submit() gets called only if you keep the submit button inside the form tags.