Jquery dialog only works first time

You might try setting the cache option to false, since ajax requests can be cached by the browser and produce unexpected results.

jQuery.ajax({
  type: "POST",
  url: "backendFAQ.php",
  cache: false,
  ...

Select allOpen in new window

thanks for the suggestion but it did not fix my problem.

If I change the function so that it does not use document ready to catch the submit of the form.  instead I just call the FormAjaxStuff function with the onclick of a button,  the post goes to my submit page.  but the values are the same as the first time it was sent.  the form values are not updated the second time the dialog is opened.

 

<script language="javascript" type="text/javascript">

function FormAjaxStuff(){
	alert('WTF');
 var question = jQuery("#question").attr("value");
 var answer = jQuery("#answer").attr("value");
 var questionID = jQuery("#questionID").attr("value");
 
jQuery.ajax({
  type: "POST",
  url: "backendFAQ.php",
  cache: false,

  dataType: "html",
  data: "question=" + question + "&answer=" + answer + "&questionID=" + questionID,
  success: function(response){
   // if sucessful; response will contain some stuff echo-ed from .php
    alert("Here is your response: " + response);
   // Append this response to some <div> => let's append it to div with id "serverMsg"
   //what?  thats weird
   jQuery("#serverMsg").append(response);
  },
  error: function(){
   alert("Error occured during Ajax request...");
  }
 });
} // END OF FormAjaxStuff()
</script>


<div id="dialog" title="Create new user">
	<p id="validateTips">All form fields are required.</p>

<form id="loginForm" method="post" >
	<fieldset>
    <input name="questionID" type="hidden" value="" />
		<label for="question">Question</label>
		<input type="text" name="question" id="question" class="text ui-widget-content ui-corner-all" value="<? echo $edit; ?>" />
		<label for="answer">Answer</label>
      
		<textarea name="answer" id="answer"/></textarea>
		
	</fieldset>
  <button id="submit" type="button" onClick="FormAjaxStuff();">Login</button>
	</form>
</div>

Select allOpen in new window

ok this is weird to me when I call the function it runs I can put an alert in it and gives me the value back but its the cached value even though I'm asking for the value from a field.  it;s like the old form still exists or something.  when I close the dialog the first time all I use is

      $(this).dialog('close');

Is there something else I could do to ensure the form the fields and the values are not still there?  see the code below I'm populating the variables from the field values but the second time the function is run it alerts with the original value.

question = document.getElementById("question").value;
answer = jQuery("#answer").attr("value");
questionID = jQuery("#questionID").attr("value");
 
  alert(question);

Select allOpen in new window

Ok I'm starting to understand what my problem is here.  It's the way I open the dialog.

It sounds like maybe I should set the dialog up outside of the click function and only have

$dialog.dialog('open');

inside the click.

This works sort of the form opens again and I can change the values of the fields and the submit all works great.  The problem with this is that the form is opening with previous value in the fields even though the form needs to be loaded with ajax so I can load the field values from a mysql query as it's supposed to be an edit form.

Any suggestions?

$('#newq').click(function() {
			
			
			
			
						var $dialog = $('<div></div>')
						<!-- .html('This dialog will show every time!') -->
						.load('modalForm.php')
						.dialog({
							bgiframe: true,
			autoOpen: false,
			height: 500,
			
			 cache: false,


							title: 'Edit Question',
							modal: true,
							
							<!-- add Submit and cancel Buttons -->
											buttons: {
														'Create an account': function() {
															var bValid = true;
															
															
																	if (bValid) {
																		
																		FormAjaxStuff();
																	}
														},
														Cancel: function() {
														$(this).dialog('close');
														
													}

											}
						});
							
						$dialog.dialog('open');
						
	});

Select allOpen in new window