Saving jQuery portlets for a database

Question

I have reviewed this site in detail and online to answer this question. I tried to apply a few examples to my problem to no avail.

I have two blocks named " Links " and " User Links ". Inside each block, they are descriptions (which are the blocks themselves) of links on my site that you can individually drag from left to right.

My problem is that I cannot save data in my database after clicking " Save Changes ", my error is " Undefined index: quicklink "

Here is the code.

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

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

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

I am incredibly weak at jQuery, I hope it is clear that I need ...... I want to drag a few links from the left block to the right block, which is still successful, I can’t save the data in my database as soon as I click " Save Changes ", my error is " Undefined index: link "

Thank you very much.

Answer 1

If I, where are you, I would use something like the following (completely different than your current script):

When the sorting has changed for your links or what you want to register. You can try it with a direct ajax request. What you need to do is determine the action.

In your case, this is: "action_update"

You publish data through ajax to collect new links / sorting from your html in the first place (or everything that you are trying to save in your database). Then send it to the URL that you set in your routing. You bind it to the current controller action and do:

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

You do not need the predefined Form :: button that you are using now. Just register the click event and execute the ajax function.

Remember to use $ this-> autoRender = false; in your action.

Example for your ajax request:

 $('.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'); } }); }); 

To check the date first, you can enter the console:

 console.log($data)