How can I use a If/Loop Statement

Question

Ok so I am running 3 searches side by side threw and API when the user enters a title and hits search they all work fine.

I have been asked however to allow the user to control what information is printed in what div (Left beaning first and far right beaning last)

By default I am just printing the information out into the 3 divs in the order of movies, tv and games.

Here is an example of the movie print out function as u can see it is being sent to pref 1 be defualt

Movie sent to pref 1

success: function (data) {
    var table = '<table>';
    $.each(data.results, function (key, value) {
        table += '<tr><td class="results-img"><img src="http://image.tmdb.org/t/p/w500' + value.poster_path + '" alt="" width="150" height="200"></td><td class="results-title"><h3>' + value.original_title + '</h3></td><td class="results-date">' + value.release_date +
            '</td><td class="results-search-btn"><button class="search-btn" id="MoreInfo">Few More Info</button></td></tr>';
    });
    $('#pref1').html(table);
}

Tv sent to pref 2

success: function (data) {

    var table = '<table>';
    $.each(data.results, function (key, value) {
        table += '<tr><td class="results-img"><img src="http://image.tmdb.org/t/p/w500' + value.poster_path + '" alt="" width="150" height="200"></td><td class="results-title"><h3>' + value.original_name + '</h3></td><td class="results-date">' + value.first_air_date +
            '</td><td class="results-search-btn"><button class="search-btn" id="MoreInfo">Few More Info</button></td></tr>';
    });

    $('#pref2').html(table);
}

Games sent to pref 3

window.gamer = function (data) {
    var table = '<table>';
    $.each(data.results, function (key, value) {
        var image = "";
        if (value.image) {
            // either icon_url,medium_url,screen_url,small_url,super_ur,thumb_url or tiny_url
            image = "<img src='" + value.image.thumb_url + "'/>";
        }
        table += '<tr><td>' + image + '</td><td td class="results-title"><h3>' + value.name + '</h3></td><td class="results-search-btn"><button class="search-btn" id="MoreInfo">Few More Info</button></td></tr>';
    });
    //This is where it tells it to print the content to 
    table += '</table>';
    $('#pref3').html(table);
}

I want to use 3 dropdown boxes to allow the user to decide what gets loaded where

<select>
    <option value="M">1</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>
<select>
<option value="M">2</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>
<select>
<option value="M">3</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>

And here is the divs they go in

<div id="container">
    <div id="pref1"></div>
    <div id="pref2"></div>
    <div id="pref3"></div>
</div>

a loop or if statement should do it I am just having problems writing them in and connecting the dropdown options.

Any help is welcome

Share what you've tried so far with regard to if / loop code. — TylerH
– TylerH, Commented Apr 26, 2014 at 16:28
@TylerH it would not help it was mostly me messing around with code it would never have worked i have always had trouble with if/loops in coding — Jamiex304
– Jamiex304, Commented Apr 26, 2014 at 16:30

Kjell Ivar · Accepted Answer · 2014-04-26 17:26:15Z

If you give your selects ids according to what they should control, like this:

<select id="pref1select">
    <option value="M">1</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>
<select id="pref2select">
<option value="M">2</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>
<select id="pref3select">
<option value="M">3</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>

Then you can do this in all your functions: (Using your first movie function as an example)

success: function (data) {
    var table = '<table>';
    $.each(data.results, function (key, value) {
        table += '<tr><td class="results-img"><img src="http://image.tmdb.org/t/p/w500' + value.poster_path + '" alt="" width="150" height="200"></td><td class="results-title"><h3>' + value.original_title + '</h3></td><td class="results-date">' + value.release_date +
            '</td><td class="results-search-btn"><button class="search-btn" id="MoreInfo">Few More Info</button></td></tr>';
    });
    //**Here is my change** 
    if($('#pref1select').val() === "M") {
        $('#pref1').html(table);
    }
    if($('#pref2select').val() === "M") {
        $('#pref2').html(table);
    }
    if($('#pref3select').val() === "M") {
        $('#pref3').html(table);
    }
}

And similary for val() === "T" etc.

Collectives™ on Stack Overflow

How can I use a If/Loop Statement

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related