⚠ 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

ajax add and edit / relation n-n optimization



crina
  • profile picture
  • Member

Posted 21 February 2012 - 08:17 AM

Hello,

The first thing I would like to do It will be an optimization of the relation_n_n function ... you are doing a select in foreach witch is very time and resource consumming ... I have tried to make the optimization for my case, by creating a function that takes all the relationed data from the second table in an array, and afterwoards parse the array to get the necesary data ... maybe it is not the best solution, but such an optimization could be integrated in a new version of the library...


The second issue ... that I would recomend an that I'm tring to implement right now, is to load the add and edit forms with AJAX ... meaning no page reload ... it would be much easy to integrate in an application ...

Great work this lib ! It saved me about 2 weeks of work ... in developing a back-office for my app...

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

Posted 21 February 2012 - 23:19 PM

Hello there,

Yeap you are right, actually I was thinking to have only one query to retrieve all the data from the relation_n_n and not in foreach, but your solution is great and quick for a temporary solution as it is not good to have a select in foreach. I will try to plan this feature for a version later than 1.2 , thanks to remind me this.

As for the second issue, the first thing that I was trying to do it was all with ajax requests, but for now it's a bit difficult to do it. If you though want to have a try, you will need to actually add a new theme at the folder : "assets/grocery_crud/themes" . I think this will take more time than you think so just be careful to not change all the stability of grocery CRUD as in about 20-30 days it will probably be a new release (1.2) with brand new features.

crina
  • profile picture
  • Member

Posted 23 February 2012 - 13:52 PM

[b]I saw you have changed the uploader, the new one works in IE 8 and later ? if it works, I will wait for the new release, if not, I was planning to integrate Uplodify with the lib ...[/b]

[b]What is your [color=#000000][font=arial, sans-serif][size=3]recommendation [/size][/font][/color]? [/b]

crina
  • profile picture
  • Member

Posted 23 February 2012 - 15:07 PM

how do you suggest I could implement the folowing situation:

for the PASSWORD field, in the add form, it is required, but in the edit form, it should not be required ...

I have made a callback_escape_update function to check if the password is empty unset it from the post_array and then call the db_update function from the model ... (not to update the password in the DB if it does not specify e new one) ...

for the required operation should I define a more complex callback function to do the work, or implement the functionality in the lib ? by writing required_add and required_edit functions and adapt the functionalities ?

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

Posted 23 February 2012 - 19:09 PM

[quote name='crina' timestamp='1330005123' post='581']
[b]I saw you have changed the uploader, the new one works in IE 8 and later ? if it works, I will wait for the new release, if not, I was planning to integrate Uplodify with the lib ...[/b]

[b]What is your [color=#000000][font=arial, sans-serif][size=3]recommendation [/size][/font][/color]? [/b]
[/quote]

Yes I have change the uploader , you can download the latest release from the trunk (if you don't know how to do it from github just read /topic/130-saving-data-does-not-reset-the-select-drop-downs-but-that-chosen-option-is-then-not-saved-on-subsequent-saves/page__view__findpost__p__448 ). I add a milestone for the next version to me at 23 of March , so if you cannot wait for the next version you can just download the last trunk version.

I don't use uploadify as I have many problems with it and I don't recommended it . The only good thing about uploadify is that you install it really fast. I use http://blueimp.github.com/jQuery-File-Upload/ that in my opinion is great till now. It is not so easy to install it , but once you read the documentation and see how it works it really worth it.

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

Posted 23 February 2012 - 19:20 PM

[quote name='crina' timestamp='1330009640' post='583']
how do you suggest I could implement the folowing situation:

for the PASSWORD field, in the add form, it is required, but in the edit form, it should not be required ...

I have made a callback_escape_update function to check if the password is empty unset it from the post_array and then call the db_update function from the model ... (not to update the password in the DB if it does not specify e new one) ...

for the required operation should I define a more complex callback function to do the work, or implement the functionality in the lib ? by writing required_add and required_edit functions and adapt the functionalities ?
[/quote]

I have an example of the more complex unique callback at: http://www.grocerycr...indpost__p__262 . But the best solution is to add the functionality in the lib as you will need it more than one times. It is a feature that I have in mind to do it in a future release. The only problem that you will have is with the set_rules. So try to add this functionality before the validation.

The answer is what solution you prefer? The quickest one? (that is the callback) ...or the right way to do it (to implement it into the library)? I hope you choose the second solution ;) . If you want to change the library it is good to extend it as the example: http://www.grocerycr...ample-included/ . This is better for future updates.

crina
  • profile picture
  • Member

Posted 27 February 2012 - 12:47 PM

only small details this time :) :

a suggestion: you could use constants for the paths of the CSS and JS ... because if you need to organize the files in another way ... it's lots of work to search for all the paths and change them

a question: why don't you use the default language folder from the codeigniter aplication to store the translated strings ? I understant that there may be different strings for the two themes ... but mainly they are the same ...

another thing, maybe an idea for a future version: the posibility to translate the content of the fields, without calling a callback, just by setting a param, for example for civility, it is enum in DB, and has the values: mr, ms, mrs ... but in the forms and in the table I needed tot translate them ... (the situation could be the same for a companies activities), so I have send a new param to the $data->translated_fields as an array with the DB fields I need to translate (is set from the controller), and I am calling the get_field_input($field_info, $value = null, $translate = null) in foreach on the $data->translated_fields array

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

Posted 27 February 2012 - 19:42 PM

That's great suggestions.

I like when the suggestions are for coding as I have many things that I want to change. So I have the answers for you below:

For the CSS and JS you are actually right. The only reason that I did this is at the beginning was for the themes. But at least I must have constants or something else to the general library. For example if someone don't want to have in same place as the default of grocery CRUD, the only way to do it right now it's with a find and replace that is always not a suggested way to do it. As for the themes I like the way that I have them inside the views as you can easily understand which JavaScript and CSS is I used for every view. But still it needs improvement as there all in a specific folder and the Path is really big.

The reason that I don't use the default language folder of Codeigniter is for flexibility . I try hard to create functionalities that are not depend on Codeigniter Framework. That's for two main reasons. First I want to make grocery CRUD for other frameworks compatible also in the future. Second and most important is that Codeingiter make many changes WITHOUT any announcing and not even in major releases. In every new version of Codeigniter I always had problems for incompatibility. For example in version 2.0.2 I had big problems with the view, the config and the form_validation library . But now grocery CRUD it's almost standalone and stable. That's the secret of how it still works fine with CI 1.7.x., HMVC, Templates Controllers, external Language Libraries e.t.c.

For the translation is a big thing to do so I have it in a long way plan to do it as it has many scenarios that I have to look at and I really want to make it as simply as I can for the developers. But thanks for the suggestion I will have it in mind.

crina
  • profile picture
  • Member

Posted 02 April 2012 - 16:00 PM

Hello,

Today I have upgraded the lib, including the new uploader ... and it seems I have some problems (maybe I'm kind of tired and can't spot them),

when I click the upload or delete button it doesn't trigger the corresponding events, on an inspect element, I can see the hidden <a> and other infos in the DOM ... but I can't figure out what is happening ... I have loaded all the corresponding js and css in the header:

<link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH_STANDARD . 'ui/simple/jquery-ui-1.8.10.custom.css'; ?>" />

<link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH_STANDARD.'jquery_plugins/file_upload/file-uploader.css'; ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH_STANDARD.'jquery_plugins/file_upload/jquery.fileupload-ui.css'; ?>" />

<script type="text/javascript" src="<?php echo JS_PATH_STANDARD . 'jquery-1.7.1.min.js'; ?>"></script>

<script type="text/javascript" src="<?php echo JS_PATH_STANDARD . 'jquery_plugins/jquery-ui-1.8.10.custom.min.js'; ?>"></script>
<script type="text/javascript" src="<?php echo JS_PATH_STANDARD . "jquery_plugins/tmpl.min.js";?>"></script>
<script type="text/javascript" src="<?php echo JS_PATH_STANDARD . "jquery_plugins/load-image.min.js";?>"></script>
<script type="text/javascript" src="<?php echo JS_PATH_STANDARD . "jquery_plugins/jquery.iframe-transport.js";?>"></script>
<script type="text/javascript" src="<?php echo JS_PATH_STANDARD . "jquery_plugins/jquery.fileupload.js";?>"></script>
<script type="text/javascript" src="<?php echo JS_PATH_STANDARD . "jquery_plugins/config/jquery.fileupload.config.js";?>"></script>

it can see the config values from the config file (the JS variables are set to those values), the inputs are created correctly and if I put the delete url in the browser, it does the work just fine ... so I suspect it is a javascript problem ... s[i]omewhere[/i]...

any suggestions ? :)

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

Posted 02 April 2012 - 19:55 PM

You give me a hint that the delete don't work so it have to be something obvious. So I don't want to go to the uploader as it is more complicated. The delete just have a jQuery event click so it HAS to work. So let's go step by step:[list=1]
[*]First of all did you copy all the files from grocery CRUD? So make sure that you have all the files included and not just patches. Especially the themes folder. You have to consider all the javascripts that I am loading so for example at the add.php of the theme flexigrid (assets/grocery_crud/themes/flexigrid/views/add.php) did you also load those javascripts?
[/list]
example:

<?php
if (!defined('BASEPATH')) exit('No direct script access allowed');
$this->set_css('assets/grocery_crud/themes/flexigrid/css/flexigrid.css');
$this->set_js('assets/grocery_crud/themes/flexigrid/js/jquery.form.js');
$this->set_js('assets/grocery_crud/themes/flexigrid/js/flexigrid-add.js');
?>
<script type='text/javascript'>
var base_url = '<?php echo base_url();?>';

var upload_a_file_string = '<?php echo $this->l('form_upload_a_file');?>';
</script>
.....

If yes and still doesn't work:[list=1]
[*]Check at your firebug that all the javascript are loaded correctly and you don't have any request page not found. Especially the [color=#282828][font=helvetica, arial, sans-serif]jquery.fileupload.js[/font][/color]
[*][color=#282828][font=helvetica, arial, sans-serif]Check if you have any errors to your console. At least one error to your Javascripts can cause ALL the Javascripts to fail.[/font][/color]
[*]Check if any other Javascript work, for example the save button (so we will make sure that there is a Javascript CRASH somewhere...)
[*]And finally please tell me EXACTLY what happens when you press the delete button. You first have the "Do you want to delete this file?" alert? If not this means that you perhaps loaded the [color=#282828][font=helvetica, arial, sans-serif]jquery.fileupload.js twice or something similar or forgot some other javascripts for example [/font][/color]flexigrid-add.js, flexigrid-edit.js or something more simple it can even be the var upload_a_file_string = '<?php echo $this->l('form_upload_a_file');?>'; that you didn't load.
[/list]

crina
  • profile picture
  • Member

Posted 03 April 2012 - 08:58 AM

still can make it to work ... it shows the upload button, it let's me select a picture ... and it does nothing further ... all the JS are loaded, no JS errors, I have parsed all the files individualy for changes (I have some of my own changes)... I'm using datatables theme ... it does not show any alert when click on delete (the delete only shows when I try to put by hand a file in DB) ...
I'm going to still debug the app ...

can you show me a print screen on how shoud it look when working correctly ... it will be helpfull ... thanks

crina
  • profile picture
  • Member

Posted 03 April 2012 - 11:43 AM

At last I get an error ... the first problem was becauze I'm loading the ADD and EDIT forms using AJAX ... so i woulden't find no element having the .gc-file-upload class ...
now I'm getting this error:

Uncaught TypeError: undefined is not a function
$.widget._renderTemplate jquery.fileupload-ui.js:313
$.widget._renderUpload jquery.fileupload-ui.js:323
$.widget.options.add jquery.fileupload-ui.js:74
b.Widget._trigger jquery-ui-1.8.10.custom.min.js:32
$.widget._onAdd jquery.fileupload.js:628
e.extend.each jquery-1.7.1.min.js:2
$.widget._onAdd jquery.fileupload.js:619
$.widget._onChange jquery.fileupload.js:682
f.event.dispatch jquery-1.7.1.min.js:3
f.event.add.h.handle.i jquery-1.7.1.min.js:3


I will continue to debug ...

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

Posted 03 April 2012 - 18:08 PM

I forgot that you use AJAX!

The error is shown because you load [color=#282828][font=helvetica, arial, sans-serif]jquery.fileupload-ui.js . It was just a rubish JavaScript that I forgot to delete. So just don't include it to your project.[/font][/color]

As you use ajax did you load the scripts with the getScript of jquery? You have to call all the upload javascripts with the getScript function of JQuery when all the form is loaded. If you just load all the JavaScripts in your template it will not work for sure and will not show any errors as there is not any error, the only wrong thing is that you load the form after the first load of javaScript. It is normal to don't work with this way.

So after you finish the AJAX request for the add/edit form you have to call all the required javascripts with the getScript of jQuery.
For more see http://api.jquery.co...uery.getScript/

I hope it helps.

MarkC
  • profile picture
  • Member

Posted 19 February 2013 - 14:51 PM

Yes I have change the uploader , you can download the latest release from the trunk (if you don't know how to do it from github just read /topic/130-saving-data-does-not-reset-the-select-drop-downs-but-that-chosen-option-is-then-not-saved-on-subsequent-saves/page__view__findpost__p__448 ). I add a milestone for the next version to me at 23 of March , so if you cannot wait for the next version you can just download the last trunk version.

I don't use uploadify as I have many problems with it and I don't recommended it . The only good thing about uploadify is that you install it really fast. I use http://blueimp.github.com/jQuery-File-Upload/ that in my opinion is great till now. It is not so easy to install it , but once you read the documentation and see how it works it really worth it.

 

Can you explain me somehow how to install and use jQuery-File-Upload to use it with Grocery CRUD and upload multiple images at once?