Jquery set selected value for cloned dropdown based on database - javascript

Hi i am using jquery to pull data from database n if the field has some value, i am calling clone function to create a dropdown list and using that value to set the selected value for dropdownbox. Like in code below database returns score so i am trying to set selected value of dropdown to score. ANDCriteria2 is the dropdown created using clone. Even if i try to print ANDCriteria's selected value which by default should be total_balance, it show empty alertbox (alert($('#ANDCriteria2').val()) as if the dropdown doesnt even exist
HTML
<div id="ListOne">
<div id="crit">
<div id="innerDiv2">
<select name="ANDCriteria2">
<option value="total_balance">Total Balance</option>
<option value="collector_code">Collector Code</option>
<option value="score">Score</option>
<option value="standard_desc">SDC</option>
<option value="acct_age">Account Age</option>
<option value="attempts_total">Total Attempts</option>
<option value="phone_age">Phone Age</option>
</select>
</div>
</div>
</div>
Jquery ready function
(document).ready(function(){
$('#lst').change(function(){
$.ajax({
type: "GET",
url: "getter.php",
data: "list=" + $(this).val(),
success: function(data){
var items = JSON.parse(data)
var andc2 = items[5];
if(andc2 === 'score ') {
clone ();
alert("BEFORE");
//$('#ANDCriteria2 option').eq(2).attr('selected', 'selected');
//alert( $('.innerDiv2 ANDCriteria2').text());
$('#ANDCriteria2 > .innerDiv2 >.crit option[value=score]').attr('selected','selected');
alert("AFTER");

I think you mean $("[name='ANDCriteria']") and not $("#ANDCriteria"). # is for ID based selection.
Culprit:
<select name="ANDCriteria2">
And you're using:
$('#ANDCriteria2 > .innerDiv2 >.crit option[value=score]')

Related

Populate dropdown list upon selecting a value from same dropdown list

I have a drop down which has some set of values. Once I select the value from the dropdown list and I can see that filter is happening. If I want to filter the another value from the dropdwon then I have to do refresh without refresh the filtering is not happening. Overall If I select the value from the dropdown the filter is happening if I want to see the filter for next value I have to do refresh without refresh the filter is not happening.
Here is my HTMl code
<div class="col-md-4">
<select class="form-control" id="statusFilter">
<option value="">statuses</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div><script>
$("#statusFilter").on('change',function(){
var dropdownvalue = document.getElementById("statusFilter")
var selectStatus = dropdownvalue.options[dropdownvalue.selectedIndex].value
$.ajax({
type: 'POST',
url: '/status/filter',
data:{
'selectedstatus':selectStatus
},
success:function(result){
console.log(result)
if (result=='error'){
alert("There are no status value")
document.location.href="/status";
}
else{
document.write(result);
}}
})
})
</script>
I am not showing the entire backend
if len(status_list) > 0:
return render_template("status_list.html",result=status_list)
else:
result = 'error'
return result
is there any way we can filter the selected values without refresh in dropdown?
My backend is returning the list if it has some values or it returns error

Clone selected dropdown value after page redirect

I'm learning jquery... This is my problem, I need to clone the value selected from web page 1 and redirect webpage1 to webpage2...
I found some codes here and tried to combine them...but the code below only redirects and does not clone dropdown value to webpage2 based on the selected value from webpage1....
function moveTo(optionValue) {
if(optionValue=="") return false;
window.location='.htm'+optionValue;
}
var $orginalDiv = $('#container');
var $clonedDiv = $orginalDiv.clone();
//get original selects into a jq object
var $originalSelects = $orginalDiv.find('select');
$clonedDiv.find('select').each(function(index, item) {
//set new select to value of old select
$(item).val( $originalSelects.eq(index).val() );
});
$clonedDiv.appendTo('clonedItem')
WebPage1 Dropdown List
<div id="container">
<p>Priority</p>
<select name="priority" id="drop1" size="1" onchange="moveTo(this.options[this.selectedIndex].value);">
<option value="form2.html">Low</option>
<option value="form2.html">Normal</option>
<option value="form2.html">High</option>
<option value="form2.html">Emergency</option>
</select>
</div>
WebPage2 Dropdown List
<div id='clonedItem'>
<p>Priority</p>
<select name="priority" id="drop2" size="1">
<option value="Low">Low</option>
<option value="Normal">Normal</option>
<option value="High">High</option>
<option value="Emergency">Emergency</option>
</select>
</div>
Please advise on how to fix this or if there is another way aside from using jquery...Thanks.
Since the page refreshes, you can not store variable is js directly. There are different ways to achieve what you want. If i understand correctly, the two selects are the same, so they have the same options. for this, i would say the "GET" parameter is the most usefull. in your redirect function just add the index of selected option as a GET to the redirect URL:
function moveTo(optionValue) {
if(optionValue=="") return false;
window.location='http://newURL.com'+"?index="+optionValue;
}
Then you just need a js function on the new page which can filter the GET parameter out of the location:
function parse(val) {
var result = "Not found",
tmp = [];
location.search.substr(1).split("&").forEach(function (item) {
tmp = item.split("=");
if (tmp[0] === val) result = decodeURIComponent(tmp[1]);
});
return result;
}
(see this aswer for src)
Then finally call the parse function on pageload on the new page and make the option active:
var index = parse(window.location);
$('#drop2 option').eq(index[0]).addClass('selected');

Retain filtering option when paginating

I'm trying to add a new feature to this pagination/filtering script but so far, without succes. I want that, when you change the page, the filter you picked from the top right corner select (that with "Ordonare dupa...) to remain picked instead of switching back to the first option.
This is my website - http://www.wheelsmarket.ro/cautare/jante/1
To paginate/filter i used this function:
$(document).ready(function()
{
$('.sortare').on('change', function(){
$.ajax({
url: '/filtrare-jante.php',
type: 'POST',
data: {'selected' : $(this).val(), 'pagina_id' : <?php echo $_GET['pagina'];?>},
success: function(data){
console.log(data); // do something with what is returned
$('#myTest').html(data);
$('#queryInitial').html('null');
}
});
});
All the querys are made inside a #myTest div, and the myTest div gets changed without reloading when you change that select. The problem is that the select box is out of #myTest div, so i doubt that i can make use of that function i have.
ex:
<select class="sortare select" >
<option value="1">cele mai noi</option>
<option value="2">cele mai ieftine</option>
<option value="3">cele mai scumpe</option>
</select>
<div id="myTest">
code
</div>
If i understood correctly you need something like :
1) Add id to your options:
<select class="sortare select" >
<option id="sel1" value="1">cele mai noi</option>
<option id="sel2" value="2">cele mai ieftine</option>
<option id="sel3" value="3">cele mai scumpe</option>
</select>
<div id="myTest">
code
</div>
AND change tha attr() to selected in jquery :
$(document).ready(function()
{
$('.sortare').on('change', function(){
selValue = $(this).val(); //---> Store this value in a variable.
$.ajax({
url: '/filtrare-jante.php',
type: 'POST',
data: {'selected' : $(this).val(), 'pagina_id' : <?php echo $_GET['pagina'];?>},
success: function(data){
console.log(data); // do something with what is returned
$('#myTest').html(data);
$('#queryInitial').html('null');
$('#sel'+selValue).attr("selected","selected"); //---> Use the variable we created to determine which option should be set to selected dynamically
}
});
});

How do I select displayed value as opposed to VALUE options?

We have the following SELECT combobox that is populated dynamically with ajax and httphandler web service (.ashx).
When SELECT combobox is dynamically populated, it looks like this:
<select name="selectid" id="selectid">
<option value="">-Select an option-</option>
<option value="1">Test1</option>
<option value="2">Test2</option>
<option value="3">Test3</o4tion>
<option value="4">Test5</option>
<option value="5">Test6</option>
<option value="6">Test7</option>
</select>
Below is the js:
function getText() {
$.ajax({
url: 'rulings.ashx',
dataType: 'json'
})
.done(function(textInfo) {
$(textInfo).each(function(i, texts) {
$('<option>').val(texts.dbtextID).text(texts.textToBeDisplayed).appendTo( $('#selectid') );
})
});
}
When we display the values from the dropdown, it displays the VALUE options instead of the displayed text.
Example from the combobox above, it displays 1 instead of Test1.
How do I modify the script to show displayed text instead of VALUE options?
Try this code , just put it inside
$(document).ready(function(event){
$("#selectid").on('change',function() {
//alert($("#selectid option:selected").text());
$('#summTextvalue').html($("#selectid option:selected").text());
});
})
The ON method in jQuery can bind events to dynamically created elements.
or you can also do something like
function _bindEvent()
{
$("#selectid").on('change',function() {
alert($("#selectid option:selected").text());
});
}
and call _bindEvent() from your AJAX done method
Try this to get text, instead of value.
$('#selectid').change(function(){
var selectedVal=$(this).val();
alert($(this).children("option[value='"+selectedVal+"']").text());
});

Display elements in dropdown with jquery

Good day community,
I have an ASP.NET MVC4 project, where on edit page I'm use jquery script. But I have a problem to display elements on the page.
Here is my dropdown's HTML markup before changes:
<select id="ProgramId" name="ProgramId"><option value=""></option>
<option value="1">testrtu1</option>
<option value="2">testrtu2</option>
<option value="3">testtsi</option>
<option selected="selected" value="4">testrtu3</option>
</select>
And here is after jquery changes
<select id="ProgramId" name="ProgramId"><option value=""></option>
<option value="1">testrtu1</option>
<option value="2">testrtu2</option>
<option selected="selected" value="4">testrtu3</option>
</select>
But it's display on the page not a selected element testrtu3, always display first element. And when I click save button saved my first value.
Here is my jQuery function:
$(document).ready(function () {
var values = [];
$(".checkboxUniversities:checked").each(function () {
values.push($(this).val());
});
$.getJSON('/Administrator/ProgramList/' + values, function (data) {
alert('Return json result new information');
var items = '<option disabled>Select a Program</option>';
$.each(data, function (i, program) {
items += "<option value='" + program.Value + "'>" + program.Text + "</option>";
});
$('#ProgramId').html(items);
});
//var selectedElement = $("#ProgramId").find(":selected").text();
});
I guess I need somehow add selected value when create my dropdown inside jquery, or after creating, but I don't know how. Can anybody help me?
Before appeding options to your dropdown you have to save selected index or text in variable and use it further.
Sample Code:
<select id="ProgramId" name="ProgramId"><option value=""></option>
<option value="1">testrtu1</option>
<option value="2">testrtu2</option>
<option selected="selected" value="4">testrtu3</option>
</select>
<input id="click" type="button" value="click me"/>
$(document).ready(function(){
var option = '<option value="1">testrtu1</option><option value="2">testrtu2</option><option value="3">testtsi</option><option value="4">testrtu3</option>';
$("input#click").click(function(){
var selInx = $("select[name='ProgramId'] option:selected").index();
$('#ProgramId').html(option);
$('select#ProgramId').prop('selectedIndex', selInx);
});
});
DEMO FIDDLE
NOTE: As we cannot connect to your backend code to get options hardcoded in code itself and on click of button dropdown will be replaced with latest options and will update the selected index based on first one. You can use either selectedindex or text based on your requirement.

Categories

Resources