Refreshing an iframe after ajax POST submit

Question

I have a message submit via AJAX that submits a message, then does some nice looking action in the succes function. My question is this: How do I get the page to reload after the slipeUp() has completed? For what it's worth the window content is inside an iframe with id="thread" if that's important. Here's my code. All working nicely except I can't get the page to reload after the slideUp(). Any help is appreciated!

  $(function() {
  $('.error').hide();
  $("#button").click(function() {

    $('.error').hide();

      var subject = $("input#subject").val();

      if (subject == "")
        {
      $("label#subject_error").show();
      $("input#subject").focus();
      return false;
        }

      var message = $("textarea#message").val();

      if (message == "")
        {
      $("label#message_error").show();
      $("textarea#message").focus();
      return false;
        }

        var thread_id = {THREAD_ID};
        var sender_id = {SENDER_ID};

        var dataString = 'sender_id='+ sender_id + '&thread_id=' + thread_id + '&message=' + message + '&submit=' + true;
        //alert (dataString);return false;
        $.ajax(
        {
          type: "POST",
          url: "{U_NEW}",
          data: dataString,
          success: function()
            {
            $('.dialog').html("<div id='succes'></div>");
            $('#succes').html("<h2>{L_MESSAGE_SENT}</h2>")
            .hide()
            .fadeIn(800, function()
                {
              $('#succes')
            });

            $('#succes').delay(1500).slideUp(500);
            }
        });
  });
});

http://stackoverflow.com/questions/4249809/reload-an-iframe-with-jquery — egis, Mar 19 '12 at 11:57

T. Junghans · Answer 1 · 2012-03-19T13:11:39.110

0

slideUp can take a callback function as second parameter.

.slideUp( [duration] [, callback] )

So you could do something like this:

$('#succes').delay(1500).slideUp(500, function () {
    //document.getElementById('thread').contentWindow.location.reload(); // reload iframe
    var iframe = window.parent.document.getElementById('thread');
    iframe.src = iframe.src;
});

edited Mar 19 '12 at 13:11

answered Mar 19 '12 at 11:59

T. Junghans

11,385
7
52
75

Thanks very much for the response! It does reload the page, however it seems to negate everything else that's supposed to happen, including the AJAX post submit, the fading in succes message, and the sliding up bit. Moreover, it load the entire page instead of just the "thread" frame.... – NFLineast Mar 19 '12 at 12:16
@NFLineast I've updated my code to reload the iframe content. This will only work though if the iframe source is on the same domain. – T. Junghans Mar 19 '12 at 12:32
Thanks TJ. Bizarrely, it still insists on reloading the entire page instead of just the "thread" frame. And it still does not perform the AJAX submit, which it does if I leave this out. Maybe there's something wrong with how my code flows...Oh, and BTW, yes the iframe is on the same domain. – NFLineast Mar 19 '12 at 12:37
@NFLineast: Is the ajax submit in the iframe or in the page containing the iframe? – T. Junghans Mar 19 '12 at 12:42
it's in the iframe. There's another (different) AJAX submit in the page containing the iframe, if that's an issue? – NFLineast Mar 19 '12 at 12:44
@NFLineast I've updated the code again. I checked this myself with different browsers. Safari will reload the iframe without any spinning wheel indicating a page load. Firefox and Chrome however will. – T. Junghans Mar 19 '12 at 13:12
Thanks very much TJ. I'll give that a whirl and let you know how I get on. – NFLineast Mar 19 '12 at 13:21
Well, I'm quite embarrassed to admit that the first code you posted was perfect, TJ. Apparently, I had some residual code stuck in cache. After much head stratcing, I started over with the entire page - and your original suggestion (identical to that posted by Nicola) worked a charm. Many apologees, and thanks so much for helping out. – NFLineast Mar 19 '12 at 14:56

score 0 · Accepted Answer · answered Mar 19 '12 at 11:59

0

You mean

  $('#succes').delay(1500).slideUp(500, function(){ location.reload();});

answered Mar 19 '12 at 11:59

Nicola Peluchetti

76,206
31
145
192

Thanks very much, Nicola. This seems to perform the same action as the suggestion posted by TJ... – NFLineast Mar 19 '12 at 12:27

Refreshing an iframe after ajax POST submit

2 Answers2