CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
WeInThis
WeInThis

Reputation: 547

Two buttons, do two different things with Jquery

So I think i'm pretty close to the end and I have to add the series now. As you can see I have two bottoms where it says Search movie and Search seriMy website

Which means I got already movies to work quite good and now im left with the series. The problem is now that I don't really know how to make so the Javascript knows that the series buttom is on and then it should take my API and give the information as it is. I already have my JS for movies done which is like this:

function callAjax(input) 
{ 
var url = "http://localhost:1337/search/" + input; 

$.ajax({ 
 type:'GET', 
 url: url, 
 success: function(data){ 


    if(data) {

       console.log('SUCCESS'); 
       $('#title').html("Title: " + data.title);
       $('#release').html("Release: " + data.release);
       $('#vote').html("Vote: " + data.vote);
       $('#overview').html("Overview: " + data.overview);
       $('#poster').html('<img src="' + data.poster + '" width=250     height=450 />'); 
       $('#trailer').html("Trailer: <iframe width='420' height='315' src='https://www.youtube.com/embed/" + data.trailer + "' frameborder='0' allowfullscreen>");


    $("#lblerror").addClass("hide");

            } else {
                $("#lblerror").text("No movies were found!");
                $("#lblerror").removeClass("hide");

            }
},
 error: function(request, status, err){ 
    console.log('ERROR'); 
 } 
}); 
} 


$(document).ready(function(){ 

$('#submitButton').on('click', function(e){ 
e.preventDefault(); 

var input = $('#s').val();
callAjax(input); 
}); 

});

I can by myself get the right methods and so on. the only problem for me right now is that I can't, or I don't know how to make so when its series, it should take information from this URL: var url = "http://localhost:1337/search/tv" + input;

I hope I explained so its understandable.

EDIT: My HTML looks like this just to make sure so you know how you all can see that. 

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MovieTrailerbase</title>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>

<div id="page">

    <h1>The MovieTrailer search</h1>

    <form id="searchForm" method="post">
        <fieldset>

            <input id="s" type="text" />

            <input type="submit" value="Submit" id="submitButton" />

            <div id="searchInContainer">
                <input type="radio" name="check" value="site" id="SearchMovie" checked />
                <label for="SearchMovie" id="siteNameLabel">Search movie</label>

                <input type="radio" name="check" value="web" id="SearchSeries" />
                <label for="SearchSeries">Search series</label>
            </div>

        </fieldset>
    </form>

    <div id="lblerror"></div>

<aside>
<div id="title"></div>
<div id="release"></div>
<div id="vote"></div>
<div id="overview"></div>
<br>
<div id="trailer"></div> 

</aside>

<div id="poster"></div>


</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>


</html>

Upvotes: 4

Views: 962

Answers (4)

blurfus
blurfus

Reputation: 14031

Update your ajaxCall function to something like this

UPDATED (from comments)

function callAjax(input) {
    var optionSelected = $('input[name="check"]:checked').val();
    console.log(optionSelected);

    var url;

    if (optionSelected === 'site') { // for Search movie
        url = "http://localhost:1337/search/" + input
    } else {
        // your other URL here for search series
        url = "http://localhost:1337/searchseries/" + input
    }

    $.ajax({
        type: 'GET',
        url: url,
        success: function (data) {
            if (data) {
                // you may have to fetch the value again here... not sure
                // var optionSelected = $('input[name="check"]:checked').val();

                if (optionSelected === 'site') {
                    handleMovieResponse(data);
                } else {
                    handleSeriesResponse(data);
                }
            } else {
                $("#lblerror").text("No movies were found!");
                $("#lblerror").removeClass("hide");

            }
        },
        error: function (request, status, err) {
            console.log('ERROR');
        }
    });
}

function handleMovieResponse(data) {
    console.log('SUCCESS');
    $('#title').html("Title: " + data.title);
    $('#release').html("Release: " + data.release);
    $('#vote').html("Vote: " + data.vote);
    $('#overview').html("Overview: " + data.overview);
    $('#poster').html('<img src="' + data.poster + '" width=250     height=450 />');
    $('#trailer').html("Trailer: <iframe width='420' height='315' src='https://www.youtube.com/embed/" + data.trailer + "' frameborder='0' allowfullscreen>");

    $("#lblerror").addClass("hide");
}

function handleSeriesResponse(data) {
    // your code for series here
}

Upvotes: 1

Buzinas
Buzinas

Reputation: 11725

You can send the $('#searchSeries').prop('checked') to the callAjax function, e.g:

var input = $('#s').val();
var isSeries = $('#searchSeries').prop('checked');

callAjax(input, isSeries);

And then, you can change the API call in your AJAX function, like this:

function callAjax(input, isSeries) 
{ 
  var url = 'http://localhost:1337/search/' + (isSeries ? '/tv' : '') + input; 
  /* ... */
}

UPDATE

Since you didn't understand what I said above, there is a snippet with the full code below:

function callAjax(input, isSeries) {
  var url = "http://localhost:1337/search/" + (isSeries ? '/tv' : '') + input;

  $.ajax({
    type: 'GET',
    url: url,
    success: function(data) {
      if (data) {
        console.log('SUCCESS');
        $('#title').html("Title: " + data.title);
        $('#release').html("Release: " + data.release);
        $('#vote').html("Vote: " + data.vote);
        $('#overview').html("Overview: " + data.overview);
        $('#poster').html('<img src="' + data.poster + '" width=250     height=450 />');
        $('#trailer').html("Trailer: <iframe width='420' height='315' src='https://www.youtube.com/embed/" + data.trailer + "' frameborder='0' allowfullscreen>");

        $("#lblerror").addClass("hide");

      } else {
        $("#lblerror").text("No movies were found!");
        $("#lblerror").removeClass("hide");
      }
    },
    error: function(request, status, err) {
      console.log('ERROR');
    }
  });
}


$(document).ready(function() {

  $('#submitButton').on('click', function(e) {
    e.preventDefault();

    var input = $('#s').val();
    var isSeries = $('#searchSeries').prop('checked');
    callAjax(input, isSeries);
  });

});

Upvotes: 3

Kevin Lee
Kevin Lee

Reputation: 1191

You will have to provide the value of the radio button to your API. You could easily grab the value of the radio button by using:

var radioSelection = $('#searchInContainer').find('input[name=check]:checked').val();

And then plug it into your API url with:

var url = "http://localhost:1337/search/" radioSelection + input;

Note: you will need to change the values of your radio buttons to get the desired output.

For example, with your current values and the above code, when you select 'Series', it will output "http://localhost:1337/search/web" + input.

Upvotes: 1

wawawoom
wawawoom

Reputation: 101

you can set your url var like this : 

var url = "http://localhost:1337/search/" + $('input[name="check"]:checked').val();

Upvotes: 1

Related Questions