file index.html
<div class="button-edit"><button type="button" data-toggle="modal" data-target=".addNewProduct" class="edit" data-id="107"><i class="fa fa-edit"></i>
I have the following HTML code (I'm using Bootstrap Twitter Modal):
<div tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;" class="modal fade addNewProduct">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form action="#" method="post" onsubmit="return false">
<div class="modal-header">
<button type="button" data-dismiss="modal" aria-hidden="true" class="close close-product-modal">×</button>
<h4 id="myLargeModalLabel" class="modal-title">Edit Group</h4>
</div>
<div class="modal-body">
<div class="form-horizontal col-lg-6 col-sm-6 col-xs-12">
<fieldset class="product-info">
<div class="form-group">
<label for="product-id" class="col-md-4 control-label">Group Name *</label>
<div class="col-md-8 input">
<input id="product-id" placeholder="<?php echo $this->Item['group_name']?>" type="text" class="form-control"/>
</div>
</div>
..........
I want that onclick the button, after the bootstrap modal will open, there will be alert with the 'data-id' value.
can you help me?
Related
I'm using the TinyMCE Editor version 5.6.1. Whenever I load my popup for the first time, I get the following:
When I close the Popup and re-display it again, I get the following:
There are no errors in the console and loading the Popup is as plain as you can get it:
<div class="modal" tabindex="-1" role="dialog" id="form-modal">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Here is the code which calls the Modal
#{
ViewData["Title"] = "Product Administration";
}
<br />
<div class="modal" tabindex="-1" role="dialog" id="form-modal">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<div class="shadow-lg p-1 mb-1 bg-primary rounded d-flex">
<h5 class="text-white flex-grow-1">Product Administration ...</h5>
<div>
<a onclick="showInPopup('#Url.Action("AddEdit","Product",null,Context.Request.Scheme)','New Product')"
class="btn btn-success text-white">
<i class="fas fa-random"></i>New Product</a>
</div>
</div>
Here is the code for the Modal:
#model ProductEdit
#{
Layout = null;
}
<script>tinymce.init({
selector: 'textarea',
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_css: '//www.tiny.cloud/css/codepen.min.css'
});</script>
<div class="row">
<div class="col-lg-12">
<form asp-action="AddEdit" asp-route-id="#Model.Id" onsubmit="return jQueryAjaxPost(this, RefreshMe, false);" autocomplete="off">
<input type="hidden" asp-for="#Model.Id" />
<div id="errValidation" class="alert alert-dismissible alert-danger" data-content="ok">
<button id="closeValidation" type="button" class="close">×</button>
<div id="errTitle" class="font-weight-bolder">Oh snap!</div>
<div id="errDetails">An Error Occured!</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label asp-for="#Model.CategoryId" class="control-label"></label>
<select asp-for="#Model.CategoryId"
class="form-control"
asp-items="#(new SelectList(Model.ProductCategories,"Id","Display"))">
</select>
<span asp-validation-for="#Model.CategoryId" class="text-danger"></span>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label asp-for="#Model.SectionId" class="control-label"></label>
<select asp-for="#Model.SectionId"
class="form-control"
asp-items="#(new SelectList(Model.ProposalSections,"Id","Display"))">
</select>
<span asp-validation-for="#Model.SectionId" class="text-danger"></span>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label asp-for="#Model.ManufacturerId" class="control-label"></label>
<select asp-for="#Model.ManufacturerId"
class="form-control"
asp-items="#(new SelectList(Model.Manufacturers,"Id","Display"))">
</select>
<span asp-validation-for="#Model.ManufacturerId" class="text-danger"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group mb-2 has-warning has-feedback">
<label asp-for="#Model.InternalPartNumber" class="control-label"></label>
<input asp-for="#Model.InternalPartNumber" class="form-control"></>
<span asp-validation-for="#Model.InternalPartNumber" class="text-danger"></span>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-2 has-warning has-feedback">
<label asp-for="#Model.ManufacturerPartNumber" class="control-label"></label>
<input asp-for="#Model.ManufacturerPartNumber" class="form-control"></>
<span asp-validation-for="#Model.ManufacturerPartNumber" class="text-danger"></span>
</div>
</div>
</div>
<div class="form-group">
<label asp-for="#Model.Description" class="control-label"></label>
<input asp-for="#Model.Description" class="form-control" rows="2"></>
<span asp-validation-for="#Model.Description" class="text-danger"></span>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label asp-for="#Model.SellPrice" class="control-label"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
<input asp-for="#Model.SellPrice" class="form-control"></>
</div>
<span asp-validation-for="#Model.SellPrice" class="text-danger"></span>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label asp-for="#Model.Cost" class="control-label"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
<input asp-for="#Model.Cost" class="form-control"></>
</div>
<span asp-validation-for="#Model.Cost" class="text-danger"></span>
</div>
</div>
</div>
<div class="form-group">
<label asp-for="#Model.ProductWebsite" class="control-label"></label>
<input asp-for="#Model.ProductWebsite" class="form-control"></>
<span asp-validation-for="#Model.ProductWebsite" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="#Model.Note" class="control-label"></label>
<textarea asp-for="#Model.Note" class="form-control" rows="5"></textarea>
<span asp-validation-for="#Model.Note" class="text-danger"></span>
</div>
<div class="d-flex">
<div class="form-group mr-2">
<input asp-for="#Model.Active" />
<label asp-for="#Model.Active" class="control-label text-success"></label>
</div>
<div><button type="submit" value="Save" class="btn btn-success mr-2">Save Changes</button></div>
<div><input type="reset" class="btn btn-warning"></></div>
</div>
</form>
</div>
</div>
<script>
$('#errValidation').hide();
$(function () {
$("#SectionId").chosen({ no_results_text: "Oops, Section not found!", disable_search_threshold: 4 });
$("#CategoryId").chosen({ no_results_text: "Oops, Category not found!" });
$("#ManufacturerId").chosen({ no_results_text: "Oops, Manufacturer not found!" });
});
$("#closeValidation").click(function () {
$("#errValidation").hide();
});
function RefreshMe() {
$('#products').DataTable().ajax.reload(null, false);
showSuccessToast('Product Saved', 'top-center');
}
</script>
The showInPopup method is the following:
showInPopup = (url, title) => {
$.ajax({
type: "GET",
url: url,
success: function (res) {
$('#form-modal .modal-body').html(res);
$('#form-modal .modal-title').html(title);
$('#form-modal').modal('show');
}
})
}
Any ideas about what might be happening? If I refresh the page it works again only for the first load.
Thanks.
--- Val
From the second pictures, the textare is not rendered by tinymce, because the html which ajax returned can not be rendered by tinymce. TinyMCE works when the page is building. So a better method is to use #Html.Partial to load the partial view (ProductEdit).
In the view Product Administration, change the modal body.
<div class="modal-header">
<h5 class="modal-title">#Context.Request.Scheme</h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
#Html.Partial("addedit.cshtml",Model)
</div>
Change this javascript method.
var showInPopup = (url, title) => {
$('#form-modal').modal('show');
}
And move tinymce.init({ //... }) to this view Product Administration.
Then, TinyMCE will work well.
After upgrading to bootstrap 3.3.7 only one works from my modals.. the rest of them only displays backdrop..
I tried using modal examples just to check if the problem is in my modal code.. but still it only displays backdrop..
whats weird the modal works if I triggered them using this javascript.
<script>
$('.myModal').on('click',function(){
$('.modal-body').load('content.html',function(){
$('#myModal').modal({show:true});
});
});
</script>
my files
index.php
<?php
ob_start();
include('dbcon.php');
include('header.php');
?>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#navbar" aria-expanded="false" aria-
controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown"> Login
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Student</li>
<li>Teacher</li>
</ul>
</li>
<li class="active"> Logout</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<?php include ('modal_student.php'); ?>
<?php include ('modal_peer.php'); ?>
<?php include ('modal.php'); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/
jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body></html>
modal_student.php
<div class="modal fade" id="student" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert">×
</button>
<strong>Log in</strong> Please fill in the details below...
</div>
</div>
<form class="form-horizontal" method="post" style="margin-left: 54px;">
<div class="form-group">
<label class="control-label" for="inputEmail">LRN</label>
<div class="controls"> <input name="lrn_number"
id="inputEmail" placeholder=" Input your 11 digit LRN" required />
</div>
</div>
<div class="form-group">
<div class="controls">
<button type="submit" name="login" class="btn btn-info"><i
class="icon-signin icon-large"></i> Sign in</button>
</div>
</div>
</form>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true"><i
class="icon-remove icon-large"></i>close</button>
</div>
</div>
Modal.php
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body">
<p><div class="alert alert-danger">Are you Sure you want logout?</p>
</div>
<hr>
<div class="modal-footer">
<button class="btn btn-inverse" data-dismiss="modal" aria-hidden="true"><i
class="icon-remove icon-large"></i> No</button>
<a href="logout.php" class="btn btn-primary"><i class="icon-ok icon-large">
</i> Yes</a>
</div>
</div>
I'm guessing you've taken a look at this?
https://getbootstrap.com/docs/3.3/javascript/#modals.
Also in your tags make sure that bootstrap.js comes before bootstrap.css
I wanted to create a panel(if its a panel) like
I tried making it using this code :
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
</div>
</div>
</div>
</div>
</div>
it makes two panels but there is gap between them.
how should i approach to this problem?
I made a plunkr to simulate the example. exmaple
Basically i add a css who make the rtl.
bootstrap-rtl
and the code for the html is this . hope it helps.
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="panel panel-default">
<div class="panel-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
</div>
</div>
</div>
<!-- /container -->
</body>
I have some problem on how to display a bootstrap modal using vue.js and laravel 5.3. I just added the vue model inside blade.php but modal seems no working. Please see sample code below:
html:
<div id="project">
<button class="btn btn-primary" #click="showModal = true"><i class="icon-plus"></i> Add new</button>
<!-- Modal -->
<div class="modal fade in" 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">Add Project</h4>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" name="title" class="form-control" required="required" placeholder="Project Title">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="date" name="date" class="form-control" required="required" placeholder="Project Date">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" name="category" class="form-control" required="required" placeholder="Project Category">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<textarea name="desc" id="inputDesc" class="form-control" rows="3" placeholder="Project Description"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="dropzone" id="project-thumbnail">
</div>
</div>
</div>
</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">Save changes</button>
</div>
</div>
</div>
</div>
</div>
script:
new Vue({
el: '#project',
data: {
showModal: false
}
})
Just add show class and v-if="showModal" to your modal:
<div class="modal fade in show" tabindex="-1" role="dialog" v-if="showModal" aria-labelledby="myModalLabel">
Build something cool!
There is nothing in your code to trigger it. If you aren't use bootstrap's data-modal then you need to use the Javascript API to open it documented here:
http://getbootstrap.com/javascript/#via-javascript
I.e. you need a method on your Vue that calls:
$('#myModal').modal('show');
I'm attempting to render, side by side, form elements within a bootstrap modal dialog. Reason for this is that they're for all intents and purposes the same options, just representing options for different items and the current way it renders for users is basically:
<table>
<tr>
<td><!--Option Group 1--></td>
<td><!--Option Group 2--></td>
<td><!--Option Group 3--></td>
</tr>
</table>
So using the modal dialog example in the Bootstrap 3 documentation combined with the form-horizontal exampl in the Bootstrap 3 documentation plus some use of span to attempt to do a 50% width for each (and hopefully left-to-right tiling of the sections), I came out with:
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<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="addLabel">Title of Dialog</h4>
</div>
<form class="form-horizontal" role="form">
<div class="modal-body">
<div class="row">
<div class="span6">
<div class="form-group">
<label for="inputUser" class="col-sm-1 control-label">User</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputUser" value="" disabled="disabled">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-1 control-label">Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
</div>
<div class="span6">
<div class="form-group">
<label for="inputUser" class="col-sm-1 control-label">User</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="inputUser" value="" disabled="disabled">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-1 control-label">Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Add Request</button>
</div>
</form>
</div>
</div>
http://jsfiddle.net/isherwood/3zeMh/
The problem is that somewhere along the way, it is forcing each item to go new line so I have two "forms" that are 50% of the parent width (intentional) that are rendered vertically (not intentional). How can I make the two render side by side?
<div class="span6">
should be
<div class="col-sm-6">
2 times.
http://jsfiddle.net/isherwood/3zeMh/4
It needs a little further cleanup, but that's the primary issue. Here's one possible refinement: http://jsfiddle.net/isherwood/3zeMh/6
I'd probably make the labels wider and keep everything block for mobile, though.