i am using an addOnloadEvent(initSwfUpload) function to init the
swfupload.
Here are my functions
function addOnloadEvent(fnc){
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", fnc, false );
else if ( typeof window.attachEvent != "undefined" ) {
window.attachEvent( "onload", fnc );
}
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
window[fnc]();
};
}
else
window.onload = fnc;
}
}
function initSwfUpload()
{
var swf = new SWFUpload({
// Backend Settings
upload_url: "../../../upload.php",
...
....
})
}
Its working fine but now i need to use the addPostParam(name, value)
but swf is not available.
Here is the code
<script type="text/javascript">
addOnloadEvent(initSwfUpload);
swf.addPostParam('c','1');
</script>
I get the message swf is undefined.
Is possible using the addOnloadEvent approach to achieve the above.
For several reasons i dont want ro use the classic swfupload init
var swfu;
window.onload = function () {
swfu = new SWFUpload({
.......
Thanks
You need to define swfu object outside function first to make it global.
function addOnloadEvent(fnc){
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", fnc, false );
else if ( typeof window.attachEvent != "undefined" ) {
window.attachEvent( "onload", fnc );
}
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
window[fnc]();
};
}
else
window.onload = fnc;
}
}
var swf;
function initSwfUpload()
{
swf = new SWFUpload({
// Backend Settings
upload_url: "../../../upload.php",
...
....
})
}
Then you can use this.
<script type="text/javascript">
addOnloadEvent(initSwfUpload);
swf.addPostParam('c','1');
</script>
Related
I am using Datepicker of Flatpickr and I have set the date format and it is working fine in desktop but in mobile it is not working properly.
This is my code that I added in functions.php:
add_action( 'wp_footer', function() {
?>
<script type="text/javascript">
jQuery( window ).load( function( $ ){
var limitFlatPicker;
var afterTwoDays;
var afterEightDays;
limitFlatPicker = limitFlatPicker || {};
limitFlatPicker = {
defaultSettings: {
selector: '.flatpickr-input',
minDate: true,
maxDate: true,
},
settings: {},
init: function( options ) {
this.settings = jQuery.extend( this.defaultSettings, options );
if ( this.settings.minDate || this.settings.maxDate ) {
this.waitForFlatpicker( this.callback );
}
},
waitForFlatpicker: function( callback ) {
if ( typeof window.flatpickr !== 'function' ) {
setTimeout( function() { limitFlatPicker.waitForFlatpicker( callback ) }, 100 );
}
callback();
},
modifyPicker: function( picker, settings ) {
flatpickr( picker ).set( settings );
},
callback: function() {
var self;
self = limitFlatPicker;
jQuery( self.settings.selector ).each( function() {
var picker;
picker = jQuery( this )[0],
pickerSettings = {};
if ( self.settings.minDate ) {
pickerSettings.minDate = self.settings.minDate;
}
if ( self.settings.maxDate ) {
pickerSettings['maxDate'] = self.settings.maxDate;
}
if ( self.settings.dateFormat ) {
pickerSettings.dateFormat = self.settings.dateFormat;
}
self.modifyPicker( picker, pickerSettings );
} );
}
}
limitFlatPicker.init({
minDate: new Date(),
selector: '#form-field-form_field_date',
dateFormat: 'm-d-Y',
});
} );
</script>
<?php
},11);
The dateFormat: 'm-d-Y' is working fine in desktop and in mobile, it is not showing this dateformat.
Any help is much appreciated.
function addLoadEvent (func) {
let oldonload = window.onload;
if (typeof window.onload !== 'function') {
window.onload = func;
} else {
window.onload = function () {
oldonload();
func();
}
}
this addLoadEvent is right
<script src="addLoadEvent.js"></script>
<script src="getAbbreviation.js"></script>
<script src="getCitation.js"></script>
it just the "getAbbreviation.js" works
I would like to use tinyMCE with a custom Slick Editor outside of the table, or inside a dialog. It's just to enable rich text editing.
Can I use this external plugin for a custom Slick Editor? I have not seen any example of usages like this.
Is there any potential problems using this two plugins at the same time (injecting conflicting HTML for example or preventing some firing events)?
Use a jquery alias "jQuery_new" with a compatible version
Register the new editor "TinyMCEEditor" & Add it into slick.editors.js
Use it like this {id: "column2", name: "Year", field: "year", editor: Slick.Editors.TinyMCE}
jQuery_new.extend(true, window, {
"Slick": {
"Editors": {
(..)
"TinyMCE": TinyMCEEditor
}
}});
function TinyMCEEditor(args) {
var $input, $wrapper;
var defaultValue;
var scope = this;
this.guid = function () {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4();
},
this.init = function () {
var $container = jQuery_new(".container");
var textAreaIdString = 'rich-editor-'+guid();
$wrapper = jQuery_new("<DIV ID='rds-wrapper'/>").appendTo($container);
$input = jQuery_new("<TEXTAREA id=" + textAreaIdString + "/>");
$input.appendTo($wrapper);
jQuery_new("#" +textAreaIdString).val( args.item[args.column.field] );
var _this = this;
tinymce.init({
selector: "#"+textAreaIdString,
forced_root_block : "",
plugins : "save image imagetools",
toolbar: 'undo redo | styleselect | bold italic | link image | save',
save_onsavecallback: function() {
jQuery_new("#" +textAreaIdString).val( this.getContent() );
_this.save();
}
});
$input.bind("keydown", this.handleKeyDown);
scope.position(args.position);
$input.focus().select();
};
this.handleKeyDown = function (e) {
if (e.which == jQuery_new.ui.keyCode.ENTER && e.ctrlKey) {
scope.save();
} else if (e.which == jQuery_new.ui.keyCode.ESCAPE) {
e.preventDefault();
scope.cancel();
} else if (e.which == jQuery_new.ui.keyCode.TAB && e.shiftKey) {
e.preventDefault();
args.grid.navigatePrev();
} else if (e.which == jQuery_new.ui.keyCode.TAB) {
e.preventDefault();
args.grid.navigateNext();
}
};
this.save = function () {
args.commitChanges();
};
this.cancel = function () {
$input.val(defaultValue);
args.cancelChanges();
};
this.hide = function () {
$wrapper.hide();
};
this.show = function () {
$wrapper.show();
};
this.position = function (position) {
};
this.destroy = function () {
$wrapper.remove();
};
this.focus = function () {
$input.focus();
};
this.loadValue = function (item) {
$input.val(defaultValue = item[args.column.field]);
$input.select();
};
this.serializeValue = function () {
return $input.val();
};
this.applyValue = function (item, state) {
item[args.column.field] = state;
};
this.isValueChanged = function () {
return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
};
this.validate = function () {
return {
valid: true,
msg: null
};
};
this.init();
}
I have a iphone app built with jquery mobile which is wrapped in phonegap. I am trying to get geolocation after the device is ready to get rid of the nasty alert /var/mobile/Applications/157EB70D-4AA7-826E-690F0CBE0F/appname.app/www/index.html.
I have set some alerts to see if the device is ready and it keeps saying isDeviceReady is:false which is meaning the device is not ready
he is the code
$(function() {
var isWatching = false;
var isAndroid = ( navigator.userAgent.indexOf('Android') != -1 ) ? true : false;
var isDeviceReady = false;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
isDeviceReady = true;
}
function getClientPosition(id, successCallback, errorCallback) {
if ( isDeviceReady ) {
var hasFoundMarker = false;
if ( hasClientPosition() ) {
$(id).gmap('findMarker', 'tag', 'client', function(found, marker) {
if (found) {
hasFoundMarker = true;
marker.setPosition(getClientLatLng());
$(id).gmap('getMap').setCenter(marker.getPosition());
if ( $.isFunction(successCallback) ) {
successCallback.call(this, getClientLatLng());
}
}
});
if ( !hasFoundMarker ) {
addClientMarker(id, getClientLatLng());
if ( $.isFunction(successCallback) ) {
successCallback.call(this, getClientLatLng());
}
}
}
if ( !isWatching[id] ) {
if ( navigator.geolocation ) {
isWatching[id] = true;
if ( isAndroid ) {
watch[id] = setInterval(function() {
navigator.geolocation.getCurrentPosition (
function( position ) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
$(id).gmap('findMarker', 'tag', 'client', function(found, marker) {
if (found) {
hasFoundMarker = true;
marker.setPosition(latlng);
$(id).gmap('getMap').setCenter(latlng);
}
});
if ( !hasFoundMarker ) {
addClientMarker(id, latlng);
}
setData(CLIENT_HAS_POSITION, true);
setData(CLIENT_LATITUDE, latlng.lat());
setData(CLIENT_LONGITUDE, latlng.lng());
if ( $.isFunction(successCallback) ) {
successCallback.call(this, latlng);
}
},
function( error ) {
if ( $.isFunction(errorCallback) ) {
errorCallback.call(this, error);
}
},
opts.geolocationOptions
);
}, 5000);
} else {
watch[id] = navigator.geolocation.watchPosition (
function( position ) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
$(id).gmap('findMarker', 'tag', 'client', function(found, marker) {
if (found) {
hasFoundMarker = true;
marker.setPosition(latlng);
$(id).gmap('getMap').setCenter(latlng);
}
});
if ( !hasFoundMarker ) {
addClientMarker(id, latlng);
}
setData(CLIENT_HAS_POSITION, true);
setData(CLIENT_LATITUDE, latlng.lat());
setData(CLIENT_LONGITUDE, latlng.lng());
if ( $.isFunction(successCallback) ) {
successCallback.call(this, latlng);
}
},
function( error ) {
if ( $.isFunction(errorCallback) ) {
errorCallback.call(this, error);
}
},
opts.geolocationOptions
);
}
}
}
} else {
var timer = setTimeout(function() {
getClientPosition(id, successCallback, errorCallback);
alert('Trying to get client position. This message will pop up again in 15 sec, unless device is ready. IsDeviceReady is: '+isDeviceReady);
}, 15000);
}
}
Anyone have any ideas where i am going wrong?
Firebug is giving me no error messages, but it's not working. The idea is regardless of whether the user picks an option from dropdown or if they type in something in search box, I want the alert() message defined below to alert what the value of the variable result is (e.g. {filter: Germany}). And it doesn't. I think the javascript breaks down right when a new Form instance is instantiated because I tried putting an alert in the Form variable and it was never triggered. Note that everything that pertains to this issue occurs when form.calculation() is called.
markup:
<fieldset>
<select name="filter" alter-data="dropFilter">
<option>Germany</option>
<option>Ukraine</option>
<option>Estonia</option>
</select>
<input type="text" alter-data="searchFilter" />
</fieldset>
javascript (below the body tag)
<script>
(function($){
var listview = $('#listview');
var lists = (function(){
var criteria = {
dropFilter: {
insert: function(value){
if(value)
return handleFilter("filter", value);
},
msg: "Filtering..."
},
searchFilter: {
insert: function(value){
if(value)
return handleFilter("search", value);
},
msg: "Searching..."
}
}
var handleFilter = function(key,value){
return {key: value};
}
return {
create: function(component){
var component = component.href.substring(component.href.lastIndexOf('#') + 1);
return component;
},
setDefaults: function(component){
var parameter = {};
switch(component){
case "sites":
parameter = {
'order': 'site_num',
'per_page': '20',
'url': 'sites'
}
}
return parameter;
},
getCriteria: function(criterion){
return criteria[criterion];
},
addCriteria: function(criterion, method){
criteria[criterion] = method;
}
}
})();
var Form = function(form){
var fields = [];
$(form[0].elements).each(function(){
var field = $(this);
if(typeof field.attr('alter-data') !== 'undefined') fields.push(new Field(field));
})
}
Form.prototype = {
initiate: function(){
for(field in this.fields){
this.fields[field].calculate();
}
},
isCalculable: function(){
for(field in this.fields){
if(!this.fields[field].alterData){
return false;
}
}
return true;
}
}
var Field = function(field){
this.field = field;
this.alterData = false;
this.attach("change");
this.attach("keyup");
}
Field.prototype = {
attach: function(event){
var obj = this;
if(event == "change"){
obj.field.bind("change", function(){
return obj.calculate();
})
}
if(event == "keyup"){
obj.field.bind("keyup", function(e){
return obj.calculate();
})
}
},
calculate: function(){
var obj = this,
field = obj.field,
msgClass = "msgClass",
msgList = $(document.createElement("ul")).addClass("msgClass"),
types = field.attr("alter-data").split(" "),
container = field.parent(),
messages = [];
field.next(".msgClass").remove();
for(var type in types){
var criterion = lists.getCriteria(types[type]);
if(field.val()){
var result = criterion.insert(field.val());
container.addClass("waitingMsg");
messages.push(criterion.msg);
obj.alterData = true;
alert(result);
initializeTable(result);
}
else {
return false;
obj.alterData = false;
}
}
if(messages.length){
for(msg in messages){
msgList.append("<li>" + messages[msg] + "</li");
}
}
else{
msgList.remove();
}
}
}
$('#dashboard a').click(function(){
var currentComponent = lists.create(this);
var custom = lists.setDefaults(currentComponent);
initializeTable(custom);
});
var initializeTable = function(custom){
var defaults = {};
var custom = custom || {};
var query_string = $.extend(defaults, custom);
var params = [];
$.each(query_string, function(key,value){
params += key + ': ' + value;
})
var url = custom['url'];
$.ajax({
type: 'GET',
url: '/' + url,
data: params,
dataType: 'html',
error: function(){},
beforeSend: function(){},
complete: function() {},
success: function(response) {
listview.html(response);
}
})
}
$.extend($.fn, {
calculation: function(){
var formReady = new Form($(this));
if(formReady.isCalculable) {
formReady.initiate();
}
}
})
var form = $('fieldset');
form.calculation();
})(jQuery)
Thank you for anyone who responds. I spent a lot of time trying to make this work.
The initial problem as to why the alert() was not being triggered when Form is instantiated is because, as you can see, the elements property belongs to the Form object, not fieldset object. And as you can see in the html, I place the fields as descendents of the fieldset object, not form.