Question

我正在尝试提交一个位于标签中的内容。此选项卡内容通过AJAX生成。

我的问题是，当我提交表单时，会加载页面刷新和“默认”选项卡，因此生成带有表单的选项卡的php函数永远不会收到帖子数据。

这里的解决方案我想：

1）最简单：找到一种在URL中插入哈希的方法，以便在页面刷新时，javascript代码加载好选项卡。

2）最好的（考虑用户体验）：找到一种方法来使用ajax提交表单，并将新条目添加到选项卡中表单下的列表中。但我想用php来检查表单值（is_empty（）等）。我想到将数据发送到php控制器，然后隐藏表单并将其替换为php控制器生成的新表单（如果字段正常并且数据已添加到数据库中，则会显示错误消息或空字段）。

这是我的代码：

布局：

    <ul class="nav nav-tabs" id="myTabs">
  <li class="active"><a href="#profile" data-url="/Shawili/<?= $profile['username'] ?>/profile/">Profile</a></li>
  <li><a href="#about" data-url="/Shawili/<?= $profile['username'] ?>/about/">About</a></li>
  <li><a href="#wishlist" data-url="/Shawili/<?= $profile['username'] ?>/wishlists/">Wishlists <span class="badge"><?= $profile['wishlists'] ?></span></a></li>
  <li><a href="#following" data-url="">Following <span class="badge"><?= $profile['following'] ?></span></a></li>
  <li><a href="#followers" data-url="">Followers <span class="badge"><?= $profile['followers'] ?></span></a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="profile">Profile</div>
  <div class="tab-pane" id="about">about</div>
  <div class="tab-pane" id="wishlist">wl</div>
  <div class="tab-pane" id="following">following</div>
  <div class="tab-pane" id="followers">followers</div>
</div>

标签：

<?php

if($owner)
{   ?>

<div class="row">
<div class="col-md-10 col-md-offset-1">
    <form class="form-horizontal" role="form" method="post">
    <fieldset><legend>Add a wishlist</legend>
        <?php echo $form; ?>
        <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default" name="addwishlist">Add</button>
        </div>
    </div>
  </fieldset>
    </form>
</div>
</div>
<hr />

<?php
}

?>

<div class="row">
<?php

foreach($wishlists as $wishlist)
{ //Here we display whislists } ?>

与标签视图对应的php控制器：

$manager = $this->managers->getManagerOf('Wishlist');

    /**
    *  Adding a new wishlist
    */

    if($owner)
    {

        //Creating object. Depends on form validation
        if ($request->postExists('addwishlist'))
        {
            $wishlist = new \Lib\Entities\Wishlist(array(
            'title' => $request->postData('title'),
            'comment' => $request->postData('comment'),
            'user' => $this->app->user()->getUser(),    
          ));
        }
        else
        {
            $wishlist = new \Lib\Entities\Wishlist;
        }

        //generating form 
        $formBuilder = new \Lib\Forms\WishlistForm($wishlist);
        $formBuilder->build();
        $form = $formBuilder->form();
            $formHandler = new \Lib\FormHandler($form, $manager, $request);

            //if form has been validate : add the wishlist and set flash
            if ($formHandler->process('add'))
            {
            $this->app->user()->setFlash('Your wish list has been created !');
        $this->app->httpResponse()->redirect('/Shawili/'.$request->getData('user').'/wishlists/');
            }

            $this->page->addVar('form', $form->createView());

    }

    /**
    *  Displaying user's wishlists
    */


    $wishlists = $manager->getWishlists($request->getData('user'), $this->app->user()->getUser());


    $this->page->addVar('wishlists', $wishlists);
    $this->page->addVar('owner', $owner);
    $this->page->addVar('profile', $request->getData('user'));
    $this->page->addVar('cuser', $this->managers->getManagerOf('User')->getUser($this->app->user()->getUser()));

Jquery代码：

<script type='text/javascript'>
        $('#myTabs a').click(function (e) {
    e.preventDefault();

    var url = $(this).attr("data-url");
    var href = this.hash;
    var pane = $(this);

    // ajax load from data-url
    $(href).load(url,function(result){      
        pane.tab('show');
    });
});

// load first tab content
$('#profile').load($('.active a').attr("data-url"),function(result){
  $('.active a').tab('show');
});

    </script>

有关最好方法的建议吗？

Answer 1

第二个选项是相当广泛使用的练习，它总是很好用，所以你可以毫无顾虑地使用它。我想看看你的代码，你想要生成表单代码并通过ajax将它发送到浏览器。这不一定是最好的方式。您不必隐藏和替换表单。您可以使用jQuery轻松修改现有的。诀窍是向浏览器发送仅包含有关错误等信息的格式化数据（例如使用JSON），然后对其进行解码（jQuery way）并定位修改网页内容。

要通过ajax提交表单，您只需覆盖该按钮的click事件，然后从字段中收集数据并将其发送到服务器，例如：

$("#submit_button_id").click(function(){
    var formdata = $("#form_id").serializeArray();
    $.ajax({
        url: "/submit_url",
        data: formdata,
        success: function(RESPONSE){
            //Your code to modify page content after geting RESPONSE.
        }
    })
    return false; //To prevent page from reloading
}

从AJAX生成的选项卡中提交（Twitter Bootstrap）

1 个答案: