I am using FancyBox 3 , i need to pass data to the afterClose and trigger this data after closing the Iframe .
<a data-fancybox data-type="iframe"
data-src="{{route('tbl_properties.getApartmentsForLegal3',[$property->id,$group_id])}}"
href="javascript:;" type="button" class="btn btn-info " title="Show Apartments" data-reference="{{$property->property_reference}}">
<i class="nav-icon i-Home-Window fa-4x "></i>
</a>
jquery :
$('[data-fancybox]').fancybox({
property_reference :$(this).data('reference'),
iframe: {
preload: false
},
fullScreen: {
autoStart: true
},
afterClose: function(instance, slide ,property_reference) {
alert(property_reference);
window.location.reload();
}
});
the data is the property_reference.
thanks
current.opts.$orig will be reference to current trigger element (e.g., your link), and you can use that to retrieve custom data, example:
$('[data-fancybox]').fancybox({
iframe: {
preload: false
},
fullScreen: {
autoStart: true
},
afterClose: function(instance, current) {
alert(current.opts.$orig.data('reference'));
}
});
Demo - https://codepen.io/anon/pen/bPKVpB?editors=1010
Related
So i am using bootstrap-vue, and precisely i am using the Form-tag as it's what i exactly needs. The issue is that the dropdown is as the long as the list of options.
Here's what i mean :
Tag button
& the
Dropdown
What i actually want is a similar css to overflow:scroll but i can't seem to make it work.
here's the code :
<template>
<div>
<b-form-group label="Tagged input using dropdown">
<b-form-tags v-model="value" no-outer-focus class="mb-2">
<template v-slot="{ tags, disabled, addTag, removeTag }">
<ul v-if="tags.length > 0" class="list-inline d-inline-block mb-2">
<li v-for="tag in tags" :key="tag" class="list-inline-item">
<b-form-tag
#remove="removeTag(tag)"
:title="tag"
:disabled="disabled"
variant="info"
>{{ tag }}</b-form-tag>
</li>
</ul>
<b-dropdown size="sm" variant="outline-secondary" block menu-class="w-100">
<template v-slot:button-content>
<b-icon icon="tag-fill"></b-icon> Choose tags
</template>
<b-dropdown-form #submit.stop.prevent="() => {}">
<b-form-group
label-for="tag-search-input"
label="Search tags"
label-cols-md="auto"
class="mb-0"
label-size="sm"
:description="searchDesc"
:disabled="disabled"
>
<b-form-input
v-model="search"
id="tag-search-input"
type="search"
size="sm"
autocomplete="off"
></b-form-input>
</b-form-group>
</b-dropdown-form>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item-button
v-for="option in availableOptions"
:key="option"
#click="onOptionClick({ option, addTag })"
>
{{ option }}
</b-dropdown-item-button>
<b-dropdown-text v-if="availableOptions.length === 0">
There are no tags available to select
</b-dropdown-text>
</b-dropdown>
</template>
</b-form-tags>
</b-form-group>
</div>
</template>
<script>
export default {
data() {
return {
options: ['Apple', 'Orange', 'Banana', 'Lime', 'Peach', 'Chocolate', 'Strawberry'],
search: '',
value: []
}
},
computed: {
criteria() {
// Compute the search criteria
return this.search.trim().toLowerCase()
},
availableOptions() {
const criteria = this.criteria
// Filter out already selected options
const options = this.options.filter(opt => this.value.indexOf(opt) === -1)
if (criteria) {
// Show only options that match criteria
return options.filter(opt => opt.toLowerCase().indexOf(criteria) > -1);
}
// Show all options available
return options
},
searchDesc() {
if (this.criteria && this.availableOptions.length === 0) {
return 'There are no tags matching your search criteria'
}
return ''
}
},
methods: {
onOptionClick({ option, addTag }) {
addTag(option)
this.search = ''
}
}
}
</script>
If you could please help me... Thank you
Well, i did it with adding a div with the following css
#test{
max-height:500px;
overflow:auto;
}
here's the code if anyone need it :
<template>
<div>
<b-form-group label="Tagged input using dropdown">
<b-form-tags v-model="value" no-outer-focus class="mb-2">
<template v-slot="{ tags, disabled, addTag, removeTag }">
<ul v-if="tags.length > 0" class="list-inline d-inline-block mb-2">
<li v-for="tag in tags" :key="tag" class="list-inline-item">
<b-form-tag
#remove="removeTag(tag)"
:title="tag"
:disabled="disabled"
variant="info"
>{{ tag }}</b-form-tag>
</li>
</ul>
<b-dropdown size="sm" variant="outline-secondary" block menu-class="w-100">
<template v-slot:button-content>
<b-icon icon="tag-fill"></b-icon> Choose tags
</template>
<div id="test">
<b-dropdown-form #submit.stop.prevent="() => {}">
<b-form-group
label-for="tag-search-input"
label="Search tags"
label-cols-md="auto"
class="mb-0"
label-size="sm"
:description="searchDesc"
:disabled="disabled"
>
<b-form-input
v-model="search"
id="tag-search-input"
type="search"
size="sm"
autocomplete="off"
></b-form-input>
</b-form-group>
</b-dropdown-form>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item-button
v-for="option in availableOptions"
:key="option"
#click="onOptionClick({ option, addTag })"
>
{{ option }}
</b-dropdown-item-button>
<b-dropdown-text v-if="availableOptions.length === 0">
There are no tags available to select
</b-dropdown-text>
</div>
</b-dropdown>
</template>
</b-form-tags>
</b-form-group>
</div>
</template>
<script>
export default {
data() {
return {
options: ['Apple', 'Orange', 'Banana', 'Lime', 'Peach', 'Chocolate', 'Strawberry'],
search: '',
value: []
}
},
computed: {
criteria() {
// Compute the search criteria
return this.search.trim().toLowerCase()
},
availableOptions() {
const criteria = this.criteria
// Filter out already selected options
const options = this.options.filter(opt => this.value.indexOf(opt) === -1)
if (criteria) {
// Show only options that match criteria
return options.filter(opt => opt.toLowerCase().indexOf(criteria) > -1);
}
// Show all options available
return options
},
searchDesc() {
if (this.criteria && this.availableOptions.length === 0) {
return 'There are no tags matching your search criteria'
}
return ''
}
},
methods: {
onOptionClick({ option, addTag }) {
addTag(option)
this.search = ''
}
}
}
</script>
I have a datatable in an aspx page connected to an mssql database, I added a column with a button to open the modal in which I would like to show the results for the selected record. How do I pass the record id and run a sql query to show the fields that interest me?
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#dt1').DataTable({
"processing" : true,
"ajax" : {
"url" : "selectbasic.aspx",
dataSrc : ''
},
"columns" : [
{
"data": "ID",
},
{
"data" : "Name"
},
{
"data" : "Email"
},
{
"data" : "Address"
}, {
"data" : "UserType",
"render": function(data, type, row, meta){
if(type === 'display'){
if(data=="0"){
data="NO";
}else
{
data="SI";
}
data = data;
}
return data;
}
},
{ data : 'edit',
render : function(data, type, row) {
return '<center><a data-toggle="modal" data-target="#modaldetails"><i class="glyphicon glyphicon-edit"></i></a></center>'
}
},
]
});
</script>
<div class="modal fade" id="modaldetails" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" style="z-index: 100;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLongTitle">Edit</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
"show results here where ID=...."
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
In practice I would like to do what with php & mysql is done using $ _GET ['ID'] and mysql_fetch_assoc (), but in asp & mssql. Thank you
Do something like this:
$('#YourTable tbody').on( 'click', 'a', function () {
var data = '';
data = YourTable.row( $(this).parents('tr') ).data();
//to do this your table need to be declared like this
//yourTable= $('#YourTable').DataTable();
console.log(data);
var carId= data['id'];
console.log(carId);
})
if you have any issue check this post where i answered something similar JQ event didnt active on the extract row sort by datatable.js
Trying to use jquery.filer to upload images to my controller in asp.net mvc. Everything works as expected if I simply use the HTML file input type but once I enable the plugin it stops populating HttpPostedFileBase property.
After reading the documentation I couldn't find anyway of simply attaching the files to the input and uploading them on submit.
CONTROLLER
[HttpPost]
public ActionResult Create(IEnumerable<HttpPostedFileBase> files, ListingModel model)
{
return View(model);
}
JS
$("#filer_input").filer({
limit: 6,
maxSize: 5,
extensions: null,
changeInput: '<div class="jFiler-input-dragDrop"><div class="jFiler-input-inner"><div class="jFiler-input-icon"><i class="icon-jfi-cloud-up-o"></i></div><div class="jFiler-input-text"><h3>Drag&Drop files here</h3> <span style="display:inline-block; margin: 15px 0">or</span></div><a class="jFiler-input-choose-btn blue">Browse Files</a></div></div>',
showThumbs: true,
theme: "dragdropbox",
templates: {
box: '<ul class="jFiler-items-list jFiler-items-grid"></ul>',
item: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
<span class="jFiler-item-others">{{fi-size2}}</span>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<li>{{fi-progressBar}}</li>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
itemAppend: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
<span class="jFiler-item-others">{{fi-size2}}</span>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<li><span class="jFiler-item-others">{{fi-icon}}</span></li>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
progressBar: '<div class="bar"></div>',
itemAppendToEnd: true,
removeConfirmation: true,
_selectors: {
list: '.jFiler-items-list',
item: '.jFiler-item',
progressBar: '.bar',
remove: '.jFiler-item-trash-action'
}
},
dragDrop: {
dragEnter: null,
dragLeave: null,
drop: null
},
//uploadFile: {
// url: "./php/upload.php",
// data: null,
// type: 'POST',
// enctype: 'multipart/form-data',
// beforeSend: function(){},
// success: function(data, el){
// var parent = el.find(".jFiler-jProgressBar").parent();
// el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
// $("<div class=\"jFiler-item-others text-success\"><i class=\"icon-jfi-check-circle\"></i> Success</div>").hide().appendTo(parent).fadeIn("slow");
// });
// },
// error: function(el){
// var parent = el.find(".jFiler-jProgressBar").parent();
// el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
// $("<div class=\"jFiler-item-others text-error\"><i class=\"icon-jfi-minus-circle\"></i> Error</div>").hide().appendTo(parent).fadeIn("slow");
// });
// },
// statusCode: null,
// onProgress: null,
// onComplete: null
//},
addMore: false,
clipBoardPaste: true,
excludeName: null,
beforeRender: null,
afterRender: null,
beforeShow: null,
beforeSelect: null,
onSelect: null,
afterShow: null,
//onRemove: function(itemEl, file, id, listEl, boxEl, newInputEl, inputEl){
// var file = file.name;
// $.post('./php/remove_file.php', {file: file});
//},
onEmpty: null,
options: null,
captions: {
button: "Choose Files",
feedback: "Choose files To Upload",
feedback2: "files were chosen",
drop: "Drop file here to Upload",
removeConfirmation: "Are you sure you want to remove this file?",
errors: {
filesLimit: "Only {{fi-limit}} files are allowed to be uploaded.",
filesType: "Only Images are allowed to be uploaded.",
filesSize: "{{fi-name}} is too large! Please upload file up to {{fi-maxSize}} MB.",
filesSizeAll: "Files you've choosed are too large! Please upload files up to {{fi-maxSize}} MB."
}
}
});
HTML
<div class="form-group clearfix">
<div class="col-sm-12 padding-left-0 padding-right-0">
<input type="file" name="files" id="filer_input2" multiple="multiple">
</div>
</div>
It will not work if you are using drag&drop and uploadFile feature. If you want to get the files from <input type="file"> you will need to disable this 2 options in your jQuery.filer
I have been trying various methods to display data from a Meteor fetch within a React template. I don't fully understand why this is so hard to do.
When I use getMeteorData within the template it doesn't display the data when using {this.data.user._id}
getMeteorData() {
return {
user: Meteor.user()
};
},
This is the same story when using componentDidMount.
I have followed the react & meteor tutorial on the meteor website and they use props. This however feels a lot of work for simply pulling and fetching data.
This is an example of an attempt
export var MenuLoggedIn = React.createClass({
displayName: 'MenuLoggedIn',
mixins: [
Router.State, Router.Navigation
],
getMeteorData() {
return {
user: Meteor.user()
};
},
getInitialState(){
return {
avatarImagePreview: null,
avatarImage: null
};
},
render: function() {
return (
<div className="container">
<div className="menu-structure col-md-12">
{this.data.user._id}
<div className="left-menu pull-left">
<img className="logo" src="/img/logo.png"/>
<h1 className="eventburger-title">eventburger</h1>
</div>
<div className="right-menu">
<div className="search-bar">
<i className="fa fa-search"></i>
<input type="text" name="Search" placeholder="Harpist, Photographer, Caterer..."/>
</div>
{this.data
? <img src="/img/avatar.png"/>
: <img src="/img/placeholder-person.jpg"/>}
<span>{this.data}
Feeney</span>
<a href="/app/inbox">
<i className="fa fa-envelope"></i>
</a>
<a className="head-spacing" href="#" onClick={this.logout}>LOG OUT</a>
</div>
</div>
</div>
);
},
logout: function(e) {
e.preventDefault();
Meteor.logout();
window.location.href = "/login"; //Need to be moved to History
}
});
You need to use the ReactMeteorData mixin to make getMeteorData() work.
mixins: [
Router.State, Router.Navigation, ReactMeteorData
],
https://atmospherejs.com/meteor/react-meteor-data
I'm using MVC4,Kendo tabstrip along with jQuery Tooltipster for showing validation messages.
My issue is the validation message from Tab 1 is getting overlapped on Tab 2 due to z-index. I have tried setting z-index for tooltipster-base but isn't working.
My HTML code looks like something this:
<div id="tabstrip">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div><form id="myform">
<input type="text" name="field1" />
<input type="text" name="field2" />
<br/>
<input type="submit" />
</form></div>
<div><form id="myform2">
<input type="text" name="field3" />
<input type="text" name="field4" />
<br/>
<input type="submit" />
</form></div>
</div>
Script:
$(document).ready(function () {
var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabstrip.select(0);
// initialize tooltipster on text input elements
$('#myform input[type="text"]').tooltipster({
trigger: 'custom',
onlyOne: false,
position: 'right'
});
$('#myform2 input[type="text"]').tooltipster({
trigger: 'custom',
onlyOne: false,
position: 'right'
});
// initialize validate plugin on the form
$('#myform').validate({
errorPlacement: function (error, element) {
$(element).tooltipster('update', $(error).text());
$(element).tooltipster('show');
},
success: function (label, element) {
$(element).tooltipster('hide');
},
rules: {
field1: {
required: true,
email: true
},
field2: {
required: true,
minlength: 5
}
},
submitHandler: function (form) { // for demo
alert('valid form');
return false;
}
});
// initialize validate plugin on the form2
$('#myform2').validate({
errorPlacement: function (error, element) {
$(element).tooltipster('update', $(error).text());
$(element).tooltipster('show');
},
success: function (label, element) {
$(element).tooltipster('hide');
},
rules: {
field3: {
required: true,
email: true
},
field4: {
required: true,
minlength: 5
}
},
submitHandler: function (form) { // for demo
alert('valid form');
return false;
}
});
});
Please check this:
JSFiddle: http://jsfiddle.net/vishalvaishya/bCZWd/2/
Please help me for setting proper css style.
Found solution myself only. Might be helpful for someone.
Done some updation in tooltipster logic.
Added extra option (appendTo) to place tooltip over specific element only:
c = {
animation: "fade",
appendTo: "body",
arrow: true,
...
And changed parameter of tooltipster.appendTo('body') in showTooltip function like;
tooltipster.appendTo($(l.options.appendTo));
Usage:
$('#profileForm input[type="text"]').tooltipster({
trigger: 'custom',
onlyOne: false,
position: 'right',
appendTo: '#profileForm'
});
Like this you can use tooltipster on different kendo-tabs or on different divs.
See on JSFiddle:
Previous : http://jsfiddle.net/vishalvaishya/bCZWd/2/
Working : http://jsfiddle.net/vishalvaishya/bCZWd/3/