Question

我在我的项目中使用jQuery pjax。我试图将页面片段加载到我的页面区域。到目前为止，我有以下代码：

我正在使用pjax

加载的页面中的HTML

<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title>Builder1</title>

    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css" />
    <link href="/css/builder.css" rel="stylesheet" type="text/css" />
  </head>
  <body>

    <!-- I want to pjax this fragment into my current page --> 
    <div id="root">
      <div id="start">
        <form id="createPage">
          <label>
            Enter a name for your page
            <input id="pageName" type="text" value="" placeholder="Page name" />
          </label>
        </form>
      </div>
    </div>
    <!-- I want to pjax this fragment into my current page -->

    <script data-main="js/main" src="js/plugins/require.js"></script>
    </body>
</html>

我加载的页面格式与上面相同。

JS pjax

    $( document ).on( 'submit', '#createPage', function( event ) {
        event.preventDefault();

        // Some vars and other DB stuff here (removed for brevity)

        // Insert name into collection 'projects'
        pageCollection.insert({
            project: activeProject,
            name: pageTitle,
            active: true
        }, function( result ) {
            if( result.inserted.length ) {
                $.pjax({
                    url: 'page-builder.html',
                    container: '#root',
                    fragment: '#root'
                });
            } else {
                console.log('Error on page insertion');
            }
        });

        // Save Projects Database
        pageCollection.save();
    });

成功调用数据库后会触发pjax调用。

我想要做的是在目标网页的#root div中使用ajax并插入当前页面上的#root div。实际发生的是我正在加载整个页面，即使我已经指定了容器和片段。

任何人都可以帮我指出正确的方向吗？

$ .pjax片段未加载

0 个答案: