Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1413
  • Last Modified:

Jquery dialog only works first time

I have a form in a jquery dialog that opens from inside a jquery tab. I'm submitting the form with ajax.  Everything works great the first time but if I open the dialog again the submit no longer works. the dialog is displaying the form via ajax as well.

here is the file I'm displaying in the dialog:


<script language="javascript" type="text/javascript">
jQuery(document).ready(function(){
 // Cancel form submition, return false
 jQuery("#loginForm").submit(function(){
  return false;
 });
 // Manage submit button click event
 jQuery("#submit").click(function(){
								
  // Call some function to handle Ajax request
  FormAjaxStuff();
 });
}); // End of jQuery(document).ready
function FormAjaxStuff(){
 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",
  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="submit">Login</button>
	</form>
</div>

Open in new window

0
jimfrith
Asked:
jimfrith
  • 5
1 Solution
 
MorcalavinCommented:
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,
  ...

Open in new window

0
 
jimfrithAuthor Commented:
thanks for the suggestion but it did not fix my problem.
0
 
jimfrithAuthor Commented:
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>

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
jimfrithAuthor Commented:
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);

Open in new window

0
 
jimfrithAuthor Commented:
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');
						
	});

Open in new window

0
 
jimfrithAuthor Commented:
nevermind I got it sorry that was a stupid mistake:

moved everything outside the onclick except :

$dialog.load('modalForm.php');
$dialog.dialog('open');

working as expected now.
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now