We Keep Coding

Dropzone isn't working on Modal Showing through ajax

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.

How to change the Checkbox icon to behave like **indeterminate** with "+" and "-" Symbols

I have checkbox with its original behaviour. I wanted to add + and - symbols to it while expanding and collapsing those checkbox.
Can any one please tell me how can I achieve this ?
Following is my Code in jade:
.form-group
.checkbox#some-checkbox(style="margin-left: 10px;")
label(data-toggle='collapse', data-target='#collapseOne', aria-expanded='false', aria-controls='collapseOne')
input(type='checkbox')
| My Name
#collapseOne.collapse(aria-expanded='false')
.well1
.row
.col-sm-12.col-lg-12
.nutrition-category
.row.header3.margin-left-10
.row.paragraph
.col-xs-6(style="font-size: 18px;") New Name
Non Jade (HTML) Code:
<div class="form-group">
<div class="checkbox" id="some-checkbox" style="margin-left: 10px">
<label data-toggle="collapse" data-target="#collapseOne" aria-
expanded="false" aria-controls="collapseOne">
<input type="checkbox"/> My Name
</label>
</div>
</div>
<div class="collapse" id="collapseOne" aria-expanded="false">
<div class="well1">
<div class="row">
<div class="col-sm-12 col-lg-12">
<div class="nutrition-category">
<div class="row header3 margin-left-10">
<div class="row paragraph">
<div class="col-xs-6" style="font-size: 18px"> New
Name</div>
</div>
</div>
</div>
</div>
</div>
and here is the javascript that i have used for it:
script(type='text/javascript').
$(document).ready(function() {
$("#some-checkbox").prop("indeterminate", true);
});

get div with specific class before form input

I have:
<div class="col-md-3 col-centered survey-kind-border">
<a class="lv-item" href="#">
<div class="media">
<label for="no" class="pull-left">
<div class="survey_kind_choice">
1.5
</div>
<input checked="checked" class="survey_kind_input" id="no" type="radio" value="no">
</label>
<div class="media-body">
<div class="lv-title">
No
</div>
<small class="lv-small">
I will Not
</small>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-centered ">
<a class="lv-item" href="#">
<div class="media">
<label for="yes" class="pull-left">
<div class="survey_kind_choice">
2.5
</div>
<input class="survey_kind_input" id="yes" type="radio" value="yes">
</label>
<div class="media-body">
<div class="lv-title">
Yes
</div>
<small class="lv-small">
I will
</small>
</div>
</div>
</a>
</div>
When someone goes to this page, one of the radio buttons will usually already be selected. If the button is selected, I want to grab the div that is associated with that form element and has the class "survey_kind_choice" and add a class to it. I am trying to do that with this code:
if($('.survey_kind_input').is(':checked')){
alert('there is a checked element');
$(this).prev('.survey_kind_choice').addClass('current_choice');
}
The alert is working, but I can't get the class to be added. What am I doing wrong and how do I fix it?

No if statement needed, just execute the selector on the checked input with:
$('.survey_kind_input:checked').prev('.survey_kind_choice').addClass('current_choice');
jsFiddle example

jQuery & JEasyUI dynamic droppable element

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)

Twitter bootstrap : Expand with span12 on button click

I am using bootstrap for my project.
It is the structure i am following to design layout-
<div class="row-fluid">
<div class="expand-this">
<div class="span8">
<div class="row-fluid">
<div class="span6 pull-left">
<b>Display Name</b>
</div>
<div class="span6 pull-right">
<input type="text"/>
</div>
</div>
</div>
</div>
<div class="hide-accordion">
<div class="span4">
<div class="block">
...some information..
</div>
</div>
</div>
<button class="button-hiding"></button>
Here you can see i am aligning two block in a row. Second span in row-fluid with span4 Is taking dynamic values.
So i am trying to hide it with button.
jQuery-
$('.hide-accordion').hide();
$(function () {
$('.button-hiding').click(function () {
$('.hide-accordion').toggle(this);
});
});
This is what working fine.
I am hiding this accordion on window load.
What i want-
I want span8 to take full width with span12 when accordion is hidden and as soon as i click on button, accordion appears. then it should be taking original span8 width.
I tried this too with jQuery-
$('.hide-accordion').hide();
$(function () {
$('.button-hiding').click(function () {
$('.hide-accordion').toggle(this);
$('.Expand-this>div .span8').removeClass('span8');
$(this).addClass('span12');
});
});
But no luck, help?

Try with this,
HTML:-
<div class="row-fluid">
<div class="span8 expand-this">
<div class="row-fluid">
<div class="span6 pull-left">
<b>Display Name</b>
</div>
<div class="span6 pull-right">
<input type="text"/>
</div>
</div>
</div>
<div class="span4 hide-accordion">
<div class="block">
...some information..
</div>
</div>
<div>
<button class="button-hiding"></button>
And Jquery:-
$(function () {
$('.hide-accordion').hide();
$(".expand-this").removeClass("span8").addClass("span12")
$('.button-hiding').click(function () {
if($(".expand-this").hasClass('span8')){
$(".expand-this").removeClass("span8").addClass("span12")
}else{
$(".expand-this").removeClass("span12").addClass("span8")
}
$('.hide-accordion').toggle();
});
});