Skip to content

Conversation

@SantiagoSC
Copy link

This version will show any dialog using bootstrap modal instead of
jQuery UI Dialog if useBootstrap option is true.

This version will show any dialog using bootstrap modal instead of
jQuery UI Dialog if useBootstrap option is true.
@kamov
Copy link

kamov commented Sep 14, 2014

for bootstrap 3 ?

@SantiagoSC
Copy link
Author

Modal structure in bootstrap 3 have few differences, so this version will not work properly in bootstrap 3. The good news are that it's very simple to change modal div by wrapping header, body and footer in modal-content div.

@kamov
Copy link

kamov commented Sep 16, 2014

any sample?

@cocomo
Copy link

cocomo commented Jan 3, 2015

Thank you SantiagoSC for kicking me into the right direction. In addition to your explanation I also had to remove the hide class from the bs2 dialog and wrap the whole thing into another div having the modal-dialog class. Here's a sample from the edit div:

self._$editDiv.addClass("modal fade"); // remove class 'hide'
self._$editDiv.css({ width: 'auto' });
self._$editDiv.append(
    '<div class="modal-dialog">' + // add bs3 classes for modals
        '<div class="modal-content">' + // add bs3 classes for modals
            '<div class="modal-header">' +
                '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
                '<h3>' + self.options.messages.editRecord + '</h3>' +
            '</div>' +
            '<div class="modal-body" style="min-width: 300px;"></div>' +
            '<div class="modal-footer">' +
                '<a href="#" class="btn" data-dismiss="modal" aria-hidden="true">' + self.options.messages.cancel + '</a>' +
                '<a id="EditDialogSaveButton" href="#" class="save btn btn-primary">' + self.options.messages.save + '</a>' +
            '</div>' +
        '</div>' + // add closing divs for bs3 modals 
    '</div>' // add closing divs for bs3 modals 
);

@halloulpsx
Copy link

Any one got it working ? , is there a live demo ?

@cocomo
Copy link

cocomo commented Feb 6, 2015

It's not so hard to change these dialogues to bootstrap modals, took me less than an hour to get santiagos solution working with my table. Still: At my instance i haven't made it jet to adjust icons, buttons, pagination to bootstraps appearance..

@krissanawat
Copy link

attach jquery ui bootstrap
add jqueryuiTheme: true

 $('.table').jtable({
    jqueryuiTheme: true,
            ajaxSettings: {

and combind with changcolumnVisilbility

work perfect

Compatible with jQuery UI, Bootstrap 2 and Bootstrap 3
@SantiagoSC
Copy link
Author

Bootstrap 3 support commited.

When editing a record, after click on save button, it remains as saving
and disabled.
@mnusurov
Copy link

Hi all,
Dear SantiagoSC very interested in your solution to this project. Unfortunately it doesn't work with current version of jTable 2.4.0. I also wasn't able to get jTable 2.3.1 version this brach is broken and cannot be pulled.

@jvsbautista
Copy link

jvsbautista commented Jan 18, 2018

@mnusurov, I've managed to make progress and made it work on jTable 2.4.0.

In jquery.jtable.js, I changed all instances of the script: addClass("modal hide fade") into addClass("modal fade");
I'm still in the process of checking if it'll hold but so far so good.

Logof pushed a commit to Logof/jTable that referenced this pull request Jul 23, 2022
Logof pushed a commit to Logof/jTable that referenced this pull request Jul 23, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants