onOk: function() {
var dialog = this;
var contentFromTextarea = dialog.getValueOf('tab-main','content');
var rowArray = new Array();
var cellArray = new Array();
var row = '';
rowArray = contentFromTextarea.split(';');
for (var i = 0; i < rowArray.length-1; i++)
{
cellArray[i] = rowArray[i].split(':');
row += '<div>' + '<span>' + cellArray[i][0] + '</span>' + '<span>' + cellArray[i][1] + '</span>' + '</div>'
}
row = '<div>' + row + '</div>';
editor.insertHtml(row);
}
Does not want to be inserted as html in CKeditor. Why?
Thanks for help.
Try displaying "row" just before you run the editor.insertHtml(row);
command just to make sure you html tags are well formed. why are you adding a div tag inside another div tag?
Related
I have the following JS and HTML code and I want to disable the button when ajax request is submitting so the user wont be able to double click and disturb the process.
function doReshare(_intPostId) {
if(typeof cLogin === 'undefined')
var cLogin = checkLogin();
if(cLogin!=true)
return;
var date = new Date();
var mainId = _intPostId;
var type = 1;
var active = 0;
var postFinded = 0;
jQuery(".reshare_" + _intPostId).each(function() {
postFinded = 1;
objElement = jQuery(this);
if(objElement.hasClass('sm2_playing') || objElement.hasClass('sm2_paused')) {
// track is active
active = 1;
}
if(objElement.hasClass('is_album')) {
mainId = objElement.closest('div.playlist-box').attr('id').replace('album_', '');
// mainId = objElement.data('mainid');
}
var intLikesCurrentCount = parseInt(objElement.find(".likes_count").first().text(), 10);
if(!objElement.find(".refeed_fct").hasClass("active")) {
if(active)
jQuery('.player-icons.dorepost').addClass('active');
objElement.find(".refeed_fct").addClass("active");
//objElement.find(".likes_count").html("<i class=\"fa fa-heart-o\"></i> " + (intLikesCurrentCount + 1));
} else {
objElement.find(".refeed_fct").removeClass("active");
if(active)
jQuery('.player-icons.dorepost').removeClass('active');
type = 0;
//objElement.find(".likes_count").html("<i class=\"fa fa-heart-o\"></i> " + (intLikesCurrentCount - 1));
}
});
if(!postFinded) {
if(!jQuery(".player-icons.dorepost").hasClass("active")) {
jQuery('.player-icons.dorepost').addClass('active');
} else {
jQuery('.player-icons.dorepost').removeClass('active');
}
}
jQuery("#vowave").append('<img width="1" height="1" src="/reshare/' + mainId + '/' + type + '?time=' + date.getTime() + '" />');
}
and the html
<span class="refeed_fct" onclick="doReshare(10309)">
<i class="fa fa-retweet"></i> <div class="inline hidden-mobile">Repost</div>
</span>
Thank you
Maybe you should set the objElement's onclick listener to an empty function
There is a problem with my run time execution in my code. It takes too long to finish, since I have to loop a large amounts of data to look for matching data. I used array on the first loop value though, I don't know how to array the second value without affecting the first array.
Name of the first array : Source
Name of the Second array : Target
Here is my Code:
function inactive_sort_cebu() {
var ss = SpreadsheetApp.openById('169vIeTMLK4zN5VGCw1ktRteCwMToU8eGABFDxg52QBk');
// var sheet = ss.getSheets()[0];// Manila Roster
var sheet2 = ss.getSheets()[1];// Cebu Roster
var column = sheet2.getRange("C1:C").getValues();
var last = column.filter(String).length;
// -----------------------------------------------------------
var ss1 = SpreadsheetApp.openById('153ul2x2GpSopfMkCZiXCjmqdPTYhx4QiOdP5SBYzQkc');
// var sched_sheet = ss1.getSheets()[0];// ScheduledForm_Manila
var sched_sheet2 = ss1.getSheets()[1];// ScheduledForm_Cebu
var column2 = sched_sheet2.getRange("C1:C").getValues();
var last2 = column2.filter(String).length;
//// -------------------------Manila-Roster---------------------------------
var i= 2;
var column3 = sched_sheet2.getRange("J1:J").getValues();
var a = column3.filter(String).length - 1;
// var a = 0;
try{
var source = sched_sheet2.getRange("C2:C").getValues();
for (a;a<=last2;){
/// this is the code that i need to array without affecting the other array which is the source variable
var target = sheet2.getRange("C"+ i).getValue();
if(source[a] == target){
// Get "No Schedule Request data on Cell H
var data = sched_sheet2.getRange("H"+(a+2)).getValue();
// Get "Schedule Request data on Cell F
var data1 = sched_sheet2.getRange("F"+(a+2)).getValue();
var condition_1 = sched_sheet2.getRange("D"+(a+2)).getValue();
var condition_2 = sched_sheet2.getRange("G"+(a+2)).getValue();
var format_Con_2 = Utilities.formatDate(condition_2, 'Asia/Manila', 'm/dd/yyyy');
var condition_3 = sched_sheet2.getRange("K"+ (a+2)).getValue();
var date = new Date();
var date_Manila = Utilities.formatDate(date, 'Asia/Manila', 'm/dd/yyyy');
if(condition_1 == "No Schedule Request" && format_Con_2 <= date_Manila && condition_3 ==""){
sheet2.getRange("AA"+ i).setValue("N - "+ data);
sched_sheet2.getRange("J"+ (a+2)).setValue("Cebu");
sched_sheet2.getRange("K"+ (a+2)).setValue("Done");
a++;
}
else if (condition_1 == "Schedule Request" && format_Con_2 <= date_Manila && condition_3 ==""){
sheet2.getRange("AA"+ i).setValue("Y - "+data1);
sched_sheet2.getRange("J"+ (a+2)).setValue("Cebu");
sched_sheet2.getRange("K"+ (a+2)).setValue("Done");
a++;
}
else{a++;}
i=2;}
else {i++;}
}
This is a simple example of a web app that puts an editable spreadsheet on an HTML Page. Publish as a webapp. I loops through the 2D array that you get when you getValues from the getDataRange() method. In this case I'm just intertwining html into the mix.
Code.gs:
var SSID='SpreadsheetID';
var sheetName='Sheet Name';
function htmlSpreadsheet(mode)
{
var mode=(typeof(mode)!='undefined')?mode:'dialog';
var br='<br />';
var s='';
var hdrRows=1;
var ss=SpreadsheetApp.openById(SSID);
var sht=ss.getSheetByName(sheetName);
var rng=sht.getDataRange();
var rngA=rng.getValues();
s+='<table>';
for(var i=0;i<rngA.length;i++)
{
s+='<tr>';
for(var j=0;j<rngA[i].length;j++)
{
if(i<hdrRows)
{
s+='<th id="cell' + i + j + '">' + '<input id="txt' + i + j + '" type="text" value="' + rngA[i][j] + '" size="10" onChange="updateSS(' + i + ',' + j + ');" />' + '</th>';
}
else
{
s+='<td id="cell' + i + j + '">' + '<input id="txt' + i + j + '" type="text" value="' + rngA[i][j] + '" size="10" onChange="updateSS(' + i + ',' + j + ');" />' + '</th>';
}
}
s+='</tr>';
}
s+='</table>';
//s+='<div id="success"></div>';
s+='</body></html>';
switch (mode)
{
case 'dialog':
var userInterface=HtmlService.createHtmlOutputFromFile('htmlss').setWidth(1000).setHeight(450);
userInterface.append(s);
SpreadsheetApp.getUi().showModelessDialog(userInterface, 'Spreadsheet Data for ' + ss.getName() + ' Sheet: ' + sht.getName());
break;
case 'web':
var userInterface=HtmlService.createHtmlOutputFromFile('htmlss').setWidth(1000).setHeight(450);
return userInterface.append(s).setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
}
function updateSpreadsheet(i,j,value)
{
var ss=SpreadsheetApp.openById(SSID);
var sht=ss.getSheetByName(sheetName);
var rng=sht.getDataRange();
var rngA=rng.getValues();
rngA[i][j]=value;
rng.setValues(rngA);
var data = {'message':'Cell[' + Number(i + 1) + '][' + Number(j + 1) + '] Has been updated', 'ridx': i, 'cidx': j};
return data;
}
function doGet()
{
var output=htmlSpreadsheet('web');
return output;
}
htmlss.html:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
});
function updateSS(i,j)
{
var str='#txt' + String(i) + String(j);
var value=$(str).val();
$(str).css('background-color','#ffff00');
google.script.run
.withSuccessHandler(successHandler)
.updateSpreadsheet(i,j,value)
}
function successHandler(data)
{
$('#success').text(data.message);
$('#txt' + data.ridx + data.cidx).css('background-color','#ffffff');
}
console.log('My Code');
</script>
<style>
th{text-align:left}
</style>
</head>
<body>
<div id="success"></div>
i make custom mvc control with two kendo datepicker to display (gregi and hijri) date in partial view and if i change date of any one it's change the other to equivalent date
cause to kendo limitation to deal with Hijri calender i make some modification to display correct date i use culture and set max date to hijri to 29/12/1600
every thing is ok if i set value(DateTime.Now) to hijri calender
but i want it display null and user select value but if i remove value and when user open calender the year show is 1600 i want to display 1435 and keep value null
her is my code
Controller
public class UserControl_GHDate
{
public DateTime? GregiDate { get; set; }
[Column(TypeName = "DateTime2")]
public DateTime? HijriDate
{
get
{
if (GregiDate==null)
{
return null;//DateTime.Now;
}
else
{
return GregiDate;
}
}
set { }
}
}
Razor
#model MVC_ERP.Models.UserControl_GHDate
<script src="#Url.Content("~/Scripts/jquery.globalize/globalize.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.globalize/cultures/globalize.culture.ar-SA.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.globalize/cultures/globalize.culture.en-US.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/kendo/cultures/kendo.culture.ar-SA.min.js")"></script>
#Html.Kendo().DatePickerFor(model => model.GregiDate).Format("dd/MM/yyyy").Culture("en-US").HtmlAttributes(new { #class = "kendo", style = "width:49%; max-width:280px" }).Events(e => e.Change("GregiChange"))
#Html.Kendo().DatePickerFor(model => model.HijriDate).Value(DateTime.Now).Footer(false).Max("12/29/1600").Culture("ar-SA").Min(new DateTime(1300, 1, 1)).Format("dd/MM/yyyy").HtmlAttributes(new { #class = "kendo", style = "width:49%; max-width:280px" }).Events(e => e.Change("HijriChange"))
<script>
kendo.cultures["ar-SA"].calendars.standard.firstDay =5;
//kendo.cultures["ar-SA"].calendars.standard.months.namesAbbr[0] = "bbb"; //change name of month
kendo.cultures["ar-SA"].calendars.standard.days.namesShort[0] = "";
kendo.cultures["ar-SA"].calendars.standard.days.namesShort[1] = "";
kendo.cultures["ar-SA"].calendars.standard.days.namesShort[2] = "";
kendo.cultures["ar-SA"].calendars.standard.days.namesShort[3] = "";
kendo.cultures["ar-SA"].calendars.standard.days.namesShort[4] = "";
kendo.cultures["ar-SA"].calendars.standard.days.namesShort[5] = "";
kendo.cultures["ar-SA"].calendars.standard.days.namesShort[6] = "";
function GregiChange(e) {
//alert(this.Name())
var GregId = this.element.prop("id");
var arr = GregId.split('_');
var HijId = arr[0] + '_HijriDate';
if ($('#' + GregId).data('kendoDatePicker').value() == null)
{
$('#' + HijId).data('kendoDatePicker').value(null)
return
}
var d = new Date($('#' + GregId).data('kendoDatePicker').value())
//d.setMonth(d.getMonth() + 1);
var j = d.toLocaleDateString("en-US")
//var z = Globalize.cultures["ar-SA"].calendars.standard.convert.toGregorian("1434", "02", "11");
var z = Globalize.cultures["ar-SA"].calendars.standard.convert.fromGregorian(d);
var y = z.toString()
var arrD = y.split(',');
var year = arrD[0]
var month =(arrD[1]==0?1:(eval(arrD[1])+1))
var day = arrD[2]
var dat = day + '/' + month + '/' + year
$('#' + HijId).data('kendoDatePicker').value(dat)
}
function HijriChange() {
var HijId = this.element.prop("id");
var arr = HijId.split('_');
var GregId = arr[0] + '_GregiDate';
if ($('#' + HijId).data('kendoDatePicker').value() == null) {
$('#' + GregId).data('kendoDatePicker').value(null)
return
}
var d = new Date($('#' + HijId).data('kendoDatePicker').value())
var HD = d.getDate() + '/' + (d.getMonth()+1) + '/' + d.getFullYear();
HDMY= d.getDate() + '/' + (d.getMonth()+1)
if (d.getDate() == 31 || HDMY == '30/12' || HDMY == '30/10' || HDMY == '30/8' || HDMY == '30/6' || HDMY == '30/4' || HDMY == '30/2')
{
alert(HD + ' not valid hijri date')
return;
}
var z = Globalize.cultures["ar-SA"].calendars.standard.convert.toGregorian(d.getFullYear(), (d.getMonth() + 1), d.getDate());
var u = new Date(z)
var year = u.getFullYear();
var month = (u.getMonth() == 0 ? 12 : u.getMonth());
var day = u.getDate()+1;
var dat = day+ '/' + month+ '/' + year;
$('#' + GregId).data('kendoDatePicker').value(dat)
}
$(".k-datepicker input").val('');
</script>
Thanks
I think kendo date picker has a min value option try specify the min value with a year of 1435
Im trying to build something like images bookmarklet site like Pinterest, but somehow some of the website doesnt grab any image. Some are works just fine. Also as additional information, I use jquery wookmark as the grid templates.
Here are the codes im currently use... I dont know if its right or simply i used the wrong method to retrieve the images. Cheers guys in advance for any comment or help... really appreciated.
-- html
<ul id="tiles"></ul>
<div id="loader">
<div id="loaderCircle" style="display:none"></div>
</div>
-- javascript
<script type="text/javascript">
function loadData() {
isLoading = true;
var link_pin ='http://www.somewebsite.com';
$('#loaderCircle').show();
$.ajax({
url: '<?php echo(base_url('index.php/home/pin_ajax'))?>',
dataType: 'json',
data: {link_pin:link_pin},
success: onLoadData
});
};
function onLoadData(data) {
isLoading = false;
$('#loaderCircle').hide();
var html = '';
var i=0, length=data.length, returns_data;
for(; i<length; i++) {
var link_foto = data[i];
var newImg = new Image();
newImg.src = link_foto;
var height = newImg.height;
var width = newImg.width;
var image_click="image_clicks('"+link_foto+"')";
if (width >="200" && height >="200"){
html += '<li onclick="'+image_click+'" id="image_'+i+'">';
html += '<a>';
html += '<div class="back_tristlist">';
html += '<span class="hover-icon icon-text">🔍</span>';
html += '<img src="'+link_foto+'">';
html += '</div>';
html += '</a>';
html += '<div class="space_image"></div>';
html += '</li>';
}
}
$('#tiles').append(html);
handler = $('#tiles li');
handler.wookmark(options);
};
</script>
-- php
public function pin_ajax(){
extract($_GET);
$page = file_get_contents($link_pin);
error_reporting(0);
$doc = new DOMDocument();
#$doc->loadHTML($page);
$images = $doc->getElementsByTagName('img');
echo($images);
$_datas[]="";
foreach($images as $image){
$raw_img_url = $image->getAttribute('src');
$img_final_link = $raw_img_url;
$img_url = explode('http://www.', $raw_img_url);
$img_check = $img_url[1];
if($img_check==''){
$img_url = explode('http://', $raw_img_url);
$img_check = $img_url[1];
if($img_check!=''){ $img_check_error=1; }
if($img_check==''){ $img_check_error=2; }
}
$_datas[] = ($img_check);
}
$output = json_encode($_datas);
echo($output);
}
I am building a mobile application using Sencha Touch 1.0. I need to display report, for that am using grid given by Ext.ux.TouchGridPanel.
It is working fine.
Where as I need to capture Scroll event in Ext.ux.TouchGridPanel.
I have added 'scroll' in bubble event of Dataview.
I am also trying to capture the event after the Dataview created.
But nothing seems to be working. Below is the code which I have changed.
Does anybody has any idea how to capture the start of scroll event?
Thanks in advance.
Ext.ux.TouchGridPanel = Ext.extend(Ext.Panel, {
layout: "fit",
multiSelect: false,
initComponent: function () {
var me = this;
me.items = me.dataview = me.buildDataView();
Ext.ux.TouchGridPanel.superclass.initComponent.call(me);
var store = me.store;
store.on("update", me.dispatchDataChanged, me);
var dataview = me.dataview;
dataview.on('scroll', me.startScroll);
},
dispatchDataChanged: function (store, rec, operation) {
var me = this;
me.fireEvent("storeupdate", store, rec, operation);
},
startScroll: function (scroller, offset) {
console.log('is this event captured???')
var me = this;
me.fireEvent("scroll", this.scroller, offset);
},
buildDataView: function () {
var me = this, colModel = me.colModel, colNum = me.getColNum(false), cellWidth = 100 / colNum,
colTpl = '<div class="x-grid-head">';
colTpl += '<thead><tr class="x-grid-header">';
for (var i = 0; i < colModel.length; i++) {
var col = colModel[i];
var width = (Ext.isDefined(col.width)) ? ("width =" + (col.width - 4) + "%") : '';
colTpl += '<th class="x-grid-cell" ' + width + ' style="' + col.style + '" >' + col.header + '</th>';
}
colTpl += '</tr></thead>';
colTpl += '<tbody ><tpl for="."><tr class="x-grid-row">';
for (var i = 0; i < colModel.length; i++) {
var col = colModel[i];
var width = (Ext.isDefined(col.width)) ? ("width =" + col.width + "%") : '';
colTpl += '<td class="x-grid-cell" style="' + col.style + '" >{' + col.mapping + '}</td>';
}
colTpl += '</tr></tpl></tbody>';
colTpl += '</table></div>'
return new Ext.DataView({
store: me.store,
itemSelector: "tr.x-grid-row",
simpleSelect: me.multiSelect,
scroll: me.scroll,
tpl: new Ext.XTemplate(colTpl,
{
isRowDirty: function (dirty, data) {
return dirty ? "x-grid-row-dirty" : "";
}
}
),
prepareData: function (data, index, record) {
var column,
i = 0,
ln = colModel.length;
var prepare_data = {};
prepare_data.dirtyFields = {};
for (; i < ln; i++) {
column = colModel[i];
if (typeof column.renderer === "function") {
prepare_data[column.mapping] = column.renderer.apply(me, [data[column.mapping], column, record, index]);
} else {
prepare_data[column.mapping] = data[column.mapping];
}
}
prepare_data.isDirty = record.dirty;
prepare_data.rowIndex = index;
return prepare_data;
},
bubbleEvents: [
"beforeselect",
"containertap",
"itemdoubletap",
"itemswipe",
"itemtap",
"selectionchange",
"scroll"
]
});
},
// #private
onScrollStart: function () {
console.log("Are you coming here");
var offset = this.scroller.getOffset();
this.closest = this.getClosestGroups(offset);
this.setActiveGroup(this.closest.current);
},
// #private
onScroll: function (scroller, pos, options) {
}
});
Ext.reg("touchgridpanel", Ext.ux.TouchGridPanel);
We can directly access dataview scroller and check event of the same.
For eg.
newGrid = new Ext.ux.TouchGridPanel({....
after creation of the Panel just access its dataview scroller
newGrid.dataview.scroller.on('scroll', scrollGrid1);
var scrollGrid1 = function(scroller, offsets){
console.log(' Grid scrolling with offset ' + offsets.x + ' & ' + offsets.y);
}