I have two pages...both are having same table content...the only difference is in their content loading technique..
1) http://myraipur.com/SuprError/Test2.php
Here the datatable content is loaded by simple “Tr” and “Td”. Modal window is working properly.
2) http://myraipur.com/SuprError/Test1.php
Here the datatable content is loaded via deferred loading. The modal window is not working.
can you please help me!!
Just to add a method I feel that is straight forward that worked for me. ( Also my first Stackoverflow post! )
First used the Javascript Modal function provided by,
http://dotnetspeak.com/2013/05/creating-simple-please-wait-dialog-with-twitter-bootstrap
var loading;
loading = loading || (function () {
var pleaseWaitDiv = $('<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"><div class="modal-dialog modal-sm"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><h4 class="modal-title" id="mySmallModalLabel">Loading Data</h4></div><div class="modal-body"><div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div></div></div></div><!-- /.modal-content --></div><!-- /.modal-dialog -->');
return {
showPleaseWait: function() {
pleaseWaitDiv.modal();
},
hidePleaseWait: function () {
pleaseWaitDiv.modal('hide');
},
};
})();
And here is my Data table call
$(document).ready(function() {
$('#address')
.on( 'processing.dt', function ( e, settings, processing ) {
if (processing) {
$(document).ready(function() {
$('#address').click(loading.showPleaseWait());
});
} else {
$(document).ready(function() {
$('#address').click(loading.hidePleaseWait());
});
}
} )
.dataTable({
"Processing": false,
"sAjaxSource": "ajax/ajax_address_list.php",
"aoColumns": [
{ mData: 'add_cust' } ,
{ mData: 'add_main' },
{ mData: 'add_alias' }
],
"iDisplayLength": 50
});
} );
Hope this helps!
You need to run this code when your deferred is finished instead of document ready:
$("a[data-toggle=modal]").click(function (e) {
lv_target = $(this).attr('data-target');
lv_url = $(this).attr('href');
$(lv_target).load(lv_url);
});
Related
I want to make tab switcher auto decide the slot for the switcher but when I am trying to make it dynamic with the help of observable no data is showing the tab content area until I write the slot area statically. With observable variable, the slot is not getting the selected Slot value.
Please check how I can do this.
slot = [[selectedSlot]] //using for the slot value in html
this.selectedSlot = ko.observable('settings');
<div id="tabbardemo">
<oj-dialog class="tab-dialog hidden" id="tabDialog" dialog-title="Tab data">
<div slot="body">
<oj-form-layout>
<oj-input-text id="t1" value="{{newTabTitle}}" label-hint="Title"></oj-input-text>
</oj-form-layout>
</div>
<div slot="footer">
<oj-button id="idOK" on-oj-action="[[addTab]]">OK</oj-button>
<oj-button id="idCancel" on-oj-action="[[closeDialog]]">Cancel</oj-button>
</div>
</oj-dialog>
<oj-button id="addTab" on-oj-action="[[openDialog]]">Add Tab</oj-button>
<br/>
<br/>
<oj-tab-bar contextmenu="tabmenu" id="hnavlist" selection="{{selectedItem}}" current-item="{{currentItem}}" edge="top" data="[[dataProvider]]"
on-oj-remove="[[onRemove]]">
<template slot="itemTemplate" data-oj-as="item">
<li class="oj-removable" :class="[[{'oj-disabled' : item.data.disabled}]]">
<a href="#">
<oj-bind-text value="[[item.data.name]]"></oj-bind-text>
</a>
</li>
</template>
<oj-menu slot="contextMenu" class="hidden" aria-label="Actions">
<oj-option data-oj-command="oj-tabbar-remove">
Removable
</oj-option>
</oj-menu>
</oj-tab-bar>
<oj-switcher value="[[selectedItem]]">
<div slot="[[selectedSlot]]"
id="home-tab-panel"
role="tabpanel"
aria-labelledby="home-tab">
<div class="demo-tab-content-style">
<h2>Home page content area</h2>
</div>
</div>
<div slot="tools"
id="tools-tab-panel"
role="tabpanel"
aria-labelledby="tools-tab">
<div class="demo-tab-content-style">
<h1>Tools Area</h1>
</div>
</div>
<div slot="base"
id="base-tab-panel"
role="tabpanel"
aria-labelledby="ba`enter code here`se-tab">
<div class="demo-tab-content-style">
<h1>Base Tab</h1>
</div>
</div>
</oj-switcher>
<br>
<div>
<p class="bold">Last selected list item:
<span id="results">
<oj-bind-text value="[[selectedItem]]"></oj-bind-text>
</span>
</p>
</div>
</div>
JS code below
require(['ojs/ojcontext',
'knockout',
'ojs/ojbootstrap',
'ojs/ojarraydataprovider',
'ojs/ojknockout',
'ojs/ojnavigationlist',
'ojs/ojconveyorbelt',
'ojs/ojdialog',
'ojs/ojbutton',
'ojs/ojinputtext',
'ojs/ojformlayout',
'ojs/ojswitcher',
],
function (Context, ko, Bootstrap, ArrayDataProvider) { // this callback gets executed when all required modules are loaded
function ViewModel() {
this.data = ko.observableArray([{
name: 'Settings',
id: 'settings'
},
{
name: 'Tools',
id: 'tools'
},
{
name: 'Base',
id: 'base'
}
]);
this.selectedSlot = ko.observable('settings'); //Sepecifically mentioned to show what it is the objective
this.dataProvider = new ArrayDataProvider(this.data, { keyAttributes: 'id' });
this.selectedItem = ko.observable('settings');
this.currentItem = ko.observable();
this.tabCount = 0;
this.newTabTitle = ko.observable();
this.delete = (function (id) {
var hnavlist = document.getElementById('hnavlist');
var items = this.data();
for (var i = 0; i < items.length; i++) {
if (items[i].id === id) {
this.data.splice(i, 1);
Context.getContext(hnavlist)
.getBusyContext()
.whenReady()
.then(function () {
hnavlist.focus();
});
break;
}
}
}).bind(this);
this.onRemove = (function (event) {
this.delete(event.detail.key);
event.preventDefault();
event.stopPropagation();
}).bind(this);
this.openDialog = (function () {
this.tabCount += 1;
this.newTabTitle('Tab ' + this.tabCount);
document.getElementById('tabDialog').open();
}).bind(this);
this.closeDialog = function () {
document.getElementById('tabDialog').close();
};
this.addTab = (function () {
var title = this.newTabTitle();
var tabid = 'tid' + this.tabCount;
this.data.push({
name: title,
id: tabid
});
this.closeDialog();
}).bind(this);
}
Bootstrap.whenDocumentReady().then(function () {
ko.applyBindings(new ViewModel(), document.getElementById('tabbardemo'));
});
}
);
It is a bit complex to understand when you copy from JET cookbook. You have done almost everything right. Just make the following changes:
1) Remove this:
Bootstrap.whenDocumentReady().then(function () {
ko.applyBindings(new ViewModel(), document.getElementById('tabbardemo'));
});
Why? The bootstrapping is required once per application, which is done inside your main.js file.
2) Replace require by define
Why? Require block is again maintained in main.js, where your required modules are pre-loaded. All subsequent viewModels have define block
3) Return an instance of your ViewModel
define([
... Your imports
],
function (Context, ko, Bootstrap, ArrayDataProvider) { // this callback gets executed when all required modules are loaded
function ViewModel() {
// Your code
}
return ViewModel;
});
I'm trying to implement modal windows with Vuejs.
The code below shows that after the user uploads the favorite photo,
then modal window appears, and photos which were uploaded so far and the newly registered photos are displayed
it will confirm when the user press the "confirm" button.
However, at present, data is not set in the modal window after fetching data with ajax after uploading.
How do I set the data in the modal window part?
<template>
<div>
<!-- upload -->
<div class="button__action">
<button type="button" #click="uploadData(originalData.image)">upload</button>
</div>
<!-- Modal window -->
<modal name="modal-view">
<div>
<div class="modal__box" v-if="modalList.list">
<img :src="modalList.list.url">
<p class="image__name">{{modalList.list.name}}</p>
</div>
<button type="button" #click="submit">Confirm</button>
</div>
</modal>
</div>
</template>
<script>
import { post } from './handler/api'
import { toFormat } from './handler/form'
export default {
props: {
originalData: {
type: Object,
required: true,
}
},
data: function(){
return {
modalList : {
list : [],
},
}
},
methods: {
showModal () {
this.$modal.show('modal-view');
},
uploadData() {
const form = toFormat({image: this.originalData.image})
post(`/api/upload/`, form)
.then((res) => {
if(res.data) {
Vue.set(this.$data, 'modalList', res.data.list);
this.$modal.show('modal-view');
}
})
.catch((err) => {
//error
})
},
submit() {
}
}
}
</script>
Try this:
uploadData() {
var vm = this;
post(`/api/upload/`, toFormat({image: this.originalData.image})).then(res => {
if(res.data) {
vm.modalList = res.data.list;
this.$modal.show('modal-view');
}
})
}
I have jquery UI code for confirm popup.
if (confirm('Are you sure you want to delete the batchjob:' +
dataItem["Name"])) {
$.get("#Url.Content("~/BatchJob/DeleteBatchJob")", { batchJobDetailId: parseInt(dataItem["BatchJobDetailId"]) }, function (data) {
if (data) {
debugger
var batchJobValidateWnd = $("#ValidateBatchJobStatus").data("kendoWindow");
batchJobValidateWnd.content("BatchJob deleted successfully.");
batchJobValidateWnd.center().open();
$.post("#Url.Content("~/BatchJob/SearchBatchJobDetailByParams")", { jobName: $("#Name").val(), startDate: $("#ScheduleStartDate").val() }, function (data) {
});
}
else {
debugger
window.location = '#Url.Content("~/BatchJob/Create")/' + parseInt(dataItem["BatchJobDetailId"]);
}
});
}
And I need Kendo Confirmation popup?How i change jquery confirm popup to kendo confirm popup
You can create a Kendo Confirmation Dialog via a promise, and if confirmed execute the same way as you would with a jQuery dialog.
The dialog itself should be created using an External Template which is rendered on buttonDisplayDialog click event which will wait for a response before continuing.
<script id="confirmationTemplate" type="text/x-kendo-template">
<div class="popupMessage"></div>
</br>
<hr/>
<div class="dialog_buttons">
<input type="button" class="confirm_yes k-button" value="Yes" style="width: 70px" />
<input type="button" class="confirm_no k-button" value="No" style="width: 70px" />
</div>
</script>
Based on whether the user clicks "Yes" or "No" will return result as a true or false value which is where you should put the remainder of your code:
$("#buttonDisplayDialog").kendoButton({
click: function(e) {
$.when(showConfirmationWindow('Are you sure you want to delete the batchjob:')).then(function(confirmed){
if(confirmed){
alert('This is where you will put confirmation code');
}
else{
alert('User clicked no');
}
});
}
});
});
function showConfirmationWindow(message) {
return showWindow('#confirmationTemplate', message)
};
function showWindow(template, message) {
var dfd = new jQuery.Deferred();
var result = false;
$("<div id='popupWindow'></div>")
.appendTo("body")
.kendoWindow({
width: "200px",
modal: true,
title: "",
modal: true,
visible: false,
close: function (e) {
this.destroy();
dfd.resolve(result);
}
}).data('kendoWindow').content($(template).html()).center().open();
$('.popupMessage').html(message);
$('#popupWindow .confirm_yes').val('OK');
$('#popupWindow .confirm_no').val('Cancel');
$('#popupWindow .confirm_no').click(function () {
$('#popupWindow').data('kendoWindow').close();
});
$('#popupWindow .confirm_yes').click(function () {
result = true;
$('#popupWindow').data('kendoWindow').close();
});
return dfd.promise();
};
Here is a Dojo example to demonstrate the above code in action.
I am trying to populate a content into an bootstrap popover using angular and ajax. Although the data have been loaded correctly (as i can see in console.log) the result don't appear in the popover's content. I think the angular's loading is not ready yet when the bootstrap popover is loaded. Thus, how can i populate this popover immediately after angular load?
This is the code:
$(function() {
var p = $("#popover").popover({
content: $("#popover-content").html(),
html: true
});
});
(function () {
var app = angular.module("ng-app", []);
app.controller("NotificationsController", function ($scope, $http) {
$scope.links = [];
$scope.load = function () {
$http.get("json.php").success(function (response) {
console.log(response);
$scope.links = response;
// the response return is somethin like
// [
// {title: "Google", url: "http://www.google.com"},
// {title: "Gmail", url: "http://www.google.com"},
// ]
});
};
$scope.load();
});
})();
<ul class="nav navbar-nav">
<li data-ng-controller="NotificationsController as notification">
<a href="#" data-toggle="popover" id="popover" title="Notificações" data-placement="bottom" data-trigger="focus">
<span class="badge">{{links.length}}</span>
</a>
<div id="popover-content" style="display: none">
<div data-ng-repeat="link in links">
{{link.title}}
</div>
</div>
</li>
</ul>
Thanks in advance
You can put your function inner the controller, to get angular cycle. And, also, define your jquery call on a $timeout event.
Please look this sample on jsbin: jsbin
controller('c', function($scope, $timeout) {
$scope.getData = function() {
return $("#popover-content").html();
};
$timeout(function() {
$("#popover").popover({
content: $scope.getData,
html: true
});
});
}
I've got multiple HTML pages that use the JQMobile framework; within these pages I'm using iScroll to create a native scrolling effect, all works fine.
I run into problems when using the JQM page transitions with iScroll, since it's loaded via ajax I know that I need to refresh iScroll on the new page so that it can correctly calculate the height and width after the DOM has changed.
I've looked into this and experimented with code (tried refresh() and destroying and recreating) but can't see to get it work, the iScroll works it's just not getting refreshed on page change (therefore not working), any ideas?
Code below!
<div data-role="page">
<div data-role="header">
</div><!-- /header -->
<div data-role="content">
<div id="wrapper">
<div id="scroller">
<p>Page content goes here.</p>
Page 2
</div>
</div>
</div><!-- /content -->
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a data-ajax="false" href="javascript:void(0);" onClick="homepage();"><img width="34px" height="34px" src="images/home_IMG_v2.png" /><!--<span class="nav">Home</span>--></a></li>
<li><a data-ajax="false" href="Guide.html" class="ui-btn-active ui-state-persist"><img width="35px" height="33px" src="images/guide_IMG_v2.png"><!--<span class="nav">Guide</span>--></a></li>
<li><a data-ajax="false" href="TaxCalculator.html" /><img width="76px" height="34px" src="images/calculator_IMG_v2.png" /><!--<span id="calc" class="nav">Calculator</span>--></a></li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page -->
Using refresh()
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', { hScrollbar: false, vScrollbar: false, checkDOMChanges: true});
setTimeout(function() {
myScroll.refresh();
}, 100);
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
Destroying iScroll and recreating
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', { hScrollbar: false, vScrollbar: false, checkDOMChanges: true});
setTimeout(function() {
myScroll.destroy();
myScroll = null;
myScroll = new iScroll('wrapper', { hScrollbar: false, vScrollbar: false, checkDOMChanges: true});
}, 100);
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
Try calling initialising iScroll when the jqm pageshow event fires e.g. in jqm 1.3.1:
$(document).on('pageshow', function (event, ui) {
myScroll = new iScroll('wrapper', { hScrollbar: false, vScrollbar: false, checkDOMChanges: true});
});
after domchanges you need refreshing iscroll
$('#videotagisc').iscrollview("refresh");
this not working means use setTimeout
setTimeout(function(){
$('#videotagisc').iscrollview("refresh");
},100);
var width = $( window ).width();
var height = $( window ).height();
var delay = 200;
var doit;
function keop() {
$("#wrapper").css({"height":height+"px","width":width+"px"});
setTimeout( function(){
myScroll.refresh() ;
} , 200 ) ;
}
/* < JQuery 1.8*/
window.addEventListener("load", function(){
clearTimeout(doit);
doit = setTimeout(keop, delay);
});
/* > JQuery 1.8*/
window.on("load", function(){
clearTimeout(doit);
doit = setTimeout(keop, delay);
});