AppGini Community Forums

Posted: **2020-02-22 23:00**

Just playing with Jan's Appgini Helper. I cant get the Inline Fields to work. I maybe just missing the point somewhere, but instead of seeing two fields in one line, they both just disappear completely from detail view. I've copied the code from documentation and created the two fields last_name & first_name as in there just for testing, but they both just goes after code applied on tablename-dv.js I did check the console for errors and got this:

Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent.
at HTMLDivElement.<anonymous> (http://localhost/portal/resources/jquer ... js:3:22901)
at Ha (http://localhost/portal/resources/jquer ... js:3:21075)
at n.fn.init.append (http://localhost/portal/resources/jquer ... js:3:22791)
at n.fn.init.n.fn.<computed> [as appendTo] (http://localhost/portal/resources/jquer ... js:3:24510)
at _0x87fa77._0x5a4d82.inline (http://localhost/portal/hooks/AppGiniHe ... s:6:157421)
at http://localhost/portal/hooks/vehicle_check-dv.js:11:48

Any help?

Posted: **2020-02-23 04:45**

Can you please post the code of vehicle_check-dv.js and give more information on the field names you are trying to put inline. A screenshot would also be helpful.

Posted: **2020-02-23 09:59**

Hi Jan, the code is pretty much copy and paste of yours in documentation. All I have done I replaced your field names with mine. It is definitely hits the page some how, as both of the fields that are in the code just disappear from detail view.

// syntax:
// new AppGiniFields( fieldname[] ).inline( label, width[] );

// simple example
// automatic sizing
new AppGiniFields(["Interior_Trim", "Seat_Belts"]).inline("Name");

// example with explicit sizing
new AppGiniFields(["Interior_Trim", "Seat_Belts"]).inline("Name", [6, 6]);

// long example
var fieldnames = ["Interior_Trim", "Seat_Belts"];
var widths = [6, 6];
var label = "Name";
new AppGiniFields(fieldnames).inline(label, widths);

That's all I have in vehicle_check-dv.js file. Both fields are set as VerChar in Appginni.

Posted: **2020-02-23 10:16**

// syntax:
// new AppGiniFields( fieldname[] ).inline( label, width[] );

// simple example
// automatic sizing
new AppGiniFields(["Interior_Trim", "Seat_Belts"]).inline("Name");

// example with explicit sizing
new AppGiniFields(["Interior_Trim", "Seat_Belts"]).inline("Name", [6, 6]);

// long example
var fieldnames = ["Interior_Trim", "Seat_Belts"];
var widths = [6, 6];
var label = "Name";
new AppGiniFields(fieldnames).inline(label, widths);

If this is your code, if will fail, because you inline your fields (line 6) and then try it again two more times (in lines 9 and 15). This will not work because after the first inline-call, the fields have already been moved to their new location. They are NOT at their original place any more afterwards, so your second and third call will fail.

Please use this...

Code: Select all

new AppGiniFields(["Interior_Trim", "Seat_Belts"]).inline("Name");

...and remove the second and third .inline() function calls.

You only need to call the inline()-function once. There are three examples in the code which you have copied and pasted. Please use only one of them, not all. It is up to you, which variant you like the most. Personally I love efficient short code. Others like more variables for better readability.

Hope this was the only bug!
Best,
Jan

Posted: **2020-02-23 10:27**

Oh Dear

Thanks Jan.. The documentations isn't very 'Begginer Friendly' , but glad you are always around to help

Posted: **2020-02-23 10:38**

I mean 'Beginner'..

Posted: **2020-02-23 10:44**

aarlauskas wrote: ↑
2020-02-23 10:27
Oh Dear Thanks Jan.. The documentations isn't very 'Begginer Friendly'

Thanks for pointing that out!!!

Actually I did not expect anyone using those three examples in one file all at the same time without commenting out parts of it

I'm still learning something new every day!

Anyway: I am going to update the sample code immediately.

Best,
Jan

Posted: **2020-02-23 10:54**

Done:
https://appgini.bizzworxx.de/products/j ... ne-fields/

: chrome_7DhiAYwcbq.png (39.13 KiB) Viewed 15042 times

I hope this is better now! If there is anything which I can improve, feel free to contact me.

Best,
Jan

Posted: **2020-02-23 11:24**

Nice one Buddy. Thank You!

Posted: **2020-03-18 20:48**

Jan,

Inline fields working great for me. Thanks

Anyway to add a label to the other fields?

Original
Last Name: _______________________________________________________
First Name:_______________________________________________________

With Inline Fields

Name: ___________________________________________________________ __________________________________________________

My Hope
Last Name:_______________________________________________________ First Name:_________________________________________

Thanks

Posted: **2020-03-18 21:28**

Hi,

have a look, please. I guess this is what you are looking for:

: chrome_ShWOpg1qOd.png (7.95 KiB) Viewed 13409 times

The columns Street, c/o, Floor, Postcode, City and Country are all inline [12, 12, 12, 3, 9, 12] and the labels are right before the fields.

I have been working on this recently. It's not easy to implement but I'm getting closer. Stay tuned, this may be BETA-function in upcoming April 2020 version of AppGini Helper Javascript Library.

Do you like it?
Take care,
Jan

Posted: **2020-03-18 21:34**

Yes, thanks....

That is what I would like to do....

I'll wait until April, in the meantime can the field name be displayed in the field (greyed out)

Thanks for your response.

Jim

Posted: **2020-03-18 21:43**

You may have a look at the .placeholder()-function:

https://appgini.bizzworxx.de/products/j ... ceholders/

: chrome_XOLTXUedhx.png (14.79 KiB) Viewed 13408 times

Best,
Jan

Posted: **2020-03-18 21:49**

That sir, Solves my problem!!!

Thanks once again!!

Posted: **2020-03-19 18:03**

Anyone see what my placeholder will not work?

Everything else works

new AppGiniField("Contract_Date") .placeholder("Contract Date");
var dv = new AppGiniDetailView();
dv.addGroup("grp_Basic_Information", "Basic Information", ["Name", "Offical_Project_Title", "Contact_Name", "Phone_Office", "Contact_Phone_Cell", "Client_Website", "Email", "Address", "City", "State", "Zip","Location"]);
dv.addGroup("grp_staffing", "Project Information", ["PM", "Project_Type","Status"]);
dv.addGroup("grp_calendar", "Calendar", ["Contract_Date", "StartDate","Date_of_Data_Request","Date_All_Data_Received","EndDate", "Actual_end_date", "Time_Left"]);
dv.addGroup("grp_Project_Documents", "Project Documents", ["Client_Folder", "ESCI_Folder","Contract","Final_SOW","Original_RFP"]);
new AppGiniField("Contract_Date") .placeholder("Contract Date");
new AppGiniField( "Contract_Date" ).toDatepicker();
new AppGiniField( "StartDate" ).toDatepicker();
new AppGiniField( "Date_of_Data_Request" ).toDatepicker();
new AppGiniField( "Date_All_Data_Received" ).toDatepicker();
new AppGiniField( "EndDate" ).toDatepicker();
new AppGiniField( "Actual_end_date" ).toDatepicker();
new AppGiniFields(["Contract_Date", "StartDate"]).inline("Project Begin Dates")
new AppGiniFields(["Date_of_Data_Request", "Date_All_Data_Received"]).inline("Dates for Data")
new AppGiniFields(["EndDate", "Actual_end_date"]).inline("Project End Dates")

Thanks

Jim

Posted: **2020-03-19 18:10**

Are there any error messages in the console tab of your browser's dev-tools?
Can you please remove the .toDatepicker call on that field for testing purposes.
You are executing the .toPlaceholder function twice
Well this will not be the reason, but I've noticed blanks which should be removed
I'd like to recommend chaining technique instead of initializing the same field a couple of times.

Your code

Code: Select all

// ...
new AppGiniField("Contract_Date") .placeholder("Contract Date");
var dv = new AppGiniDetailView();
new AppGiniField("Contract_Date") .placeholder("Contract Date");
new AppGiniField( "Contract_Date" ).toDatepicker();
new AppGiniFields(["Contract_Date", "StartDate"]).inline("Project Begin Dates")
// ...

Chaining

Code: Select all

// ...
var dv = new AppGiniDetailView();

new AppGiniField("Contract_Date")
   .placeholder("Contract Date")
   .toDatepicker();
   
new AppGiniFields(["Contract_Date", "StartDate"]).inline("Project Begin Dates")
// ...

Posted: **2020-03-19 19:21**

I'll try that

Thanks

Posted: **2020-03-19 20:26**

Still no error, but no place holder either??????

new AppGiniField( "StartDate" )
.placeholder("Start Date")
.toDatepicker();
new AppGiniField( "EndDate" )
. placeholder("End Date")
.toDatepicker();
new AppGiniFields(["StartDate", "EndDate"]).inline("Start Date - Due Date")

Posted: **2020-03-19 21:50**

Sir, you have changed your settings and you are posting a different scenario than before. That makes it hard to help you on a specific problem.

Your first post was about "Contract_Date" field and now you have posted completely different code with fields "Start Date" and "EndDate". Also still (or again) you are calling .toDatepicker(). I have asked NOT to call this for testing purposes.

We have to narrow down and eliminate possible errors.

Are you able to just test...

Code: Select all

new AppGiniField("Contract_Date").placeholder("Start Date");

... and post your code and the result. Nothing else, just that line of code in hooks/YOURTABLENAME-dv.js. No other code. And please ensure spelling of Contract_Date and that Contract_Date is a varchar or datetime field. If this is for example a date-field, there is no placeholder functionality.

Sorry, I really want to help you but I need exact information.
Best,
Jan

Posted: **2020-03-19 22:21**

Sorry,....

I do appreciate your help.

This from my project.dv.js file

new AppGiniField("Contract_Date").placeholder("Start Date");

No place holder on the page.

Just FYI
Yesterday I inserted the .placeholder function on another page and it worked fine, in fact, when I deleted the code it kept working!

Thanks for all your help....

Jim

Posted: **2020-03-20 07:01**

jangle wrote: ↑
2020-03-19 22:21
This from my project.dv.js file

Please name the file

Code: Select all

project-dv.js

not

Code: Select all

project.dv.js

Posted: **2020-03-20 13:58**

Sorry,

The name was correct, (project-dv.js)

I typed it wrong in the message.

Contents:

new AppGiniField("Contract_Date").placeholder("Start Date");

No placeholder shown.

Thanks!!

Posted: **2020-03-20 15:33**

Silly question, I'm sorry, just to be 100% sure:
Are you reloading the browser page without caching? I had to learn that some developers are just hitting F5 or just clicking the refresh button of their browser and don't see the expected results. Please always clear cache after you have modified CSS of Javascript files to avoid old and outdated code in your broser. There are keyboard shortcuts for all browsers. I recommend getting used to this. See also: https://appgini.bizzworxx.de/support/troubleshooting/

Please note

There is the .placeholder() function
This will work for "normal" input fields and for datetime fields (which actually ARE inputs).
It will not work for other datatypes like radio buttons or checkboxes or embedded YouTube Videos, obviously, or many other controls which do not support placeholder functionality.

Apart from this
There is the .inline() function which moves various controls into a block of single or multiple lines. During this, the labels of each individual control will be removed. And if this control supports placeholders, the label's text will be taken as placeholder automatically. This also applies to text/number inputs and datetime, perhaps a few more.

This means, when you are calling the inline()-function on a field, the placeholder will be automatically set IF POSSIBLE.

If this does not help, can you please tell us which datatype Contract_Date is. It should be one of the following datatypes which support placeholders:

varchar
numeric types
datetime
all text types, I'm not 100% sure about text datatype with Richtext option

Posted: **2020-03-20 16:17**

As always Thanks

I will try these things....

Jim

AppGini Community Forums

Appgini Helper - Inline Fields

Appgini Helper - Inline Fields

Re: Appgini Helper - Inline Fields

Re: Appgini Helper - Inline Fields

Re: Appgini Helper - Inline Fields

Re: Appgini Helper - Inline Fields

Re: Appgini Helper - Inline Fields

Re: Appgini Helper - Inline Fields

Re: Appgini Helper - Inline Fields

Re: Appgini Helper - Inline Fields

Re: Appgini Helper - Inline Fields

Re: Appgini Helper - Inline Fields

Re: Appgini Helper - Inline Fields

Re: Appgini Helper - Inline Fields

Re: Appgini Helper - Inline Fields

Re: Appgini Helper - Inline Fields

Re: Appgini Helper - Inline Fields

Re: Appgini Helper - Inline Fields

Re: Appgini Helper - Inline Fields

Re: Appgini Helper - Inline Fields

Re: Appgini Helper - Inline Fields

Re: Appgini Helper - Inline Fields

Re: Appgini Helper - Inline Fields

Re: Appgini Helper - Inline Fields

Re: Appgini Helper - Inline Fields