Dropzone and Javascript isn't working on bootstrap Modal i'm calling Modal through ajax.Because i have hundreds of records i don't want to place Modal in foreach so i used ajax on button click controller method hits and return a new view and that view i'm calling and main view where modal will be displayed. Modal is working fine but i have used dropzone plugin which isn't working and even no other js code is working neither css.
MainView.blade.php
On button Click the following script hits
this the my main view where i am calling Bootstrap Modal
<div class="modal" id="Edit-SpecsModal-products">
<div class="modal-dialog modal-max ">
<div class="modal-content">
<!-- Modal Header -->
<!-- Modal body -->
<div class="modal-body text-center">
<span class="f-24 black bold">Edit Product</span>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body p0">
<div class="product_details" id="product_details"></div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn-bg2" data-dismiss="modal">Cancel</button>
<input type="button" class="btn-bg1" data-dismiss="modal" onclick="submitForms()">Add to Project</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.edit_product_model').click(function(){
var product_id = $(this).attr("id");
$.ajax({
url:"{{url('architecture-edit-product')}}/" + product_id ,
method:"post",
headers: {
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
},
data:{product_id:product_id},
success:function(data){
$('#product_details').html(data.html);
$('#Edit-SpecsModal-products').modal("show");
}
});
});
});
</script>
Controller
public function editArchitectureProductSave(Request $request, $id){
$data['products'] = Product::with('productImages')->where('id',$id)->get();
$returnHTML = view('manufacturer::projects.includes.ajaxhtmlviews.edit-product-Bootstrap-modal', $data)->render();
return response()->json( ['html'=> $returnHTML], 200);
edit-product-Bootstrap-modal.blade.php
<div class="max-wid">
<div class="pl-3 pr-3 mb-5 p0">
<div class="">
<div class=" f-column in">
<div class="">
<ul class="nav nav-tabs nav-border-producttab">
<li class="nav-item ">
<a class="nav-link active" data-toggle="tab" href="#add_new_products2">Add New Product</a>
</li>
</ul>
</div>
<div class="">
<div >
<div class=" mt-3">
<!-- Nav tabs -->
<!-- Tab panes -->
<div class="tab-content model-hit">
<div id="add_new_products2" class="container tab-pane active">
<br>
<div class=" row">
<div class="col-sm-6">
<div class="col-sm-12 p-0 mrg_modal_produt">
<div class="col-sm-12 p-0 label_modal_product">
Product Documents
<div class="clearfix"></div>
<div class="gry f-13">(Specs, CHPS Certificate, Product Data Sheet)</div>
</div>
<div class="my-form1 text-center" id="my-for2">
<?php echo Form::open(array('route' => 'architecture-product-file-save', 'files' => true, 'method' => 'PUT', 'id' => 'product-file-form', 'class' => 'dropzone', 'name' => 'formName')); ?>
<input type="hidden" name="last_product_inserted_id" id="last_product_inserted_id" value="">
<div class="col-sm-12 p-0 mrg_modal_produt">
<div id="preview-template" style="display: none;">
<div class="dz-preview dz-file-preview" style="width: 20% ;">
<div class="dz-image"><img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<div class="dz-file-type">
<br />
<select name="file_type" class="dz-file-type-select" id="file_type">
<option value="">Select File Type</option>
<option value="datasheet_file">Datasheet</option>
<option value="cad_file">CAD file</option>
<option value="bim_file">BIM file</option>
<option value="leed_file">LEED Statement</option>
</select>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-sm-12 p-0 mrg_modal_produt">
<div class="col-sm-12 p-0 label_modal_product">Product Images</div>
<div class="my-form1 text-center" id="my-for3">
<input form="product-form" id="file-input" name="product_images[]" type="file" multiple>
<div id="preview"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<?php echo Form::open(array('route' => 'architecture-product-save', 'files' => true, 'id' => 'product-form')) ?>
<input type="hidden" name="method_type" value="PUT">
<input type="hidden" name="id" value="{{$products['0']->id}}">
<div class="col-sm-12 p-0 mrg_modal_produt">
<input name="name" type="text" class="form-control input_product_modal" value="{{$products['0']->name}}">
<input name="" type="text" class="form-control input_product_modal" value="Manufacturer Name">
<input type="hidden" name="project_slug" value="{{Request::segment(2)}}">
<textarea name="description" class="form-control input_product_modal" cols="" rows="">{{$products['0']->description}}</textarea>
<input name="leed_file_url" type="text" class="form-control input_product_modal" value="{{$products['0']->leed_file_url}}">
</div>
<div id="product_images_div"></div>
<input type="submit" class="btn btn-info" value="Save" id="save-product-form-submit" style="display:hidden;">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Code is working fine modal is calling but problem is only when modal from edit-product-Bootstrap-modal.blade.php is called through the script used in mainView.blade.php for Bootstrap Modal is not working
Check if you have disabled autoDiscvoer for dropzone.js on Dropzone.autoDiscover
if its false set its value as true (Dropzone.autoDiscover = true;).
If thats also not working try manually initializing the dropzone by attaching it to the model.
myDropDown = new Dropzone('#product_details', {<options>})
I had a similar problem with modals, where my datepicker.js input field wouldn't work when I click it, but id didn't show any errors. I did some digging, and apparently, modals don't properly load scripts defined in your view (or wherever). I managed to do this, by initializing the same script again, but with another name, in my app.js, something like this:
$(document).ready(function () {
$('.datepickerCustom').datepicker({
//datepicker logic
}).on('changeDate', function (e) {
$(this).parent().find('.datePickerInput').val(e);
});
});
After compiling my views again (webpack), date picker was working fine. There's also another solution. Seems like sometimes js scripts "hide" behind the modal, so you need to set their z-index the modal's z-index which is 1050. This could be done inside your modal view:
<style>
.datepicker {
z-index: 1600 !important; /* has to be larger than 1050 */
}
</style>
If this still doesn't work, there's actually one more solution, where you need to initiate the date picker on the Modal shown event, something like this:
$('#myModal').on('show.bs.modal', function (e) {
if (!data) return e.preventDefault() // stops modal from being shown
})
Hope that any of those solutions can solve your problem. Good luck.
Related
I have one page website, with three forms. The first form has class active and the rest are hidden. All forms have buttons with same class .all-pages.
When I click on next button I want the first page to get class hidden, and second get active. When I'm on the second form click on the SAME button NEXT I want the second page to get class hidden, and the third page get active. Please HELP ME :)
And please just JavaScript.
I have 3 forms like this:
<div class="container-fluid"> <!-- first page container -->
<div class="row">
<div class="col-lg-5 col-lg-offset-3">
<form class="well margin-form-top form-color-bg page1">
<div class="row"> <!-- webpage name -->
<div class="col-lg-4 col-lg-offset-4">
<h2>Book a Room</h2>
</div>
</div>
<div class="row"> <!-- information about webpage -->
<div class="col-lg-7 col-lg-offset-2 h4">
<p>This information will let us know more about you.</p>
</div>
</div>
<div class="row"> <!-- navigation -->
<div class="col-lg-12 button-padding-zero">
<ul class="nav nav-pills nav-justified btn-group">
<button type="button" class="btn btn-danger btn-default btn-lg button-width navigation-font-size border-r grey-bg all-pages red active" data-page="0">
<b>ACCOUT</b>
</button>
<button type="button" class="btn btn-default btn-default btn-lg button-width navigation-font-size border-l-r grey-bg all-pages red" data-page="1">
<b>ROOM TYPE</b>
</button>
<button type="button" class="btn btn-default btn-default btn-lg button-width navigation-font-size border-l grey-bg all-pages red" data-page="2">
<b>EXTRA DETAILS</b>
</button>
</ul>
</div>
</div>
<br>
<div class="row"> <!-- let's start -->
<div class="col-lg-5 col-lg-offset-4 h4">
<p>Let's start with the basic details.</p>
</div>
</div>
<br>
<div class="row"> <!-- first row email and country -->
<div class="col-lg-5 col-lg-offset-0">
<div class="input-group">
<input type="email" class="input-sm btn input-width text-left" placeholder="Your Email">
</div>
</div>
<div class="col-lg-6 col-lg-offset-1 button-padding-zero">
<select class="form-control input-sm btn input-width">
<option value="" selected>Country</option>
<option>Serbia</option>
<option>Russia</option>
<option>Brazil</option>
</select>
</div>
</div>
<br>
<div class="row"> <!-- 2nd row password and budget -->
<div class="col-lg-5 col-lg-offset-0">
<div class="input-group">
<input type="password" class="input-sm btn input-width text-left" placeholder="Your Password">
</div>
</div>
<div class="col-lg-6 col-lg-offset-1 button-padding-zero">
<select class="form-control input-sm btn input-width">
<option value="" selected>Daily Budget</option>
<option>100$</option>
<option>200$</option>
<option>300$</option>
</select>
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="col-lg-3 col-lg-offset-9">
<button type="button" id="next-button" class="btn btn-default btn-danger btn-lg button-next-width all-pages" data-page="0">NEXT</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
var page1 = document.querySelector('.page1');
var page2 = document.querySelector('.page2');
var page3 = document.querySelector('.page3');
var emptyArrey = [];
var nextButtons = document.querySelectorAll('.all-pages');
function nextFunction(event) {
// debugger;
var allButtons = document.querySelectorAll('.all-pages');
for (var i = 0; i < allButtons.length; i++) {
var oneButton = allButtons[i].dataset.page;
if (allButtons[i].dataset.page === '0') {
page1.classList.add('hidden');
page2.classList.remove('hidden');
return;
debugger;
} else {
page2.classList.add('hidden');
page3.classList.remove('hidden');
}
}
}
for (var nextButton of nextButtons){
nextButton.addEventListener('click', nextFunction);
}
You could use the button's attribute data-page to keep track of which form you're currently on, and then show the appropriate form.
// give your button the id "next-button"
var currentPage = document.getElementByID("next-button").getAttribute("data-page");
Once you know what form you're on, then you can hide the others as needed
If I understood your question, here is possible solution.
const nextButtons = document.querySelectorAll('.all-pages');
const pages = document.querySelectorAll('.page');
nextButtons.forEach(btn => {
btn.addEventListener('click', () => {
pages.forEach(page => {
page.hidden = true;
});
const pageActive = document.querySelector(`.page-${btn.dataset.page}`);
pageActive.hidden = false;
})
})
<div class="page page-1">
<button class="all-pages" data-page="2">NEXT 2</button>
</div>
<div class="page page-2" hidden=true>
<button class="all-pages" data-page="3">NEXT 3</button>
</div>
<div class="page page-3" hidden=true>
<button class="all-pages" data-page="1">NEXT 1</button>
</div>
I have a simple prototype. I want to keep updating the value of Balance as payments are made. I want to ask how can I maintain the value of 'Balance' variable using HTML, CSS, Javascript, and Bootstrap. Once I click Submit, the value returns to the initial value of $10. I have tried to do this using javascript. The simple code is as follows:
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="default.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
var output=10;
function payment(){
var amount= document.getElementById ("amountID");
var merchant= document.getElementById("merchantID");
output = output - amount.value;
amount.value=" ";
var balance=document.getElementById("balance");
balance.innerHTML = output ;
}
</script>
</head><body>
<div class="row">
<div class="col-md-12">
<div class="headline">
<h1>Payment</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-md-3 col-lg-3">
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a data-toggle="tab" href="#pay">Pay</a>
</li>
<li>
<a data-toggle="tab" href="#send">Send</a>
</li>
</ul>
</div>
<div class="col-xs-9 col-lg-9 col-md-9">
<div class="tab-content">
<div id="pay" class="tab-pane fade in active">
<div class="row">
<label class="col-md-4" style="text-align:right ;"> Available Balance:</label>
<label class="col-md-4" id="balance" > 10$</label>
</div>
<form action="#" class="form-horizontal">
<fieldset>
<div class="form-group">
</div>
<div class="form-group">
<label class="control-label col-md-4 col-xs-4" for="merchantID" > Merchant ID: </label>
<div class="col-md-4 col-xs-4">
<input type="text" class="form-control" id="merchantID" autofocus/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4 col-xs-4" for="amountID" > Amount:</label>
<div class="col-md-4 col-xs-4">
<input type="text" class="form-control" id="amountID" autofocus/>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-4 col-xs-8 col-xs-offset-4">
<button class="btn btn-primary" onclick="payment()" > Submit </button>
</div>
</div>
</fieldset>
</form>
Just a silly mistake. Change the following line:
<button class="btn btn-primary" onclick="payment()" > Submit </button>
to like below:
<button type="button" class="btn btn-primary" onclick="payment()" > Submit </button>
Which means you have to explicitly mention the type of the button. Because, in HTML5 button has a default behavior of submit. So, without this declaration, the form was being submitted and your page was being reloaded.
The problem you are having as that clicking a button in a form causes the page to submit. When this happens your browser will attempt to send the form data to the server. Because you haven't set a target attribute to your form that means it basically just refreshes the page. You just need to prevent the submit action in your javascript.
function payment(e) {
var amount = document.getElementById("amountID");
var merchant = document.getElementById("merchantID");
output = output - amount.value;
amount.value = " ";
var balance = document.getElementById("balance");
balance.innerHTML = output;
e.preventDefault(); //add
return false; //add
}
I posted a question earlier wrt dynamically created forms, and got excellent advice. At the moment I have a list of forms, formCELL, each created as follows.
html
<div class="container">
<div class="container-element" id="1">
<h3>HEADER</h3>
<form action="refresh.php" id="formCELL" method="post" name="form_1">
<div class="panel-body">
<div class="col-xs-10 com">
CONTENT GOES HERE
</div>
<div class="col-xs-2 btn">
<button class="btn btn-primary" id="refresh" type="submit">Refresh</button>
</div>
</div>
</form>
</div>
<div class="container-element" id="2">
<h3>HEADER</h3>
<form action="refresh.php" id="formCELL" method="post" name="form_2">
<div class="panel-body">
<div class="col-xs-10 com">
CONTENT GOES HERE
</div>
<div class="col-xs-2 btn">
<button class="btn btn-primary" id="refresh" type="submit">Refresh</button>
</div>
</div>
</form>
</div>
<div class="container-element" id="3">
<h3>HEADER</h3>
<form action="refresh.php" id="formCELL" method="post" name="form_3">
<div class="panel-body">
<div class="col-xs-10 com">
CONTENT GOES HERE
</div>
<div class="col-xs-2 btn">
<button class="btn btn-primary" id="refresh" type="submit">Refresh</button>
</div>
</div>
</form>
</div>
<div class="container-element" id="4">
<h3>HEADER</h3>
<form action="refresh.php" id="formCELL" method="post" name="form_4">
<div class="panel-body">
<div class="col-xs-10 com">
CONTENT GOES HERE
</div>
<div class="col-xs-2 btn">
<button class="btn btn-primary" id="refresh" type="submit">Refresh</button>
</div>
</div>
</form>
</div>
</div>
javascript
$(document).ready(function() {
$('#formMAIN').submit(function(event) {
//formCELL is generated here through AJAX call.....
});
});
$('#formCELL').submit(function(event) {
// process the form
alert("about to submit");
//AJAX call to go here
var user_id = $(this).closest("form").attr('id');
alert(user_id);
event.preventDefault();
});
I am trying to get the id of the form being submitted so I can process it further, and I've tried diferent variations of $(this).closest("form").attr('id'); and all return a value of undefined
How can I get the id of the form being submitted?
You can use event.target.id to get form id
Just bind the "submit" event to whole form and then use
$(this).attr('id');
Maybe use data-id bro .
Put data-id as attribute in form
So you can easily get it using
$(this).attr('data-id')
I want a checkbox in this code. Only if the checkbox is checked it should be possible to press upload / or to allow a upload.
Could you give me a hint how it's possible to change this?
Actually I can insert a checkbox but it's always uploading if the checkbox is unchecked.
#extends('master/index')
#section('custom')
<!-- Main page -->
<div id="content-wrapper" class="snap-content">
<!-- Progress bar -->
<div class="container progress-holder">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="progress-rate">--%</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">--% Complete</span>
</div>
</div>
</div>
</div>
</div>
<!-- Drag zone -->
#if($limitReached == true)
<div class="container text-center start-zone">
<p>{{ t('You have reached daily upload limit') }}</p>
</div>
#else
<div class="container text-center start-zone">
<form id="fileupload" action="{{ route('images.upload') }}" method="POST" enctype="multipart/form-data" accept="image/gif, image/jpeg, image/jpg, image/png">
<input type="file" id="input-browse" class="block-hide" multiple="multiple" name="files">
<p>{{ t('Drag photos from your computer in here. Select maximum 10 images') }}</p>
<div class="help-block">{{ t('Maximum file size allowed is') }} {{ maxUploadSize()*1024 < (int)siteSettings('maxImageSize')*(1024) ? maxUploadSize() : (int)siteSettings('maxImageSize') }}MB (o.O)</div>
<p>{{ t('You can also') }} <a class="browse_files" href="#">{{ t('browse') }}</a> {{ t('for photos to upload') }}.</p>
</form>
</div>
#endif
<div class="uploader block-hide">
<!-- Preview zone -->
<div class="container preview-zone">
<img src="{{ asset('static/img/mask-tran.png') }}"/>
</div>
<!-- Thumbnail zone -->
<div class="container thumbnail-zone">
<div class="row">
<div class="col-md-9">
<ul class="thumbnails-holder nav nav-tabs" id="myTab"></ul>
</div>
<div class="actions col-md-3 text-right">
<button type="button" class="btn btn-danger btn-remove"><i class="glyphicon glyphicon-trash"></i> remove</button>
<button type="button" class="btn btn-primary btn-upload"><i class="glyphicon glyphicon-open"></i> upload</button>
<p class="help-block"><span class="readyphoto"></span>/<span class="totalphoto"></span> photos are ready</p>
</div>
</div>
</div>
<!-- Edit zone -->
<div class="container-fluid tab-content edit-zone-holder"></div>
</div>
</div>
You can do this with JavaScript using the onchangeevent event to enable/disable button based on checked value
<input type="checkbox" onchange="document.getElementById('uploadButton').disabled = !this.checked;" />
<input type="submit" id="uploadButton" value=" Upload " />
you can disable and enable buttons with jQuery depending on the checkbox selection.
If you have:
<input type="checkbox" id="checkbox"/>
<button id="upload">Upload</button>
Then in your jQuery:
$("#upload").prop('disabled', true);
$("#checkbox").bind('change', function(){
var checked = this.checked;
if(checked){
$("#upload").prop('disabled', false);
} else {
$("#upload").prop('disabled', true);
}
});
JSFiddle
add a checkbox
<input type="checkbox" name="chk" id="chk" value="yourvalue">
add onclick event in your upload button
<button type="button" onclick="selected()">upload</button>
<script>
function selected()
{
if(document.getElementById('chk').checked) {
document.getElementById("fileupload").submit();
} else {
alert('YOUR CUSTOM MESSAGE');
}
}
</script>
Try this:
Add this in your html form.
<input type="checkbox" name="writeSomeName" value="value">
Then after that write some php code:
if ($_POST['writeSomeName'] == 'value')
{
//Add code for upload file here
}
else
{
echo "You have not checked the checkbox. Please make it check first"
}
I have an issue with jQuery & jEasyUI working together. In my code I have a button that when it is clicked it adds a new col-sm-3 to a row div. When I begin dragging around into the droppable nothing happens, although I'm suppose to see an alert. I played around and got it to work by calling .droppable() on newly added columns. That's where things began to get strange. The draggables started disappearing from their positions in the list. It was obvious that jQuery and JEasyUI are not playing well. JEasyUI has it's own draggable & droppable functions but there isn't anything written on how they could be applied to dynamically loaded DOM elements.
Code dynamically added:
This is HTML that I dynamically add to a row
<div class="col-sm-4" >
<div class="box options-list">
<div class="box-header with-border">
<h3 class="box-title"></h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<input class="form-control" placeholder="Name">
<div class="row">
<div class="col-xs-6">
<div id='validate-checkbox' class="checkbox icheck">
<label>
<label for="validate-checkbox"></label>
<input class="validate-checkbox" name="is_disabled" type="checkbox"> Validate
</label>
</div>
</div>
<div class="col-xs-6">
<div id='conform-value-checkbox' class="checkbox icheck">
<label>
<label for="conform-value-checkbox"></label>
<input class="validate-checkbox" name="is_disabled" type="checkbox"> Conform
</label>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<ul class="">
</ul>
</div>
</div>
</div>
</div>
</div>
Static:
The element where the new element is appended to is <div class="row" id="sortable">
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
.col-sm-4 .ui-sortable-placeholder {
background: red;
}
</style>
<div class="box">
<div class="box-body">
<div class="row">
<div class="col-md-6">
<?= $this->Form->input('name', ['placeholder' => 'Enter part name']) ?>
</div>
<div class="col-lg-6">
<?= $this->Form->input('description', ['placeholder' => '(Optional)']) ?>
</div>
</div>
<div class="row">
<div class="col-md-8">
<?= $this->Form->input('item_part_type_id', ['label' => 'Type']) ?>
</div>
<div class="col-md-4">
<label for="has-validation-checkbox"></label>
<div id='has-validation-checkbox' class="checkbox icheck">
<label>
<input class="has-validation-checkbox" name="has_validation" type="checkbox"> Force Validation
</label>
</div>
</div>
</div>
</div>
</div>
<div class="box">
<div class="box-header with-border">
<h3 class="box-title"><strong>Part Editor</strong></h3>
</div>
<div class="box-body">
<div class="row">
<div class="col-xs-12">
<div class="easyui-layout" style="width:100%;height:400px;">
<div data-options="region:'east',split:true" title="Existing Miniparts" style="width:20%;">
</div>
<div data-options="region:'west',split:true" title="Options" style="width:20%;">
<ul class="list-group" id="options-list">
<li class=" bg-black-gradient list-group-item">
Text<span class="pull-right"><i class="fa fa-cog"></i></span>
</li>
<li class="bg-black-gradient list-group-item">
Textarea
</li>
<li class="bg-black-gradient list-group-item">
List
</li>
<li class="bg-black-gradient list-group-item">
Fabric
</li>
<li class="bg-black-gradient list-group-item">
Multi Fabric
</li>
<li class="bg-black-gradient list-group-item">
Buyin Code
</li>
<li class="bg-black-gradient list-group-item">
Buyin Supplier
</li>
</ul>
</div>
<div id="here" data-options="region:'center',title:'Miniparts'" style="width: 60%; padding:5px;" class="bg-black-gradient" >
<div class="row" id="sortable">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-footer">
<button id="add-part-btn" class="btn btn-primary btn-sm pull-right"><i class="fa fa-plus"></i> Add Part</button>
</div>
</div>
<div class="well clearfix">
<div class="pull-right">
<button class="btn btn-default btn-md"><i class="fa fa-times"></i> Discard Changes</button>
<button class="btn btn-primary btn-md"><i class="fa fa-save"></i> Save Changes</button>
</div>
</div>
<script>
/*
Each time this is triggered a new element is to be
added to the sortable <div class="row">. The element then
accepts a droppable from a UL list */
$('#add-part-btn').click(function() {
$.get("<?= $this->Url->build(['action' => 'minipart']) ?>", function (data) {
var newElement = $(data);
$('#sortable').append(newElement);
$(newElement).droppable({
accept: '.list-group-item',
drop: function(e,ui)
{
alert("AahhH! my foot!");
}
})
});
});
$(function(){ // DOM Ready
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
/* If I put into the DOM Ready function above,the list item being dragged to behave strangely
* So I left it out here instead. */
$( ".list-group-item").draggable({
revert: true,
appendTo: '.easyui-layout',
helper: 'clone',
zIndex: 3
}).disableSelection();
</script>
My project has so many dependencies that I don't think you will be able to run the snippets probably, but if you want to go the extra mile and help me out on this then please download the following dependencies below:
jQuery >=1.11.x
jQueryUI jEasyUI latest version
AdminLTE 2.1.1 (A bootstrap 3 theme, https://github.com/almasaeed2010/AdminLTE)