Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Drag & Drop Bootstrap Grid Support #1237

Closed
calmond01 opened this issue Dec 6, 2021 · 87 comments
Closed

Drag & Drop Bootstrap Grid Support #1237

calmond01 opened this issue Dec 6, 2021 · 87 comments
Labels
enhancement Feature

Comments

@calmond01
Copy link

Description:

I know this has been asked for so many times, but I think we are almost there with @oneplugin’s contribution and others, so I’m willing to put up a bounty to get us across the finish line.

So here’s the pitch: The formBuilder already supports rendering fields using BootStrap grid system. Let’s make the designer place the appropriate bootstrap classes into each field class property upon drag and drop.

The end goal here is to support multiple fields in one column. By updating the designer to automatically insert the appropriate bootsrap class and then display this in the designer, we would be good to go.

@oneplugin has done a beautiful job in the designer with the ability to drag and drop multiple items in one row. However, It appears he is using div’s to accomplish this rather than bootstrap grid. Such implementation requires a custom renderer.

Here’s a video of oneplugin’s implementation which is effectively what I’m looking for:
https://user-images.githubusercontent.com/92248128/140612092-07d2baa2-c861-4106-9855-67486af15a73.mov

Perhaps we can re-work his front end to implement this via BootStrap grid rather than the divs. Then we can use the existing formBuilder renderer.

(Just to put the formeo suggestion to rest…I have looked at formeo. It is nice but a bit more complex than I’m looking for and no BootStrap support. So that brings me back to formBuilder.)

Please, if anyone has a better approach, suggestions, etc, please share.

Environment Details:

  • formBuilder Version: v3.7.3
  • Browser: All
  • OS: All

Expected Behavior

Actual Behavior

Steps to Reproduce

Screenshot - (optional)

fb-demo.mov
@oneplugin
Copy link

oneplugin commented Dec 6, 2021 via email

@gitcoinbot
Copy link

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

This issue now has a funding of 2500.0 USD (2496.25 USD @ $1.0/USD) attached to it.

@calmond01
Copy link
Author

Hey Oneplugin.
thanks for posting a response so quickly.

Sure thing...if we need to wait 3 weeks, it won't be to terribly bad.

Let's see if anyone else expresses interest.

@oneplugin
Copy link

oneplugin commented Dec 6, 2021 via email

@calmond01
Copy link
Author

Sure, so this posts shows how the out of the box renderer can display the fields in the default grid.

3e4332c

So we can add the following text to the class property in the designer: form-control row-1 col-md-6
to two of the fields. Then when it renders they will be in the same column as two rows.

@oneplugin
Copy link

oneplugin commented Dec 6, 2021 via email

@calmond01
Copy link
Author

Ok, let me parse your question here...

"the generated json has to have the corresponding
bootstrap classes and the renderer will take care of the rest" <-- Yes, correct.

"as long as I don’t have to remove the classes I used in the designer to
make the multi-column work" <-- Sorry, I don't know how the added classes affect the designer/renderer...I guess we would have to try it.

thx,
-Chris.

@oneplugin
Copy link

oneplugin commented Dec 6, 2021 via email

@calmond01
Copy link
Author

Ok, sounds good.

Re: options...
Not clear on #1 but if its just more info about the boot strap classes, should be good.
On #2, I think BS limits to 12 anyway but I dont see how it could hurt anything.

@naseemshah
Copy link

Happy to see you guys already started discussion. I am also interested to contribute.

@calmond01
Copy link
Author

Hi Naseem.
Thanks much for offering to pitch in.

Sounds like oneplugin is moving forward while leveraging the code he had previously written. With that, I'll defer to him to see if he could use some assistance.

Thanks again!!
-Chris.

@oneplugin
Copy link

oneplugin commented Dec 6, 2021 via email

@oneplugin
Copy link

I realise that you arent able to see the images. So attaching them again.

EA9E757B-7AAE-48DB-92E3-4C854E026C75

DF1B078A-E52B-4872-9D6D-7E1CAE4A45F3

@calmond01
Copy link
Author

Re#1:
Ah yes, understood, I see how the display can get crowded. Yes, when too crowded, displaying the properties in a bootstrap popup is nice.

Re#2:
Yes, 4/5 fields would likely be the max that could fit in a row. This is a great option to have as well.

Looking forward to seeing the updates!!!

Thank you,.
-Chris.

@gitcoinbot
Copy link

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Workers have applied to start work.

These users each claimed they can complete the work by 264 years, 11 months from now.
Please review their action plans below:

1) ahmadny has applied to start work (Funders only: approve worker | reject worker).

hopefully in the future this will be better

Learn more on the Gitcoin Issue Details page.

@oneplugin
Copy link

oneplugin commented Dec 7, 2021 •
edited
Loading

@calmond01 As discussed and agreed, I've made the changes and you can find the updated source code in the attached zip archive.

formBuilder-3.7.3.zip

Just letting you know what to expect in this build.

  1. Bootstrap classnames are now added to the output json. I've done it such that the bootstrap classnames will not be displayed under classnames in the properties dialog. But it will get appended automatically when the output json is requested.

  2. @billystalnaker pointed out an issue where the form builder was not accepting drop events when the form was empty to begin with. That's fixed.

  3. As mentioned I've added the option for displaying properties in-line with the control or in a bootstrap dialog. Property name is propertiesInModal which if set to true will show the properties of the fields in a bootstrap dialog otherwise it will be shown in-line as it used to be. Default value is true.

  4. Added another property maxFieldsInRow which controls the maximum number of fields in a row. Once the limit is reached, dropzones will disappear making it impossible to drop in that row. Default value is 4.

Known Issues

  1. Saving and loading from XML is not done.
  2. Form Rendering is not done but it will not be a problem anymore as the bootstrap classnames are in place.

For those who would like to run this build using the source file, I suggest using NPM v12.22.1 as saas-loader is not yet compatible with the latest npm. You can manage NPM versions using NVM.

For bootstrap dialog I've added bootstrap and since jquery-ui doesn't play nicely with webpack, I have added jquery-ui-bundle as well.

You can find a working codepen for the same below.

Codepen

If you run into any issues, please free to let me know and I will be happy to fix it.

That's it I guess.

@oneplugin
Copy link

@calmond01 The codepen link I sent earlier was wrong. You can find the updated one below.

codepen

@calmond01
Copy link
Author

@oneplugin ,
Absolutely amazing and thank you.

You delivered exactly when you said you would. I'm guessing you were up all night doing this. Fantastic.

I'm going to get on this today, testing etc as soon as I figure out how to get it compiled to a min file...lol.

Thanks again and I'll be back in touch shortly.

-Chris.

@oneplugin
Copy link

oneplugin commented Dec 7, 2021 via email

@calmond01
Copy link
Author

Ok, that's impressive.

On this now.

@calmond01
Copy link
Author

@oneplugin
Wow, the drag and drop formBuilder is super nice!

I think with a few more tweaks this update will be ready for prime time.

Here's what I have so far:
(hopefully all this makes sense)

-B1.1----------------------------------
Dragging form elements over and into the blue landing zones is quirky.
Maybe use mouse pointer coordiantes to trigger drop zone active.

-B1.1.1----------------------------------
[x] at top right of properties dialog does not close. No close button at bottom (not that we really need it)

-B1.2----------------------------------
options.notify.error not triggering (sometimes).
Get this error: Uncaught TypeError: Cannot read properties of undefined (reading 'match')
at Helpers.updatePreview (helpers.js?7813:371)
This occured when trying to remove the second to last option in a radio group.
The error message should be "Must have at leas two options.." or something to that sort.
Here is my notify code:

var fbOptions = {
            controlPosition: 'left',
            disabledActionButtons: ['clear', 'data', 'save'],
            formData: strContent,
            notify: {
                error: function (message) {
                    toastr.error(message);
                }
            }
        };

-B1.3----------------------------------
form-builder in desgin mode won't render forms JSON built with original 3.7.3.
Get error: Uncaught TypeError: e.values.map is not a function
at f.santizeField (form-render.min.js:19)

-B1.4----------------------------------
FormRender won't render JSON created by multicolumn formbuilder.
throws error: Uncaught TypeError: e.values.map is not a function
at f.santizeField (form-render.min.js:19)
Looks like the updated forbuilder library is adding an extra set of
brackets to the json. IF we remove extra brakets,
form render works but multicolumn formbuilder throws error as in B1.3

Here is Json produced by origintal formbuilder:
[ { "type": "text",
"required": false,
"label": "First Name",
"className": "form-control",
"name": "text-1638893552009-0",
"access": false,
"subtype": "text" },
{ "type": "text",
"required": false,
"label": "Text Field",
"className": "form-control",
"name": "text-1638893557345-0",
"access": false,
"subtype": "text" } ]

Here is Json produced by multicolum formbuilder:
[
[
{
"type": "text",
"required": false,
"label": "First Name",
"className": "form-control row-1 col-md-6",
"name": "text-1638893994790-0",
"access": false,
"subtype": "text"
},
{
"type": "text",
"required": false,
"label": "Last Name",
"className": "form-control row-1 col-md-6",
"name": "text-1638893998467-0",
"access": false,
"subtype": "text"
}
]
]

-B1.5----------------------------------
Mutiple errors in console relating to sockjs-node:
Access to XMLHttpRequest at 'http://localhost:8081/sockjs-node/info?t=1638896330371'
from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

-B1.6----------------------------------
Form elements loose their original formatting when
JSON loaded into the formbuilder designer for the purposes of editing an existing form...

Here is scrn shot of the form built from scratch in the new designer:
https://photos.app.goo.gl/952c3zFfhdh87jdX9

Here is scrn shot of form loaded from JSON which the new builder produced:
https://photos.app.goo.gl/wamj6WWpU7VrrZxc7

If we remove the bootstrap classes inserted by the new builder, the form renders correctly in the new builder.
I see now the purpose of the extra [] brackets, which are defining rows in the designer. Very clever.
I suppose we could strip the bootstrap classes from the class property before the builder renders but
if the user had inserted a class, that might get wiped away during this process. Hmmm.

-B1.7---------------------------------
Sub controls like Radio Groups are having issues rednering propertly in formRender.

Scrn shot:
https://photos.app.goo.gl/fmsRvFuB3c5wp6EJA

Looks like the bootstrap classes may be getting applied also to the child elements
like an input of type radio rather than just to the parent formbuilder-radio-group div element.

Example:

@calmond01
Copy link
Author

Sorry, B1.7 got truncated...

-B1.7---------------------------------
Sub controls like Radio Groups are having issues rednering propertly in formRender.

Scrn shot:
https://photos.app.goo.gl/fmsRvFuB3c5wp6EJA

Looks like the bootstrap classes may be getting applied also to the child elements
like an input of type radio rather than just to the parent formbuilder-radio-group div element.

Example:

@calmond01
Copy link
Author

One more try...

Example:
input class="form-group row-2 col-md-12 row-2 col-md-12" name="radio-group-1638896425841-0" access="false" id="radio-group-1638896425841-0-0" value="option-1" type="radio"

@oneplugin
Copy link

@calmond01

I can fix all of these issues but I’m afraid it will take a bit of time. Your initial requirements were easy to fix but these ones demand more time. If you’re ok I will take up the bounty and will fix these for you.

An estimated two hour fix was fine but making this perfect and ready-to-go will need more time investment considering the issues you guys might raise in the future.

so if you are fine with absorbing the cost, I will be more than happy to fix all of these for you.

Over to you!

@calmond01
Copy link
Author

@oneplugin,
Yes, absolutely.
Take up the bounty and let's invest the time needed.

Thank you!
-Chris.

@oneplugin
Copy link

oneplugin commented Dec 7, 2021 via email

@calmond01
Copy link
Author

That works.
Thank you.

@oneplugin
Copy link

@calmond01 I have a few questions regarding the issues you reported. Are you available now to clarify them?

@oneplugin
Copy link

@calmond01 you can view my comments below

B1.1----------------------------------
Dragging form elements over and into the blue landing zones is quirky.

I agree sometimes it acts a bit weird and is impossible to drop in the small vertical drop targets. Is this what you are also referring to?

-B1.1.1----------------------------------
[x] at top right of properties dialog does not close.

Ok. Will fix

B1.2----------------------------------
options.notify.error not triggering (sometimes).

Will fix

B1.3----------------------------------
form-builder in desgin mode won't render forms JSON built with original 3.7.3.

I’m afraid this cannot be fixed as the output json like you have mentioned later has an extra array or [] for managing rows. So the new form builder will have to be loaded with the forms created in the new builder or if you have many forms that are already designed in the old one, then you will have to tweak the json a bit by adding [] before every element in the json. I can send you two sample jsons, one created using the old builder and the other will show you how to convert it to make it work in the new one. Let me know if you need this.

B1.4----------------------------------
FormRender won't render JSON created by

Same as above. I will update the form renderer library to make it work with the new json

B1.5----------------------------------
Mutiple errors in console relating to sockjs-node:
Access to XMLHttpRequest at

Will fix

B1.6----------------------------------
Form elements loose their original formatting when JSON loaded into the formbuilder designer for the purposes of editing an existing form...

Can you explain this a bit more? I didn’t quite understand what you mean. Is this related to B1.3?

B1.7---------------------------------
Sub controls like Radio Groups are having issues rednering propertly in formRender.

Will fix

One more try...

Example:
input class="form-group row-2 col-md-12 row-2 col-md-12" name="radio-group-1638896425841-0" access="false" id="radio-group-1638896425841-0-0" value="option-1" type="radio"

Was this a continuation of B1.7?

Are there any other issues worth fixing for?

I’m going to start working on these today and hopefully will send you the updated code tomorrow first thing. I couldn’t start in the am because there was a bit of work pending from last day.

@calmond01
Copy link
Author

Good morning @oneplugin.
Sorry, it's a bit early here on the US East coast.

Here are my comments on your questions below:

B1.1----------------------------------
Dragging form elements over and into the blue landing zones is quirky.

I agree sometimes it acts a bit weird and is impossible to drop in the small vertical drop targets. Is this what you are also referring to?

CA-Yes, exactly. It's the little vertical blue bar drop zones that seem to be challenging to drop into. Sometimes they light up on hover, other times the don't.

B1.3----------------------------------
form-builder in desgin mode won't render forms JSON built with original 3.7.3.

I’m afraid this cannot be fixed as the output json like you have mentioned later has an extra array or [] for managing rows. So the new form builder will have to be loaded with the forms created in the new builder or if you have many forms that are already designed in the old one, then you will have to tweak the json a bit by adding [] before every element in the json. I can send you two sample jsons, one created using the old builder and the other will show you how to convert it to make it work in the new one. Let me know if you need this.

CA-Ok, I understand now. I don't personally have any old forms but I'm sure there are lots of folks out there that do have legacy forms built with the old builder that would to be able to use this new one you are working on. So for that purpose, if you could share the conversion sample code that would be great!!

B1.4----------------------------------
FormRender won't render JSON created by

Same as above. I will update the form renderer library to make it work with the new json

CA-Perfect. A new renderer will have to be the route we take given your extra "[" arrays in the JSON. Thx.

B1.6----------------------------------
Form elements loose their original formatting when JSON loaded into the formbuilder designer for the purposes of editing an existing form...

Can you explain this a bit more? I didn’t quite understand what you mean. Is this related to B1.3?

CA-Sure...Not related to B1.3. Create a form using a control that has sub elements like a Radio Group, Checkbox Group, or Select.

Here is a screen shot of the Radio Group after dragging it into the builder for the first time. Note the formatting is correct:
https://photos.app.goo.gl/RuTZSXZkPTaeRRv66

Save the JSON, then re-load the designer with the JSON you just created. You will see that the form elements with sub controls don't line up properly in the builder.
https://photos.app.goo.gl/3Rthx4N8xHDfPkEY7

This may be due to the injection of bootstrap classes into the sub form elements. Not sure.

B1.7-----------------------------------
Yes, "One more try..." was a continuation of B1.7

B1.8-----------------------------------
I think the bootstrap form classes are being applied multiple times to JSON that gets re-loaded into the builder.
"row-2 col-md-12 row-2 col-md-12"

Example JSON:
input class="form-group row-2 col-md-12 row-2 col-md-12" name="radio-group-1638896425841-0" access="false" id="radio-group-1638896425841-0-0" value="option-1" type="radio"

To reproduce, create a form using the new builder. Save it, then reload that same JSON back into the new builder. Then save again.

OK, that's all I have for now.

I think this is going incredibly well.

Thank you for your time and effort on this.

I look forward to seeing the next iteration!!

Thank you
-Chris.

jugsvn added a commit to oneplugin/formBuilder that referenced this issue Dec 16, 2021
@jugsvn
Fix for kevinchappell#1237
db25409 
Fix for kevinchappell#1237
@oneplugin oneplugin mentioned this issue Dec 16, 2021
Closed
@gitcoinbot
Copy link

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work for 2500.0 USD (2496.25 USD @ $1.0/USD) has been submitted by:

@oneplugin oneplugin mentioned this issue Dec 22, 2021
Closed
@Jojoshua
Copy link
Collaborator

The formBuilder already supports rendering fields using BootStrap grid system. Let’s make the designer place the appropriate bootstrap classes into each field class property upon drag and drop.

The end goal here is to support multiple fields in one column. By updating the designer to automatically insert the appropriate bootsrap class and then display this in the designer, we would be good to go.

@calmond01, as the designer of the existing bootstrap integration, I wanted to thank you for helping push this to the next level.

@jayden626
Copy link

Yes a big thanks to you both. This is some great work.

@calmond01
Copy link
Author

Hey guys. My pleasure.
The real hero here is @oneplugin .
He did all the heavy lifting!

I wonder if the formBuilder owners/moderators will push @onepugin 's code onto the main build as a new version?
-Chris.

@jayden626
Copy link

I'd argue that I enjoy developing more than testing. You definitely contributed quite a bit.

I doubt that this will get merged any time soon due to the creator rebuilding it as Formeo. Big thanks goes to him as well and other contributors (LucasAu). I believe this should be turned into and maintained as a fork if anyone is willing to do so.

@billystalnaker
Copy link

formBuilder-3.7.3.zip

JSFiddle

You're a beast @oneplugin! Thanks for all this work!

@ajhalls
Copy link

ajhalls commented Jan 12, 2022 •
edited
Loading

formBuilder-3.7.3.zip

JSFiddle
I am a new user and REALLY appreciate what you have done here. I am having an issue though with your branch when I go to load data using the examples here: https://formbuilder.online/docs/formBuilder/actions/setData/

It also isn't working with the multi page layout: https://formbuilder.online/docs/formBuilder/demos/tabs/

The error I am getting is:

Uncaught TypeError: e.forEach is not a function
    H form-builder.js:277
    H form-builder.js:275
    setData form-builder.js:1774
    beforeActivate create:1417
    jQuery 13
    <anonymous> create:1441
    EventListener.handleEvent* create:1422
    jQuery 13
form-builder.js:277:12

The error referrs to this section:

// Parse saved XML template data
  const loadFields = function (formData) {
    formData = h.getData(formData)
    if (formData && formData.length) {
      formData.forEach((row, index) => {
        let newRow = true
        row.forEach((fieldData, i) => {                                  <<==== This line
          fieldData = trimObj(fieldData)
          let className = fieldData.className
          className = className.replace(/(^|\s)row-\S+/g, '')
          className = className.replace(/(^|\s)col-md-\S+/g, '')
          fieldData.className = className
          prepFieldVars(fieldData, true,newRow)
          newRow = false
        })
      })
      d.stage.classList.remove('empty')
    } else if (opts.defaultFields && opts.defaultFields.length) {
      h.addDefaultFields()
    } else if (!opts.prepend && !opts.append) {
      d.stage.dataset.content = mi18n.get('getStarted')
    }

    if (nonEditableFields()) {
      d.stage.classList.remove('empty')
    }
    resetDropAreas() //don't change the order
    updateColumns()
    h.save()
  }

@Jojoshua Jojoshua mentioned this issue Jan 13, 2022
Merged
@ajhalls ajhalls mentioned this issue Jan 19, 2022
Closed
@oneplugin
Copy link

@ajhalls I didn’t see this message until now, maybe because I wasn’t subscribed to this thread. Are you still experiencing this issue? Did you try the latest version I uploaded?

@Obaidraj
Copy link

Obaidraj commented Feb 1, 2022

How to resolve this issue of form builder in react js
issue1234

@sohaibnasser
Copy link

sohaibnasser commented Feb 1, 2022 •
edited
Loading

formBuilder-3.7.3.zip
JSFiddle

You're a beast @oneplugin! Thanks for all this work!

@oneplugin, @ajhalls

Having following issue in building this with node 12.22.1

image

@Obaidraj
Copy link

Obaidraj commented Feb 5, 2022

I am not able to edit the label of fields in form builder
.

@Jojoshua
Copy link
Collaborator

Enhanced grid support is now available

@GiorgioRindonone
Copy link

@ajhalls I didn’t see this message until now, maybe because I wasn’t subscribed to this thread. Are you still experiencing this issue? Did you try the latest version I uploaded?

Hey bro, are you still avaiable for some work on the formBuilder?

@GiorgioRindonone
Copy link

Enhanced grid support is now available

Hi Jojoshua are you avaiable for a little work on formbuilder?

@Jojoshua
Copy link
Collaborator

Jojoshua commented Apr 21, 2022 •
edited
Loading

Enhanced grid support is now available

Hi Jojoshua are you avaiable for a little work on formbuilder?

...how "little" are you talking? @GiorgioRindonone

@GiorgioRindonone
Copy link

Enhanced grid support is now available

Hi Jojoshua are you avaiable for a little work on formbuilder?

...how "little" are you talking? @GiorgioRindonone

Can we talk by mail pls, here it's little bit diffucult, write me here g.rindonone@contech.xyz

@calmond01
Copy link
Author

@oneplugin
Jugs, you still around? Your email is not working.

@ShijinUIS
Copy link

@oneplugin
Hi, do you have formbuilder 3.8.2 with dropzone property ? It will be a great support if you can....

@samparkjaiswal
Copy link

Could you just be a little more specific as to what needs to be done? As far as I know Bootstrip grid also uses div’s and if i just need to use the respective bootstrap classes, it’s a simple fix and for that a bounty is not required and I can do it in a day or two. I’m asking these questions because I haven’t used your renderer as I’m using a custom one using the json.
…
On Tue, 7 Dec 2021 at 12:17 AM, calmond01 @.***> wrote: Hey Oneplugin. thanks for posting a response so quickly. Sure thing...if we need to wait 3 weeks, it won't be to terribly bad. Let's see if anyone else expresses interest. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1237 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AV7ZQQE254VWMS2OSYHY4ILUPUAN3ANCNFSM5JPJ5ZKA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

can u please provide the video how we implement this in our code ?

@samparkjaiswal
Copy link

@oneplugin TypeError: e.forEach is not a function throw error when i use library form-builder.3.7.3 OR 3.7.3_01

If i use 3.7.3_01 then field edit popup not work

form-builder.3.7.3_01.min.js:228 Uncaught TypeError: E.modal is not a function
at de (form-builder.3.7.3_01.min.js:228:64002)
at HTMLAnchorElement. (form-builder.3.7.3_01.min.js:228:65981)
at HTMLDivElement.dispatch (jquery.js:4435:9)
at r.handle (jquery.js:4121:28)

If i use 3.7.3 then field edit popup not work

sockjs.js:1609     GET http://localhost:8081/sockjs-node/info?t=1691576645250 net::ERR_CONNECTION_REFUSED

AbstractXHRObject._start @ sockjs.js:1609
eval @ sockjs.js:1498
setTimeout (async)
AbstractXHRObject @ sockjs.js:1497
XHRCorsObject @ sockjs.js:2875
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
eval @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:734
SockJSClient @ SockJSClient.js:43
initSocket @ socket.js:20
eval @ socket.js:39
setTimeout (async)
eval @ socket.js:38
EventTarget.dispatchEvent @ sockjs.js:170
eval @ sockjs.js:973
setTimeout (async)
SockJS._close @ sockjs.js:961
SockJS._receiveInfo @ sockjs.js:790
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
eval @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
eval @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1601
XMLHttpRequest.send (async)
AbstractXHRObject._start @ sockjs.js:1609
eval @ sockjs.js:1498
setTimeout (async)
AbstractXHRObject @ sockjs.js:1497
XHRCorsObject @ sockjs.js:2875
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
eval @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:734
SockJSClient @ SockJSClient.js:43
initSocket @ socket.js:20
eval @ socket.js:39
setTimeout (async)
eval @ socket.js:38
EventTarget.dispatchEvent @ sockjs.js:170
eval @ sockjs.js:973
setTimeout (async)
SockJS._close @ sockjs.js:961
SockJS._receiveInfo @ sockjs.js:790
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
eval @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
eval @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1601
XMLHttpRequest.send (async)
AbstractXHRObject._start @ sockjs.js:1609
eval @ sockjs.js:1498
setTimeout (async)
AbstractXHRObject @ sockjs.js:1497
XHRCorsObject @ sockjs.js:2875
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
eval @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:734
SockJSClient @ SockJSClient.js:43
initSocket @ socket.js:20
eval @ socket.js:39
setTimeout (async)
eval @ socket.js:38
EventTarget.dispatchEvent @ sockjs.js:170
eval @ sockjs.js:973
setTimeout (async)
SockJS._close @ sockjs.js:961
SockJS._receiveInfo @ sockjs.js:790
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
eval @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
eval @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1601
XMLHttpRequest.send (async)
AbstractXHRObject._start @ sockjs.js:1609
eval @ sockjs.js:1498
setTimeout (async)
AbstractXHRObject @ sockjs.js:1497
XHRCorsObject @ sockjs.js:2875
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
eval @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:734
SockJSClient @ SockJSClient.js:43
initSocket @ socket.js:20
eval @ client:176
eval @ index.js?http://localhost:8081:177
../node_modules/webpack-dev-server/client/index.js?http://localhost:8081 @ form-builder-test.js:560
webpack_require @ form-builder-test.js:26
0 @ form-builder-test.js:1020
webpack_require @ form-builder-test.js:26
(anonymous) @ form-builder-test.js:90
(anonymous) @ form-builder-test.js:93
(anonymous) @ form-builder-test.js:1027
form-builder.js:1361 Uncaught TypeError: $modal.modal is not a function
at editProperties (form-builder.js:1361:1)
at HTMLAnchorElement.eval (form-builder.js:1458:1)
at HTMLDivElement.dispatch (jquery.js:4435:9)
at r.handle (jquery.js:4121:28)

Please Give Solution any one one this ?

@samparkjaiswal
Copy link

@oneplugin
Please create a demo video for add new library with working bootstrap grid and edit popup also

@VISAE
Copy link

VISAE commented Sep 18, 2023

It works like a charm!
Thank you!
Result of using this version of Formbuilder

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement Feature
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests