[threestatedrive]

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]

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

[threestatedrive]

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]

Aloha!!

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]

awesome thanks! i shall give it a try!

[threestatedrive]

also, which view file do i put that in?

[threestatedrive]

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]

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]

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]

[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]

Hi. I cant do to work for me.

[tlc033]

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

THX.

[tlc033]

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]

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

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]

Hi,

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

HTH.

[freshness]

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]

Hi,

 

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

 

Regards,

 

Kobus

[freshness]

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]

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]

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 :(