javascript - 通过 iframe 的外部 POST 表单

标签 javascript php ajax iframe

我正在尝试获取一个页面,其中包含要在 iframe 内加载的 POST 表单,以便用户能够确认删除列表等操作。我已成功获取要在 iframe 内加载的 JS 和表单页面,但是当我单击表单内的操作时,它不会更新列表。相反,它只是刷新页面。

该表单工作正常,因为如果我尝试在浏览器中手动访问 content-url 并更新表单,它工作正常。

如何刷新 iframe 内容而不是父页面并在 iframe 本身内加载响应?我到底做错了什么?

感谢任何帮助!!

这是我的代码:

HTML:

<button class="myclass" content-url="<?php bloginfo('siteurl') ?>/?a_action=delete_auction&pid=<?php the_ID(); ?>">Delete Me</button>
               <div class="popup"><iframe id="mynewiframeid" name="myframename" src=""></iframe></div>

JS:

  $(document).ready(function() {      
  $(document).click(function(e) {
      if ($(".popup").is(":visible")) {
        $(".popup").fadeOut("fast")
      }
  });

 $(".myclass").click(function() {
      if (!$(".popup").is(":visible")) {
        $('#mynewiframeid').attr('src',$(this).attr('content-url'));
        $(".popup").fadeIn("slow");
      }
      return false;
  });

  $(".popup").click(function(e) {
      e.stopPropagation()
  })
 });

表格:

  <div class="popup_content"> 
            <h3> You are about to delete <b><?php echo $title; ?></b>!</h3>
            <?php
            if(isset($_POST['yes_confirm']))
            {
                $s = "update ".$wpdb->prefix."posts set post_status='trash' where id='$pid'";
                $wpdb->query($s);
                echo '<div class="deleted_item_ok">';
                printf(__('Your item has been deleted successfully!'));
                echo '</div>';
            }
            else
            {
    ?>
            <form method="post">
            <div class="are_you_sure_delete">
            <?php
            _e('Are you sure you want to delete this item?');
            ?>
            </div>
 <button class="button-small button-w-green" type="submit" id="submits" name="yes_confirm">Yes, Delete</button>
 <button class="button-small button-w-red" type="submit" id="submits" name="no_confirm">No!</button>
            </form>
            <?php } ?>
            </div>

最佳答案

您正在尝试用以下 js 代码替换“popup”类中的 html..

HTML => <div class="popup"><iframe id="iframeid" src=""></iframe></div>
JS => $('.popup').html(response);

这将用响应替换上面 HTML 中的 iframe 元素......!因此响应到来后,页面内没有 iframe..

如果您确实想使用 iframe,我认为您不必处理 AJAX。只需更改 iframe 的 src 即可。您可以使用以下js代码..

$(document).ready(function() {      
      $(document).click(function(e) {
          if ($(".popup").is(":visible")) {
            $(".popup").fadeOut("fast")
          }
      });

     $(".myclass").click(function() {
          if (!$(".popup").is(":visible")) {
            $('#iframeid').attr('src',$(this).attr('content-url'));
            $(".popup").fadeIn("slow");
          }
          return false;
      });

      $(".popup").click(function(e) {
          e.stopPropagation()
      })
  });

Fiddle (with fake src urls)

关于javascript - 通过 iframe 的外部 POST 表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26622428/

相关文章:

javascript - QML/Javascript : Adding Self-Referencing Attribute to Subarrays Inside Nested var Matching Some Identifier

php - 如何在 Symfony 2 控制台命令中使用我的实体和实体管理器?

javascript - 多选复选框ajax表过滤器

javascript - React Redux 工具包 : type is not assignable to type 'CaseReducer<type, { 有效负载:任意;类型:字符串; }>

Javascript navigator.cookieEnabled 浏览器兼容性

javascript - Python 和读取 JavaScript 变量值

php - 在 PhpStorm 中使用 Xdebug 时获取 "Debug session was finished without being paused"并且没有停止执行

php - 支付 API 权限被拒绝

javascript - 使用Ajax将表单数据发送到nodejs而不重新加载页面

javascript - 如何在 JS 中获取 Ajax 的当前 url/路径?