I'm using select2 for typeahead. The functionaity works fine but it distorts my input fields.
For example this code
<div class="container">
<div class="card">
<div class="card-header">Search for a Property</div>
<div class="card-body">
<div class="row">
<!-- County Column -->
<div class="col-md-3">
<select class ="form-control" id="county" name="county">
<!--Gets all counties from DB -->
<option> - Select a County - </option>
#foreach ($county as $counties)
<option>{{$counties->name}}</option>
#endforeach
</select>
</div>
<div class="col-md-3">
<select class="town form-control" name="town">
</select>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('.town').select2({
placeholder: 'Select an item',
ajax: {
url: '/townsearch',
dataType: 'json',
delay: 250,
processResults: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.name,
id: item.name
}})};},
cache: true
}});
</script>
Will produce the following
Image of two dropdowns.
Dropdown 1 is the way I want it. Dropdown 2 is the effect of select2. Any fixes?
Related
I would like to define a custom element and attach it in a shadow dom. This element use alpine and bootstrap4 and must be graphically isolated from the rest of the dom. Alpine must be included and used directly inside the webcomponent (not in the light dom).
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<script defer src="//unpkg.com/alpinejs#3.9.3/dist/cdn.min.js"></script>
<div class="container" x-data="my_component">
<div class="row">
<div class="col-lg-2 col-md-4">
<div class="form-group">
<label for="sel1">Sel 1</label>
<select id="sel1" class="form-control" x-model="sel1">
<option value="" disabled>Sel 1</option>
<template x-for="{label, id} in optsSel1" :key="id">
<option
x-text="label"
x-bind:value="id"
x-bind:selected="id === sel1"
></option>
</template>
</select>
</div>
</div>
</div>
<div class="row mt-xs-3 mt-sm-3">
<div class="col-lg-12 text-center">
<button class="btn btn-warning btn-lg btn-block" #click="notify">
Submit
</button>
</div>
</div>
</div>
<script>
const optsSel1 = [{
id: "AF",
label: "Afghanistan"
},
{
id: "AL",
label: "Albania"
},
{
id: "DZ",
label: "Algeria"
}
];
document.addEventListener("alpine:init", () => {
Alpine.data("my_component", () => ({
optsSel1,
sel1: "AF",
notify() {
const data = new URLSearchParams({
sel1: this.sel1
});
alert(data);
}
}));
});
</script>
I tried to wrap the code above in a template tag and define a custom element.
Graphically is ok, bootstrap seems to work.
JS works too indeed on alpine:init an alert is shown.
But all the logic defined in alpine that interact with the dom seems to not working:
select's options are empty;
click on submit button has no effect.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>
<button class="btn btn-warning btn-lg btn-block">button outside</button>
<my-component />
</div>
<template id="my-component_tpl">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.4.1/dist/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<script defer src="//unpkg.com/alpinejs#3.9.3/dist/cdn.min.js"></script>
<div class="container" x-data="my_component">
<div class="row">
<div class="col-lg-2 col-md-4">
<div class="form-group">
<label for="sel1">Sel 1</label>
<select id="sel1" class="form-control" x-model="sel1">
<option value="" disabled>Sel 1</option>
<template x-for="{label, id} in optsSel1" :key="id">
<option
x-text="label"
x-bind:value="id"
x-bind:selected="id === sel1"
></option>
</template>
</select>
</div>
</div>
</div>
<div class="row mt-xs-3 mt-sm-3">
<div class="col-lg-12 text-center">
<button class="btn btn-warning btn-lg btn-block" #click="notify">
Submit
</button>
</div>
</div>
</div>
<script>
const optsSel1 = [{
id: "AF",
label: "Afghanistan"
},
{
id: "AL",
label: "Albania"
},
{
id: "DZ",
label: "Algeria"
}
];
document.addEventListener("alpine:init", () => {
alert("alpine:init " + JSON.stringify(optsSel1, null, 2));
Alpine.data("my_component", () => ({
optsSel1,
sel1: "AF",
notify() {
const data = new URLSearchParams({
sel1: this.sel1
});
alert(data);
}
}));
});
</script>
</template>
<script>
customElements.define(
"my-component",
class extends HTMLElement {
connectedCallback() {
const shadow = this.attachShadow({
mode: "open"
});
const tpl = document.getElementById("my-component_tpl");
shadow.appendChild(tpl.content);
}
}
);
</script>
</body>
</html>
What'is wrong? Thanks in advance!
You should add
document.addEventListener("alpine:initialized",()=>{
Alpine.initTree(this.shadowRoot)
})
to the connectedCallback function.
Alpine's mutation observer can't see what's inside a shadow dom, so you have to manually initialize it.
See your snippet fixed
I am using the below code, and my problem is that when I select the first time then the location list is not loading. When I select the second item then the first item in the sublist gets populated. If I select third then the second subitem gets populated.
I'm sure I'm making a silly mistake somewhere.
<div class="form-group">
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-5">
<label for="">SELECT CLIENT</label>
<select type="search" id="myarray" class="select2-select req selectpicker form-control" data-required="1" data-max-options="1" data-live-search="true" multiple="" name="myarray[]" title="Select a Client">
<?php echo $Clients; ?>
</select>
</div>
</div>
</div>
<script>
jQuery(".select2-select").change(function() {
var selected = $(this).val();
$(".selectpicker").selectpicker();
$.ajax({
url: "<?php echo base_url(); ?>login/getDataFromLocation",
data: {
type: 'select',
selected: selected
},
type: 'post',
success: function(output) {
if (output) {
//$('#append').append(output);
$(".selectpicker").selectpicker();
$('#multiple').selectpicker('refresh').empty().append(output);
}
}
});
});
</script>
<div class="form-group">
<div class="row">
<div class="form-group col-md-5">
<label for="multiple">LOCATION</label>
<select id="multiple" class="form-control req selectpicker select2-select" data-required="1" name="Location[]" title="Select a Location" multiple></select>
</div>
</div>
</div>
Problem has been resolved and the problem was refreshing the value from list.
$("#creatives").selectpicker('refresh').empty().append(output).selectpicker('refresh').trigger('change');
Used .trigger('change')
Thanks a lot for everyone's input here.
Layout -> View -> Partial View
In the View:
<div class="col-md-8">
#{Html.RenderPartial("_komentari", commentlist);}
<div class="gap gap-small"></div>
<div class="box bg-gray">
<h3>#Res.commentwrite_title</h3>
#using (Ajax.BeginForm("postcomment", new { propertyid = Model.PublicID }, new AjaxOptions { UpdateTargetId = "commentsarea", HttpMethod = "Post", InsertionMode = InsertionMode.Replace }, null))
{
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label>#Res.commentwrite_content</label>
<textarea id="comment" name="comment" class="form-control" rows="6"></textarea>
</div>
<div class="form-group">
<input class="btn btn-primary" type="submit" value='#Res.commentwrite_btn' />
</div>
</div>
</div>
}
</div>
</div>
In the Partial View:
<div id="commentsarea">
<ul class="booking-item-reviews list">
#if (Model != null)
{
foreach (Comment item in Model)
{
<li>
<div class="row">
<div class="col-md-2">
<div class="booking-item-review-person">
<a class="booking-item-review-person-avatar round" href="#">
<img src="/assets/img/70x70.png" alt="Image Alternative text" title="Bubbles" />
</a>
<p class="booking-item-review-person-name">
#if (item.UserId != null)
{
<a href='#Url.Action("details", "user", new { userid = item.User.PublicId })'>#item.User.Username</a>
}
else
{
Anonymous
}
</p>
</div>
</div>
<div class="col-md-10">
<div class="booking-item-review-content">
<p>
#item.Content
</p>
<p class="text-small mt20">#item.DateOnMarket</p>
<p class="booking-item-review-rate">
#using (Ajax.BeginForm("reportcomment", new { comment = item.PublicId }, new AjaxOptions { UpdateTargetId = "reportscount", HttpMethod = "Post", InsertionMode = InsertionMode.Replace }, null))
{
<a id="submit_link" href="#">Spam?</a>
<a class="fa fa-thumbs-o-down box-icon-inline round" href="#"></a>
}
<b id="reportscount" class="text-color">#item.CommentReports.Count</b>
</p>
</div>
</div>
</div>
</li>
}
}
</ul>
</div>
<script>
$(function () {
$('a#submit_link').click(function () {
$(this).closest("form").submit();
});
});
</script>
View
Both scripts for Ajax are always included in the Layout (I'm already using Ajax on other pages too). On the View page, when I add a new comment, it is added in the database and shows the updated list of comments via ajax. Everything works fine.
Partial View
But if I want to report the comment as spam, I have to click on the link inside the Partial View (#submit_link), and after reporting, inside the #reportscount part, I want to show the updated number of reports of that comment. The actionresults returns that number like Content(numberofreports.toString()). It works but I get the number in a blank page?
Thank you very much.
It's better if you don't. The main issue is that, for security reasons, <script> tags are ignored, when HTML is inserted into the DOM. Since the Ajax.* family of helpers work by inserting <script> tags in place, when you return the partial via AJAX, those will not be present. It's better if you only include the HTML contents of the form in the partial, and not the form itself.
I have a view (refer below code) , but the datetimepicker is stretching , now to removed the stretching. May be this is due to the bootstrap table . Need some guide to display the datetimepicker in the elegant way.
<div class="container">
<div class="clearfix"></div>
#using (Html.BeginForm("Create", "DoctorPayment"))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset>
#*<legend>DoctorPayment</legend>*#
<div class="panel">
<div class="panel-body">
...
<div class="row">
<div class="col-lg-3 pull-left">
<div class="editor-label">
#Html.LabelFor(model => model.PaymentDate)
</div>
</div>
<div class="col-lg-9">
<div class="editor-field">
#Html.EditorFor(model => model.PaymentDate)
#Html.ValidationMessageFor(model => model.PaymentDate)
</div>
</div>
<div class="col-lg-1">
</div>
</div>
<div style="margin-top: 5px"></div>
....
</div>
<p>
<input type="submit" value="Create" />
</p>
</div>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
....
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
#Styles.Render("~/Content/boostrap")
#Scripts.Render("~/bundles/jqueryui")
#Styles.Render("~/Content/cssjqryUi")
<script type="text/javascript">
$(document).ready(function () {
$('input[type=datetime]').datepicker({
dateFormat: "dd/M/yy",
changeMonth: true,
changeYear: true,
yearRange: "-60:+0"
});
});
$('#PaymentDate').datepicker({
showButtonPanel: false,
beforeShow: function () {
$(".ui-datepicker").css('font-size', 12)
}
});
$("#PaymentDate").click(function () {
$("#ui-datepicker-div")
// BTW, min-width is better:
.css("min-width", $(this).outerWidth() + "px");
});
</script>
}
}
</div>
I have included bootstrap to it.
I believe that you might have overwritten something in css, or added some atributes.
Try this and see if it works.
$("#dropdown").closest("span.k-dropdown").width(400);
If it does, try to add a custom class to the datepicker so that you don't edit all dropdowns.
Also, changing the font size will change the size of the datepicker.
$('#PaymentDate').datepicker({
showButtonPanel: false,
beforeShow: function () {
$(".ui-datepicker").css('font-size', 12)
}
});
$("#PaymentDate").click(function () {
$("#ui-datepicker-div")
.css("max-width", $(this).outerWidth() + "px");
});
I have abround 6000 documents in my mongo collection, which I need to load up into meteor client upon app startup.
In my routes (located under app/client), I have this:
Router.map(function() {
this.route('home', {
path: '/',
template: 'dashboardWrapper',
waitOn: function() {
return Meteor.subscribe('nasdaq');
},
cache: true
});
});
My dashboardWrapper template looks like this:
<template name="dashboardWrapper">
{{#if Template.subscriptionsReady}}
{{> dashboard}}
{{/if}}
</template>
My dashboard template looks like this:
<template name="dashboard">
<div class="container">
<h2>Priority - 1 Incidents Over Time</h2>
<div class="row">
<div id="yearly-bubble-chart" class="dc-chart">
<strong>Yearly Performance</strong> (radius: fluctuation/index ratio, color: gain/loss)
</div>
</div>
<div class="row">
<div id="gain-loss-chart">
<strong>Days by Gain/Loss</strong>
<a class="reset" href="javascript:gainOrLossChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<div id="quarter-chart">
<strong>Quarters</strong>
<a class="reset" href="javascript:quarterChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<div id="day-of-week-chart">
<strong>Day of Week</strong>
<a class="reset" href="javascript:dayOfWeekChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<div id="fluctuation-chart">
<strong>Days by Fluctuation(%)</strong>
<span class="reset" style="display: none;">range: <span class="filter"></span></span>
<a class="reset" href="javascript:fluctuationChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div id="monthly-move-chart">
<strong>Monthly Index Abs Move & Volume/500,000 Chart</strong>
<span class="reset" style="display: none;">range: <span class="filter"></span></span>
<a class="reset" href="javascript:moveChart.filterAll();volumeChart.filterAll();dc.redrawAll();"
style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div id="monthly-volume-chart">
</div>
<p class="muted pull-right" style="margin-right: 15px;">select a time range to zoom in</p>
</div>
<div class="row">
<div>
<div class="dc-data-count">
<span class="filter-count"></span> selected out of <span class="total-count"></span> records | Reset All
</div>
</div>
<table class="table table-hover dc-data-table">
</table>
</div>
<div class="clearfix"></div>
</div>
</template>
The relevant part of Meteor.client looks like this:
if (Meteor.isClient) {
var ndx,data;
Template.dashboardWrapper.onCreated( function() {
var template = this;
template.subscribe("nasdaq");
});
Template.dashboard.onCreated( function() {
data = Nasdaq.find().fetch();
ndx = crossfilter(data);
});
Template.dashboard.onRendered(function(){
var self = this;
self.subscribe("nasdaq", function() {
self.autorun(function() {
data = Nasdaq.find().fetch();
});
});
What I expect from this, is for the dashboard template to wait until all the data from the Nasdaq collection loads up.
What happens is absolutely nothing - no data and no errors.
If I remove ironRounter all together, and refresh, I can get a couple of dozen records (out of 6000 total).
Is there a way reliably force the app to wait until every single document loads up?
Try subscribe right before load the current template, may be it will work.
Router.route('/dashboardWrapper/:_id', {
name: 'dashboardWrapper',
waitOn: function () {
return [
Meteor.subscribe('nasdaq')
];
},
data: function () {
return Nasdaq.findOne(this.params._id);
}
});