Requesting content without reloading the page [clo

Question

I want to use a select element for mobile viewing of my website. Following is the select options.

HTML:

<select name="select-choice-8" id="select-choice-nc">
        <optgroup label="News">
            <option value="feature">Fea</option>
            <option value="current">Current</option>
            <option value="research">Research</option>
        </optgroup>

        <optgroup label="Archive">
            <option value="archive">Archive</option>
        </optgroup>

        <optgroup label="Video">
            <option value="">Video</option>
        </optgroup>

        <optgroup label="Submit">
            <option value="">Story</option>
            <option value="">Event</option>
        </optgroup>
    </select>

I want use JavaScript / jQuery to do some AJAX calls based on the what the user selects in order to avoid reloading the whole page (e.g. filling a container with the returned AJAX content).

I need some ideas or examples to solve this problem.

Thanks in advance.

Answer 1

I'm not that familiar with jQuery but you'll be able to find the right syntaxis. The idea is just to get the appropriate HTML based on your selected option. That is, its corresponding value.

Consider testHTML:

<div id="News"></div>
<div id="Archive"></div>
<div id="Video"></div>

And JavaScript:

$.each("option").click(function() {
    var label = $(this).parent.label;
    var elementToUpdate = $( "#" + label ); // one of the divs in TestHTML
    var value = (this).value;
    var url = "http://mysite.php?id=" + value;
    var newHTML = $.ajax({ url: url }).done(function(){
        elementToUpdate.replaceWith( newHTML );
    });
});

Or maybe even:

<div id="selectedContent"></div>

And

$.each("option").click(function() {
    var elementToUpdate = $( "#selectedContent" ); // one of the divs in TestHTML
    var value = (this).value;
    var url = "http://mysite.php?id=" + value;
    var newHTML = $.ajax({ url: url }).done(function(){
        elementToUpdate.replaceWith( newHTML );
    });
});

Answer 2

Try this: http://shaquin.tk/experiments/select-ajax2.html.

HTML:

<select name="select-choice" id="select-choice">
    <optgroup label="News">
        <option value="feature">Feature</option>
        <option value="current">Current</option>
        <option value="research">Research</option>
    </optgroup>
    <optgroup label="Archive">
        <option value="archive">Archive</option>
    </optgroup>
    <optgroup label="Video">
        <option value="video">Video</option>
    </optgroup>
    <optgroup label="Submit">
        <option value="story">Story</option>
        <option value="event">Event</option>
    </optgroup>
</select>
<div id="article">Please select an article to view.</div>

JS:

var origText = '';
$(document).ready(function() {
    origText = $('#article').text();
    $('select').on('change', changed);
});
function changed(e) {
    $('#article').html('<span class="loading">Loading...</span>');
    $('#article').load('content.php', $.param({0: e.target.value, 1: origText}));
}

PHP:

<?php
$selected = $_GET[0];
$articles = array(
        '' => $_GET[1],
        'feature' => 'Feature article goes here',
        'current' => '<p>Lorem ipsum dolor sit amet, denique laetare ... se est Apollonius.</p>',
        'research' => 'You selected <code>research</code>',
        'archive' => 'Archives',
        'video' => '<div style="font-size:48pt;font-weight:bold;font-style:italic;background:red;text-align:center;padding:20px;margin:10px;border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;">Video</div>',
        'story' => 'Submit a story',
        'event' => 'Submit an event'
    );
$article = $articles[$selected];
echo $article;
?>

CSS (optional):

body {
    background: #ccc;
    text-align: center
}
#article {
    padding: 30px;
    margin: 20px;
    text-align: left;
    background: #eee;
    text-shadow: 1px 1px #fff;
    text-shadow: 0 0 3px #fff;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}
.loading {
    text-transform: uppercase;
    font-size: 15pt;
    text-shadow: 1px 1px #f00, 1px 2px #f00, 2px 2px #f00, 3px 3px #f00;
}

In the PHP, you would probably want to fetch the text from a database: PHP - MySQLi.