0

I have homepage.asp (old legacy code) with a div like this:

   <div id="poll"></div>

I am loading another page with a self contained form (it submits to itself) in to this div like this:

        $.get('Poll/poll.asp', function(data) { 
        $('#poll').html(data);}
       );

The form on poll.asp looks basically like this :

   <form id="formPoll" onsubmit="return false">
        <table id="pollp" cellpadding="2" cellspacing="0"><tr>
            <td colspan="2" class="PollQuestion">Poll question here</td>
        </tr>        
               <tr>
                    <td width="20"><Input type="Radio" name="SelOPT" value="1" /></td>
                    <td width="230">Option 1</td>
                </tr>  
              <tr>
                    <td width="20"><Input type="Radio" name="SelOPT" value="2" /></td>
                    <td width="230">Option 2</td>
                </tr>                

        <tr><td colspan="2">
        <input id="pollSubmit" type="submit" value=" Cast Vote " />
        </td></tr></table>
        <input type="Hidden" name="mode" value="vote" />
        </form>

I am trying to submit the form without refreshing the page, but I need the page loaded in the div to reload to show the results of the form submission. On homepage.asp I have a script like this:

        $(function() {
//hang on event of form with id=formPoll
$("#formPoll").submit(function(e) {

    //prevent Default functionality
    e.preventDefault();

    //do your own request an handle the results
    $.ajax({
            url: 'Poll/poll.asp',
            type: 'post',
            dataType: 'json',
            data: $("#formPoll").serialize(),
            success: function(data) {
            //if(data.success == true){ // if true (1)
             //$("#poll").load("#poll > *");
              $('#poll').html(data);
     }
    }
            });
         });
    });

homepage.asp does not refresh on submit but it only submits the form data every other time the button is clicked and I have to manually refresh the page to reload the results. I think I have read every "refresh or reload div after submit" question on here with no luck. Any ideas would be appreciated. You can see a couple of the things I have tried commented out under the success function.

user3421260
  • 3
  • 2
  • In short, replace `$("#formPoll").submit(function(e) {` with `$(document).on('submit', '#formPoll', function(e) {` The code is trying to bind to the `#formPoll` element before that element exists on the page. You'd need to either bind after it exists, or as suggested here delegate the event handler to a common parent (in this case `document`). – David Feb 26 '20 at 21:36
  • Thank you so much David for your fast response. I really appreciate it. I made the changes you pointed out and the form will not submit at all. I am banging my head against the wall here. – user3421260 Feb 26 '20 at 21:52
  • Are there any errors on the browser debugging console? In your browser debugging tools, check the network tab to see if the AJAX request is made and the server’s response. Use the script debugger in those same tools to place breakpoints in the code and observe its behavior. Is the submit handler invoked? Is the AJAX call made? How specifically is the operation failing? – David Feb 26 '20 at 21:55
  • I viewed the console and found that I had a missing ) after the list url: type: etc. The form now submits every time without refreshing the page but it does not reload the page in the div. Thanks again. – user3421260 Feb 26 '20 at 22:23
  • I have tried a multitude of things including .done(function() { instead of success: function(data) { - nothing I seem to do reloads the page in to the div? Any ideas would be greatly appreciated. – user3421260 Feb 27 '20 at 02:06
  • Is the AJAX call finishing successfully? In the debugging tools, is the network response from the server what you expect? What is it? What’s in the variable in the success handler? Does an error handler catch anything? – David Feb 27 '20 at 02:25
  • It appears the ajax call is finishing successfully. I am not very skilled at this but I am seeing a Status Code: 200 OK and SelOPT=2432&mode=vote as parameters (these are appropriate). I added an error handler with alerts for xhr.status and thrown error. I get an alert that says 200 and no alert for a thrown error. Under the response tab of the network area I am seeing the html for the poll results, this is what I hope to see in the div. Is it possible that it is reloading the page in to the div but it is taking place before the results are available? – user3421260 Feb 27 '20 at 17:08
  • The response is an HTTP 200 and it's invoking the `error` callback for `$.ajax()`? That doesn't make sense. It sounds like something else is wrong here or some assumptions are being made during debugging, because a 200 response wouldn't be interpreted as an error. – David Feb 27 '20 at 17:17
  • Thank you once again for your help. I may very well be doing something wrong. This is what I added to the script. error: function(xhr, status, error) { alert(xhr.status); alert(thrownError); } I hope this helps. – user3421260 Feb 27 '20 at 17:34
  • And if the error handler is being invoked then the response is not an HTTP 200. I also don't see what `thrownError` is in that line of code. So there's definitely more going on than I can see here. This is probably something for a new Stack Overflow question. One in which a complete (but minimal to replicate the issue) example is shown, and in which you also indicate the exact observed response from the server in the browser's debugging tools. – David Feb 27 '20 at 19:41

0 Answers0