All geek questions in one place

Two buttons, do two different things with jQuery

So, I think I'm pretty close to the end, and now I need to add a series. As you can see, I have two bottoms where he says search for a movie and search for seri My site

This means that I already have movies to work well, and now I stayed in the series. The problem is that I really don’t know how to make Javascript know that the buttom series is included, and then it should take my API and provide the information as is. I already have my JS for made films, which looks 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 get the correct methods myself and so on. the only problem for me right now is that I can’t, or I don’t know how to do it, when her series, she should receive information from this URL: var url = " http: // localhost: 1337 / search / tv "+ input;

I hope I explained that this is understandable.

EDIT: my HTML looks like to make sure you know how you see it all.

  <!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>
+5
source share
4 answers

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

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

And then you can change the API call in your AJAX function, for example:

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

UPDATE

Since you did not 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); }); });
+3
source

you can specify your url var as follows:

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

You will need to specify the switch value for your API. You can easily capture the value of a switch using:

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

And then connect it to the API url using

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

Note: you will need to change the values ​​of your switches to get the desired result.

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

+1
source

Update your ajaxCall function 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 }
+1
source

Source: https://habr.com/ru/post/1234312/

More articles:


All Articles