I am currently working on downloading the data automatically on this page:
http://jcmramp.pjm.com/jcmRamp/ramp-data.jsp
I would like to somehow be able to control the URL so that, say, when I use the URL:
jcmramp.pjm.com/jcmRamp/ramp-data.jsp?directionSlt=1
the option selected for Location parameter would be PJM and when I do
jcmramp.pjm.com/jcmRamp/ramp-data.jsp?directionSlt=2
the option selected for Location parameter would be MISO
Here is the relevant section in the HTML code I can see:
<td colspan="4" align="top">
<label id="selectLbl" for="directionSlt" unselectable="on">Location:</label>
<select name="directionSlt" id="directionSlt" size="1" onchange="refresh()">
<option value="1">PJM
<option value="2">MISO
</select>
<label class="linkLabel" id="helpLbl" onmouseover="this.style.color='orange'" onmouseout="this.style.color='navy'" onclick="javascript:openHelpPage();"> - README (ramp viewer description document)</label>
<br><br>
</td>
However, this does not seem to work, no matter what I put for directionSlt, I get PJM, which is the default selection.
I am just wondering if there is any other way possible to manipulate the URL to change the option.
If not, is it possible for me to programatically (using VB.Net) to switch between different option?
(Note: the HTTP sign for the second and third URLs are removed as per website's restrictions)
try this:
(function ($) {
$.locationSearch = function () {
var resultado = [];
try {
var search = window.location.search;
if (search == null || search == '')
return [];
search = search.replace(/\?/, '').split('&');
for (var i in search)
resultado[search[i].split('=')[0]] = search[i].split('=')[1];
}
catch (ex) {}
return resultado;
};
})(jQuery);
$(function() {
var query = $.locationSearch();
if (typeof query['directionSlt'] != 'undefined') {
$('#directionSlt').val(query['directionSlt']);
}
});
Related
Could you please help me in sorting this issue as im just learning ajax and trying to incorporate for my requirement.
My Requirement:
When i click a particular image it should call the same page but load with the table data with different values based on the param values called.So I was advised to go for AJAX as it doesnt reload the whole page .
JQUERY
$("#goToCostTypeID").click(function () {
var costType = document.getElementById("costType").value;
if(costType == "Actual"){
costType = "Budget";
document.getElementById("costType").value = "Budget";
} //if actuals ends
if(costType == "Budget"){
costType = "Forecast";
document.getElementById("costType").value = "Forecast";
} //if actuals ends
if(costType == "Forecast"){
costType = "Actual";
document.getElementById("costType").value = "Actual";
} //if actuals ends
var Budget = costType;
$.ajax({
dataType : "html",
url:'my.jsp?productID=6&appID=6&txtHidden=Costs&mode=Edit&costType='+costType,
type:'POST',
contentType :'application/x-www-form-urlencoded; charset=UTF-8',
data:{costType:Budget},
success:function(result){
console.log("YES");
$("#costContent").load('my.jsp?productID=6&appID=6&txtHidden=Costs&mode=Edit&costType='+costType);
}
});
});
HTML
<td width="2%" id="goToCostTypeID"> <a href="#" ><img src="../images/goto.png"/></a></td>
<div id="costContent">
<td width="13%" ><input type="hidden" id="cost_type_<%=i+1 %>" name="cost_type_<%=i+1 %>[]" value="<%=Bean.getLevelTwoOrgId()%>"/><%=Bean.getCcLevel2()%></td>
<td width="12%" ><input type="hidden" id="intival_<%=i+1 %>" name="intival_<%=i+1 %>[]" value="<%=Bean.getInitProj()%>"/><%=Bean.getInitProj()%></td>
JAVA
String costType = request.getParameter("costType");
uploadCostList =DAO.doGetAppCostUploadedList(PK_AppID,costType,iPresentYear);
Im getting the same table multiple time when I click the image. Please help me.
With Regards,
Saranya C
As far as I can understand your requirements you need simply to do smth like this:
$("#goToCostTypeID").on('click', function() {
const currentCostType = $('#cost_type').val();
const nextCostType = currentCostType === 'Actual' ? 'Budget' : currentCostType === 'Budget' ? 'Forecast' : 'Actual';
$('#cost_type').val(nextCostType)
const url = 'my.jsp?' + $.param({
productID: '68',
appID: '68',
txtHidden: 'Costs',
mode: 'Edit',
costType: $("#costType").val()
});
$("#costContent").load(url);
});
Can i use variable charity from th:each in another block of code. For example
<select class="select-field">
<option th:each="charity : ${charities}" th:value="${charity.id}" th:text="${charity.name}"></option>
</select>
<div>
<p th:text="${'You selected '+ charity.name}">
<div>
No, Thymeleaf is rendered on the server-side, so to accomplish this, you would need to use js or jQuery. Something like the code below should do the trick.
jQuery
$(document).ready(function() {
// If you want the option's text.
$('.select-field').on('change', function() {
$('p').text("You selected " + $(this).find('option:selected').text()));
})
// If you want the option's value.
$('.select-field').on('change', function() {
$('p').text("You selected " + $(this).val()));
})
})
UPDATE
If you would like to add more information from your charity object to your options, you could use th:attr. So, for example, if you want the charity's description and image name, then you could do something like the following.
HTML
<select class="select-field">
<option th:each="charity : ${charities}" th:value="${charity.id}" th:text="${charity.name}" th:attr="data-description=${charity.description}, data-image=${charity.image}"></option>
</select>
Then, you could just get each attribute value using jQuery .attr() function.
$(document).ready(function() {
$('.select-field').on('change', function() {
var selectedOption = $(this).find('option:selected');
var name = $(selectedOption).text();
var id = $(selectedOption).val();
var description = $(selectedOption).attr('data-description');
var imageName = $(selectedOption).attr('data-image');
// Find your image by id.
var image = $('#myImage');
// Set your new image.
$(image).attr('src','/img/'+ imageName));
})
})
In HTML, you can make following change to div tag:
<div class="display-class">
<p></p>
<div>
This will help identify particular div
Then you can use jQuery to display the name of the selected option.
<script type="text/javascript">
$('.select-field').on("change", function() {
var selectedOption = $(this).find('option:selected').text();
$div = $('.display-class');
$p = $div.find('p');
$p.text("You selected: " + selectedOption);
});
</script>
I have a JSP page in my web application and i want to refresh the page with the parameter of option.
<select class="form-control combobox" name="education" >
<option value="" disabled selected hidden>Choose an education</option>
<option>English</option>
<option>French</option>
<option>Dutch</option>
<option>Spanish</option>
</select>
I want to use this parameter for querying my database again. Forexample;
<%
BookDAO bdao = new BookDAO();
for (TblBooks book : bdao.getAllBooks()) {%>
<tr>
<td><%=book.getTittle()%></td>
<td><%=boek.getAuthor()%></td>
<td><%=boek.getCategory()%></td>
<td><%=boek.getEducation()%></td>
<td><input type='checkbox' name ='chk1' /></td>
</tr>
<% }%>
I can get the parameter with request.getParameter("education") but how can i refresh page and query again with this parameter?
In Javascript, You can ask a web page to reload itself (the exact same URL) by:
location.href = location.href;
You can ask a web page to load a different location using the same mechanism:
location.href = 'http://www.google.com'; // or whatever destination url you want
You can get the value of a select control (which needs to have an id attribute):
var ctrl = document.getElementById("idOfSelectControl");
var selectedOption = ctrl.options[ctrl.selectedIndex].value;
So, if you update your JSP to give the control an id:
<select class="form-control combobox" id="education" name="education" >
you should be able to reload the page:
var educationControl = document.getElementById("education");
var selectedOption = educationControl.options[educationControl.selectedIndex].value;
location.href = "http://mysite.example/mypage?education=" + selectedOption;
By the help of Jason i have solved it. I added an onchange event to my select tag
onchange="changeThePage()"
Then i defined a javascript function.
function changeThePage() {
var selectedOption = "book.jsp?education=" + $("#education option:selected").text();
location.href = selectedOption;
}
Then i got the parameter by
String education = request.getParameter("education");
Then i added String education as parameter to my bdao.getAllBooks(education)) method for to query.
'
<script>
function abc(){
var yourSelect = document.getElementById( "ddlViewBy" );
var val = yourSelect.options[ yourSelect.selectedIndex ].value;
//window.location.href=window.location.href;
alert(val);
window.location.replace("index.jsp?name="+val);
}
</script>
<select id="ddlViewBy" onchange="abc()">
<option>select</option>
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>
<%
String name=request.getParameter("name");
if(name!=null){
%>
<table>
<tr>
<td>author<%=name%></td>
<td>book name<%=name%></td>
</tr>
</table>
<%
}
%>
Hi,
try this, this will be helpful,
when you select a value it will call abc, function and then you are assigning that value in scriptlet..and also page is refreshing. in scriptlet you can access that value using request.getParameter("name").
now you can write your code inside scriptlet..hope helpful for someone.. :)
thanks...
<form:select id="name1"
<form:options items="${questionsMap}"/>
</form:select>
<form:select id="name2"
<form:options items="${questionsMap}"/>
</form:select>
<form:select id="name3"
<form:options items="${questionsMap}"/>
</form:select>
The questions map come from enum.Can anyone please help how can I remove the question from the questionsMap after it is selected on the first select and display the unselected ones the second time.
You can not do it on a JSP, as the code there will run on the server side - if you don't want do extra queries to the server... So the best way is to do it with JavaScript. Jquery selectors make this task easy.
Suggestion: http://api.jquery.com/remove/
Also, events that might interest you:
http://api.jquery.com/change/
There you can even find a as example...
Just to put my example here:
$( "select" ).change(function () {
$( "select option:selected" ).each(function() {
$( this ).remove();
});
})
Instead of removing options from the drop-down you could simply validate the same options selected and show the error message on submit.
var validateSubmit = function() {
var errors = [];//trace all errors here
//fetch selected values from the drop-down starting name attribute with `name`
var txt = $('select[name^=name]').map(function() {
return this.value; //get current drop-down selected value
}).get(); //get all value in array
$.each(txt, function(i, v) {//loop in the selected values
if (i !== $.inArray(v, txt)) {//inArray, gives -1 if not found else array index
errors.push('Cannot select [' + v + '] more than once');
}
});
var submit = 0 === errors.length//true if no errors, else false
if (!submit) {
alert(errors.join('\n'));//concat all errors with \n
}
return submit;//submit if true, else don't submit
};
$(function() {
$('#form1').on('submit', validateSubmit);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id='form1'>
<select name='name1'>
<option>JS</option>
<option>SQL</option>
<option>XML</option>
</select>
<select name='name2'>
<option>JS</option>
<option>SQL</option>
<option>XML</option>
</select>
<select name='name3'>
<option>JS</option>
<option>SQL</option>
<option>XML</option>
</select>
<button>Submit</button>
</form>
OR
You could simply validate the same options selected and show the error message on change.
var names;
var validateChange = function() {
var errors = []; //trace all errors here
//fetch selected values from the drop-down starting name attribute with `name`
var txt = names.map(function() {
return this.value; //get current drop-down selected value
}).get(); //get all value in array
$.each(txt, function(i, v) { //loop in the selected values
if ('' !== v && i !== $.inArray(v, txt)) { //inArray, gives -1 if not found else array index
errors.push('Cannot select [' + v + '] more than once');
}
});
if (errors.length) {
alert(errors.join('\n')); //concat all errors with \n
}
};
$(function() {
names = $('select[name^=name]');
names.on('change', validateChange);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name='name1'>
<option value=''>-- Select --</option>
<option>JS</option>
<option>SQL</option>
<option>XML</option>
</select>
<select name='name2'>
<option value=''>-- Select --</option>
<option>JS</option>
<option>SQL</option>
<option>XML</option>
</select>
<select name='name3'>
<option value=''>-- Select --</option>
<option>JS</option>
<option>SQL</option>
<option>XML</option>
</select>
This is a jquery code I made which does exactly this. Also leaves empty values in (if you have "Please select" in the top) and reinserts unselected values. It does it for all select elements on the page, if you need to restrict replace the selector $("select") with a more specific one:
$( document ).ready(function() {
manageSelectValues();
$("select").change(manageSelectValues);
});
function manageSelectValues()
{
$("select").each(function() {
var id = $(this).attr('id');
var value = $(this).find(":selected").val();
if (value) {
$("select[id!='" + id + "']").find("option").filter(function() { return this.value == value;}).remove();
}
$(this).find("option").filter(function() { return this.value != value;}).each(function() {
var unselValue = $(this).val();
$("select").filter(function() { return $(this).find("option").filter(function() { return this.value == unselValue;}).length == 0; }).append(
$('<option></option>').val(unselValue).html(unselValue));
})
});
}
In my Java class I've declared an attribute like this,
String option = "<select name='logopt'><option value='fulllog'>Complete Log</option><option value='InfoLog'>INFO Log</option><option value='ErrorLog'>Error Log</option></select><br><br>";
request.setAttribute("LogOption", option);
in my jsp I've accessed the same like this,
<div id="box">${LogOption}</div>
Now as this is a select box, I want to get the select box value in Javascript How do I do this?
Like this -
JavaScript --> var selectVal = document.getElementsByName('logopt')[0].value;
jQuery --> var selectVal = $('select[name=logopt]').val();
Demo ----> http://jsfiddle.net/8t6mP/
Based on this answer
In my Java class I've changed what I had to,
String option = "<select name='logopt'onchange='xyz(this)'><option value='fulllog'>Complete Log</option><option value='InfoLog'>INFO Log</option><option value='ErrorLog'>Error Log</option></select><br><br>";
request.setAttribute("LogOption", option);
in my jsp page, I've added
function xyz(sel)
{
var val = sel.value;
alert(val);
}
and now this gives me the value of select
you can use attribute selector as specified of jquery as specified by Adil
<div>
<select name='logopt'>
<option value='fulllog'>Complete Log</option>
<option value='InfoLog'>INFO Log</option>
<option value='ErrorLog'>Error Log</option>
</select>
</div>
<input type="button" onClick ="return test();"/>
and js method
function test()
{
var x = $('select[name=logopt]').val();
alert(x);
}
jsfiddle link
jsfiddle