Requesting content without reloading the page

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.

No one is going to write your code for you. Check out some [jQuery tutorials and read through the documentation](http://docs.jquery.com/Main_Page) and come back when you run into a specific issue or problem. — Colin Brock, Jul 12 '12 at 22:09
And what is the problem exactly? I don't see a question in your post. — jmoerdyk, Jul 12 '12 at 22:10
I just want idea to start. can u please specify me exact place to look in to jquery website? — ak1481, Jul 12 '12 at 22:12
@jmoerdyk - I have index page that contains different news articels and using optgroup i want to display specific articles by clicking specific options. — ak1481, Jul 12 '12 at 22:15
He just wants to insert html (using AJAX) when an option is selected (@ak1481 write this in your post). — EricG, Jul 12 '12 at 22:31
@EricG - yes, i want to do something like that. when ever i click on element AJAX should display specific container of data withour reloading whole page. i found somthing like this $('#result').load('ajax/test.html #container'); but i dont know how can i use this in my case. Thanks — ak1481, Jul 12 '12 at 22:37
Well, you wouldn't want to use the load function. This means that you want to do the ajax request when the DOM elements are actually loaded (you'll know the body.onload, when the body is done loading). You'll want to use the click/select/change. Consider my suggested solution below. — EricG, Jul 12 '12 at 23:04

EricG · Answer 1 · 2012-07-12T23:05:37.297

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

uınbɐɥs · Accepted Answer · 2012-07-31T04:45:42.057

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.

Thanks Shaquin. I'm using ASP.NET MVC for this. Also, my view file name in Index.cshtml can i use .cshtml extention file on load function? — ak1481, Jul 13 '12 at 13:16
@ak1481 - Yes, it can as long as it returns the correct content. The GET parameter `0` contains the selected options `value`, and the GET parameter `1` contains the original text (before it was replaced with anything). (At least with PHP the GET paramets are `0` and `1`). — uınbɐɥs, Jul 14 '12 at 22:03

Requesting content without reloading the page

2 Answers2

Linked