asked on

Could you point a way to make parameters to be sent to a bootstrap modal screen ?

Hi Experts

Could you point a way to make parameters to be sent to a bootstrap modal screen ?

1st.
03 parameters are defined in the base screen then the button is clicked

2nd.
The modal screen must receive the 03 parameters and use them to call a stored procedure, after that with the sp results a grid is populated:

The code:

            <!------------------------------------------------>
                <div class="form-group">
                <div class="row colbox">
                <div class="col-lg-4 col-sm-4">
                    <label for="hireddate" class="control-label">Data Inicial</label>
                </div>
                <div class="col-lg-4 col-sm-4">
                    <input id="dt_abertura" name="dt_abertura" placeholder="Data Inicial" type="text" class="form-control" value="<?php echo set_value('dt_abertura'); ?>" />
                <span class="text-danger"><?php echo form_error('dt_abertura'); ?></span>
                </div>
                </div>
                </div>
            <!------------------------------------------------>

            <!------------------------------------------------>
                <div class="form-group">
                <div class="row colbox">
                <div class="col-lg-4 col-sm-4">
                    <label for="dt_fechamento" class="control-label">Data Final</label>
                </div>
                <div class="col-lg-4 col-sm-4">
                    <input id="dt_fechamento" name="dt_fechamento" placeholder="Data Final" type="text" class="form-control" value="<?php echo set_value('dt_fechamento'); ?>" />
                    <span class="text-danger"><?php echo form_error('dt_fechamento'); ?></span>
                </div>
                </div>
                </div>
            <!------------------------------------------------>

           <!---------------------------------------------------------------->
            <div class="form-group">
            <div class="row colbox">
            <!-- Button trigger modal -->
            <div class="col-sm-offset-4 col-lg-8 col-sm-8 text-left">
            <button type="button" class="btn btn-info " data-toggle="modal" data-target="#myModal">
                Concilia&ccedil;&atilde;o
            </button>
            </div>
          
            <!-- Modal -->
            <div class="modal fade myModal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <!--div class="modal hide fade modal-admin" id="testModal" style="display: none;"-->
            
                <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>       </button>
                 <h4 class="modal-title" id="myModalLabel">Concilia&ccedil;&atilde;o da Conta no Per&iacute;odo</h4>
                </div>
                 <div class="modal-body">

                 <?php
                    ...                      
                     // Code that calls the sp

                   // $p, $p1, $sb_cccx are the 03 parameters sent from the base screen.

  	             $teste = 'CALL ok_canc("' . $p . '","' . $p1 . '",4,' . $sb_cccx . ',"' .$tabela_final .'");'; 
                    ....
                   // Code that renders and presents the grid
                     .....

                  ?>

Open in new window

Thanks in advance!

kaufmed

The way that I did this was to add data-* attributes to the element which was triggering the modal to show. Then, I handled the "show.bs.modal" event. This is all outlined in the documentation for Bootstrap:

http://getbootstrap.com/javascript/#modals-related-target

Eduardo Fuerte

ASKER

Hi

Just one difference is that in my case the values are definied by variable parameters, it looks that @mdo is constant, isn't it?

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>

Open in new window

kaufmed

And? Whatever is in @mdo should be output into the HTML. Then you're all client side at that point. The data-whatever attribute will be read in the "show.bs.modal" event handler. When it's reading that value, it's reading whatever was rendered by the server. The fact that it is variable is inconsequential--it's variable on the server; once it's on the client, it's just a value.

Eduardo Fuerte

ASKER

Could you give an small example on how to do that, it's obscure to me...

Eduardo Fuerte

ASKER

After carefully reading now it's comprehensible.

Just one thing, I copied the pointed example and during my tests the content of "data-whatever" is not correctly obtained at jQuery

Could you check if anything else is needed?

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

</script>

</body>

</html>

Open in new window

Eduardo Fuerte

ASKER

This is needed to work

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>

Open in new window

Eduardo Fuerte

ASKER

I tested with strings, it has been sent.

My problem here is how to send a PHP variable to the modal screen:

                <div class="form-group">
                <div class="row colbox">
                <div class="col-lg-4 col-sm-4">
                    <label for="dt_abertura" class="control-label">Data Inicial</label>
                </div>
                <div class="col-lg-4 col-sm-4">
                    <input id="dt_abertura" name="dt_abertura" placeholder="Data Inicial" type="text" class="form-control" value="<?php echo set_value('dt_abertura'); ?>" />
                <span class="text-danger"><?php echo form_error('dt_abertura'); ?></span>
                </div>
                </div>
                </div>

....

<!--  It doesn't work -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-whatever="<?php echo set_value('dt_abertura'); ?>">
                Concilia&ccedil;&atilde;o
 </button>

Open in new window

And then obtain the PHP variable inside the modal screen.

Any suggestion?

ASKER CERTIFIED SOLUTION

kaufmed

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Eduardo Fuerte

ASKER

Hi

It worked out the way you suggested.

But I have a complication here: the needed parameter values are dynamically defined accordingly to the first image question:

CC - CX
Data Inicial
Data Final

These parameters are needed to call the stored procedure (called in the modal screen php code)

Is it possible to do that without a form submtion, sending the parameters content to the server before the modal screen is called?

(I guess it isn't)

kaufmed

If you make an AJAX call, you could do that. On receipt of the AJAX response, you can show the modal by way of Javascript. You would get a JavaScript reference to the modal, and then call the "show" method.

SOLUTION

Eduardo Fuerte

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial