I want to pass a variable value to a modal box I call on the same page but have not been able to do it.
Code to open modal box is as below
<li style="font-style:bold" title="rate on skill" class="skill_rating">
<a data-toggle="modal" title="Add this item" class="open-AddBookDialog" href="#addBookDialog" data-id='<?php echo $skill_id2[$q]?>'>
<i class="fa fa-anchor" aria-hidden="true"></i> </a><?php echo $skilltemp2[$q2] ?></li>
Modal Box code as below
<div class="modal fade" id="addBookDialog" tabindex="-1" role="dialog" aria-labelledby="addBookDialog"><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">Search</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" name="bookId" id="bookId" value=""/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"><span>Search</span></button>
</div>
</div>
</div>
Javascript before the closing body tag is as below
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myBookId = $(this).data('id');
$(".modal-body #bookId").val( myBookId );
});
</script>
I saw a couple of answers at stackoverflow (like:Passing data to a bootstrap modal )but I have not been able to customize it as per my requirement.
Pardon me if its is too simple. I am a noob
This is working in my case. Yes it is not in PHP but i have put static value for Data-Id.
$('body').on('click', '.open-AddBookDialog', function() {
var myBookId = $(this).data('id');
$("#addBookDialog #bookId").val( myBookId );
});
Example JSFIDDLE
Javascript variables and modal box's value of bookId need to be re-defined. A possible use case as below.
Body Code
Modal Box
<div class="modal fade" id="takeaction" 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">Display Apply Id in modal box in a dynamic way? </h4>
</div>
<div class="form-inline container hidden-xs hidden-sm">
<input type="number" value="<?php echo $apply?>" class="form-group" placeholder="Job Code">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><span>Confirm</span></button>
</div>
</div>
</div>
</div>
Javascript Code
<script type="text/javascript">
$('#takeaction').on('show.bs.modal', function(e) {
var apply = $(e.relatedTarget).data('apply');
$(e.currentTarget).find('input[name="apply"]').val(apply);
});
</script>
Related
I am trying to popup a modal when i click on a specific date.
My code is this. When i choose a date nothing happens and i dont know why
<input type="date" id="startdate1"name="startdate1"required>
<div class="modal fade" id="fileUploadModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Comment</h4>
</div>
<div class="modal-body">
<p><textarea id = "commentsUpload"class="form-control custom-control" rows="3" style="resize:none"></textarea></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="submitXYX()" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
<script >
$( document ).ready(function() {
$( "#startdate1" ).change(function() {
$('#fileUploadModal').modal('show')
});
});
</script>
I have following modal dialog coding,but when i click [X],the dialog doesn't closed. I invoke the dialog from button and the JavaScript function as follow;
$('#apply_Compensation_Leave').show();
Modal code
<div class="modal" id="apply_Compensation_Leave" tabindex="-1" role="dialog" aria-labelledby="messageModelLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><li class="fa fa-times"/></button>
<h3 style="font-size: 17px;">Apply Leave</h3>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Did i miss anything?
Adding Javascript file..all javascript functions in seperate .js file.
EmpcompensationAdapter.method('getActionButtonsHtml', function(id,data) {
var html = "";
html = '<div style="width:80px;"><img class="tableActionButton" src="BASE_URL/apply.png" style="cursor:pointer;" rel="tooltip" title="Apply Leave" onclick="modJs.applyleaves();return false;"></img></div>';
return html;
});
EmpcompensationAdapter.method('applyleaves', function() {
$('#apply_Compensation_Leave').show();
});
EmpcompensationAdapter.method('showLeaveView', function() {
$('#apply_Compensation_Leave').hide();
});
When i click Back button, by calling the function showLeaveView();
Apart from adding $('#apply_Compensation_Leave').modal('show');, you need to change your HTML also. <li> tag should not be put without <ul>. It's not valid markup at all. Try putting × in your button HTML.
<div class="modal" id="apply_Compensation_Leave" tabindex="-1" role="dialog" aria-labelledby="messageModelLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 style="font-size: 17px;">Apply Leave</h3>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Here is a Demo
Or you can provide valid markup like this <ul><li class="fa fa-times"></li></ul>
Here is a Demo with the valid markup.
The bootstrap Modal is invoked by $('#apply_Compensation_Leave').modal('show');
Try this demo.
You are opening your modal using JS.
You can use this.But this has wrong markup as #Alorika Mentioned
<div class="modal" id="apply_Compensation_Leave" tabindex="-1" role="dialog" aria-labelledby="messageModelLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
</button>
<h3 style="font-size: 17px;">Apply Leave</h3>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
JavaScript
$('#apply_Compensation_Leave').show();
Try this layout :
<div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
<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"> <center>Title here </center> </h4>
</div>
<div class="modal-body">
...Body here...
</div>
<div class="modal-footer">
<button type="button" id="Okbtn" class="btn btn-danger" data-dismiss="modal"> CANCEL</button>
</div>
</div>
</div>
</div>
I need to pass the data attribute in my modal. to attach with image tag in src When clicked on the link. Below is my code. I am confused. I know we can use JavaScript onclick method to pass by reference. Still can anyone give me executable code. My code is below. I am not really good in making JavaScript functions.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
Image
<div class="modal fade" id="checkImage" 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" style="color:black;" id="myModalLabel">View Image</h4>
</div>
<div class="modal-body" style="color:black;">
<h1>Fee Submit</h1>
<img src="#" alt="bank_chalan" id="thanks" />
</div>
<div class="modal-footer">
<button type='submit' data-dismiss="modal" name='submit' class='btn btn-success'>Close</button>
</div>
</div>
</div>
</div>
you can use bootstrap modal event listener show or shown and pass the data attribute value to <img>
$('#checkImage').on('show.bs.modal', function (e) {
var img = $(e.relatedTarget).data('myimage');
//alert(img);
$("#thanks").attr("src",img);
});
Working Example
$('#checkImage').on('show.bs.modal', function (e) {
var img = $(e.relatedTarget).data('myimage');
//alert(img);
$("#thanks").attr("src", img);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
Image
<div class="modal fade" id="checkImage" 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" style="color:black;" id="myModalLabel">View Image</h4>
</div>
<div class="modal-body" style="color:black;">
<h1>Fee Submit</h1>
<img src="#" alt="bank_chalan" id="thanks" />
</div>
<div class="modal-footer">
<button type='submit' data-dismiss="modal" name='submit' class='btn btn-success'>Close</button>
</div>
</div>
</div>
</div>
Fiddle
Multiple Images
If you want to include image(s) into bootstrap modal, try something like this.
<a id = 'checkImage' >Image</a>
<div id = 'imagemodal' class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog">
<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">View Image</h4>
</div>
<div class="modal-body">
<h1>Fee Submit</h1>
<img src="http://www.userlogos.org/files/logos/Karmody/alaTest_Iphone01a.png" id="imagepreview" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
In you JS file, add this
$(function() {
$('#checkImage').on('click', function() {
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
});
I want to ask if how would it be possible to pass the value from the input field to the third parameter of #Html.Action in order to be accessed to the controller method. Here is my code:
In my view:
Here is the script that passes the id to the input.
<script type="text/javascript">
$(document).on("click", ".desktop_id", function () {
var deskId = $(this).data('id');
$(".modal-body #idd").val(deskId);
});
</script>
Here is the modal to show the partial view of the action
<a data-toggle="modal" data-id="#item.desktop_info_id" title="Add this item" class="desktop_id" href="#myModal1"><i title="Actions" class="fa fa-th"></i></a>
<!-- Modal -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
<div class="modal-dialog">
<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="myModalLabel1">Actions</h4>
</div>
<div class="modal-body">
<input type="text" name="idd" id="idd" value=""/>
#Html.Action("Transaction", "Desktop", new {id=---need to be field---})
</div>
<div class="modal-footer">
<button type="button"class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
How would it be possible that the #Html.Action("Transaction", "Desktop", new {id=---need to be filled---}) third paraameter can access the id value the same from the input field so that I can pass it to the controller? Thanks.
Try to redirect to your action directly from your jQuery function:
<script type="text/javascript">
$(document).on("click", ".desktop_id", function () {
var deskId = $(this).data('id');
var url = '#Html.Raw(Url.Action("Transaction", "Desktop", new { id = "_id" }))';
url = url.replace("_id", deskId);
window.location(url);
});
</script>
I think I understand what you need. your modal depends on id so you can use it directly like
<a data-toggle="modal" data-id="#item.desktop_info_id" title="Add this item" class="desktop_id" href="##item.desktop_info_id"><i title="Actions" class="fa fa-th"></i></a>
NOTE: here in href="##item.desktop_info_id" used dynamic id
Also set same id for modal: id="#item.desktop_info_id"
<div class="modal fade" id="#item.desktop_info_id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
<div class="modal-dialog">
<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="myModalLabel1">Actions</h4>
</div>
<div class="modal-body">
<input type="text" name="idd" id="idd" value=""/>
#Html.Action("Transaction", "Desktop", new {id=item.desktop_info_id})
</div>
<div class="modal-footer">
<button type="button"class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
UPDATE
Here fiddle with sample, and all seems work: dotnetfiddle
I am creating spans in a jinja2 loop, when the user click on them, a modal should appear with a dynamic content . The dynamic item more specifically is the image of the map inside each modal :
<img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>
To avoid one static modal that will repeat itself within the loop, I added a dynamic id to the modal dialog :
<div class="modal-dialog" id="{{id}}" >
But it seems that this doesn't work . Here is my code :
<span style="cursor: pointer;" type="button" class="badge badge-white" data-toggle="modal" data-target="#myModal">Map</span>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" id="{{id}}" >
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Lorem ipsum<small>Lorem ipsum</small></h4>
</div>
<div class="modal-body text-center pagination-centered">
<img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!--<button type="button" class="btn btn-primary">Save changes</button>-->
</div>
</div>
</div>
</div>
If your are in a loop, you must use different modal id, try :
<span style="cursor: pointer;" type="button" class="badge badge-white" data-toggle="modal" data-target="#myModal{{id}}">Map</span>
<!-- Modal -->
<div class="modal fade" id="myModal{{id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" id="{{id}}" >
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Lorem ipsum<small>Lorem ipsum</small></h4>
</div>
<div class="modal-body text-center pagination-centered">
<img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!--<button type="button" class="btn btn-primary">Save changes</button>-->
</div>
</div>
</div>
</div>
I think i figured this out.Don't keep id as a number but add some random text in front. e.g; id="#modal{{ id }}".
I was also caught in this problem and this solved it. I just made a check by console logging the element with id='{{ id }}' and it was showing error on the console but when i added some text like id='modal{{ id }}', it worked perfectly.
If Anyone is still looking for a solution then try the following code (Note: I have done it in PHP as you can see php block there in code.) this it will work for sure
<?php
$id=0;//define on the top of your function
foreach()
<button type="button" class="btn-link" data-toggle="modal" data-target="#myModal<?php echo $id;?>">Read More</button></div>
<div id="myModal<?php echo $id;?>" class="modal fade" role="dialog">
<div class="modal-dialog"> <!-- Modal content-->
<div class="modal-content">
//Popup content
</div>
</div>
</div>
$id=$id+;//increase id value by for next iteration?>
endforech;