Javascript: Switch content of a div

Question

I apologize if this is too simple and has been discussed several times. I am not a Javascript/JQuery developer and I do not know what search terms I should use :-(

The problem is: I have to edit a html-page at work. There is a div which shows some content. If you click a button the content within the div should be change to another html-page.

Small example:

<form class="ReportController" name="DateRange" action="report" method="post" >
    <input type="checkbox" name="kategorie[]" />All
    <input type="checkbox" name="kategorie[]" value="Category1"/>
    <input type="submit" name="submit" value="Recalc" />
</form >
<div id="report" >
    < !-- some content -- >
</div >

Whenever I change the filtering at the top I want the new data to be displayed in the report-div. The new data is already there in different html-files. So if someone chooses "All" it should open (for example) all.html in the report-div.

Thanks! Alex

possible duplicate of [HTML/Javascript change div content](http://stackoverflow.com/questions/2554149/html-javascript-change-div-content) — Barun, Nov 06 '13 at 08:06
As far as I can tell the question you found was to add HTML code and not a complete file. — AlexWerz, Nov 06 '13 at 11:59

score 1 · Accepted Answer · answered Nov 06 '13 at 08:09

1

You can use .load function here.

Eg: Suppose if you want to load all.html file:

$( "#report" ).load( "all.html" );

For more info: http://api.jquery.com/load/

answered Nov 06 '13 at 08:09

Joke_Sense10

5,341
2
18
22

score 0 · Answer 2 · answered Nov 06 '13 at 08:13

I assume those files are stored on your server. So what you could do is send a Ajax request to your server (idk what server-side programming language you use, thats why I can't give further instructions here). In asp.NET f.e. you could use a WebMethod or a HttpHandler to handle this request, in ruby on rails the routes-file would route this request to a specific controller-action. In the server-side code you would read the passed argument (here "selected"), open the corresponding file, read it into a string and write the string into the response.

The request could look like:

$.ajax({
    url: "adress/route/httphandler/etc.",
    data: {"selected":$("#selectionBox").value()},
    method: "get",
    success: function(data){
        $("#report").html(data);
    }
});

EDIT: Ok, forget it, seems like the .load()-function does exactly this. :D

Javascript: Switch content of a div

2 Answers2