Jquery val() does not recheck / reevaluate the value - php

Question

short description
I'm using jquery, jqueryUI and ajax.
I use val() to get value from a field the first time it does it perfectly
but if I change the value in the field the value stay the same.
Long descriptionn
I'm developing a big project I have ~2 years on this project
My head is pumping! ;)
I have something like this :
this is the html for the div :
<div id="add_task_diag" style="display: none">
<label for="task">Task : </label><input id="taskfrm" label="Task" value="task" name="taskval" placeholder="e.g fill in tax form" />
<button value="submit" class="btn btn-large add_task_frm">Add task</button> <button class="btn btn-large cancel_add_task">Cancel</button>
</div>
<button class="btn btn-primary" id="add_task"><i class="icon-file icon-white"></i> Add Todo</button>
this is the script :
<script>
$(".add_task_frm").click(function() {
function taskgen() {
var data = "task=" + $("#taskfrm").val();
alert(data); // only for debuging
var task_data = data;
alert(task_data); // only for debuging
$.post("whereitneedtogo.php?task=action80", task_data), //this is the ajax part
$("#add_task_diag").dialog("destroy"); // I had here close I changed it to "destroy"
task_data = undefined; //I tried to unset the variable
}
taskgen();
});​
</script>
When I run it everything work fine! when I resend with another value the variable stays the same. e.g if I put test123 in the field in the seccond test it will stay test123
I need to reload the page to reset the variable.
I don't want to use location.reload()
this file is 1700+ lines long but this is the part where the problem is.
I tried alot of things like :
- setting my script after Dom is ready
- setting my variables to undefined or null
- destroy the jquery tabs
- the only part seems to be working for me is location.reload but my application is full ajax.
Thank for helping I hope this is stupid or easy one .

Answer 1

Why are you trying to declare and call the function every time you click.. Try moving it outside the click event handler..
<script>
$(".add_task_frm").click(function() {
taskgen();
});​
function taskgen() {
var data = "task=" + $("#taskfrm").val();
alert(data); // only for debuging
var task_data = data;
alert(task_data); // only for debuging
$.post("whereitneedtogo.php?task=action80", task_data), //this is the ajax part
$("#add_task_diag").dialog("destroy"); // I had here close I changed it to "destroy"
task_data = undefined; //I tried to unset the variable
}
</script>
You might also encounter scoping issues when you want to call the taskgen() from some other place..

Answer 2

It's because you define your closure inside the click handler. Move the taskgen function outside of the click handler, wrap everything in $(document).ready() and you should be good to go! See below:
$(document).ready(function() {
$(".add_task_frm").click(function() {
taskgen();
});
function taskgen() {
var data = "task=" + $("#taskfrm").val();
alert(data); // only for debuging
var task_data = data;
alert(task_data); // only for debuging
$.post("whereitneedtogo.php?task=action80", task_data), //this is the ajax part
$("#add_task_diag").dialog("close").dialog("destroy"); // I usually chain 'close' and 'destroy'
}
});