Eduardo Fuerte
asked on
Could you explain how to return a value from a bootstrap modal form after it had been obtained ?
Hi Experts
Could you explain how to return a value from a bootstrap modal form after it had been obtained ?
Accordingly with:
The desired information was obtained from the modal screen accordingly with:
The jQuery code intended to capture variable value, fired when OK button is clicked
Thanks in advance.
Could you explain how to return a value from a bootstrap modal form after it had been obtained ?
Accordingly with:
The desired information was obtained from the modal screen accordingly with:
<form id="form1">
<div class="container">
....
<!-- cr form's variable -->
<div class="col-lg-6 col-sm-6">
<?php
$attributes = 'class = "form-control" id = "cr"';
echo form_dropdown('cr',$cr,set_value('cr'),$attributes);?>
<span class="text-danger"><?php echo form_error('cr'); ?></span>
</div>
....
<!-- Modal screen starts here -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">×</span></button>
<h4 class="modal-title" id="myModalLabel">Escolha o Centro de Responsabilidade</h4>
</div>
<div class="modal-body">
<?php
// php code that renders the grid
?>
<script type="text/javascript">
// Javascript code that capture the selected values from the grid
function Handle_OnRowSelect(sender,args)
{
var _row = args["Row"];
alert("Selected Line: "+_row.getDataItem()["SB_CR"]+" "+_row.getDataItem()["DESCRICAO"]);
// How to make variable formdata that has the desired information to be visible to the jQuery bellow ?
// (in a manner it could be returned to the caller form)
var formdata = _row.getDataItem()["DESCRICAO"];
}
</script>
<?php
echo $grid->Render();
?>
<br />
<div class="modal-footer">
<!-- OK button returns a value to the caller form -->
<button type="button" id="btn_sel" class="btn btn-primary" >Ok</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Sair</button>
</div>
<!-- modal screen ends here -->
The jQuery code intended to capture variable value, fired when OK button is clicked
<script type="text/javascript">
$('#btn_sel').on('click', function(event) {
event.preventDefault(); // To prevent following the link (optional)
alert("acionado");
$('#form1 input["name=cr"]').val(formdata); // place value from formdata var to input named id
});
</script>
</html>
Thanks in advance.
When you say "return" a value, do you mean transmit it via an AJAX request to a script on the server?
ASKER
ASKER
better: "how to obtain" instead of "how to use"
ASKER
Better explaining
The value I need is that returned from the modal screen to the base screen. The jQuery code captured it accordingly with evidences but how to reobtain it inside the base form?
The value I need is that returned from the modal screen to the base screen. The jQuery code captured it accordingly with evidences but how to reobtain it inside the base form?
greetings Eduardo Fuerte, , not sure I understand the problem you have? ? ?
The bootstrap modal is in the page you use for the "base screen" or as you say the "base form", so there is no separation in the javascript "scope" or just setting a javascript variable or calling a javascript function to use the string you get from the click as -
$('#btn_sel').on('click', function(event) {
What is it that you need to do with this string you get from the modal?
The bootstrap modal is in the page you use for the "base screen" or as you say the "base form", so there is no separation in the javascript "scope" or just setting a javascript variable or calling a javascript function to use the string you get from the click as -
$('#btn_sel').on('click', function(event) {
What is it that you need to do with this string you get from the modal?
ASKER
Hi Slick
First of all, thank you for participate.
The question is simpler.
base screen is the screen that calls the modal screen.
1st. The base screen has a textbox and a button, the button "C" calls a bootscrap modal screen with a grid that contains options
2nd. The user choose an option and this option is captured when clicks OK
3nd. The values are the received by the "base screen" and fills the textbox with the name and then uses the code for Codeigniter's insertion.
the code used in the view
Jquery used when the modal screen's OK button is clicked
First of all, thank you for participate.
The question is simpler.
base screen is the screen that calls the modal screen.
1st. The base screen has a textbox and a button, the button "C" calls a bootscrap modal screen with a grid that contains options
2nd. The user choose an option and this option is captured when clicks OK
3nd. The values are the received by the "base screen" and fills the textbox with the name and then uses the code for Codeigniter's insertion.
the code used in the view
<!---------------------------------------------------------------->
<div class="form-group">
<div class="row colbox">
<div class="col-lg-4 col-sm-4">
<label for="observacao" class="control-label">CR Modal</label>
</div>
<div class="col-lg-4 col-sm-8">
<input id="descricao" name="cr_modal" placeholder="CR Modal" type="text" class="form-control" value="<?php echo set_value('cr_modal'); ?>" />
<span class="text-danger"><?php echo form_error('observacao'); ?></span>
</div>
<!---------------------------------------------------------------->
<div class="col-lg-2 col-sm-2">
<!-- Button trigger modal -->
<button type="button" class="btn btn-info " data-toggle="modal" data-target="#myModal">
C
</button>
<!-- Modal Screen here-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">×</span></button>
<h4 class="modal-title" id="myModalLabel">Escolha o Centro de Responsabilidade</h4>
</div>
<div class="modal-body">
<?php
// Here the grid inside the modal is formed
....
//
$grid->ClientSettings->ClientEvents["OnRowSelect"] = "Handle_OnRowSelect";
$grid->Process();
?>
<script type="text/javascript">
// This Javascript code obtains the option choosed
var formdata;
function Handle_OnRowSelect(sender,args)
{
var _row = args["Row"];
//alert("Selected Line: "+_row.getDataItem()["SB_CR"]+" "+_row.getDataItem()["DESCRICAO"]);
formdata = _row.getDataItem()["SB_CR"];
}
</script>
<?php
echo $grid->Render();
?>
<br />
<div class="modal-footer">
<button type="button" id="btn_sel" class="btn btn-primary" data-dismiss="modal" >Ok</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Sair</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!------------------------------------------------>
Jquery used when the modal screen's OK button is clicked
<script type="text/javascript">
$('#btn_sel').on('click', function(event) {
event.preventDefault(); // To prevent following the link (optional)
// The alert that appear at the picture
alert(formdata);
$('#form1 input["name=cr"]').val(formdata); // place value from formdata var to input named id
});
</script>
ASKER
Ops... Just to correct the 2nd picture: the name "EMPRESA" must fill the textbox CR Modal
OK, that's a good explanation of what you need to do, thanks.
If I understand the way you need this to work , , , then this INPUT -
<input id="descricao" name="cr_modal" placeholder="CR Modal"
type="text" class="form-control" value="1" />
needs to have its value set to the selected ROW as a string variable named "formdata" in the Modal button "btn_sel" click,
The input you need to change the value, has an ID of -
id="descricao"
in Jquery you just use the # for an ID to get that input "#descricao" like -
$('#descricao').val(formda ta);
so the btn_sel button click could be written as -
In one of your alerts you have the correct string as "EMPRESA" in another you have a different readout as www.espiriplug.com.br diz:
I am using the code variable as formdata so that needs to have the string "EMPRESA" in it, or this may not work.
If I understand the way you need this to work , , , then this INPUT -
<input id="descricao" name="cr_modal" placeholder="CR Modal"
type="text" class="form-control" value="1" />
needs to have its value set to the selected ROW as a string variable named "formdata" in the Modal button "btn_sel" click,
The input you need to change the value, has an ID of -
id="descricao"
in Jquery you just use the # for an ID to get that input "#descricao" like -
$('#descricao').val(formda
so the btn_sel button click could be written as -
$('#btn_sel').on('click', function(event) {
$('#descricao').val(formdata);
});
In one of your alerts you have the correct string as "EMPRESA" in another you have a different readout as www.espiriplug.com.br diz:
I am using the code variable as formdata so that needs to have the string "EMPRESA" in it, or this may not work.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
ASKER
Slick
Thank you for so effective assistance and instructions!
(I'm going to open another question concerned to layouts)
Thank you for so effective assistance and instructions!
(I'm going to open another question concerned to layouts)
So glad to hear that it now works ! !
, and I would like to thank you again for giving all the information in the comment ID: 41591010 , because so many people on EE, do not ever give enough info for me to help them.
It takes time and practice to get to know Jquery and javascript , , but it is well worth your time to learn more about using Jquery.
, and I would like to thank you again for giving all the information in the comment ID: 41591010 , because so many people on EE, do not ever give enough info for me to help them.
It takes time and practice to get to know Jquery and javascript , , but it is well worth your time to learn more about using Jquery.
ASKER
After reading your jQuery instructions I better get the meaning.