jQuery Portlets 保存到数据库

Question

我在这个网站和网上广泛搜索了这个问题的答案。我尝试了很多例子，但是都无法解决我的问题。

我有两个块，分别命名为“Links”和“User Links”。每个块内部都有描述（它们本身也是块）我网站上的链接。这些链接可以单独从左到右拖动。

我的问题是，在我点击“Save Changes”之后，我无法将数据保存到我的数据库中，我的错误是“Undefined index: quicklink”。

以下是代码。

<?php echo Form::open(URL::Base().Route::get('links')->uri(array('action' => 'update')), array('id' => 'links-form', 'class' => 'form', 'enctype' => 'multipart/form-data')) ?>
<section class="grid_12">
    <div class="block-border">
        <div class="block-content">
            <div class="block-controls">
            <div class="controls-buttons"></div>
            </div>
            <h1>Quick Links</h1>
            <div class="columns">   
                <div class="colx2-left">
                    <fieldset>  
                        <legend>Links</legend>
                            <p class="inline-small-label small-margin">
                                <div class="column">        
                                    <?php if (count($links)): ?>
                                    <?php foreach ($links as $row): ?>      
                                    <div class="portlet">
                                        <div class="portlet-content"><?php echo $row->description ?></div>
                                    </div>
                                    <?php endforeach ?>
                                    <?php endif ?>      
                                </div>      
                            </p>
                    </fieldset>
                </div>
                <div class="colx2-right">
                    <fieldset>  
                        <legend>User Links</legend>
                            <p class="inline-small-label small-margin">
                                <div class="column">        
                                    <?php if (count($userlinks)): ?>
                                    <?php foreach ($userlinks as $row): ?>      
                                    <div class="portlet" name="link[]" id="link" multiple="multiple" size="12">
                                        <div class="portlet-content"><?php echo $row->link_id ?></div>
                                    </div>  
                                    <?php endforeach ?>
                                    <?php endif ?>      
                                </div>      
                            </p>
                    </fieldset>
                </div>
            </div>
            <div class="columns">
                <div class="colx2-left align-center">
                    <?php echo Form::button('save_edit', 'Save Changes', array('id' => 'save_edit', 'type' => 'submit', 'value' => 'save_edit')) ?>
                </div>
                <div class="colx2-right align-center">
                    <?php echo Form::button('cancel_edit', 'Cancel Changes', array('id' => 'cancel_edit', 'type' => 'button', 'value' => 'cancel_edit')) ?>
                </div>
            </div>  
        </div>
    </div>
</section>
    <div class="clear"></div>

<?php echo Form::close() ?>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
<style>
  body { min-width: 520px; }
  .column { width: 520px; float: left; padding-bottom: 100px; }
  .portlet { margin: 0 1em 1em 0; }
  .portlet:hover { cursor: pointer }
  .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
  .portlet-header .ui-icon { float: right; }
  .portlet-content { padding: 0.4em; }
  .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
  .ui-sortable-placeholder * { visibility: hidden; }
</style>
<script>
  $(function() {
    $( ".column" ).sortable({
      connectWith: ".column"
    });

    $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
      .find( ".portlet-header" )
        .addClass( "ui-widget-header ui-corner-all" )
        .prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
        .end()
      .find( ".portlet-content" );

    $( ".portlet-header .ui-icon" ).click(function() {
      $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
      $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
    });

    $( ".column" ).disableSelection();
  });

</script>

控制器

    /**
 * Update the Users settings and details
 *
 * @return void
 */ 
public function action_update()
{
    $this->template = NULL;
    $this->auto_render = FALSE;

    if ($_POST)
    {
        $row = ORM::factory('LinkUser');

        // Remove all current Links
        foreach($row->link->find_all() as $ql)

            $row->remove('link', $ql);

        foreach($_POST['link'] as $ql)
        {
            $row->add('link', $ql);
        }
    }
}

“Link”模型

<?php defined('SYSPATH') or die('No direct access allowed.');

class Model_Link extends ORM {

    protected $_table_name = 'links';

    protected $_has_many = array(
        'qlinkusers' => array(
            'model' => 'LinkUser',
            'foreign_key' => 'link_id',
            'through' => 'links_users',
        ),
    );
}

模型“LinkUser”

<?php defined('SYSPATH') or die('No direct access allowed.');

class Model_LinkUser extends ORM {

    protected $_table_name = 'links_users';

    protected $_belongs_to = array(
        'link' => array(
            'model' => 'Link',
            'foreign_key' => 'link_id',
            'through' => 'links_users',
        ),
        'user' => array(
            'model' => 'user',
            'foreign_key' => 'user_id',
        ),  
    );
}

我对jQuery的了解非常有限，希望您能明确我的需求...... 我想将左侧区域的多个链接拖动到右侧区域，目前已经成功。但是，一旦我点击“保存更改”，就无法将数据保存到我的数据库中，错误提示为“未定义索引：链接”。

非常感谢。

- user1839477

Answer 1

如果我是你的话，我会使用类似下面这样的代码（与你当前的脚本完全不同）：

当你的链接或其他你想记录的内容发生排序变化时，你最好尝试直接使用ajax请求。你需要做的是确定动作。

在你的情况下，动作是："action_update"

你将首先通过收集新的链接/排序数据（或者你尝试保存到数据库的任何其他内容）来通过ajax发布数据。然后通过你在路由中设置的URL进行发布。将它与你当前的控制器动作相关联，就完成了：

Router::connect('/request/via/ajax/here', array('controller' => 'YourController', 'action' => 'action_update'));

你现在使用的预定义Form::button是不必要的。只需记录点击事件并执行您的ajax函数即可。

记得在您的操作中使用$this->autoRender=false;。

以下是您的ajax请求示例：

$('.update_button').on('click',function()
{
    $data = $('#links-form').serializeArray();
    $.ajax({
        url: '<?php echo Router::url(array('controller'=>'YourController', 'action'=>'action_update'), true ); ?>',
        type: 'post',
        data: {data:$data},
        success: function(result,status)
        {
            alert('data saved');
        }
    });
});

首先，您可以在控制台中记录日期以进行检查：

console.log($data)

- Rens Tillmann

---

直到现在我才看到这个，Rens。感谢您抽出时间查看我的问题，我明天会尝试应用您的建议。谢谢！ - user1839477