Requesting content without reloading the page [closed]

Answer 1

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.

Answer 2

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 );
    });
});