Mini Cascading Mini Cascading - 5 months ago 11
jQuery Question

can not make ajax call in desired way

I want to fetch JSON data when

option
of the
select
is selected my javascript code is



var root = 'http://jsonplaceholder.typicode.com/posts';
$(function(){
var log = $('#log');
$('#comment').alwaysChange(function(val){
print('SELECTED '+ val);

$.ajax({
url: root,
method: 'GET'
}).then(function(data) {
console.log(data);
});
});

function print(text){
log.prepend('<p>' + text + '</p>');
}
});




$.fn.alwaysChange = function(callback){
return this.filter('#comment').each(function(){
var elem = this;
var $this = $(this);

$this.change(function(){
callback($this.val());
}).focus(function(){
elem.selectedIndex = -1;
elem.blur();
});
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="comment">
<option>Select...</option>
<option>Yes</option>
<option>No</option>
</select>

<br/>

<div id="log"></div>





the above code is working as wanted, but I want to have two
<select>
elements as

<select id="num">
<option>Select...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<br/>
<select id="comment">
<option>Select...</option>
<option>Yes</option>
<option>No</option>
</select>


after this I want to get value of selected
<option>
of select element with id
#num
and build the ajax url as

var root = 'http://jsonplaceholder.typicode.com/posts' + "value of selected `<option>` of select element with id `#num`" + "if value of selected `<option>` of select element with id `#comment` is 'Yes' then add '/comments' at the end of the url else nothing be added";


I have tried in this way



var root = 'http://jsonplaceholder.typicode.com/posts';
$(function(){
var log = $('#log');
$('#comment').alwaysChange(function(val){
if(val == "Yes"){
$.ajax({
url: root+"/"+$('#num option:selected').text() + "/comments",
method: 'GET'
}).then(function(data) {
console.log(data);
});
}else{

$.ajax({
url: root,
method: 'GET'
}).then(function(data) {
console.log(data);
});
}
});

function print(text){
log.prepend('<p>' + text + '</p>');
}
});




$.fn.alwaysChange = function(callback){
return this.filter('#drop-location').each(function(){
var elem = this;
var $this = $(this);

$this.change(function(){
callback($this.val());
}).focus(function(){
elem.selectedIndex = -1;
elem.blur();
});
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="num">
<option>Select...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<br/>
<select id="comment">
<option>Select...</option>
<option>Yes</option>
<option>No</option>
</select>

<br/>

<div id="log"></div>





but the above code does not work

Answer

change #drop-location to #comment

see:

var root = 'http://jsonplaceholder.typicode.com/posts';
            $(function(){
                var log = $('#log');
                $('#comment').alwaysChange(function(val){
                    if(val == "Yes"){
                        $.ajax({
                          url: root+"/"+$('#num option:selected').text() + "/comments", 
                          method: 'GET'
                        }).then(function(data) {
                          console.log(data);
                        });
                    }else{

                        $.ajax({
                          url: root,
                          method: 'GET'
                        }).then(function(data) {
                          console.log(data);
                        });
                    }
                });
                
                function print(text){
                    log.prepend('<p>' + text + '</p>');
                }
            });




            $.fn.alwaysChange = function(callback){
                this.filter('#comment').each(function(){
                    var elem = this;
                    var $this = $(this);
                    
                    $this.change(function(){
                        callback($this.val());
                    }).focus(function(){
                        elem.selectedIndex = -1;
                        elem.blur();
                    });
                });
            }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="num">
    <option>Select...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>
<br/>
<select id="comment">
    <option>Select...</option>
    <option>Yes</option>
    <option>No</option>
</select>

<br/>

<div id="log"></div>

Comments