如何在弹出窗口中通过ajax显示内容

时间:2015-06-11 04:49:00

标签: jquery ajax wordpress

我想显示一个弹出窗口,其中的内容来自另一个文件。 现在,当弹出窗口的内容出现在同一页面上时,我正在使用此代码显示弹出窗口。

a[i] = a[i+1];
i++;

我可以将一些内容显示在弹出窗口中的其他文件然后传递文件的路径如何在上面的代码中

这将是ajax.php中的代码

 jQuery(".item").click(function(e) {
    var currentID = jQuery(this).attr("id");

    jQuery.ajax({
        method: "POST",
        url: "some.php",
        data: {
            name: "John",
            location: "Boston"
        }
    })


    .done(function(msg) {
        jQuery(".popup-overlay").html(msg);
        jQuery("." + currentID).fadeIn(300, function() {
            jQuery(this).focus();
        });
            jQuery(".popup-overlay").show();
        });
  });

现在它正在获取ajax.php中的所有div。

相反,它应该只显示具有class =" currentID"的div。

2 个答案:

答案 0 :(得分:2)

你可以像这样添加ajax请求。

jQuery(".item").click(function(e) {
    var currentID = jQuery(this).attr("id");

    jQuery.ajax({
        method: "POST",
        url: "some.php",
        data: {
            id: currentID,
            location: "Boston"
        }
    })


    .done(function(msg) {
            jQuery(".popup-overlay").html(msg);

            jQuery(".popup-overlay").show();
        });
    });

你ajax.php应该像检查它并更新我..

<?php include("wp-load.php");
$id=$_GET['id'];
 ?> 

  <div class="popup-overlay">
  <?php  
  $args = array( 'post__in' => $sss, 'post_type' => 'portfolio',);
  $loop=new WP_Query;
  $count=1;
  if($loop->have_posts()):whiile(have_posts()) :the_post();  
if($count==$id) {
  ?>
  <div class="popup-box <?php echo $count; ?> ">
      <div class="inner-box">        
      </div>
  </div> 
<?php  }
$count;
endwhile;
endif;
?>

答案 1 :(得分:1)

这是如何在WordPress中使用AJAX的基本示例。它展示了如何从javascript中获取变量,将其传递给PHP函数(稍微改变它),然后将其传递回javascript。

这假设您已经知道如何排队javascript等。

Javascript Piece(您可以在header.php或footer.php中或在需要它的模板文件中添加。)

[Project]
-[Basic]
-[Apple LLVM6.1-Language]
--[Precompile Prefix Header]-[no]
--[Prefix Header]--[]

PHP Piece(必须包含在functions.php中)

jQuery(document).ready(function($) {

    // We'll pass this variable to the PHP function example_ajax_request
    var fruit = 'Banana';

    // This does the ajax request
    $.ajax({
        url: ajaxurl,
        data: {
            'action':'example_ajax_request',
            'fruit' : fruit
        },
        success:function(data) {
            // This outputs the result of the ajax request
            console.log(data);
        },
        error: function(errorThrown){
            console.log(errorThrown);
        }
    });  

});