jQuery .change to load different .php file - php

Question

My project is in PHP / MySQL. I'm using Smarty for a template engine.
I have a < select > tag in my smarty file:
maps.tpl -
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<form method="post" action="maps.php">
<td colspan="3">
<select id="cmdview" name="cmd">
<option value=""></option>
<option value="commdata" {if $cmdOn == "commdata"}selected="true"{/if}>Communications</option>
<option value="contacts" {if $cmdOn == "contacts"}selected="true"{/if}>Contacts</option>
<option value="enrollment" {if $cmdOn == "enrollment"}selected="true"{/if}>Enrollment</option>
<option value="all" {if $cmdOn == "all"}selected="true"{/if}>All Schools</option>
</select>
<input type="submit" name="doSwitch" value="Submit" />
</td>
<div id="append"></div2>
</form>
So far, my jQuery code finds which value is selected:
{literal}
<script>
$('#cmdview').change(function() {
//alert('Handler for .change() called.');
var str = "";
url = "maps_append.php";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$('#append').text(str);
})
.change();
</script>
{/literal}
I need the jQuery to listen for the value of "cmdview" then post that value to file: maps_append.php . I need that file to .append/.change the current file (maps.php/maps.tpl) without reloading.
But, my jQuery is only half working. The jQuery does find the value I'm trying to pass, and I've gotten it to load that correct value in the <.d.i.v.> tag with id #append . The only thing I can't seem to do is that take value and actually post it to maps_append.php
Any help will be very appreciated!
Thank you!
PS: I think the change will be something like this:
This needs to be replaced:
$('#append').text(str);
})
.change();
With something like this:
url = "maps_append.php";
$.post( url, { cmd: cmdview, value: str } ,
function( data ) {
var content = $( data );
$( "#result" ).append( content );
}
);
$term_input.val('');
});
EDIT::
My current file is maps.php. I now have it appending maps_append.php to maps.php with this code:
<script>
$('#cmdview').change(function() {
//alert('Handler for .change() called.');
var str = "";
url = "maps_append.php";
url = "maps_append.php";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$('#append').load(url);
})
.change();
</script>
I just need to post the value of the select tag now!
Closer still... please see this edit:
<script>
$('#cmdview').change(function() {
//alert('Handler for .change() called.');
var str = "";
url = "maps_append.php";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$.post( url, { str: "$cmdOn" } ,
function( data ) {
var content = $( data );
$('#append').load(url);
})
.change();
});
</script>
Now the maps_append.php page only appends to maps.php when I change the value of the select tag. I only need to include the value of the select tag when maps_append.php appears now.

Answer 1

I don't quite understand the details of what you are doing here -- all the code looks fine but the plan seems a little strange.
Typically you don't have a program change the source. Instead you would have code store data in a database and the code would be driven by the database to produce different output.
Maybe this is what you want to do with the content -- store it in a database and have a page that displays it.
To load content via jQuery use the following
function loadContent(elementSelector, sourceUrl) {
$(""+elementSelector+"").load("http://yoursite.com/"+sourceURL+"");
}
See this link: http://frinity.blogspot.com/2008/06/load-remote-content-into-div-element.html