jQuery Portlets保存到数据库

时间:2013-06-04 11:29:38

标签: php jquery jquery-ui

我在这个网站上广泛关注&在线获得此问题的答案。我试图在我的问题上应用一些例子但没有用。

我有两个块,名为“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>

CONTROLLER

    /**
 * 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);
        }
    }
}

模型“链接”

<?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',
        ),
    );
}

MODEL“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非常弱,希望很清楚我需要什么...... 我想拖动从左侧块到右侧块的多个链接,这是迄今为止成功的,我按“Save Changes”后无法将数据保存到我的数据库,我的错误是“Undefined index: link

非常感谢。

1 个答案:

答案 0 :(得分:0)

如果我在哪里,我会使用类似下面的内容(与当前脚本完全不同):

当您的链接或您要记录的任何内容的排序发生变化时。您可以通过直接ajax请求更好地尝试它。您需要做的是确定行动。

在你的情况下是:“action_update”

您将通过ajax发布数据,首先从您的html中收集新的链接/排序(或者您尝试保存到数据库中的任何内容)。然后通过您在路由中设置的URL发布。您将它链接到当前的控制器操作,您就完成了:

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

您不需要现在使用的预定义Form ::按钮。只需记录点击事件并执行ajax功能。

请记住使用$ this-&gt; 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)