[SOLVED] Refresh after inserting

[timmah1]

Hello,

 

I have a page (http://www.cheezyfries.net/plumbing/new_job.php) that you can input a new job with certain fields.

 

In the drop down menus, that are generated from the database, if your item isn't listed, you can list it by clicking a link that pops up a new window, you input the new item, and then close the window.

 

How can I make it so that just that field (drop-down menu) gets refreshed to show the new item without refreshing the whole page?

 

Any help would be greatly appreciated.

 

Thanks in advance

[jonsjava]

Unfortunately, I know what, but not how:

AJAX.  I haven't bothered learning it, but someone here may be able to help you there.

[timmah1]

I have looked into AJAX, but I can't seem to find exactly what I need in a tutorial as such.

 

I was hoping to find a tutorial that I could alter to my needs, but no such luck :-(

[The Little Guy]

that would use some JavaScript.

[The Little Guy]

AJAX isn't required for this task.

 

You can just grab the value from the text field and repopulate the drop down menu... The problem is, that I don't remember how to do this... When I find out I will let you know.

[jonsjava]

AJAX is the only thing I know of dynamic enough to repopulate without a page refresh.

[timmah1]

Precisely!

 

I just need the drop-down menu to refresh, or re-populate, not the whole form

[The Little Guy]

AJAX is the only thing I know of dynamic enough to repopulate without a page refresh.

 

Why do you need to search the database for many values to find one extra value, when you already know the one extra value? That takes extra bandwidth, where as this non-Ajax method will not, and produce the same result.

[timmah1]

I'm not hell bent on using AJAX, I want to use whatever works, and from searching around, it looks like it's going to have to be javascript, and unfortunately, I don't know javascript well enough to do this

[DarkWater]

For the record, Ajax IS Javascript. =/  It would be MUCH easier to just use Javascript to call a Javascript function that updates the form field.

 

 

[The Little Guy]

OK, I found it.

 

main page:

<script type="text/javascript">
function loadWindow(popurl){
var winpops=window.open(popurl,"subWindow","width=400,height=500,status,scrollbars")
}
</script>



<form name="form1">
<select name="select1"> 
	<option value="v1">v1</option>
	<option value="v2">v2</option>
	<option value="v3">v3</option>
</select>
<a href="javascript:loadWindow('page.html');">Load Window</a>
</form>

 

pop-up window:

<script type="text/javascript">
function update(){
var vals = opener.document.form1.select1.innerHTML;
var newVal = document.getElementById('myV').value;
var finalVal = vals+'<option value="'+newVal+'">'+newVal+'</option>';
opener.document.form1.select1.innerHTML = finalVal;
document.theForm.submit();
}
</script>

<form name="theForm">

<input type="text" id="myV" />
<input type="button" value="Save" onclick="update();" />

</form>

[timmah1]

That works great, but how does that populate the database?

 

The drop-down menu is populated from information in the database. The pop-up needs to insert the new information into the database, and then on the main page, it needs to re-populate the drop-down with the new information.

 

does that make sense?

[The Little Guy]

well, you just send it to the file that updates the database

 

don't forget to add an action and method to pop-up boxes form:

 

<form name="theForm" method="save.php" action="post">

<input type="text" id="myV" />
<input type="button" value="Save" onclick="update();" />

</form>

[timmah1]

Here's the main page

<span class="style1">Job Type Not Listed?<br /><a href="javascript:loadWindow('pop_job_type.php');">Click Here</a>

 

Here is the pop-up

if($_POST['enter'] == "yes"){
?>
<script type="text/javascript">
function update(){
var vals = opener.document.form1.job_type.innerHTML;
var newVal = document.getElementById('name').value;
var finalVal = vals+'<option value="'+newVal+'">'+newVal+'</option>';
opener.document.form1.job_type.innerHTML = finalVal;
document.theForm.submit();
}
</script>
<?php


include("config.php");
$insert = mysql_query("insert into job_type values ('NULL','".$_POST["name"]."')")
or die("Sorry, there was a problem inserting the job type ".mysql_error());

echo "Job Type inserted into database";
echo "<br><a href=\"javascript:window.close();\">Close This Window</a>";
}

 

I have the action within itself. It inserts into the database with no problem, but it's not automatically updating the drop down

 

You can see here with the code above http://www.cheezyfries.net/plumbing/new_job.php

[timmah1]

I got it to work by putting the code in the right place, duh!

 

Thank you do much!!

[GingerRobot]

Pesonally, i think you'd make it much more user friendly if you did use some AJAX - i would have it set up so that the link showed a small text field just below the drop down box, with a button. Once the button is clicked, you could update the drop-down box, and use AJAX to add the option to the database.