error 404 on - Githubissues

hkalbertl / jquery.appendGrid

The dynamic table input JavaScript plugin

https://appendgrid.azurewebsites.net

MIT License

148 stars 76 forks source link

error 404 on #111

Closed richb201 closed 6 years ago

richb201 commented 7 years ago

I am getting errors that my css and png files can't be found. Attached are the errors. Here is the popup.html file. I am concerned that there is inline javascript code in this HTML file. I am also concerned that I am not even specifically mentioning the png files in my code and an errors are still appearing. I suspect that they are being mentioned in the appendGrid code? This popup is for a chrome extension.

My Awesome Popup!

And here are the errors:

capture5

I was having this problem before but put it aside for awhile. I am now back to it. Thx

hkalbertl commented 7 years ago

Hi richb201,

appendGrid will not access the CSS or PNG files of jQuery UI directly. It just apply CSS class (such as ui-widget-header) defined in jQuery UI CSS file.

In that case, I suggest you to make sure your code is working fine before uploading to server. For example, view your popup.html locally with a web browser and see the style/image can be loaded or not. If not, please check the order of JS and CSS as mentioned here.

If it is working fine locally, you may need to ask for support on Chrome Extension from Google why the file cannot be loaded.

richb201 commented 7 years ago

Albert, I did as you asked. I loaded up my code on my local Apache server and I get the same problem. I then replaced my head with the one in your example:

But I still get the same problem when I run locally. Could it be the versions?

On Wed, Aug 30, 2017 at 11:53 PM, Albert L. notifications@github.com wrote:

Hi richb201,

appendGrid will not access the CSS or PNG files of jQuery UI directly. It just apply CSS class (such as ui-widget-header) defined in jQuery UI CSS file.

In that case, I suggest you to make sure your code is working fine before uploading to server. For example, view your popup.html locally with a web browser and see the style/image can be loaded or not. If not, please check the order of JS and CSS as mentioned here https://appendgrid.apphb.com/Download.

If it is working fine locally, you may need to ask for support on Chrome Extension from Google why the file cannot be loaded.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/111#issuecomment-326182269, or mute the thread https://github.com/notifications/unsubscribe-auth/AGoTmSmXfAvaMRxku8AE2vh8sGBDfo1Kks5sdi4dgaJpZM4PG-UY .

richb201 commented 7 years ago

Or could it be the directory where the jquery files are located on my server?

On Thu, Aug 31, 2017 at 1:41 AM, Richard Bernstein richb201@gmail.com wrote:

Albert, I did as you asked. I loaded up my code on my local Apache server and I get the same problem. I then replaced my head with the one in your example:

But I still get the same problem when I run locally. Could it be the versions?

On Wed, Aug 30, 2017 at 11:53 PM, Albert L. notifications@github.com wrote:

Hi richb201,

appendGrid will not access the CSS or PNG files of jQuery UI directly. It just apply CSS class (such as ui-widget-header) defined in jQuery UI CSS file.

In that case, I suggest you to make sure your code is working fine before uploading to server. For example, view your popup.html locally with a web browser and see the style/image can be loaded or not. If not, please check the order of JS and CSS as mentioned here https://appendgrid.apphb.com/Download.

If it is working fine locally, you may need to ask for support on Chrome Extension from Google why the file cannot be loaded.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/111#issuecomment-326182269, or mute the thread https://github.com/notifications/unsubscribe-auth/AGoTmSmXfAvaMRxku8AE2vh8sGBDfo1Kks5sdi4dgaJpZM4PG-UY .

richb201 commented 7 years ago

Albert, I have decided to delete everything from my htdocs/testy directory except

popup.html popup.js manifest.json icon.png

and download again. Now I need to bring down files from your github. Of the following links which must I place in the same testy directory?

I noticed that the version on github are 1.6.3 while the sample code (see above) asks for 1.11.1 directories!

On Thu, Aug 31, 2017 at 1:41 AM, Richard Bernstein richb201@gmail.com wrote:

Albert, I did as you asked. I loaded up my code on my local Apache server and I get the same problem. I then replaced my head with the one in your example:

But I still get the same problem when I run locally. Could it be the versions?

On Wed, Aug 30, 2017 at 11:53 PM, Albert L. notifications@github.com wrote:

Hi richb201,

appendGrid will not access the CSS or PNG files of jQuery UI directly. It just apply CSS class (such as ui-widget-header) defined in jQuery UI CSS file.

In that case, I suggest you to make sure your code is working fine before uploading to server. For example, view your popup.html locally with a web browser and see the style/image can be loaded or not. If not, please check the order of JS and CSS as mentioned here https://appendgrid.apphb.com/Download.

If it is working fine locally, you may need to ask for support on Chrome Extension from Google why the file cannot be loaded.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/111#issuecomment-326182269, or mute the thread https://github.com/notifications/unsubscribe-auth/AGoTmSmXfAvaMRxku8AE2vh8sGBDfo1Kks5sdi4dgaJpZM4PG-UY .

hkalbertl commented 7 years ago

Hi,

Can you try to download any one of my sample in demo section and put it in your Apache server? My sample should contain all files required for running appendGrid.

If you can run my sample without problems, I suggest you to replace the content of sample.html with your popup.html but keep the head section unchanged.

The 1.11.1 should be version number of jQuery and jQuery UI, but 1.6.3 is the version number of appendGrid. So, it should be fine :)

richb201 commented 7 years ago

Well when I run your demo it works fine. But when I run my code (with the newly downloaded include files) I still get the problem. One issue is that in my code I had to split the html from the javascript into two different files. You don't do this, you use inline js. The header in both is the same I have the following lines in my popup.js file (not my popup.html file)

$(function () { // Initialize appendGrid $('#tblAppendGrid').appendGrid({ caption: 'My Activities', initRows: 14,

Your demo code has everything in the html file I am attaching my popup.html and my popup.js (called popupjs.txt here) so you can see how it is arranged.

On Thu, Aug 31, 2017 at 9:51 AM, Albert L. notifications@github.com wrote:

Hi,

Can you try to download any one of my sample in demo https://appendgrid.apphb.com/Demo section and put it in your Apache server? My sample should contain all files required for running appendGrid .

If you can run my sample without problems, I suggest you to replace the content of sample.html with your popup.html but keep the head section unchanged.

The 1.11.1 should be version number of jQuery and jQuery UI, but 1.6.3 is the version number of appendGrid. So, it should be fine :)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/111#issuecomment-326301637, or mute the thread https://github.com/notifications/unsubscribe-auth/AGoTmZy51_q2s-UwTTvLmPfaVOofL-Tuks5sdrpqgaJpZM4PG-UY .

$(function () { // Initialize appendGrid $('#tblAppendGrid').appendGrid({ caption: 'My Activities', initRows: 14, columns: [ { name: 'Date', display: 'Date', type: 'ui-datepicker', ctrlAttr: { maxlength: 30 }, ctrlCss: { width: '160px'}, uiOption: { dateFormat: 'yy/mm/dd'}, onChange: function (evt, rowIndex) { / var rowOrder = $('#tblAppendGrid').appendGrid('getRowOrder'); var data = $('#tblAppendGrid').appendGrid('getRowValue', rowIndex); var firstDate = $(evt.target).datepicker('getDate'); for (var z = 1; z < rowOrder.length; z++) { // Calculate the date for current row var targetDate = new Date(firstDate); var numOfDaysToAdd = z; // This example will add ONE day on each row targetDate.setDate(targetDate.getDate() + numOfDaysToAdd); // Find the date textbox var dateTextbox = $('#tblAppendGrid').appendGrid('getCellCtrl', 'Date', z); // Set the date value $(dateTextbox).datepicker('setDate', targetDate); }; alert('You have changed value of Date at row ' + rowIndex + " to " + data.Date); var julDate=Date.parse(data.Date); alert('juldate at row will now be'+ julDate); julDate= julDate-(864000005); newDate=Date(julDate); alert('juldate at row 1 will now be'+ newDate); */ var rowOrder = $('#tblAppendGrid').appendGrid('getRowOrder'); var data = $('#tblAppendGrid').appendGrid('getRowValue', rowIndex); var today= new Date(data); var todaysday=today.getDate();

                for (i=0;i<14;i++)
                {
                $('#tblAppendGrid').appendGrid('setCtrlValue', 'Date', i, todaysday);
                };

            }
          },

        { name: 'Business Component', display: 'Business Component', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Apple Pie', 2: 'Cherry Pie', 3: 'Pecan Pie', 4: 'Strawberry/Rhubarb Pie'}},
        { name: 'Project', display: 'Project', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Improve Crust', 2: 'Reduce Costs', 3: 'Better Boxes', 4: 'Speed of Production', 5: 'New Customers', 6: 'Other'} },
        { name: 'Activity', display: 'Activity', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Code', 2: 'Unit Test', 3: 'Architecture', 4: 'Internet Research', 5: 'Trial and Error', 6: 'Usability testing', 7:'Spec Creation', 8:'Supervison', 9: 'Documentation', 10: 'Tech Support', 11: 'Network Admin'}},
        { name: 'RecordId', type: 'hidden', value: 0 }
              ],
     customRowButtons: [
        {
         uiButton: { icons: { primary: 'ui-icon-print' }, label: 'Duplicate Below' },
            click: function (evtObj, uniqueIndex, rowData) {

                var rowIndex1 = $('#tblAppendGrid').appendGrid('getRowIndex', uniqueIndex);
                var value1 = $('#tblAppendGrid').appendGrid('getCtrlValue', 'Business Component', rowIndex1);
                var value2 = $('#tblAppendGrid').appendGrid('getCtrlValue', 'Project', rowIndex1);
                var value3 = $('#tblAppendGrid').appendGrid('getCtrlValue', 'Activity', rowIndex1); 
               /* alert(rowIndex+1+"here"+value1); */
                $('#tblAppendGrid').appendGrid('setCtrlValue', 'Business Component',rowIndex1+1, value1);
                $('#tblAppendGrid').appendGrid('setCtrlValue', 'Project', rowIndex1+1, value2);
                $('#tblAppendGrid').appendGrid('setCtrlValue', 'Activity', rowIndex1+1, value3); 
            },
            btnClass: 'print'
        }
    ],

    hideRowNumColumn: true,
    rowButtonsInFront: false,
    hideButtons: {
        remove: true, 
        removeLast: true,
        insert: true,
        append: true,
        moveUp: true,
        moveDown: true

                }

    /* ,
    initData: [  
        { 'Business Component': 'Apple Pie', 'Cherry Pies'},
        { 'Business Component': 'Apple Pie', 'Cherry Pies'}],

       /* { 'Album': 'To be Free', 'Artist': 'Arashi', 'Year': '2010', 'Origin': 3, 'Price': 152.6 },
        { 'Album': 'Count On Me', 'Artist': 'Show Luo', 'Year': '2012', 'Origin': 2, 'Price': 306.8 },
        { 'Album': 'Wonder Party', 'Artist': 'Wonder Girls', 'Year': '2012', 'Origin': 4, 'Price': 108.6 },
        { 'Album': 'Reflection', 'Artist': 'Kelly Chen', 'Year': '2013', 'Origin': 1, 'Price': 138.2 } ]
        */
});

function setFavorite(evtObj, uniqueIndex, rowData) {
alert('I will duplicate)');
// Check the caller button exist in event object
if (evtObj && evtObj.target) {
    // Do something on the button, such as disable the button
    $(evtObj.target).button('disable');

}                               }
    // Handle `Load` button click
$('#btnLoad').button().click(function () {
    $('#tblAppendGrid').appendGrid('load', [
        { 'Date': '10/28/58', 'RecordId': 0 },
        { 'Date': '10/28/59', 'RecordId': 17 },
        ]);

});

$(function() {

if ($('#tblAppendGrid').appendGrid('isReady')) {

        var today= new Date();
        var todaysday=today.getDate();

        $('#tblAppendGrid').appendGrid('setCtrlValue', 'Date', 13, today);

        for (i=12;i>=0;i--)  
          {
           // today.setDate(today.setDate(todaysday) - 1);
           todaysday=todaysday-1;
           today.setDate(todaysday);

           $('#tblAppendGrid').appendGrid('setCtrlValue', 'Date', i, today);
          };      

        };

});

/ $(function () { // Initialize appendGrid $('#tblAppendGrid').appendGrid('init', { initRows: 14, columns: [ { name: 'Date', display: 'Date', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '160px'} },
{ name: 'Business Component', display: 'Business Component', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Apple Pie', 2: 'Cherry Pie', 3: 'Pecan Pie', 4: 'Starwberry/Rhubarb Pie'} }, { name: 'Project', display: 'Project', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Hong Kong', 2: 'Taiwan', 3: 'Japan', 4: 'Korea', 5: 'US', 6: 'Others'} }, { name: 'Activity', display: 'Activity', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Hong Kong', 2: 'Taiwan', 3: 'Japan', 4: 'Korea', 5: 'US', 6: 'Others'} }, { name: 'usesame', display: 'Use Same As Previous?', type: 'checkbox' }, { name: 'RecordId', type: 'hidden', value: 0 } ], initData: [
{ 'Album': 'Dearest', 'Artist': 'Theresa Fu', 'Year': '2009', 'Origin': 1, 'Price': 168.9 }, { 'Album': 'To be Free', 'Artist': 'Arashi', 'Year': '2010', 'Origin': 3, 'Price': 152.6 }, { 'Album': 'Count On Me', 'Artist': 'Show Luo', 'Year': '2012', 'Origin': 2, 'Price': 306.8 }, { 'Album': 'Wonder Party', 'Artist': 'Wonder Girls', 'Year': '2012', 'Origin': 4, 'Price': 108.6 }, { 'Album': 'Reflection', 'Artist': 'Kelly Chen', 'Year': '2013', 'Origin': 1, 'Price': 138.2 } ], hideRowNumColumn: true, rowButtonsInFront: true, hideButtons: { remove: true, removeLast: true } }); }); / // Handle Load button click /
$('#btnLoad').button().click(function () { $('#tblAppendGrid').appendGrid('load', [ { 'Album': 'Dearest', 'Artist': 'Theresa Fu', 'Year': '2009', 'Origin': 1, 'Poster': true, 'Price': 168.9, 'RecordId': 123 }, { 'Album': 'To be Free', 'Artist': 'Arashi', 'Year': '2010', 'Origin': 3, 'Poster': true, 'Price': 152.6, 'RecordId': 125 }, { 'Album': 'Count On Me', 'Artist': 'Show Luo', 'Year': '2012', 'Origin': 2, 'Poster': false, 'Price': 306.8, 'RecordId': 127 }, { 'Album': 'Wonder Party', 'Artist': 'Wonder Girls', 'Year': '2012', 'Origin': 4, 'Poster': true, 'Price': 108.6, 'RecordId': 129 }, { 'Album': 'Reflection', 'Artist': 'Kelly Chen', 'Year': '2013', 'Origin': 1, 'Poster': false, 'Price': 138.2, 'RecordId': 131 } ]); }); / //userinfo Object {email: "", id: ""}; // var userinfo= new Response(); function onloadFunction() { window.close(); alert('email\n');
}

function callbackfunction() {
    window.close();
    alert('email'+userinfo.id+'\n');

};                               
// Handle `Serialize` button click
$('#btnClose').button().click(function () {
    window.close(); 
    alert('logging cancelled\n');
});

$('#btnSubmit').button().click(function () {
    window.close(); 
   // chrome.identity.getProfileUserInfo(callbackFunction(userinfo));
    //userinfo Object {email: "hxxxxxxxxx@gmail.com", id: "1xxxxxxxxxxx49189xx"};
    alert('activites submitted\n');
});

});

hkalbertl commented 7 years ago

In order to test your case, I downloaded the basic demo sample. And I copied your code and put it in a new file "popup.js" to the same folder.

After that, I modified the head of sample.html as below:

<head>
  <meta charset="utf-8"/>
  <title>appendGrid</title>
  <link rel="stylesheet" type="text/css" href="jquery-ui.structure.min.css"/>
  <link rel="stylesheet" type="text/css" href="jquery-ui.theme.min.css"/>
  <link rel="stylesheet" type="text/css" href="jquery.appendGrid-1.6.3.css"/>
  <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="jquery-ui-1.11.1.min.js"></script>
  <script type="text/javascript" src="jquery.appendGrid-1.6.3.js"></script>
  <script type="text/javascript" src="popup.js"></script>
</head>

And I get the following output:

I guess the CSS classes are applied correctly. And the calendar is working fine as well. May be you can repeat what I did and test again :)

richb201 commented 7 years ago

Hi Albert. It does work correctly (mostly) for me too. But, when I open it and then open the console, that is where is see all the 404 errors. Do you see errors in the chrome console? I was wondering, do the .css and . js files in the head need to be at the top of each file or just the html?

They way it is supposed to work is when the user sets a date in the first column, all the dates should change to be in proper date order. But what I am getting is NaN in all of them. I don't know why this is yet, but I figured that I should get rid of the 404 errors first. Are you saying that I could just ignore the 404 errors?

Rich

On September 1, 2017, at 02:53, "Albert L." notifications@github.com wrote:

In order to test your case, I downloaded the basic demo sample. And I copied your code and put it in a new file "popup.js" to the same folder.

After that, I modified the head of sample.html as below:

appendGrid

And I get the following output:

I guess the CSS classes are applied correctly. And the calendar is working fine as well. May be you can repeat what I did and test again :)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

{"api_version":"1.0","publisher":{"api_key":"05dde50f1d1a384dd78767c55493e4bb","name":"GitHub"},"entity":{"external_key":"github/hkalbertl/jquery.appendGrid","title":"hkalbertl/jquery.appendGrid","subtitle":"GitHub repository","main_image_url":"https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png","avatar_image_url":"https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png","action":{"name":"Open in GitHub","url":"https://github.com/hkalbertl/jquery.appendGrid"}},"updates":{"snippets":[{"icon":"PERSON","message":"@hkalbertl in #111: In order to test your case, I downloaded the [basic demo](https://appendgrid.apphb.com/Demo/Basic) sample. And I copied your code and put it in a new file \"popup.js\" to the same folder.\r\n\r\nAfter that, I modified the head of sample.html as below:\r\n\r\nhtml\r\n\u003chead\u003e\r\n \u003cmeta charset=\"utf-8\"/\u003e\r\n \u003ctitle\u003eappendGrid\u003c/title\u003e\r\n \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"jquery-ui.structure.min.css\"/\u003e\r\n \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"jquery-ui.theme.min.css\"/\u003e\r\n \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"jquery.appendGrid-1.6.3.css\"/\u003e\r\n \u003cscript type=\"text/javascript\" src=\"jquery-1.11.1.min.js\"\u003e\u003c/script\u003e\r\n \u003cscript type=\"text/javascript\" src=\"jquery-ui-1.11.1.min.js\"\u003e\u003c/script\u003e\r\n \u003cscript type=\"text/javascript\" src=\"jquery.appendGrid-1.6.3.js\"\u003e\u003c/script\u003e\r\n \u003cscript type=\"text/javascript\" src=\"popup.js\"\u003e\u003c/script\u003e\r\n\u003c/head\u003e\r\n\r\n\r\nAnd I get the following output:\r\n\r\n![image](https://user-images.githubusercontent.com/4110287/29958286-7aa47128-8f24-11e7-8819-7d28ae67ea35.png)\r\n\r\nI guess the CSS classes are applied correctly. And the calendar is working fine as well.\r\nMay be you can repeat what I did and test again :)"}],"action":{"name":"View Issue","url":"https://github.com/hkalbertl/jquery.appendGrid/issues/111#issuecomment-326504746"}}}

hkalbertl commented 7 years ago

I am using latest Chrome and there is no error in the console... I think if the appendGrid can be displayed correctly, you may ignore the 404 error first.

For your second issues, I believe it is some problem on the onChange event.


// Get an object with values and set it to variable "data"
var data = $('#tblAppendGrid').appendGrid('getRowValue', rowIndex);

// Error... Put the object as parameter into Date??
// As the column name is "Date", you should get the value by "data.Date"
var today = new Date(data);

// Values become NaN
var todaysday = today.getDate();

May be you can correct the above javascript code.

richb201 commented 7 years ago

Thanks Albert. I can live with the 404 errors. I just thought they maybe they were creating my NaN problem! The onChange code runs both when the popup.html first loads (where it works correctly) and also when a user want to change the date range (where I get the Nan error). I get the feeling that I should be running two different sets of code:

This part of OnChange runs fine on loading (except some dates are skipped):

var rowOrder = $('#tblAppendGrid').appendGrid('getRowOrder'); var data = $('#tblAppendGrid').appendGrid('getRowValue', rowIndex); var today= new Date(data); var todaysday=today.getDate();

                for (i=0;i<14;i++)
                {
                  $('#tblAppendGrid').appendGrid('setCtrlValue',

'Date', i, todaysday); };

But I want to run different code after someone picks a new initial date with the datepicker. Is there a different event that fires? Can I use the evt value from the function(evt, rowIndex) to run two different parts of the onChange function? What values would evt be?

BTW, thanks for your help. I thought that the error 404's were the source of my problem. It was driving me crazy. 😀

On Fri, Sep 1, 2017 at 3:40 AM, Albert L. notifications@github.com wrote:

I am using latest Chrome and there is no error in the console... I think if the appendGrid can be displayed correctly, you may ignore the 404 error first. [image: image] https://user-images.githubusercontent.com/4110287/29959378-9c671af4-8f29-11e7-8e99-e13f5a4f1391.png

For your second issues, I believe it is some problem on the onChange event.

// Get an object with values and set it to variable "data"var data = $('#tblAppendGrid').appendGrid('getRowValue', rowIndex); // Error... Put the object as parameter into Date??// As the column name is "Date", you should get the value by "data.Date"var today = new Date(data); // Values become NaNvar todaysday = today.getDate();

May be you can correct the above javascript code.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/111#issuecomment-326512652, or mute the thread https://github.com/notifications/unsubscribe-auth/AGoTmU6zPNZ0LIpz22fKJ7zSVslePuIlks5sd7TqgaJpZM4PG-UY .

hkalbertl commented 7 years ago

Yes, you may make use of evt to handle different cases. The evt is the event object came from jQuery change method.

I can see you will assign dates when appendGrid is ready. That part of code will not trigger the onChange event so values will not become NaN.

I guess you can get a correct value when you passed a correct value to the new Date(...) as I mentioned in my previous reply of onChange function. Good luck!

richb201 commented 7 years ago

Hi Albert. I have been living with the 404 errors and everything is going OK. Yesterday I installed phpStorm on the same machine so I could develop the backend. Suddenly my appendGrid is not working. I don't know why that would happen. Now I am getting this error in the Chrome debugger:

Uncaught ReferenceError: $ is not defined at popup.js:1

And here is the first few lines of popup.js. The $(function() is line 1

Have you ever seen anything like this before? I am wondering if the phpStorm install could have changed either some paths or associations? How would you go about debugging this? I did try copying the original (and still working) popup.html and popup.js from the chrome extension directory to the htdocs directory and I get the same error. It seems the same code will not run on the Apache.

On Mon, Sep 4, 2017 at 12:05 AM, Albert L. notifications@github.com wrote:

Yes, you may make use of evt to handle different cases. The evt is the event object came from jQuery change https://api.jquery.com/change/ method.

I can see you will assign dates when appendGrid is ready. That part of code will not trigger the onChange event so values will not become NaN.

I guess you can get a correct value when you passed a correct value to the new Date(...) as I mentioned in my previous reply of onChange function. Good luck!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/111#issuecomment-326861543, or mute the thread https://github.com/notifications/unsubscribe-auth/AGoTmat6Gy2zSKtixGt1NtBWXRsrRkm2ks5se3bvgaJpZM4PG-UY .

hkalbertl commented 7 years ago

Sorry that I am not familiar with phpStorm. But it should be some problems on loading the jQuery file. You should not get "$ is not defined" error if jQuery can be loaded correctly.

May be I am wrong, I googled and found that phpStorm may serve javascript library such as jQuery internally. You may take a look here. Good luck!

richb201 commented 7 years ago

Thanks Albert. I spent a few hours last night and tried to do exactly what you said. I can now get appendGrid working through phpStorm. Unfortunately my code got somewhat destroyed in the effort, so i will need to "refix' things, but at least it is working :). Next I want to get phpStorm setup to debug both jquery appendGrid and the php back end at the same time since they do need to "talk". Thanks again for you help.

Rich

On Fri, Sep 8, 2017 at 2:44 AM, Albert L. notifications@github.com wrote:

Sorry that I am not familiar with phpStorm. But it should be some problems on loading the jQuery file. You should not get "$ is not defined" error if jQuery can be loaded correctly.

May be I am wrong, I googled and found that phpStorm may serve javascript library such as jQuery internally. You may take a look here https://blog.jetbrains.com/webstorm/2010/11/working-with-javascript-libraries-in-phpstorm-webstorm/. Good luck!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/111#issuecomment-328014326, or mute the thread https://github.com/notifications/unsubscribe-auth/AGoTmWUUArTe4E7ZYo4UyN-FRUrH6YPNks5sgOI1gaJpZM4PG-UY .

richb201 commented 7 years ago

Hey Albert! It has been a little while. I have been working on the communication between the Chrome extension and the php backend using $.GET. It is moving forward. I haven't managed to get the Google authentication working yet, but I want to simulate that part in the meanwhile. The question is "what is the best way to populate an already existing grid?". I can send over the data from my server in json format. Or is there some easier way to populate the grid or a basic group of commands to use?

Thanks,

Rich

On Wed, Aug 30, 2017 at 11:53 PM, Albert L. notifications@github.com wrote:

Hi richb201,

appendGrid will not access the CSS or PNG files of jQuery UI directly. It just apply CSS class (such as ui-widget-header) defined in jQuery UI CSS file.

In that case, I suggest you to make sure your code is working fine before uploading to server. For example, view your popup.html locally with a web browser and see the style/image can be loaded or not. If not, please check the order of JS and CSS as mentioned here https://appendgrid.apphb.com/Download.

If it is working fine locally, you may need to ask for support on Chrome Extension from Google why the file cannot be loaded.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/111#issuecomment-326182269, or mute the thread https://github.com/notifications/unsubscribe-auth/AGoTmSmXfAvaMRxku8AE2vh8sGBDfo1Kks5sdi4dgaJpZM4PG-UY .

hkalbertl commented 7 years ago

Hi Rich,

Good know you are moving forward :)

For the format of data to be sent to backend, it would depend on what you wanted to achieve. If you want to reduce the size of data during summit, you may format the data in JSON format and removed unnecessary label. For example:

var existingJSON = [
  { column1: 'ABC', column2: 'BCD', column3: 'CDE' },
  { column1: 'XYZ', column2: 'WXY', column3: 'VWX' }
];
// Convert to something like this, assumed your backend knows the array sequence
var submitJSON = [
  [ 'ABC', 'BCD', 'CDE' ],
  [ 'XYZ', 'WXY', 'VWX' ]
];

Otherwise, wrap appendGrid with a <form> element. Set the appropriate action (Server URL) and method (POST or GET). And you should able the retrieve submitted data. Please take a look how to process these data on server side by this C# example (I believe it is not to hard to understand XD). Good luck!

richb201 commented 7 years ago

Thanks Albert. The question is what is the easiest way to load the returned data into an already existing appendGrid? Are there any examples of doing this? I am not sure of the significance of using

? My javascript app is running as a chrome extension and thus I am using $.post or $.get from the client side. The plan is to send over the user's gmail address to the backend and for the php or c# daemon to respond with grid data in json format back to the front end. The front end then needs to replace the existing rows and columns in the already displayed append grid. I didn't consider trying to reduce the size of the payload. I am more concerned about multiple copies of the php program all trying to access the mysql table serially. I am hoping that Apache takes care of this contention seamlessly. But my goal right now is to get the front and back working, and then I might need to work on the speed.

One idea is to create a mysql field that already holds the json formatted payload for each user, rather than build it every time a user wants to login. This is why I need to know the easiest way to update the append grid fields.

On September 18, 2017, at 21:18, "Albert L." notifications@github.com wrote:

Hi Rich,

Good know you are moving forward :)

var existingJSON = [ { column1: 'ABC', column2: 'BCD', column3: 'CDE' }, { column1: 'XYZ', column2: 'WXY', column3: 'VWX' } ]; // Convert to something like this, assumed your backend knows the array sequence var submitJSON = [ [ 'ABC', 'BCD', 'CDE' ], [ 'XYZ', 'WXY', 'VWX' ] ];

Otherwise, wrap appendGrid with a element. Set the appropriate action (Server URL) and method (POST or GET). And you should able the retrieve submitted data. Please take a look how to process these data on server side by this C# example (I believe it is not to hard to understand XD). Good luck!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

{"api_version":"1.0","publisher":{"api_key":"05dde50f1d1a384dd78767c55493e4bb","name":"GitHub"},"entity":{"external_key":"github/hkalbertl/jquery.appendGrid","title":"hkalbertl/jquery.appendGrid","subtitle":"GitHub repository","main_image_url":"https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png","avatar_image_url":"https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png","action":{"name":"Open in GitHub","url":"https://github.com/hkalbertl/jquery.appendGrid"}},"updates":{"snippets":[{"icon":"PERSON","message":"@hkalbertl in #111: Hi Rich,\r\n\r\nGood know you are moving forward :)\r\n\r\nFor the format of data to be sent to backend, it would depend on what you wanted to achieve.\r\nIf you want to reduce the size of data during summit, you may format the data in JSON format and removed unnecessary label. For example:\r\n\r\njavascript\r\nvar existingJSON = [\r\n { column1: 'ABC', column2: 'BCD', column3: 'CDE' },\r\n { column1: 'XYZ', column2: 'WXY', column3: 'VWX' }\r\n];\r\n// Convert to something like this, assumed your backend knows the array sequence\r\nvar submitJSON = [\r\n [ 'ABC', 'BCD', 'CDE' ],\r\n [ 'XYZ', 'WXY', 'VWX' ]\r\n];\r\n\r\n\r\nOtherwise, wrap appendGrid with a \u0026lt;form\u0026gt; element. Set the appropriate action (Server URL) and method (POST or GET). And you should able the retrieve submitted data. Please take a look how to process these data on server side by this [C# example](https://appendgrid.apphb.com/Demo/ServerHandling) (I believe it is not to hard to understand XD). Good luck!"}],"action":{"name":"View Issue","url":"https://github.com/hkalbertl/jquery.appendGrid/issues/111#issuecomment-330399968"}}}

hkalbertl commented 7 years ago

Sorry that I was misunderstood your question. You may ignore my reply above.

If you prepared the data in JSON format on server first, it would be easy to load it into the grid.

var dataToPost = { /* Define data for this post request, may be you can use getAllValue to get values from existing appendGrid */ };
$.post('your server address', dataToPost, function (dataFromServer) {
  // Replace server data on existing grid
  $('#tblAppendGrid').appendGrid('load', dataFromServer);
});

If you said columns will be replaced as well, it would be better to init the appendGrid after getting user email. For example:

// Submit user email
var dataToPost = { email: getUserEmail() };
$.post('your server address', dataToPost, function (dataFromServer) {
  // Initialize appendGrid with column and row data from server 
  $('#tblAppendGrid').appendGrid({
    // Generate columns that defined on server
    columns: dataFromServer.columns,
    // Load data after initialization
    initData: dataFromServer.initData
  });
);

richb201 commented 7 years ago

Thanks Albert. I did this to see how the data is stored so I can simulate a row of data on the backend. This is what I got: "{"Date":"Thu Sep 07 2017 08:32:33 GMT-0400 (Eastern Daylight Time)","Business Component":"0","Project":"0","Activity":"0","RecordId":"0"} "

I suspect that those numbers in quotes are the index of the value chosen by the user. I actually need the values rather than the index. The index doesn't mean anything to my php program on the backend.

I would want to see: "{"Date":"Thu Sep 07 2017 08:32:33 GMT-0400 (Eastern Daylight Time)","Business Component":"Excel","Project":"New Functionality","Activity":"Coding","RecordId":"0"}" I guess what I need to get from the appendgrid is just the text of the choices for each column. And I don't need the date.

Is there a way in appendGrid to get (and to set) what the choices are in a pull down? I prefer not to destroy and recreate the sample grid, just the choices.

In a mysql field (defined as Json) I want to keep what all the pull down choices are for Business Component, Project, and Activity. These will be different for each user. But I want to build the Json field in advance and keep it in the mysql for each user.

Thanks for your help.

On Tue, Sep 19, 2017 at 4:54 AM, Albert L. notifications@github.com wrote:

Sorry that I was misunderstood your question. You may ignore my reply above.

If you prepared the data in JSON format on server first, it would be easy to load it into the grid.

var dataToPost = { / Define data for this post request, may be you can use getAllValue to get values from existing appendGrid / };$.post('your server address', dataToPost, function (dataFromServer) { // Replace server data on existing grid $('#tblAppendGrid').appendGrid('load', dataFromServer); });

If you said columns will be replaced as well, it would be better to init the appendGrid after getting user email. For example:

// Submit user emailvar dataToPost = { email: getUserEmail() };$.post('your server address', dataToPost, function (dataFromServer) { // Initialize appendGrid with column and row data from server $('#tblAppendGrid').appendGrid({ // Generate columns that defined on server columns: dataFromServer.columns, // Load data after initialization initData: dataFromServer.initData }); );

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/111#issuecomment-330474498, or mute the thread https://github.com/notifications/unsubscribe-auth/AGoTmToIpvNworM2oiGWewJ-lLdWBxMeks5sj4FMgaJpZM4PG-UY .

richb201 commented 7 years ago

I guess it is just the ctrlOptions I want to update. Can I do this without having to recreate the entire grid? I was thinking of them as an array of strings. Such as

var BC= new Array['Saab','Volvo','BMW']; var PR=new Array['increase value','reduce wear','clean interior']; var AC=new Array['coded', 'cleaned', 'tested'];

On Tue, Sep 19, 2017 at 8:54 AM, Richard Bernstein richb201@gmail.com wrote:

Thanks Albert. I did this to see how the data is stored so I can simulate a row of data on the backend. This is what I got: "{"Date":"Thu Sep 07 2017 08:32:33 GMT-0400 (Eastern Daylight Time)","Business Component":"0","Project":"0"," Activity":"0","RecordId":"0"}"

I suspect that those numbers in quotes are the index of the value chosen by the user. I actually need the values rather than the index. The index doesn't mean anything to my php program on the backend.

I would want to see: "{"Date":"Thu Sep 07 2017 08:32:33 GMT-0400 (Eastern Daylight Time)","Business Component":"Excel","Project":"New Functionality","Activity":"Coding","RecordId":"0"}" I guess what I need to get from the appendgrid is just the text of the choices for each column. And I don't need the date.

Is there a way in appendGrid to get (and to set) what the choices are in a pull down? I prefer not to destroy and recreate the sample grid, just the choices.

In a mysql field (defined as Json) I want to keep what all the pull down choices are for Business Component, Project, and Activity. These will be different for each user. But I want to build the Json field in advance and keep it in the mysql for each user.

Thanks for your help.

On Tue, Sep 19, 2017 at 4:54 AM, Albert L. notifications@github.com wrote:

Sorry that I was misunderstood your question. You may ignore my reply above.

If you prepared the data in JSON format on server first, it would be easy to load it into the grid.

var dataToPost = { / Define data for this post request, may be you can use getAllValue to get values from existing appendGrid / };$.post('your server address', dataToPost, function (dataFromServer) { // Replace server data on existing grid $('#tblAppendGrid').appendGrid('load', dataFromServer); });

If you said columns will be replaced as well, it would be better to init the appendGrid after getting user email. For example:

// Submit user emailvar dataToPost = { email: getUserEmail() };$.post('your server address', dataToPost, function (dataFromServer) { // Initialize appendGrid with column and row data from server $('#tblAppendGrid').appendGrid({ // Generate columns that defined on server columns: dataFromServer.columns, // Load data after initialization initData: dataFromServer.initData }); );

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/111#issuecomment-330474498, or mute the thread https://github.com/notifications/unsubscribe-auth/AGoTmToIpvNworM2oiGWewJ-lLdWBxMeks5sj4FMgaJpZM4PG-UY .

hkalbertl commented 7 years ago

Hi Rich,

For your first question, you can modify the ctrlOptions to string array if you want the "text" instead of "value". For example:

// Your existing style
{ name: 'Business Component', display: 'Business Component', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Apple Pie', 2: 'Cherry Pie', 3: 'Pecan Pie', 4: 'Starwberry/Rhubarb Pie'} }
// Another style to get selected text
{ name: 'Business Component', display: 'Business Component', type: 'select', ctrlOptions: [ '{Choose}', 'Apple Pie', 'Cherry Pie', 'Pecan Pie', 'Starwberry/Rhubarb Pie' ] }

For the second question above dynamic drop down list options, you may use a function in ctrlOptions for generate options after data retrieved from server. For example:

// Define the drop down type, or save it to somewhere else
var _globalDropDownType = 0;
// Define your list options
var BC= new Array['Saab','Volvo','BMW'];
var PR=new Array['increase value','reduce wear','clean interior'];
var AC=new Array['coded', 'cleaned', 'tested'];

$(function (){
  /* Initial the grid */
  $('#tblAppendGrid').appendGrid({
    columns: [
      {
        name: 'your_dropdown',
        type: 'select',
        ctrlOptions: function (elem) {
          // Create options based on the type
          var dataList = null;
          if (_globalDropDownType == 1) {
            dataList = BC;
          } else if (_globalDropDownType == 2) {
            dataList = PR;
          } else if (_globalDropDownType == 3) {
            dataList = AC;
          } else {
            // TODO: Unknown drop down list type??
          }
          // Add options based on the drop down options
          $.each(dataList, function (index, value) {
            // Add the options to `select` element
            elem.options[elem.options.length - 1] = new Option(value);
          });
        }
      }
    ]
  });
  $('<Your Submit Button>').on('click', function () {
    $.post('<Your Server URL>', function (dataFromServer) {
      // Set the drop down type based on result returned from server
      _globalDropDownType = dataFromServer.DropDownType;
      // Load the data from server and the drop down list options should be updated!
      $('#tblAppendGrid').appendGrid('load', dataFromServer.updatedData);
    });
  });
});

So, the grid will not be re-created. Only the options of drop down list are replaced.

richb201 commented 7 years ago

Thanks Albert. When I run your code within the Chrome debugger I get:

Uncaught TypeError: Cannot read property 'length' of null at Function.each (jquery-1.11.1.min.js:2) at Object.ctrlOptions (popup.js:179) at insertRow (jquery.appendGrid-1.6.3.js:1057) at m.fn.init.insertRow (jquery.appendGrid-1.6.3.js:518) at m.fn.init.$.fn.appendGrid (jquery.appendGrid-1.6.3.js:1670) at m.fn.init.appendRow (jquery.appendGrid-1.6.3.js:510) at m.fn.init.$.fn.appendGrid (jquery.appendGrid-1.6.3.js:1670) at m.fn.init.init (jquery.appendGrid-1.6.3.js:465) at m.fn.init.$.fn.appendGrid (jquery.appendGrid-1.6.3.js:1672) at HTMLDocument. (popup.js:161)

Any idea why?

On Wed, Sep 20, 2017 at 2:28 AM, Albert L. notifications@github.com wrote:

Hi Rich,

For your first question, you can modify the ctrlOptions to string array if you want the "text" instead of "value". For example:

// Your existing style { name: 'Business Component', display: 'Business Component', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Apple Pie', 2: 'Cherry Pie', 3: 'Pecan Pie', 4: 'Starwberry/Rhubarb Pie'} }// Another style to get selected text { name: 'Business Component', display: 'Business Component', type: 'select', ctrlOptions: [ '{Choose}', 'Apple Pie', 'Cherry Pie', 'Pecan Pie', 'Starwberry/Rhubarb Pie' ] }

For the second question above dynamic drop down list options, you may use a function in ctrlOptions https://appendgrid.apphb.com/Documentation#link-ctrlOptions for generate options after data retrieved from server. For example:

// Define the drop down type, or save it to somewhere elsevar _globalDropDownType = 0;// Define your list optionsvar BC= new Array['Saab','Volvo','BMW'];var PR=new Array['increase value','reduce wear','clean interior'];var AC=new Array['coded', 'cleaned', 'tested']; $(function (){ / Initial the grid / $('#tblAppendGrid').appendGrid({ columns: [ { name: 'your_dropdown', type: 'select', ctrlOptions: function (elem) { // Create options based on the type var dataList = null; if (_globalDropDownType == 1) { dataList = BC; } else if (_globalDropDownType == 2) { dataList = PR; } else if (_globalDropDownType == 3) { dataList = AC; } else { // TODO: Unknown drop down list type?? } // Add options based on the drop down options $.each(dataList, function (index, value) { // Add the options to select element elem.options[elem.options.length - 1] = new Option(value); }); } } ] }); $('').on('click', function () { $.post('', function (dataFromServer) { // Set the drop down type based on result returned from server _globalDropDownType = dataFromServer.DropDownType; // Load the data from server and the drop down list options should be updated! $('#tblAppendGrid').appendGrid('load', dataFromServer.updatedData); }); }); });

So, the grid will not be re-created. Only the options of drop down list are replaced.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/111#issuecomment-330757528, or mute the thread https://github.com/notifications/unsubscribe-auth/AGoTmWrBUVaHfZMI09jDg3fLFubAjem8ks5skLCpgaJpZM4PG-UY .

richb201 commented 7 years ago

OK. I commented out your new $(function() and at least the grid is initiallizing again. Now when I have my original initialize code and also your new code see below.

/* //Albert's code // Define the drop down type, or save it to somewhere else var _globalDropDownType = 0; // Define your list options var BC= [1,'Saab','Volvo','BMW']; var PR= [2,'increase value','reduce wear','clean interior']; var AC= [3,'coded', 'cleaned', 'tested'];

$(function (){ // Initial the grid $('#tblAppendGrid').appendGrid({ columns: [ { name: 'your_dropdown', type: 'select', ctrlOptions: function (elem) { // Create options based on the type var dataList = null; if (_globalDropDownType == 1) { dataList = BC; } else if (_globalDropDownType == 2) { dataList = PR; } else if (_globalDropDownType == 3) { dataList = AC; } else { // TODO: Unknown drop down list type?? } // Add options based on the drop down options $.each(dataList, function (index, value) { // Add the options to select element elem.options[elem.options.length - 1] = new Option(value); }); } } ] }); }); */

Can two initial the grid calls "(#tblAppendGrid).appendGrid" exist in a single .js file?

On Wed, Sep 20, 2017 at 3:57 AM, Richard Bernstein richb201@gmail.com wrote:

Thanks Albert. When I run your code within the Chrome debugger I get:

Uncaught TypeError: Cannot read property 'length' of null at Function.each (jquery-1.11.1.min.js:2) at Object.ctrlOptions (popup.js:179) at insertRow (jquery.appendGrid-1.6.3.js:1057) at m.fn.init.insertRow (jquery.appendGrid-1.6.3.js:518) at m.fn.init.$.fn.appendGrid (jquery.appendGrid-1.6.3.js:1670) at m.fn.init.appendRow (jquery.appendGrid-1.6.3.js:510) at m.fn.init.$.fn.appendGrid (jquery.appendGrid-1.6.3.js:1670) at m.fn.init.init (jquery.appendGrid-1.6.3.js:465) at m.fn.init.$.fn.appendGrid (jquery.appendGrid-1.6.3.js:1672) at HTMLDocument. (popup.js:161)

Any idea why?

On Wed, Sep 20, 2017 at 2:28 AM, Albert L. notifications@github.com wrote:

Hi Rich,

For your first question, you can modify the ctrlOptions to string array if you want the "text" instead of "value". For example:

// Your existing style { name: 'Business Component', display: 'Business Component', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Apple Pie', 2: 'Cherry Pie', 3: 'Pecan Pie', 4: 'Starwberry/Rhubarb Pie'} }// Another style to get selected text { name: 'Business Component', display: 'Business Component', type: 'select', ctrlOptions: [ '{Choose}', 'Apple Pie', 'Cherry Pie', 'Pecan Pie', 'Starwberry/Rhubarb Pie' ] }

For the second question above dynamic drop down list options, you may use a function in ctrlOptions https://appendgrid.apphb.com/Documentation#link-ctrlOptions for generate options after data retrieved from server. For example:

// Define the drop down type, or save it to somewhere elsevar _globalDropDownType = 0;// Define your list optionsvar BC= new Array['Saab','Volvo','BMW'];var PR=new Array['increase value','reduce wear','clean interior'];var AC=new Array['coded', 'cleaned', 'tested']; $(function (){ / Initial the grid / $('#tblAppendGrid').appendGrid({ columns: [ { name: 'your_dropdown', type: 'select', ctrlOptions: function (elem) { // Create options based on the type var dataList = null; if (_globalDropDownType == 1) { dataList = BC; } else if (_globalDropDownType == 2) { dataList = PR; } else if (_globalDropDownType == 3) { dataList = AC; } else { // TODO: Unknown drop down list type?? } // Add options based on the drop down options $.each(dataList, function (index, value) { // Add the options to select element elem.options[elem.options.length - 1] = new Option(value); }); } } ] }); $('').on('click', function () { $.post('', function (dataFromServer) { // Set the drop down type based on result returned from server _globalDropDownType = dataFromServer.DropDownType; // Load the data from server and the drop down list options should be updated! $('#tblAppendGrid').appendGrid('load', dataFromServer.updatedData); }); }); });

So, the grid will not be re-created. Only the options of drop down list are replaced.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/111#issuecomment-330757528, or mute the thread https://github.com/notifications/unsubscribe-auth/AGoTmWrBUVaHfZMI09jDg3fLFubAjem8ks5skLCpgaJpZM4PG-UY .

richb201 commented 7 years ago

Sorry for the confusion. I didn't realize that what you sent me was an example! I will modify my code to work. I guess I can use the same function to both initially to set the rows and columns (and ctrlAttr) and also after a string has been recvd from the server. Question? When does that $function() fire?

On Wed, Sep 20, 2017 at 11:58 AM, Richard Bernstein richb201@gmail.com wrote:

OK. I commented out your new $(function() and at least the grid is initiallizing again. Now when I have my original initialize code and also your new code see below.

/* //Albert's code // Define the drop down type, or save it to somewhere else var _globalDropDownType = 0; // Define your list options var BC= [1,'Saab','Volvo','BMW']; var PR= [2,'increase value','reduce wear','clean interior']; var AC= [3,'coded', 'cleaned', 'tested'];

$(function (){ // Initial the grid $('#tblAppendGrid').appendGrid({ columns: [ { name: 'your_dropdown', type: 'select', ctrlOptions: function (elem) { // Create options based on the type var dataList = null; if (_globalDropDownType == 1) { dataList = BC; } else if (_globalDropDownType == 2) { dataList = PR; } else if (_globalDropDownType == 3) { dataList = AC; } else { // TODO: Unknown drop down list type?? } // Add options based on the drop down options $.each(dataList, function (index, value) { // Add the options to select element elem.options[elem.options.length - 1] = new Option(value); }); } } ] }); }); */

Can two initial the grid calls "(#tblAppendGrid).appendGrid" exist in a single .js file?

On Wed, Sep 20, 2017 at 3:57 AM, Richard Bernstein richb201@gmail.com wrote:

Thanks Albert. When I run your code within the Chrome debugger I get:

Uncaught TypeError: Cannot read property 'length' of null at Function.each (jquery-1.11.1.min.js:2) at Object.ctrlOptions (popup.js:179) at insertRow (jquery.appendGrid-1.6.3.js:1057) at m.fn.init.insertRow (jquery.appendGrid-1.6.3.js:518) at m.fn.init.$.fn.appendGrid (jquery.appendGrid-1.6.3.js:1670) at m.fn.init.appendRow (jquery.appendGrid-1.6.3.js:510) at m.fn.init.$.fn.appendGrid (jquery.appendGrid-1.6.3.js:1670) at m.fn.init.init (jquery.appendGrid-1.6.3.js:465) at m.fn.init.$.fn.appendGrid (jquery.appendGrid-1.6.3.js:1672) at HTMLDocument. (popup.js:161)

Any idea why?

On Wed, Sep 20, 2017 at 2:28 AM, Albert L. notifications@github.com wrote:

Hi Rich,

For your first question, you can modify the ctrlOptions to string array if you want the "text" instead of "value". For example:

// Your existing style { name: 'Business Component', display: 'Business Component', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Apple Pie', 2: 'Cherry Pie', 3: 'Pecan Pie', 4: 'Starwberry/Rhubarb Pie'} }// Another style to get selected text { name: 'Business Component', display: 'Business Component', type: 'select', ctrlOptions: [ '{Choose}', 'Apple Pie', 'Cherry Pie', 'Pecan Pie', 'Starwberry/Rhubarb Pie' ] }

For the second question above dynamic drop down list options, you may use a function in ctrlOptions https://appendgrid.apphb.com/Documentation#link-ctrlOptions for generate options after data retrieved from server. For example:

// Define the drop down type, or save it to somewhere elsevar _globalDropDownType = 0;// Define your list optionsvar BC= new Array['Saab','Volvo','BMW'];var PR=new Array['increase value','reduce wear','clean interior'];var AC=new Array['coded', 'cleaned', 'tested']; $(function (){ / Initial the grid / $('#tblAppendGrid').appendGrid({ columns: [ { name: 'your_dropdown', type: 'select', ctrlOptions: function (elem) { // Create options based on the type var dataList = null; if (_globalDropDownType == 1) { dataList = BC; } else if (_globalDropDownType == 2) { dataList = PR; } else if (_globalDropDownType == 3) { dataList = AC; } else { // TODO: Unknown drop down list type?? } // Add options based on the drop down options $.each(dataList, function (index, value) { // Add the options to select element elem.options[elem.options.length - 1] = new Option(value); }); } } ] }); $('').on('click', function () { $.post('', function (dataFromServer) { // Set the drop down type based on result returned from server _globalDropDownType = dataFromServer.DropDownType; // Load the data from server and the drop down list options should be updated! $('#tblAppendGrid').appendGrid('load', dataFromServer.updatedData); }); }); });

So, the grid will not be re-created. Only the options of drop down list are replaced.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/111#issuecomment-330757528, or mute the thread https://github.com/notifications/unsubscribe-auth/AGoTmWrBUVaHfZMI09jDg3fLFubAjem8ks5skLCpgaJpZM4PG-UY .

hkalbertl commented 7 years ago

Yes. My code was an example. It would be better to extract the code that you wanted and put it in your project.

You may have more than one $(xxx).appendGrid({ ... }) exist the same .js file but please make sure that do not call it on the same table.

// Good!
$(function(){
  // Initial first grid
  $('#tblAppendGrid1').appendGrid({ ... });

  // Do something

  // Initial second grid
  $('#tblAppendGrid2').appendGrid({ ... });

  // Do something

  // Initial third grid
  $('#tblAppendGrid3').appendGrid({ ... });
});

// Bad...
$(function(){
  // Initial the grid
  $('#tblAppendGrid1').appendGrid({ ... });

  // Do something

  // Initial on the same table?? Error occurred
  $('#tblAppendGrid1').appendGrid({ ... });
});

For your last question, $(function(){ ... }); is called after the HTML document loaded. You may get more information from jQuery website. And you can put the code to initial grid in separated function and call it when you need. For example:

$(function(){
  // Initialize buttons or other UI components here...
  $('#your_button').on('click', function(){
    // When button is clicked, submit a POST request
    $.post('ServerURL', function(dataFromServer){
     // Just an example: Do some validation on the data from server
     if (dataFromServer) {
       // Yeah! Data looks good! 
       initGrid(dataFromServer.initData);
     }
    });
  });
});

// This is a function to initialize appendGrid
function initGrid(initData) {
  $('#tblAppendGrid').appendGrid({
    columns: [ /* Your columns */ ],
    initData: initData
  });
}

richb201 commented 7 years ago

Thanks Albert. I am getting closer. Are you saying that I need to destroy the grid before I create new version? What is the function to destroy a grid?

$(function(){ // Initial the grid

AC='make bread;turn on oven;wrap with cloth';

$('#tblAppendGrid1').appendGrid({ ... }); //destroy grid

AC='clean car;polish steering wheel; rotate tires'; // Initial on the same table?? Error occurred $('#tblAppendGrid1').appendGrid({ ... }); });

Must I delete the old grid?

On Thu, Sep 21, 2017 at 1:57 AM, Albert L. notifications@github.com wrote:

Yes. My code was an example. It would be better to extract the code that you wanted and put it in your project.

You may have more than one $(xxx).appendGrid({ ... }) exist the same .js file but please make sure that do not call it on the same table.

// Good!$(function(){ // Initial first grid $('#tblAppendGrid1').appendGrid({ ... });

// Do something

// Initial second grid $('#tblAppendGrid2').appendGrid({ ... });

// Do something

// Initial third grid $('#tblAppendGrid3').appendGrid({ ... }); });

// Bad...$(function(){ // Initial the grid $('#tblAppendGrid1').appendGrid({ ... });

// Do something

// Initial on the same table?? Error occurred $('#tblAppendGrid1').appendGrid({ ... }); });

For your last question, $(function(){ ... }); is called after the HTML document loaded. You may get more information from jQuery website https://learn.jquery.com/using-jquery-core/document-ready/. And you can put the code to initial grid in separated function and call it when you need. For example:

$(function(){ // Initialize buttons or other UI components here... $('#your_button').on('click', function(){ // When button is clicked, submit a POST request $.post('ServerURL', function(dataFromServer){ // Just an example: Do some validation on the data from server if (dataFromServer) { // Yeah! Data looks good! initGrid(dataFromServer.initData); } }); }); }); // This is a function to initialize appendGridfunction initGrid(initData) { $('#tblAppendGrid').appendGrid({ columns: [ / Your columns / ], initData: initData }); }

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/111#issuecomment-331059124, or mute the thread https://github.com/notifications/unsubscribe-auth/AGoTmY9Lv_EFJXkla7f9C76VeAjZl8-Cks5skfrIgaJpZM4PG-UY .

hkalbertl commented 7 years ago

I would like to confirm with you is that just the options in drop down list will be different?? If yes, my sample code posted on 20 Sep should work. The drop down options will be generated correctly if you set the _globalDropDownType before calling $('#tblAppendGrid').appendGrid('load', <your data>).

If not and you really need dynamic columns based on different user/config, you may need to remove and re-create appendGrid in every server response. There is no destroy method but you may remove appendGrid by using following code:

// Remove appendGrid
$('#tblAppendGrid').parent('.appendGrid').remove();
// Re-create the table element
$('<table></table>').attr('id', 'tblAppendGrid').appendTo('<Your grid container>');
$('#tblAppendGrid').appendGrid({ /*New init options*/ });

richb201 commented 7 years ago

Albert I actually modified my code considerably after you told me that what you sent was an example. My current plan is to use the three strings BC,PR and AC as the ctrlOptions. When the server occasionally responds with these three strings, I will assign them to these three same variables and then call initialize again. I am glad you told me that I need to remove the old one before I do that. I don't think that this updating of the grid will happen very often, so I don't expect a big user issue. Can I just use load like above instead of destroying and recreating the grid?

                var rowOrder =

$('#tblAppendGrid').appendGrid('getRowOrder'); var data = $('#tblAppendGrid').appendGrid('getRowValue', rowIndex); var today= new Date(data); var todaysday=today.getDate();

                for (i=0;i<14;i++)
                {
                $('#tblAppendGrid').appendGrid('setCtrlValue', 'Date',

i, todaysday); };

            }
          },

  //      { name: 'Business Component', display: 'Business Component',

type: 'select', ctrlOptions: { '{Choose}','Apple Pie','Cherry Pie','Pecan Pie','Strawberry/Rhubarb Pie'}}, { name: 'Business Component', display: 'Business Component', ctrlAttr: { maxlength: 20 }, ctrlCss: { width: '160px'},type: 'select', ctrlOptions: BC }, // { name: 'Project', display: 'Project', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Improve Crust', 2: 'Reduce Costs', 3: 'Better Boxes', 4: 'Speed of Production', 5: 'New Customers', 6: 'Other'} }, { name: 'Project', display: 'Project', ctrlAttr: { maxlength: 20 }, ctrlCss: { width: '160px'}, type: 'select', ctrlOptions: PR }, // { name: 'Activity', display: 'Activity', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Code', 2: 'Unit Test', 3: 'Architecture', 4: 'Internet Research', 5: 'Trial and Error', 6: 'Usability testing', 7:'Spec Creation', 8:'Supervison', 9: 'Documentation', 10: 'Tech Support', 11: 'Network Admin'}}, { name: 'Activity', display: 'Activity', type: 'select', ctrlOptions: AC}, { name: 'RecordId', type: 'hidden', value: 0 } ], customRowButtons: [ { uiButton: { icons: { primary: 'ui-icon-print' }, label: 'Duplicate Below' }, click: function (evtObj, uniqueIndex, rowData) {

                var rowIndex1 =

$('#tblAppendGrid').appendGrid('getRowIndex', uniqueIndex); var value1 = $('#tblAppendGrid').appendGrid('getCtrlValue', 'Business Component', rowIndex1); var value2 = $('#tblAppendGrid').appendGrid('getCtrlValue', 'Project', rowIndex1); var value3 = $('#tblAppendGrid').appendGrid('getCtrlValue', 'Activity', rowIndex1); / alert(rowIndex+1+"here"+value1); / $('#tblAppendGrid').appendGrid('setCtrlValue', 'Business Component',rowIndex1+1, value1); $('#tblAppendGrid').appendGrid('setCtrlValue', 'Project', rowIndex1+1, value2); $('#tblAppendGrid').appendGrid('setCtrlValue', 'Activity', rowIndex1+1, value3); }, btnClass: 'print' } ],

    hideRowNumColumn: true,
    rowButtonsInFront: false,
    hideButtons: {
        remove: true,
        removeLast: true,
        insert: true,
        append: true,
        moveUp: true,
        moveDown: true

                }

On Fri, Sep 22, 2017 at 3:09 AM, Albert L. notifications@github.com wrote:

I would like to confirm with you is that just the options in drop down list will be different?? If yes, my sample code posted on 20 Sep should work. The drop down options will be generated correctly if you set the _globalDropDownType before calling $('#tblAppendGrid').appendGrid('load', ).

If not and you really need dynamic columns based on different user/config, you may need to remove and re-create appendGrid in every server response. There is no destroy method but you may remove appendGrid by using following code:

// Remove appendGrid$('#tblAppendGrid').parent('.appendGrid').remove();// Re-create the table element$('
').attr('id', 'tblAppendGrid').appendTo('');$('#tblAppendGrid').appendGrid({ /New init options/ });

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/111#issuecomment-331368882, or mute the thread https://github.com/notifications/unsubscribe-auth/AGoTmVgJiVgQbCsnXF03YgfSNk8ZbWrpks5sk10WgaJpZM4PG-UY .

richb201 commented 7 years ago

Albert, I am getting close. I have three strings BC,PR, and AC and each has all the items for each one of the pull downs in my Append Grid. So when I first bring up the page the Immediately invoked expression runs:

$('#tblAppendGrid').appendGrid({ caption: 'My Activities', . . } It uses my ctrlOptions in BC, PR, and AC. Now the user wants to log in so I go to the server and get this user's personal BC, PR, and AC. I overwrite the string variables BC/PR/AC with this users own strings so I destroy the grid and then would like to run the immediately invoked expression. All the other options on the page (which consists of 14 lines (2 weeks worth of appendGrid) data displaying. The only difference is that I Used this users own BC,PR, and AC strings. Here is the code that gets the "personal"data (btnLogin) and the callback function from that $.post. I followed your direction and removed the default grid and now would like to call the Immedietly Invoked expression abover again (because I have updated the BC/PR/AC). Other than cutting and pasting my original call see above into the processResponse() callback, is there any other way to do this? By the way, I really appreciate your help. This whole project has been a huge learning curve for me.

Rich, NJ, USA

  $('#btnLogin').button().click(function () {

    //window.close();
    //

chrome.identity.getProfileUserInfo(function(info){email=info.email;}); //email=getEmail(); //userinfo Object {email: "hxxxxxxxxx@gmail.com", id: "1xxxxxxxxxxx49189xx"}; $.post("http://localhost/subit_backend/login_daemon.php","action=login", processResponse);

    });

});

function processResponse(data,status){ if (status="success"){ alert(data); // Remove appendGrid $('#tblAppendGrid').parent('.appendGrid').remove(); // Re-create the table element $('

').attr('id', 'tblAppendGrid').appendTo('tblAppendGrid');

}

On Fri, Sep 22, 2017 at 7:47 AM, Richard Bernstein richb201@gmail.com wrote:

Albert I actually modified my code considerably after you told me that what you sent was an example. My current plan is to use the three strings BC,PR and AC as the ctrlOptions. When the server occasionally responds with these three strings, I will assign them to these three same variables and then call initialize again. I am glad you told me that I need to remove the old one before I do that. I don't think that this updating of the grid will happen very often, so I don't expect a big user issue. Can I just use load like above instead of destroying and recreating the grid?

var BC='{choose};ApplePie;Cherry Pie'; var PR='{choose};Improve Crust;Reduce Costs;Better Boxes;Speed of Production;New Customers;Other'; var AC='{choose};Code;Unit Test;Architecture;Internet Research;Trial and Error;Usability testing;Spec Creation;Supervison;Documentation;Tech Support;Network Admin';

$(function () { // Initialize appendGrid $('#tblAppendGrid').appendGrid({ caption: 'My Activities', initRows: 14, columns: [ { name: 'Date', display: 'Date', type: 'ui-datepicker', ctrlAttr: { maxlength: 30 }, ctrlCss: { width: '160px'}, uiOption: { dateFormat: 'yy/mm/dd'}, onChange: function (evt, rowIndex) {
                var rowOrder = $('#tblAppendGrid').
appendGrid('getRowOrder'); var data = $('#tblAppendGrid').appendGrid('getRowValue', rowIndex); var today= new Date(data); var todaysday=today.getDate();
                for (i=0;i<14;i++)
                {
                $('#tblAppendGrid').appendGrid('setCtrlValue',
'Date', i, todaysday); };
            }
          },

  //      { name: 'Business Component', display: 'Business Component',
type: 'select', ctrlOptions: { '{Choose}','Apple Pie','Cherry Pie','Pecan Pie','Strawberry/Rhubarb Pie'}}, { name: 'Business Component', display: 'Business Component', ctrlAttr: { maxlength: 20 }, ctrlCss: { width: '160px'},type: 'select', ctrlOptions: BC }, // { name: 'Project', display: 'Project', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Improve Crust', 2: 'Reduce Costs', 3: 'Better Boxes', 4: 'Speed of Production', 5: 'New Customers', 6: 'Other'} }, { name: 'Project', display: 'Project', ctrlAttr: { maxlength: 20 }, ctrlCss: { width: '160px'}, type: 'select', ctrlOptions: PR }, // { name: 'Activity', display: 'Activity', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Code', 2: 'Unit Test', 3: 'Architecture', 4: 'Internet Research', 5: 'Trial and Error', 6: 'Usability testing', 7:'Spec Creation', 8:'Supervison', 9: 'Documentation', 10: 'Tech Support', 11: 'Network Admin'}}, { name: 'Activity', display: 'Activity', type: 'select', ctrlOptions: AC}, { name: 'RecordId', type: 'hidden', value: 0 } ], customRowButtons: [ { uiButton: { icons: { primary: 'ui-icon-print' }, label: 'Duplicate Below' }, click: function (evtObj, uniqueIndex, rowData) {
                var rowIndex1 = $('#tblAppendGrid').appendGrid('getRowIndex',
uniqueIndex); var value1 = $('#tblAppendGrid').appendGrid('getCtrlValue', 'Business Component', rowIndex1); var value2 = $('#tblAppendGrid').appendGrid('getCtrlValue', 'Project', rowIndex1); var value3 = $('#tblAppendGrid').appendGrid('getCtrlValue', 'Activity', rowIndex1); / alert(rowIndex+1+"here"+value1); / $('#tblAppendGrid').appendGrid('setCtrlValue', 'Business Component',rowIndex1+1, value1); $('#tblAppendGrid').appendGrid('setCtrlValue', 'Project', rowIndex1+1, value2); $('#tblAppendGrid').appendGrid('setCtrlValue', 'Activity', rowIndex1+1, value3); }, btnClass: 'print' } ],
    hideRowNumColumn: true,
    rowButtonsInFront: false,
    hideButtons: {
        remove: true,
        removeLast: true,
        insert: true,
        append: true,
        moveUp: true,
        moveDown: true

                }
On Fri, Sep 22, 2017 at 3:09 AM, Albert L. notifications@github.com wrote:

I would like to confirm with you is that just the options in drop down list will be different?? If yes, my sample code posted on 20 Sep should work. The drop down options will be generated correctly if you set the _globalDropDownType before calling $('#tblAppendGrid').appendGrid('load', ).

If not and you really need dynamic columns based on different user/config, you may need to remove and re-create appendGrid in every server response. There is no destroy method but you may remove appendGrid by using following code:

// Remove appendGrid$('#tblAppendGrid').parent('.appendGrid').remove();// Re-create the table element$('
').attr('id', 'tblAppendGrid').appendTo('');$('#tblAppendGrid').appendGrid({ /New init options/ });

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/111#issuecomment-331368882, or mute the thread https://github.com/notifications/unsubscribe-auth/AGoTmVgJiVgQbCsnXF03YgfSNk8ZbWrpks5sk10WgaJpZM4PG-UY .

richb201 commented 7 years ago

Albert, I am removing the grid, setting all the options (same code but new ctrlOptions) and then recreating the grid, but the grid doesn't display. The code seems to be failing in this line <<<<<

/// <summary>
/// Initialize append grid or calling its methods.
/// </summary>
$.fn.appendGrid = function (params) {
    if (_methods[params]) {
        return _methods[params].apply(this,

Array.prototype.slice.call(arguments, 1)); } else if (typeof (params) === 'object' || !params) { return _methods.init.apply(this, arguments); <<<<<<< I am not sure how your code works } else { alert(_systemMessages.notSupportMethod + params); }

Is this the proper path?

};

On Sat, Sep 23, 2017 at 9:23 AM, Richard Bernstein richb201@gmail.com wrote:

Albert, I am getting close. I have three strings BC,PR, and AC and each has all the items for each one of the pull downs in my Append Grid. So when I first bring up the page the Immediately invoked expression runs:

$('#tblAppendGrid').appendGrid({ caption: 'My Activities', . . } It uses my ctrlOptions in BC, PR, and AC. Now the user wants to log in so I go to the server and get this user's personal BC, PR, and AC. I overwrite the string variables BC/PR/AC with this users own strings so I destroy the grid and then would like to run the immediately invoked expression. All the other options on the page (which consists of 14 lines (2 weeks worth of appendGrid) data displaying. The only difference is that I Used this users own BC,PR, and AC strings. Here is the code that gets the "personal"data (btnLogin) and the callback function from that $.post. I followed your direction and removed the default grid and now would like to call the Immedietly Invoked expression abover again (because I have updated the BC/PR/AC). Other than cutting and pasting my original call see above into the processResponse() callback, is there any other way to do this? By the way, I really appreciate your help. This whole project has been a huge learning curve for me.

Rich, NJ, USA
  $('#btnLogin').button().click(function () {

    //window.close();
    // chrome.identity.getProfileUserInfo(function(
info){email=info.email;}); //email=getEmail(); //userinfo Object {email: "hxxxxxxxxx@gmail.com", id: "1xxxxxxxxxxx49189xx"}; $.post("http://localhost/subit_backend/login_daemon.php","action=login", processResponse);
    });

});
function processResponse(data,status){ if (status="success"){ alert(data); // Remove appendGrid $('#tblAppendGrid').parent('.appendGrid').remove(); // Re-create the table element $('
').attr('id', 'tblAppendGrid').appendTo(' tblAppendGrid');
    }
}

On Fri, Sep 22, 2017 at 7:47 AM, Richard Bernstein richb201@gmail.com wrote:
Albert I actually modified my code considerably after you told me that what you sent was an example. My current plan is to use the three strings BC,PR and AC as the ctrlOptions. When the server occasionally responds with these three strings, I will assign them to these three same variables and then call initialize again. I am glad you told me that I need to remove the old one before I do that. I don't think that this updating of the grid will happen very often, so I don't expect a big user issue. Can I just use load like above instead of destroying and recreating the grid?

var BC='{choose};ApplePie;Cherry Pie'; var PR='{choose};Improve Crust;Reduce Costs;Better Boxes;Speed of Production;New Customers;Other'; var AC='{choose};Code;Unit Test;Architecture;Internet Research;Trial and Error;Usability testing;Spec Creation;Supervison;Documentation;Tech Support;Network Admin';

$(function () { // Initialize appendGrid $('#tblAppendGrid').appendGrid({ caption: 'My Activities', initRows: 14, columns: [ { name: 'Date', display: 'Date', type: 'ui-datepicker', ctrlAttr: { maxlength: 30 }, ctrlCss: { width: '160px'}, uiOption: { dateFormat: 'yy/mm/dd'}, onChange: function (evt, rowIndex) {
                var rowOrder = $('#tblAppendGrid').appendGrid
('getRowOrder'); var data = $('#tblAppendGrid').appendGrid('getRowValue', rowIndex); var today= new Date(data); var todaysday=today.getDate();
                for (i=0;i<14;i++)
                {
                $('#tblAppendGrid').appendGrid('setCtrlValue',
'Date', i, todaysday); };
            }
          },

  //      { name: 'Business Component', display: 'Business
Component', type: 'select', ctrlOptions: { '{Choose}','Apple Pie','Cherry Pie','Pecan Pie','Strawberry/Rhubarb Pie'}}, { name: 'Business Component', display: 'Business Component', ctrlAttr: { maxlength: 20 }, ctrlCss: { width: '160px'},type: 'select', ctrlOptions: BC }, // { name: 'Project', display: 'Project', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Improve Crust', 2: 'Reduce Costs', 3: 'Better Boxes', 4: 'Speed of Production', 5: 'New Customers', 6: 'Other'} }, { name: 'Project', display: 'Project', ctrlAttr: { maxlength: 20 }, ctrlCss: { width: '160px'}, type: 'select', ctrlOptions: PR }, // { name: 'Activity', display: 'Activity', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Code', 2: 'Unit Test', 3: 'Architecture', 4: 'Internet Research', 5: 'Trial and Error', 6: 'Usability testing', 7:'Spec Creation', 8:'Supervison', 9: 'Documentation', 10: 'Tech Support', 11: 'Network Admin'}}, { name: 'Activity', display: 'Activity', type: 'select', ctrlOptions: AC}, { name: 'RecordId', type: 'hidden', value: 0 } ], customRowButtons: [ { uiButton: { icons: { primary: 'ui-icon-print' }, label: 'Duplicate Below' }, click: function (evtObj, uniqueIndex, rowData) {
                var rowIndex1 = $('#tblAppendGrid').appendGrid('getRowIndex',
uniqueIndex); var value1 = $('#tblAppendGrid').appendGrid('getCtrlValue', 'Business Component', rowIndex1); var value2 = $('#tblAppendGrid').appendGrid('getCtrlValue', 'Project', rowIndex1); var value3 = $('#tblAppendGrid').appendGrid('getCtrlValue', 'Activity', rowIndex1); / alert(rowIndex+1+"here"+value1); / $('#tblAppendGrid').appendGrid('setCtrlValue', 'Business Component',rowIndex1+1, value1); $('#tblAppendGrid').appendGrid('setCtrlValue', 'Project', rowIndex1+1, value2); $('#tblAppendGrid').appendGrid('setCtrlValue', 'Activity', rowIndex1+1, value3); }, btnClass: 'print' } ],
    hideRowNumColumn: true,
    rowButtonsInFront: false,
    hideButtons: {
        remove: true,
        removeLast: true,
        insert: true,
        append: true,
        moveUp: true,
        moveDown: true

                }
On Fri, Sep 22, 2017 at 3:09 AM, Albert L. notifications@github.com wrote:

I would like to confirm with you is that just the options in drop down list will be different?? If yes, my sample code posted on 20 Sep should work. The drop down options will be generated correctly if you set the _globalDropDownType before calling $('#tblAppendGrid').appendGrid('load', ).

If not and you really need dynamic columns based on different user/config, you may need to remove and re-create appendGrid in every server response. There is no destroy method but you may remove appendGrid by using following code:

// Remove appendGrid$('#tblAppendGrid').parent('.appendGrid').remove();// Re-create the table element$('
').attr('id', 'tblAppendGrid').appendTo('');$('#tblAppendGrid').appendGrid({ /New init options/ });

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/111#issuecomment-331368882, or mute the thread https://github.com/notifications/unsubscribe-auth/AGoTmVgJiVgQbCsnXF03YgfSNk8ZbWrpks5sk10WgaJpZM4PG-UY .

richb201 commented 7 years ago

Albert, never mind. I got it going!

thx

Rich

On Sun, Sep 24, 2017 at 2:21 AM, Richard Bernstein richb201@gmail.com wrote:

Albert, I am removing the grid, setting all the options (same code but new ctrlOptions) and then recreating the grid, but the grid doesn't display. The code seems to be failing in this line <<<<<
/// <summary>
/// Initialize append grid or calling its methods.
/// </summary>
$.fn.appendGrid = function (params) {
    if (_methods[params]) {
        return _methods[params].apply(this, Array.prototype.slice.call(arguments,
1)); } else if (typeof (params) === 'object' || !params) { return _methods.init.apply(this, arguments); <<<<<<< I am not sure how your code works } else { alert(_systemMessages.notSupportMethod + params); }

Is this the proper path?
};
On Sat, Sep 23, 2017 at 9:23 AM, Richard Bernstein richb201@gmail.com wrote:
Albert, I am getting close. I have three strings BC,PR, and AC and each has all the items for each one of the pull downs in my Append Grid. So when I first bring up the page the Immediately invoked expression runs:

$('#tblAppendGrid').appendGrid({ caption: 'My Activities', . . } It uses my ctrlOptions in BC, PR, and AC. Now the user wants to log in so I go to the server and get this user's personal BC, PR, and AC. I overwrite the string variables BC/PR/AC with this users own strings so I destroy the grid and then would like to run the immediately invoked expression. All the other options on the page (which consists of 14 lines (2 weeks worth of appendGrid) data displaying. The only difference is that I Used this users own BC,PR, and AC strings. Here is the code that gets the "personal"data (btnLogin) and the callback function from that $.post. I followed your direction and removed the default grid and now would like to call the Immedietly Invoked expression abover again (because I have updated the BC/PR/AC). Other than cutting and pasting my original call see above into the processResponse() callback, is there any other way to do this? By the way, I really appreciate your help. This whole project has been a huge learning curve for me.

Rich, NJ, USA
  $('#btnLogin').button().click(function () {

    //window.close();
    // chrome.identity.getProfileUserInfo(function(info){email=
info.email;}); //email=getEmail(); //userinfo Object {email: "hxxxxxxxxx@gmail.com", id: "1xxxxxxxxxxx49189xx"}; $.post("http://localhost/subit_backend/login_daemon.php","action=login", processResponse);
    });

});
function processResponse(data,status){ if (status="success"){ alert(data); // Remove appendGrid $('#tblAppendGrid').parent('.appendGrid').remove(); // Re-create the table element $('
').attr('id', 'tblAppendGrid').appendTo('tbl AppendGrid');
    }
}

On Fri, Sep 22, 2017 at 7:47 AM, Richard Bernstein richb201@gmail.com wrote:
Albert I actually modified my code considerably after you told me that what you sent was an example. My current plan is to use the three strings BC,PR and AC as the ctrlOptions. When the server occasionally responds with these three strings, I will assign them to these three same variables and then call initialize again. I am glad you told me that I need to remove the old one before I do that. I don't think that this updating of the grid will happen very often, so I don't expect a big user issue. Can I just use load like above instead of destroying and recreating the grid?

var BC='{choose};ApplePie;Cherry Pie'; var PR='{choose};Improve Crust;Reduce Costs;Better Boxes;Speed of Production;New Customers;Other'; var AC='{choose};Code;Unit Test;Architecture;Internet Research;Trial and Error;Usability testing;Spec Creation;Supervison;Documentation;Tech Support;Network Admin';

$(function () { // Initialize appendGrid $('#tblAppendGrid').appendGrid({ caption: 'My Activities', initRows: 14, columns: [ { name: 'Date', display: 'Date', type: 'ui-datepicker', ctrlAttr: { maxlength: 30 }, ctrlCss: { width: '160px'}, uiOption: { dateFormat: 'yy/mm/dd'}, onChange: function (evt, rowIndex) {
                var rowOrder = $('#tblAppendGrid').appendGrid
('getRowOrder'); var data = $('#tblAppendGrid').appendGrid('getRowValue', rowIndex); var today= new Date(data); var todaysday=today.getDate();
                for (i=0;i<14;i++)
                {
                $('#tblAppendGrid').appendGrid('setCtrlValue',
'Date', i, todaysday); };
            }
          },

  //      { name: 'Business Component', display: 'Business
Component', type: 'select', ctrlOptions: { '{Choose}','Apple Pie','Cherry Pie','Pecan Pie','Strawberry/Rhubarb Pie'}}, { name: 'Business Component', display: 'Business Component', ctrlAttr: { maxlength: 20 }, ctrlCss: { width: '160px'},type: 'select', ctrlOptions: BC }, // { name: 'Project', display: 'Project', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Improve Crust', 2: 'Reduce Costs', 3: 'Better Boxes', 4: 'Speed of Production', 5: 'New Customers', 6: 'Other'} }, { name: 'Project', display: 'Project', ctrlAttr: { maxlength: 20 }, ctrlCss: { width: '160px'}, type: 'select', ctrlOptions: PR }, // { name: 'Activity', display: 'Activity', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Code', 2: 'Unit Test', 3: 'Architecture', 4: 'Internet Research', 5: 'Trial and Error', 6: 'Usability testing', 7:'Spec Creation', 8:'Supervison', 9: 'Documentation', 10: 'Tech Support', 11: 'Network Admin'}}, { name: 'Activity', display: 'Activity', type: 'select', ctrlOptions: AC}, { name: 'RecordId', type: 'hidden', value: 0 } ], customRowButtons: [ { uiButton: { icons: { primary: 'ui-icon-print' }, label: 'Duplicate Below' }, click: function (evtObj, uniqueIndex, rowData) {
                var rowIndex1 = $('#tblAppendGrid').appendGrid('getRowIndex',
uniqueIndex); var value1 = $('#tblAppendGrid').appendGrid('getCtrlValue', 'Business Component', rowIndex1); var value2 = $('#tblAppendGrid').appendGrid('getCtrlValue', 'Project', rowIndex1); var value3 = $('#tblAppendGrid').appendGrid('getCtrlValue', 'Activity', rowIndex1); / alert(rowIndex+1+"here"+value1); / $('#tblAppendGrid').appendGrid('setCtrlValue', 'Business Component',rowIndex1+1, value1); $('#tblAppendGrid').appendGrid('setCtrlValue', 'Project', rowIndex1+1, value2); $('#tblAppendGrid').appendGrid('setCtrlValue', 'Activity', rowIndex1+1, value3); }, btnClass: 'print' } ],
    hideRowNumColumn: true,
    rowButtonsInFront: false,
    hideButtons: {
        remove: true,
        removeLast: true,
        insert: true,
        append: true,
        moveUp: true,
        moveDown: true

                }
On Fri, Sep 22, 2017 at 3:09 AM, Albert L. notifications@github.com wrote:

I would like to confirm with you is that just the options in drop down list will be different?? If yes, my sample code posted on 20 Sep should work. The drop down options will be generated correctly if you set the _globalDropDownType before calling $('#tblAppendGrid').appendGrid('load', ).

If not and you really need dynamic columns based on different user/config, you may need to remove and re-create appendGrid in every server response. There is no destroy method but you may remove appendGrid by using following code:

// Remove appendGrid$('#tblAppendGrid').parent('.appendGrid').remove();// Re-create the table element$('
').attr('id', 'tblAppendGrid').appendTo('');$('#tblAppendGrid').appendGrid({ /New init options/ });

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/111#issuecomment-331368882, or mute the thread https://github.com/notifications/unsubscribe-auth/AGoTmVgJiVgQbCsnXF03YgfSNk8ZbWrpks5sk10WgaJpZM4PG-UY .