⚠ In case you've missed it, we have migrated to our new website, with a brand new forum. For more details about the migration you can read our blog post for website migration. This is an archived forum. ⚠

  •     

profile picture

[ANSWERED] set_relation and "Add New" button to quick insert.



threestatedrive
  • profile picture
  • Member

Posted 24 April 2012 - 19:59 PM

Hello all,
I've been looking through the forums, and perhaps its been answered, but I cant find that answer anywhere..
I have a simple relation between two tables... posts and categories...
i'm using set relation on the posts pages, so that I can quickly choose from a dropdown of categories... is there a way to put an 'add new' in that dropdown? (preferably without leaving the page)
ie, so the user doesnt have to go out to the category edit section to add a category, and then come back..

appreciate any thoughts

web-johnny
  • profile picture
  • Administrator
  • 1,166 posts

Posted 25 April 2012 - 05:47 AM

No there is not such thing for grocery CRUD till now.

threestatedrive
  • profile picture
  • Member

Posted 25 April 2012 - 11:48 AM

i didnt think so. thanks for the response. I can't tell you how much easier grocerycrud has made my life at work. Could you tell me whereabouts that dropdown is generated in the code and perhaps I can try and figure something out?

KaBaDaBrA
  • profile picture
  • Member

Posted 25 April 2012 - 18:08 PM

Aloha!! :D

K well I think I know what you might want - so might have a solution for you. I quickly helped some other guys with a fancybox question, here's how you can do something similar:

1. Download Fancybox: http://fancyapps.com/fancybox/

2. Add this code to the view file (You'll have to change a few of the paths and names etc)



<link rel="stylesheet" href="<?=base_url()?>assets/plugins/fancybox/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="<?=base_url()?>assets/plugins/fancybox/jquery.fancybox.pack.js?v=2.0.6"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox();

//ADD IN A BUTTON TO ADD TO DROPDOWN
$('#countryID_input_box').append('<a href="<?=site_url()?>/examples/quick_add/" class="various fancybox.ajax">Add</a>');
});
</script>


3. Add this code to you controller (Again you will have to make modifications to work with your own code)



function quick_add()
{
//EDIT BELOW TO ADD YOU SELECT NAME VALUE
$args = array(
'category_name' => 'select[name="countryID"]'
);

$javascript = '
<script>
function do_quick_add()
{
var category_text = $(\'#category_item\').val();
var category_id = $(\''.$args['category_name'].'\').val();

$.post(\''.site_url().'/examples/quick_add_save/\', { categoryID: category_id, category_item: category_text }, function(data) {
//PREPEND DATA TO SELECT BOX
$(\''.$args['category_name'].'\').prepend(\'<option value="\'+data+\'">\'+category_text+\'</option>\');
//REBUILD SELECT BOX
$(\''.$args['category_name'].'\').trigger("liszt:updated");
//DISPLAY SUCCESS MESSAGE
$(\'#category_message\').html(\'Successfully inserted a new category\');
});
}
</script>
';

$html = '
<div style="width: 400px; height: 250px;">
<div style="padding: 5px;">New Category Name:</div>
<div style="padding: 5px;"><input type="text" name="category_item" id="category_item"></div>
<div style="padding: 5px;"><input type="button" value="Add &raquo;" onclick="do_quick_add();"> <span id="category_message"></span></div>
</div>
';

echo $javascript.$html;
exit;
}

function quick_add_save()
{
//POST ITEMS
$categoryID = $this->input->post('categoryID', true); //only needed if adding a sub category, can get parent ID
$category_text = $this->input->post('category_item', true);

//SAVE TO DATABASE
$data = array(
'country_title' => $category_text
);
$this->db->insert('country', $data);

return $this->db->insert_id();
}


VOILA!!!! :)

[attachment=127:Add to select.PNG]

Now you can quickly add to dropdowns without having to leave the page.

If it's not exactly what you want you can use a similar approach by using jquery to modify things...

threestatedrive
  • profile picture
  • Member

Posted 09 May 2012 - 14:45 PM

awesome thanks! i shall give it a try!

threestatedrive
  • profile picture
  • Member

Posted 09 May 2012 - 15:19 PM

also, which view file do i put that in?

threestatedrive
  • profile picture
  • Member

Posted 10 May 2012 - 13:40 PM

i've now managed to get the add link where i want it, and fancybox loads up as needed, saving the category, does indeed save to the db, however, i'm struggling with the rebuild of the list. it's not rebuilding. i'm not sure entirely what i'm doing wrong. any help would be appreciated

threestatedrive
  • profile picture
  • Member

Posted 10 May 2012 - 13:56 PM

ok, one more step ahead... managed to rebuild the drop down, but can't figure out how to get the relevent id of the option
now i really need help please ?

threestatedrive
  • profile picture
  • Member

Posted 10 May 2012 - 14:27 PM

heheh, ok, last post, i think.. so I figured it out..

return $this->db->insert_id();
wasnt working, so i used echo instead.. awesome
thanks heaps!

kesing
  • profile picture
  • Member

Posted 20 July 2012 - 08:18 AM

[quote name='threestatedrive' timestamp='1336657245' post='1694']
i've now managed to get the add link where i want it, and fancybox loads up as needed, saving the category, does indeed save to the db, however, i'm struggling with the rebuild of the list. it's not rebuilding. i'm not sure entirely what i'm doing wrong. any help would be appreciated
[/quote]

Hi!
How did you do it? I'm at the same point... it's not rebuilding.

tlc033
  • profile picture
  • Member

Posted 09 November 2012 - 13:32 PM

Hi. I cant do to work for me.

tlc033
  • profile picture
  • Member

Posted 15 November 2012 - 13:29 PM

Can someone add the structure of tables from database, for this code ???

THX.

tlc033
  • profile picture
  • Member

Posted 15 November 2012 - 15:00 PM

I have this error, from firebug.

ReferenceError: $ is not defined
var category_text = $('#category_item').val();
...
Please help me.

My code stop working this:
....
$javascript = '
<script>
function do_quick_add()
.....

r00tkiit
  • profile picture
  • Member

Posted 08 December 2012 - 22:22 PM

[quote name='KaBaDaBrA' timestamp='1335377326' post='1458']
Aloha!! :D

K well I think I know what you might want - so might have a solution for you. I quickly helped some other guys with a fancybox question, here's how you can do something similar:

1. Download Fancybox: http://fancyapps.com/fancybox/

2. Add this code to the view file (You'll have to change a few of the paths and names etc)



<link rel="stylesheet" href="<?=base_url()?>assets/plugins/fancybox/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="<?=base_url()?>assets/plugins/fancybox/jquery.fancybox.pack.js?v=2.0.6"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox();

//ADD IN A BUTTON TO ADD TO DROPDOWN
$('#countryID_input_box').append('<a href="<?=site_url()?>/examples/quick_add/" class="various fancybox.ajax">Add</a>');
});
</script>


3. Add this code to you controller (Again you will have to make modifications to work with your own code)



function quick_add()
{
//EDIT BELOW TO ADD YOU SELECT NAME VALUE
$args = array(
'category_name' => 'select[name="countryID"]'
);

$javascript = '
<script>
function do_quick_add()
{
var category_text = $(\'#category_item\').val();
var category_id = $(\''.$args['category_name'].'\').val();

$.post(\''.site_url().'/examples/quick_add_save/\', { categoryID: category_id, category_item: category_text }, function(data) {
//PREPEND DATA TO SELECT BOX
$(\''.$args['category_name'].'\').prepend(\'<option value="\'+data+\'">\'+category_text+\'</option>\');
//REBUILD SELECT BOX
$(\''.$args['category_name'].'\').trigger("liszt:updated");
//DISPLAY SUCCESS MESSAGE
$(\'#category_message\').html(\'Successfully inserted a new category\');
});
}
</script>
';

$html = '
<div style="width: 400px; height: 250px;">
<div style="padding: 5px;">New Category Name:</div>
<div style="padding: 5px;"><input type="text" name="category_item" id="category_item"></div>
<div style="padding: 5px;"><input type="button" value="Add &raquo;" onclick="do_quick_add();"> <span id="category_message"></span></div>
</div>
';

echo $javascript.$html;
exit;
}

function quick_add_save()
{
//POST ITEMS
$categoryID = $this->input->post('categoryID', true); //only needed if adding a sub category, can get parent ID
$category_text = $this->input->post('category_item', true);

//SAVE TO DATABASE
$data = array(
'country_title' => $category_text
);
$this->db->insert('country', $data);

return $this->db->insert_id();
}


VOILA!!!! :)

[attachment=127:Add to select.PNG]

Now you can quickly add to dropdowns without having to leave the page.

If it's not exactly what you want you can use a similar approach by using jquery to modify things...
[/quote]

Thanks for the nice idea. I have one problem. I want the value entered in the New Window to come to the input box of 1st window whenever the submit button of New window is clicked.
How can I do this thing? Please advice

Kobus
  • profile picture
  • Member

Posted 02 February 2013 - 11:44 AM

Hi,

Using jQuery, you can use "append()" to add the selected value into the list. http://api.jquery.com/append/

HTH.

freshness
  • profile picture
  • Member

Posted 05 February 2013 - 23:14 PM

Hi all,

 and thanks for a great crud.

I've followed this thread and I've managed to add a new button close to the dropdown of add/edit pages.

The fancybox opens correctly and the ajax post too, the new option is correctly added to the dropdown.

It all works perfectly except I can't update the select.

The new option appears on DOM (I'm using Chrome's "developer tools") but it looks like select.trigger("liszt:updated");

doesn't work. I've tried to put the trigger in ajax callback, then I've put it on afterClose callback, then I've put it inside
a function in parent window and I've tried to call it from aforementioned callbacks. It hasn't worked.

Where am I mistaking?

 

The following code is the last test I've done:

 

Parent page code:

 

 

...
<script>
function test(id,value)
{            
    var select=$(id);
    select.val(value);
    select.trigger('liszt:updated');    
}
</script>
...

 

Fancybox page code:

 

...
<script>
<?php 
$args['select'] = '#field-'.$key;
?>
function do_quick_add()
{     
    var category_text = $('#category_item').val();
    var category_id = $('<?php echo $args['select'];?>').val();
    $.post('<?php echo site_url().'admin/sub/sub_add_save/'.$id;?>', { categoryID: category_id, category_item: category_text }, function(data) {                        
        var select=$('<?php echo $args['select'];?>');
        select.prepend('<option value="'+data+'">'+category_text+'</option>');
        window.parent.test('<?php echo $args['select'];?>',data);
    });
}
</script>
...

Kobus
  • profile picture
  • Member

Posted 06 February 2013 - 07:46 AM

Hi,

 

Just a quick thought - I have not checked, but could "lizst" be spelled incorrectly? Should it not be "list"?

 

Regards,

 

Kobus


freshness
  • profile picture
  • Member

Posted 06 February 2013 - 08:53 AM

Hi Kobus,

 thanks for your answer.

The syntax should be correct... On chosen website I've found: $("#form_field").trigger("liszt:updated");


michaeljean@ncf.ca
  • profile picture
  • Member

Posted 15 October 2014 - 15:42 PM

Hello,

 

The post statement does not appear to be working for me. Any ideas? It does not seem to get to quick_add_save.  I put alert boxes to see how far it goes.

 

quick_add:

               alert("Input value: " + text);
                $.post(\''.site_url().'organizations/quick_add_save/\', { name: text }, function(data) {
     
                    [...]

                });
                alert("Done!");
            }

quick_add_save:

alert('quick_add_save');

The first 2 alerts display correctly but I don't see the 3rd alert in the quick_add_save function.


Lady_Ane
  • profile picture
  • Member

Posted 12 November 2014 - 21:14 PM

Hi everyone,

Can someone add the structure of tables from database of this example??

I'm a rookie trying to understand the structure with no success 'til now :(