Triggering showing of modal from a button in the editor - modal hidden

GeorgeHelmke

I want to trigger showing of a modal from a button in a data table row. It seems to try to go to a new form, which is blank.
I know the modal works from a regular button in the form.

Here is how I am defining the column with button:

   {
                            "class": 'details-control',
                            "orderable": false,
                            "data": null,
                            "defaultContent": '<button type="button" class="btn btn-default btn-xs " ><span class="glyphicon glyphicon-search"></span></button>'
                        },

Here is where I am assigning the event to the button:

        $('#MainTable tbody ').on('click', 'button', function (event) {
            var row = $(this).closest("tr").get(0);
            var aData = table.row(row).data();
         $('#ItemPopup').modal('show');
            event.stopImmediatePropagation();  //prvents the other on click from firing that fires up the inline editor
        });

Here is the popup:

<div class="modal fade" id="ItemPopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h1 class="modal-title" id="myModalLabel">Velg vare</h1>
            </div>
            <div class="modal-body">
                <table class="display" id="PopupTable"></table>

                <input hidden id="No_" name="No_" readonly="readonly" style="width: 50px;" type="text" />
                <input hidden id="Description" name="Description" readonly="readonly" style="width: 100px;" type="text" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-lg" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span></button>
                <button id="buttonSave" type="button" class="btn btn-primary btn-lg" data-dismiss="modal" disabled onclick="CloseAndSave()"><span class=" glyphicon glyphicon-ok"></span></button>
            </div>

        </div>
    </div>
</div>

allan

Hi,

Thanks for the code. What you have appears to be that it should work I would say. The only suggestion I would have would be to add event.preventDefault(); in the event handler to stop forum submission, if that should happen.

It seems to try to go to a new form, which is blank.

I'm not entirely sure what you mean by this. The form in the modal is blank?

Are you able to link me to the page so I can take a look into it?

Thanks,
Allan

GeorgeHelmke

I tried the event.preventDefault(), did not help.
I have this whole project behind a firewall, and will not be able to expose it in its native form. Team Viewer? ;)
What I mean by new form is that you see an empty screen, with a slightly gray colour. This is how it usually looks, but the popup is in front.

GeorgeHelmke

There is no modal showing in front - just the fray background.