I make my own autocomplete in html, I use ng-repeat to show the suggestion. this is the code:
<div content-for="title">
<span>Add Friend</span>
</div>
<div class="scrollable">
<div class="scrollable-content">
<div class="list-group">
<div class="list-group-item">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email</label>
<input type="text" class="form-control" data-ng-model="add.email" id="exampleInputEmail2" placeholder="Email" auto-complete autocomplete="off"/>
<div href="#" ng-repeat="x in cobas | filter:add.email">
<div class="media-body" ng-if="add.email.length > 0">
<h5 class="list-group-item media">{{x.name}}
</div></div>
</div>
<button type="submit" class="btn btn-default" data-ng-click="addfriends()">Add</button>
</form>
</div>
</div>
</div>
</div>
what I want is, when I click the suggestion result, the value of that textbox is change to the suggestion result using ng-click, can someone help me?
You have to add function in your controller, like below:
$scope.autocomplete = function (completeText) {
$scope.add.email = completeText;
};
and then in html call the function on ng-click like below,
<div href="#" ng-repeat="x in cobas | filter:add.email" ng-click="autocomplete(x.name)">
<div class="media-body" ng-if="add.email.length > 0">
<h5 class="list-group-item media">{{x.name}}</h5
</div>
</div>
Related
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.
I have this code
$(".filter-tag-group .tag-group .show_filter_content").on('click', function() {
var $icon = $(this).find('i').toggleClass('fa-plus fa-minus');
var $group = $icon.closest('.tag-group');
$group.find('.filter-title').toggleClass('active');
$group.find('.filter-content').toggle();
});
which the result is:
As you see all my groups are open by default, I want them to be closed when page loads (default).
HTML
<div class="collection-leftsidebar sidebar col-sm-3 clearfix">
<div class="sidebar-block filter-block">
<div class="sidebar-title">
<span>{{ __('Advanced Search') }}</span>
<i class="fa fa-caret-down show_sidebar_content" aria-hidden="true"></i>
</div>
<div id="tags-filter-content" class="sidebar-content">
<div class="filter-tag-group">
//this is the part that looping (need to be closed)
<div class="tag-group">
<p class="title">
<span class="filter-title show_filter_content">{{ __('Price Range') }} <span class="pull-right"><i class="fa fa-minus"></i></span></span>
</p>
<div class="row filter-content">
<div class="col-md-6">
<div class="form-group">
<label for="min_price" hidden>{{ __('Min') }}</label>
<input type="text" name="min_price" class="form-control" placeholder="Rp Min">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="max_price" hidden>{{ __('Max') }}</label>
<input type="text" name="max_price" class="form-control" placeholder="Rp Max">
</div>
</div>
</div>
</div>
</div>
</div>
which part of my script should I change to achieve that?
How about hide it by css. coz css will load first than javascript/jquery. So in your case you want to hide it by default so you must done it by css.
.[class-name here] {
display: none;
}
.[class-name here].active {
display: block;
}
I have an accordion that has a form inside. When a button inside each accordion is clicked, it retrieves title and query contents of the same accordion.
https://jsfiddle.net/rkdrfj4y/3/ this is a demonstration of what I am attempting to do.
The problem is that the first accordion always returns undefined form input value. All the other subsequent accordions return the expected values. I don't understand how this can happen because identical js code is used for each accordion.
HTML
<form>
<div class="form-group">
<label for="exampleTextarea">Global Templates</label>
<div class="panel-group" id="accordion-global">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="title-anchor" data-toggle="collapse"
data-parent="#accordion-global" href="#collapse-global-0">
title</a>
</h4>
</div>
<div id="collapse-global-0" class="panel-collapse collapse">
<div class="panel-body">
<form class="query-form">
<div class="form-group">
<label for="template-title">Template Title</label>
<input type="text" class="form-control template-title" name="template-title" value="title">
</div>
<div class="form-group">
<label for="template-query">Template Query</label>
<textarea class="form-control template-query" name="template-query" onkeyup="textAreaAdjust(this)">query</textarea>
</div>
</form>
<input class="query-id" type="hidden" value="_id">
<button class="btn btn-info apply-template-btn">Save
</button>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="title-anchor" data-toggle="collapse"
data-parent="#accordion-global" href="#collapse-global-1">
title</a>
</h4>
</div>
<div id="collapse-global-1" class="panel-collapse collapse">
<div class="panel-body">
<form class="query-form">
<div class="form-group">
<label for="template-title">Template Title</label>
<input type="text" class="form-control template-title" name="template-title" value="title">
</div>
<div class="form-group">
<label for="template-query">Template Query</label>
<textarea class="form-control template-query" name="template-query" onkeyup="textAreaAdjust(this)">query</textarea>
</div>
</form>
<input class="query-id" type="hidden" value="_id">
<button class="btn btn-info apply-template-btn">Save
</button>
</div>
</div>
</div>
</div>
</div>
</form>
JS
$('.apply-template-btn').click(function (e) {
e.preventDefault();
let id = $(this).siblings('.query-id').val();
let title = $(this).siblings('.query-form').find('.template-title').val();
let query = $(this).siblings('.query-form').find('.template-query').val();
console.log([id,title,query])
alert(title) //undefined for first accordion but works for all other subsequent accordions
$.post('/api/database/query_template/update', {id,title,query}, function (data) {
console.log(data)
})
});
Change the below existing lines:
let title = $(this).siblings('.query-form').find('.template-title').val();
let query = $(this).siblings('.query-form').find('.template-query').val();
to
let title = $(this).parent().find(".template-title").val();
let query = $(this).parent().find(".template-query").val();
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 am familiar with Javascript and Jquery, but fairly new to angular. I have used jquery in the past with angular, but this application that I inherited is causing my severe grief.
I click on button and get:
Uncaught ReferenceError: addComment is not defined
Code:
<div ng-controller="TipsCtrl" class="container" id="tips">
<div class="grid" style="margin-bottom: 0" >
<div class="col-1-4">
</div>
<div style="text-align: center" class="col-1-2">
<label class="text-blue text-center">Sort By:</label>
<select style="width:30%" ng-init="order='created'" class="input" ng-model="order">
<option value="created">Date Created</option>
<option value="createdBy">Created By</option>
<option value="getCategory()">Category</option>
</select>
<button data-tooltip="Reverse the sorting order."
class="btn-blue" ng-click="reverse=!reverse">Reverse</button>
</div>
<div class="col-1-4 text-right">
<button ng-click="createEmptyTip()" style="vertical-align: bottom" class="btn-blue">Add</button>
</div>
</div>
<div class="col-1-1" ng-if="!!error">
<div class="panel">
<span class="text-red">Error:</span> {{ error }}
</div>
</div>
<div update="resultsUpdated" paginate="page in tips" order="order" reverse="reverse" url="true">
<div style="margin-bottom: 20px">
<div paginate-controller></div>
</div>
<div ng-repeat="tip in page" class="tip"
id="tip-{{ tip.id }}" async-anchor async-anchor-delay="500">
<div class="grid">
<div class="col-1-2">
<h3>
<span class="text-red" ng-if="tip.isNew()"><b>New:</b></span>
{{ tip.title }}
<div>Category: {{ tip.getCategory() }}</div>
</h3>
</div>
<div class="col-1-2 text-right">
<span>Posted by</span>
<span class="text-blue">{{ tip.createdBy }}</span>
<span>on {{ tip.created | date:'shortDate' }}</span>
<span>{{ tip.created | date:'H:mm' }}</span>
</div>
<div class="col-1-1">
<pre>{{ tip.body }}</pre>
</div>
<div class="col-3-4">
<ul ng-if="tip.attachments.length > 0" class="attachment-list">
<li ng-repeat="attachment in tip.attachments">
{{ attachment.name }}
</li>
</ul>
<div class="col-1-1">
</div>
<div class="col-1-1">
Angular Add Comment
<button onclick="addComment();" id="addcomment/{{tip.id}}" class="btn-yellow">Add Comment</button>
</div>
</div>
<!---->
<div class="col-1-4 text-right" ng-if="tip.createdBy == user.ntid">
<a href="#/tips/edit/{{ tip.id }}?paginatePage={{ params.paginatePage }}" class="btn-yellow" >Edit</a>
<!--Delete0-->
<button ng-ask="deleteTip(tip)" title="Delete"></button>
</div>
</div>
</div>
<div style="margin-top: 20px">
<div paginate-controller></div>
</div>
</div>
</div>
I call in the code the addComment() function ( I tried jquery first )
<script>
function addComment() {
console.log('in');
}
</script>
Try moving the function out of the markup and into the controller...
...inside TipsCtrl...
$scope.addComment = function() {
console.log('in');
};