jquery pass value from main window to popup window - javascript

i want to pass value from my main window to the popup window i am tryin to use jquery
i already using list of item to show them as a grid view i want when the user click on detail button its show to him popup window i want to pass price value to the popup window any ware in the modal body
while ( $sql=mysqli_fetch_assoc($posts)){
echo' <div class="item col-xs-6 col-lg-4">
<div class="thumbnail" >
<img class="group lis t-group-image" style="height: 221px;
width: 353px; padding: 2px;
" src="../1'.$sql['img'].'" />
<div class="caption" style="height: 105px;">
<h4 class="group inner list-group-item-heading">
'.$sql['name'].'</h4>
<p class="group inner list-group-item-text">
'.$sql['details'].' </p>
<div class="row">
<div class="col-xs-12 col-md-12">
<p id="price1" class="lead">سعر المنتج:'.$sql['price'].'</p></div>
</div>
</div>
<button id="btn1">Show Text</button>
<button data-toggle="modal" data-id="price1" id="ww" class="btn btn-primary">details </button>
<!--button data-toggle="modal" href="#shortModal" id="ww" class="btn btn-primary">مشاهدة التفاصيل</button-->
<!--button type="button" onclick="on_create_form_clicked();" class="btn btn-primary" data-toggle="modal" data-target="#product_view"><i class="fa fa-search"></i> Quick View</button -->
</div>
</div>';
}
?>
and here is the popup modal
<div id="shortModal" class="modal modal-wide fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
i want to pass the value to popup window to show details so any help ?

You can achieve this through using Jquery
Add Id to title of Modal or wherever you want the value to be displayed
<h4 class="modal-title" id ="ans">Modal title</h4>
Add data-id for the data to be passed to the modal
<button data-toggle="modal" data-id="yourdata" id="ww" class="btn btn-primary">details </button>
Javascript:
$("#ww").click(function () {
$('#ans').val($(this).data('id'));
$('#shortModal').modal('show');
});

You can use a click event and get the values of the price by using $("#price1").text()
$('#ww').click(function() {
$("#shortModal .modal-body").text($("#price1").text())
})
$('#ww').click(function() {
$("#shortModal .modal-body").text($("#price1").text())
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="thumbnail">
<img class="group lis t-group-image" style="height: 221px;
width: 353px; padding: 2px;
" src="../1'.$sql['img'].'" />
<div class="caption" style="height: 105px;">
<h4 class="group inner list-group-item-heading">
'.$sql['name'].'</h4>
<p class="group inner list-group-item-text">
'.$sql['details'].' </p>
<div class="row">
<div class="col-xs-12 col-md-12">
<p id="price1" class="lead">prdoudct price : 2000</p>
</div>
</div>
</div>
<button id="btn1">Show Text</button>
<button data-toggle="modal" href="#shortModal" id="ww" class="btn btn-primary">details </button>
</div>
<div id="shortModal" class="modal modal-wide fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->

As per my understanding you can add modal in your loop and set dynamic modal
id.
Try below code.
HTML/PHP
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<?php
$array=array();
$array[0]['name'] = 'Sony Pendrive';
$array[0]['details'] = '16 GB 2.0';
$array[0]['price'] = '120';
$array[1]['name'] = 'PNY Pendrive';
$array[1]['details'] = '32 GB 2.0';
$array[1]['price'] = '220';
foreach($array as $k=>$values){
?>
<div class="thumbnail" >
<div class="caption" style="height: 105px;">
<h4 class="group inner list-group-item-heading">
<?php echo $values['name']; ?>
</h4>
<p class="group inner list-group-item-text">
<?php echo $values['details']; ?>
</p>
<div class="row">
<div class="col-xs-12 col-md-12">
<p id="price1" class="lead">prdoudct price : <?php echo $values['price']; ?></p></div>
</div>
</div>
<button id="btn1">Show Text</button>
<button data-toggle="modal" href="#shortModal_<?php echo $k; ?>" id="ww" class="btn btn-primary">details </button>
</div>
<div id="shortModal_<?php echo $k; ?>" class="modal modal-wide fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>
Name : <?php echo $values['name']; ?> <br />
Details : <?php echo $values['details']; ?> <br />
Price : <?php echo $values['price']; ?> <br />
</p>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<?php
}
?>
In this code create Array and set dynamic model id for open specific model.

Related

Pop up modal showing according to condition

I want to show the pop up modal if there is no input in text and also show pop up modal if there is any input text according to condition.
I have used two modal but it is not working. I have used IF condition to show the different modal according to condition but I am getting the same modal box having the title "Modal title".
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="form-group">
<label for="test" class="col-sm-3 control-label">Test</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="test" placeholder="Enter A Value">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-6 col-sm-3">
<button type="button" id="go" class="btn btn-primary">Go</button>
</div>
</div>
<!--Modal if input is empty-->
<div class="modal fade" id="#myModal">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!--modal if there is some text--->
<!--Modal-->
<div class="modal fade" id="#myModal1">
<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">HI</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<script type="text/javascript">
var test1 = $('#test').val();
$('#go').click(function () {
if (test1 === "") {
$('#\\#myModal').modal('show');
} else {
$('#\\#myModal1').modal('show');
}
});
</script>
<!-- /.modal -->
<!--End Modal-->
</body>
</html>
There is No need to use variable you need to use $('#test').val() == "" || $('#test').val() == null to check the condition.. for your scenario if you really want to use variable than you need to define inside click function.. working demo as below -:)
$('#go').click(function() {
if ($('#test').val() == "" || $('#test').val() == null ) {
$('#\\#myModal').modal('show');
}
else{
$('#\\#myModal1').modal('show');
}
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="form-group">
<label for="test" class="col-sm-3 control-label">Test</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="test" placeholder="Enter A Value">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-6 col-sm-3">
<button type="button" id="go" class="btn btn-primary">Go</button>
</div>
</div>
<!--Modal if input is empty-->
<div class="modal fade" id="#myModal">
<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">Modal title with blank text box value</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!--modal if there is some text--->
<!--Modal-->
<div class="modal fade" id="#myModal1">
<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">HI</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!--End Modal-->
</body>
</html>
You are trying to get value when script loads var test1 = $('#test').val();. SO when script loads the value of test1 will be blank so only one poup will work. Put this statement inside the condition var test1 = $('#test').val();
<script type="text/javascript">
$('#go').click(function () {
var test1 = $('#test').val();
if (test1 === "") {
$('#\\#myModal').modal('show');
} else {
$('#\\#myModal1').modal('show');
}
});
</script>
You can checkout below demo for better understanding.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="form-group">
<label for="test" class="col-sm-3 control-label">Test</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="test" placeholder="Enter A Value">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-6 col-sm-3">
<button type="button" id="go" class="btn btn-primary">Go</button>
</div>
</div>
<!--Modal if input is empty-->
<div class="modal fade" id="#myModal">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!--modal if there is some text--->
<!--Modal-->
<div class="modal fade" id="#myModal1">
<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">HI</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<script type="text/javascript">
$('#go').click(function () {
var test1 = $('#test').val();
if (test1 === "") {
$('#\\#myModal').modal('show');
} else {
$('#\\#myModal1').modal('show');
}
});
</script>
<!-- /.modal -->
<!--End Modal-->
</body>
</html>
You dose't have to add # while giving id to div.and you can call it with #sign.you have to get input value again when click event is triggered on button.here you can check the working code at JSFiddle Your updated Code snippet
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="form-group">
<label for="test" class="col-sm-3 control-label">Test</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="test" placeholder="Enter A Value">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-6 col-sm-3">
<button type="button" id="go" class="btn btn-primary">Go</button>
</div>
</div>
<!--Modal if input is empty-->
<div class="modal fade" id="myModal">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!--modal if there is some text--->
<!--Modal-->
<div class="modal fade" id="myModal1">
<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">HI</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!--End Modal-->
</body>
</html>
JS Code:
$('#go').click(function() {
var test1 = $.trim($('#test').val());
if (test1.length==0) {
$('#myModal').modal('show');
}
else{
$('#myModal1').modal('show');
}
});

Bootstrap modal pushes my jumbotron to left in chrome but not in edge?

I tried some of the ways in other questions given for bootstrap modal but I am using bootstrap 3.3.7 this shouldn't be the issue ,but I have no idea why this is happening every time I click on button my jumbotron shrinks !!Any help would be appreciated.
My html code:
<div class="jumbotron">
<div id="post"></div>
<div id="erase" type="submit" data-toggle="modal" data-target="#myModal1" onclick="erase()">
<button class="btn btn-default btn-lg" style="border-radius:100%;width:80px;height:80px;padding:15px">
<img src="/uploads/text.png" style="height:40px;width:40px" />
</button>
</div>
</div>
My javascript function:
function erase(){
$('#post').empty();
$('#post').html('<div class="modal fade" id="myModal1" role="dialog">'+'<div class="modal-dialog">'+'<div class="modal-content">'+
'<div class="modal-header">'+'<button type="button" class="close" data-dismiss="modal">×</button>'+
'<h4 class="modal-title" style="font-family:Pangolin">Post your text</h4>'+' </div>'+'<div class="modal-body">'+
'<div class="media "><div class="media-left"> <form action="porthome_.php" method="post" id="usrform" >'+
'<div class="form-group"><strong><span class="glyphicon glyphicon-pencil" style="font-size:13px" ></span> Write your post:</strong> <input form="usrform" id="textarea1" type="text" class="form-control" name="image" placeholder="Write something" data-toggle="tooltip" data-placement="top" title="Add the image link from any site,if in doubt check out our videos on how to upload images in post.">'+
'</div>'+
'<div class="text-right">'+
'<button type="submit" id="sub"class="btn btn-primary">POST</button>'+
'</div>'+
'</form><div class="media-body"> <h5 class="media-heading" style="color:#3369e8"></h5>'+
'</div>'+
'</div>'+
'</div>'+'<div class="modal-footer">'+
'<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'+'</div>'+
'</div>'+'</div>'+'</div>');
}
Here you go with a solution https://jsfiddle.net/qc9dgefg/2/
erase = function(){
$('#post').empty();
$('#post').html(
`<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="font-family:Pangolin">Post your text</h4>
</div>
<div class="modal-body">
<div class="media">
<div class="media-left">
<form action="porthome_.php" method="post" id="usrform" >
<div class="form-group">
<strong>
<span class="glyphicon glyphicon-pencil" style="font-size:13px" ></span>
Write your post:
</strong>
<input form="usrform" id="textarea1" type="text" class="form-control" name="image" placeholder="Write something" data-toggle="tooltip" data-placement="top" title="Add the image link from any site,if in doubt check out our videos on how to upload images in post.">
</div>
<div class="text-right">
<button type="submit" id="sub"class="btn btn-primary">POST</button>
</div>
</form>
<div class="media-body">
<h5 class="media-heading" style="color:#3369e8"></h5>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>`);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="jumbotron">
<div id="post"></div>
<div id="erase" type="submit" data-toggle="modal" data-target="#myModal1" onclick="erase()">
<button class="btn btn-default btn-lg" style="border-radius:100%;width:80px;height:80px;padding:15px">
<img src="http://via.placeholder.com/350x150" style="height:40px;width:40px">
</button>
</div>
</div>
</div>
You were missing one of the closing div tag.
I have added the closing div tag along with that I also formatted the dynamic HTML in JavaScript.

ASP MVC Passing value into modal window

I have this view with a modal window. When I click to open the modal window, I'd like to pass the parameter item.InstrumentId into the modal window so that I can click on a link that redirects me to the page from that specific instrument that belongs to the InstrumentId. What I'm doing below successfully passes the InstrumentId into the window, but the problem is I don't know how to pass that value into the Html.ActionLink. Any hints as to how I can proceed?
#foreach (var item in Model)
{
<li class="list-group-item">
<div class="row">
<div class="col-md-4">
<h4>
Instrument: #item.InstrumentId
</h4>
</div>
<div class="col-md-4">
#item.Type
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<button type="button" class="open-dialog btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id="#item.InstrumentId">
View details
</button>
<script type="text/javascript">
$(document).on("click", ".open-dialog", function() {
var modalId = $(this).data('id');
$(".modal-dialog #myModal").val(modalId);
})
</script>
<!-- Modal -->
<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="myModal"></h4>
</div>
<div class="modal-body">
#item.Message
<br/> <br/> <br/>
<div class="row">
<div class="col-md-4">
Slide: 1234500323
</div>
<div class="col-md-4">
Instrument: #Html.ActionLink(item.InstrumentId, "Instrument", new {instrumentid = item.InstrumentId})
</div>
<div class="col-md-4">
Checked: #item.Checked
</div>
</div>
</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>
</div>
</div>
</li>
}
UPDATE
<div>
<ul class="list-group">
#foreach (var item in Model)
{
<li class="list-group-item">
<div class="row">
<div class="col-md-4">
<h4>
Instrument: #item.InstrumentId
</h4>
</div>
<div class="col-md-4">
#item.Type
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<button type="button" class="open-dialog btn btn-primary btn-sm" data-url="#Url.Action("Instrument", new {instrumentid = #item.InstrumentId})">
View details
</button>
<script type="text/javascript">
$(document).on("click", ".open-dialog", function() {
$('#details').attr('href', $(this).data('url')); // update the links url
});
</script>
</div>
</div>
</li>
}
</ul>
<!-- Modal -->
<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>
</div>
<div class="modal-body">
#*#item.Message*#
<br /> <br /> <br />
<div class="row">
<div class="col-md-4">
Slide: 1234500323
</div>
<div class="col-md-4">
Instrument: <a id="details" href="#">Details</a>
</div>
<div class="col-md-4">
Checked: #*#item.Checked*#
</div>
</div>
</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>
You currently generating a modal for each item in your collection but giving it an id="myModal" which is invalid html and means data-target="#myModal" will only ever open the first one. Move the modal outside the loop so your create only one (and also remove the <h4 class="modal-title" id="myModal"></h4> element which also has the same id attribute)
Then change the button html to
<button type="button" class=".." .. data-url="#Url.Action("Instrument", new { instrumentid = item.InstrumentId })">
and change the html in the modal to
Instrument: <a id="details" href="#">Details</a>
Then change the script to
$(document).on("click", ".open-dialog", function() {
$('#details').attr('href', $(this).data('url')); // update the links url
})
Side note: You will probably want to do something similar with Checked: #item.Checked in the modal
1.Use ID for Anchor Link.
2.Notice this line <a href='#' id='InstrumentIDLink'>Anchor Link Value=</a> in code. It has Anchor Link Value=. When you open modal you can see Anchor Link Value=10320320 and you can inspect href too.
$('#myModal1').on('show.bs.modal', function(e) {
var modalId = $(e.relatedTarget).data('id');
$('#InstrumentIDLink').attr('href', 'url+'+ modalId)
$('#InstrumentIDLink').text('Anchor Link Value='+ modalId);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<h3>Modal Example</h3>
<!-- Button to trigger modal -->
<div> <a href="#myModal1" class='open-dialog' role="button"
class="btn" data-toggle="modal" data-id='10320320'>Launch Modal (10320320)</a><br/>
<a href="#myModal1" class='open-dialog' role="button"
class="btn" data-toggle="modal" data-id='10320321'>Launch Modal (10320321)</a>
</div>
<!-- Modal -->
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body"> <a href='#' id='InstrumentIDLink'>Anchor Link Value=</a>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
From bootstrap 3+ you can use e.relatedTarget to get element that triggered the modal
Instrument:
#Html.ActionLink("Link_Text", "Action_Name", "Controller_Name", new { id=item.InstrumentId})
Now in your COntroller you can access this value like
public ActionResult Action_Name(int id)
{
//Do something
return view();
}

bootstrap Modal 2.3.2 automatically loads on IE-11

I'm using IE-11 and I have a modal that automatically loads inside my form. It does not respect the the onClick(). Also, the data-toggle does not work. It also loads automatically.
<form ...>
<div id="manage" class="tab-pane">
<div id="media_action_div">
<button type="button" class="btn btn-primary btn-lg media_action_buttons" id="tag_media" disabled="disabled" data-toggle="modal" data-target="#tag_media_modal">Tag</button>
<button type="button" class="btn btn-danger media_action_buttons" id="delete_media" disabled="disabled">Delete</button>
<button type="button" class="btn btn-success media_action_buttons" id="activate_media" disabled="disabled">Activate</button>
<button type="button" class="btn btn-warning media_action_buttons" id="deactivate_media" disabled="disabled">Deactivate</button>
<button type="button" class="btn btn-default media_action_buttons" id="download_media" disabled="disabled">Download</button>
</div>
</div>
</form>
Here's my modal:
<!-- Modal HTML -->
<div id="media_delete_confirmation" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>What would you like to do?</p>
<p class="text-warning"><small>"Delete" will remove the media.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary media_delete_footer" data-dismiss="modal">Keep</button>
<button type="button" class="btn btn-default media_delete_footer" id="modal_delete" data-dismiss="modal">Delete</button>
</div>
</div>
</div>
</div>
Here's my simple JS:
$("#delete_media").click(function(){
$("#media_delete_confirmation").modal('show');
});
Here's my "Tag" button:
<!-- Modal HTML -->
<div id="tag_media_modal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Tag</h4>
</div>
<div class="modal-body">
<div class="container">
<?php
echo $PARSER->search(array(
'search' => $PARSER->student,
'actions' => '<button name="action" value="Upload" class="btn">Search</button>'
));
?>
</div>
<?php echo $PARSER->form_upload->Html(); ?>
</div>
</div>
</div>
</div>
Try this code
$(document).ready(function(){
$("#media_delete_confirmation").hide();
$("#delete_media").click(function(){
$("#media_delete_confirmation").show();
});
})

Select image from popup and display in main page

I am using bootstreap3 popup(model) to select image from computer.
I want when user select one or more image then popup should be closed and image uploading preview should be display in main page (below the <i class="fa fa-image image-popup-open" data-toggle="modal" data-target=".photo-modal-lg"></i>).
My code is
<div class="form-group">
<div class="controls form-inline">
<i class="fa fa-image image-popup-open" data-toggle="modal" data-target=".photo-modal-lg"></i>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Upload Images</h4>
</div>
<div class="modal-body">
<div class="modal-title">
</div>
<div id='content' class="tab-content">
<div class="tab-pane active" id="uplod">
<h1>Drag and Drop files using Dropzone.js</h1>
<form action="upload.php"
class="dropzone"
id="my-awesome-dropzone"></form>
</div>
</div>
</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>
</div>
</div>
My code is here .
How to do this
document.getElementById("imageid").src="../template/save.png";

Categories