I've run into a problem with Dojo 1.10 and need some suggestions on how to figure out the culprit. I have a custom widget, TaskButton, that implements the onMouseDown, onMouseUp, and onClick methods. All three have logging statements. The onMouseDown and onMouseUp always gets called and the correct times and their log statements show up in the console. But, onClick sometimes is never called despite repeatedly clicking in the TaskButton. Most of the time clicking outside the TaskButton then back inside it makes the onClick work but not always. When the onClick does not get called its log statement does not show up in the console.
TaskButton.js custom widget
define([
"dojo/_base/declare",
"dojo/_base/event",
"dojo/_base/lang",
"dojo/dom-class",
"dojo/dom-construct",
"dojo/mouse",
"dojo/on",
"dojo/query",
"dojo/topic",
"dijit/Menu",
"dijit/MenuItem",
"dijit/MenuSeparator",
"dijit/PopupMenuItem",
"dijit/popup",
"dijit/Tooltip",
"dijit/Tree",
"dijit/tree/ForestStoreModel",
"dijit/registry",
"dijit/form/Button",
"dijit/_WidgetBase",
"dijit/_OnDijitClickMixin",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dojo/text!./templates/TaskButton.html"
], function(declare, event, lang, domClass, domConstruct, mouse, on, query, topic, Menu, MenuItem, MenuSeparator, PopupMenuItem,
Popup, Tooltip, Tree, ForestStoreModel, registry, button, _WidgetBase, _OnDijitClickMixin, _TemplatedMixin, _WidgetsInTemplateMixin, template){
return declare("TaskButton", [_WidgetBase, _OnDijitClickMixin, _TemplatedMixin, _WidgetsInTemplateMixin, Menu], {
scene:0,
sceneId:0,
target:"",
state:"pending",
cloudCover: false,
cloudPercentage: 0,
targetInterest: false,
hsv: false,
previousState:"pending",
backgroundcolor:"#414141",
templateString:template,
baseClass: "TaskButton",
innerNode:undefined,
cm:null,
theTask:null,
eventHandle:null,
postCreate: function()
{
// Get a DOM node reference for the root of our widget
var domNode = this.domNode;
this.innerNode = domNode.firstChild.nextElementSibling.firstElementChild;
domClass.replace(this.innerFill, "task"+this.state+"Background", "task"+this.state+"Background");
if (this.cloudCover && ((this.state === "Ready") || (this.state === "Unassigned"))) {
domClass.replace(this.innerFill, "task"+"Red"+"Background", "task"+this.state+"Background");
}
this.previousState = this.state;
console.log("getting context menu for Scene-" + this.scene + "ContextMenu");
cm = registry.byId("Scene-" + this.scene + "ContextMenu");
this.own(
on(domNode, "contextmenu", lang.hitch(this, "_showContextMenu"))
);
this.inherited(arguments);
},
startup: function()
{
//Turn off button icons if warranted Must do here after dom nodes built
if (!this.cloudCover)
{
dojo.style(dojo.byId("Scene-"+this.scene+"Cloud"), "display", "none");
}
if (!this.targetInterest)
{
dojo.style(dojo.byId("Scene-"+this.scene+"Target"), "display", "none");
}
if (!this.hsv)
{
dojo.style(dojo.byId("Scene-"+this.scene+"HSV"), "display", "none");
}
this.inherited(arguments);
},
test: function(sceneId)
{
console.log("testing");
if (sceneId != this.scene)
{
domClass.replace("Scene-" + sceneId + "Fill", "taskInnerFill", "taskInnerFillSelected");
}
},
buildRendering: function()
{
console.log("buildRendering scene:" + this.scene);
this.inherited(arguments);
},
//
uninitialize: function()
{
if (this.eventHandle != null)
{
console.log("unsubscribing from event topic");
eventHandle.remove();
eventHandle = null;
}
this.inherited(arguments);
},
//
_onMenuClick: function(event)
{
console.log("menu item clicked");
},
_showContextMenu: function(event) {
console.log("opening context menu for scene:" + this.scene);
this.inherited(arguments);
},
// This is always called
_onMouseDown: function(e)
{
var scene = e.currentTarget.attributes["scene"].value;
if (e.button == 0)
{
console.log("mouse left pressed, scene=" + scene + " button=" + e.button);
domClass.replace("Scene-" + scene + "OuterBorder", "taskOuterBorderPressed", "taskOuterBorder");
}
else if (e.button == 2)
{
console.log("mouse right pressed, scene=" + scene + " button=" + e.button);
domClass.replace("Scene-" + scene + "OuterBorder", "taskOuterBorderPressed", "taskOuterBorder");
}
this.inherited(arguments);
},
// This is always called
_onMouseUp: function(e)
{
var scene = e.currentTarget.attributes["scene"].value;
if (e.button == 0)
{
console.log("mouse left released, scene=" + scene + " button=" + e.button);
}
else if (e.button == 2)
{
console.log("mouse right released, scene=" + scene + " button=" + e.button);
}
domClass.replace("Scene-" + this.scene + "OuterBorder", "taskOuterBorder", "taskOuterBorderPressed");
dijit.hideTooltip(e.currentTarget);
this.inherited(arguments);
},
//
_onMouseEnter: function(e)
{
label = "Scene: " + this.scene + "<BR>State: " + this.state + "<BR>Target: " + this.target;
dijit.showTooltip(label,e.currentTarget);
dijit.popup.close();
this.inherited(arguments);
},
//
_onMouseLeave: function(e)
{
this._onMouseUp("");
this.inherited(arguments);
dijit.hideTooltip(e.currentTarget);
},
// This is what is not always called
_onClick: function(e)
{
var scene = e.currentTarget.attributes["scene"].value;
console.log("scene " + scene + " clicked");
this._publishEvent(this.scene, "clicked");
this.inherited(arguments);
},
//
_onBlur: function(e)
{
dijit.popup.close();
this.inherited(arguments);
},
//
_onContextMenu: function(e)
{
this.inherited(arguments);
this._publishEvent({"scene":this.scene,"sceneId":this.sceneId}, "clicked");
dijit.hideTooltip(e.currentTarget);
var widget = this;
theNode = "TaskButtonContainer" + widget.scene;
console.log("mouse right clicked, scene=" + widget.scene + " target: " + e.target + "current target");
theTask = missionCache.query({"sceneId" : this.scene}).then( function(results) {
theTask = results;
if (widget.state === "Unassigned" || widget.state === "Ready") {
//The context menu should fire to allow assignment
var cb = new dijit.form.ComboBox({style:"width:96%;background-color:#414141;margin-top:4px;margin-bottom:4px;",
name:"usersByTask", placeholder:"Assign this task to: ", store:usersContextMenuCB,
labelAttr: 'name',
searchAttr: 'name',
onChange: function(){
theTask[0].taskStatus = "Assigned";
theTask[0].taskOwner = this.item.userName;
missionCache.put(theTask[0]);
console.log("nothing");
widget.set("state", "Assigned");
assignTask(this.item.userName);
widget.domNode.classList.remove("Unassigned");
widget.domNode.classList.add("Assigned");
widget.domNode.setAttribute("dndtype", "Assigned");
this.destroy();
},
onClose: function() { this.destroy();}
});
cb.toggleDropDown();
dijit.popup.open({parent: widget, popup:cb, around:e.target,
onClose: function(){
dijit.popup.close(cb);
}
});
}
});
},
_publishEvent: function(sceneNumber, eventName)
{
console.log("publishing " + eventName + " for scene " + sceneNumber);
topic.publish("TaskButton/tasks", { scene:sceneNumber, task:this, event:eventName });
},
_setStateAttr: function(newState)
{
if (newState != "")
{
console.log("setting state for scene:" + this.scene + " to " + newState);
this._set("state", newState);
if (this.innerNode !== undefined)
{
domClass.replace(this.innerFill, "task"+newState+"Background", "task"+this.previousState+"Background");
}
this.previousState = this.state;
this.state = newState;
}
this.inherited(arguments);
},
_changeTaskState: function(newState)
{
require(["dijit/registry"], function(registry) {
var node = registry.byId(clickedItem);
if (node !== undefined)
{
node.set("state", newState);
console.log("changed task " + this.clickedItem + " state to " + newState);
}
});
this.inherited(arguments);
},
_menuTaskDetails: function(e)
{
console.log("do task deatils");
}
});
})
There are attach events for all the button actions in the template.
TaskButton.html template:
<li class="dojoDndItem" dndType="${state}" style="border:none;padding:0" data-dojo-props="scene:${scene}">
<div id="TaskButtonContainer-${scene}" widgetid="TaskButtonContainer-${scene}" class="${baseClass}" data-dojo-attach-point="taskButtonContainer"
data-dojo-attach-event="onContextMenu:_showContextMenu">
<div widgetid="Scene-${scene}ContextMenu" data-dojo-type="dijit/Menu" data-dojo-props="contextMenuForWindow:false"
data-dojo-attach-point="contextMenu" targetNodeIds="Scene-${scene}Fill" style="display: none;">
<div data-dojo-type="dijit/MenuItem" data-dojo-attach-event="onClick:_menuTaskDetails">
Task Details
</div>
</div>
<div id="Scene-${scene}OuterBorder" widgetid="Scene-${scene}OuterBorder" class="taskOuterBorder" data-dojo-attach-point="outerBorder" scene="${scene}">
<div id="Scene-${scene}Fill" class="taskInnerFill task${state}Background" data-dojo-attach-point="innerFill" scene="${scene}"
data-dojo-attach-event="onMouseDown:_onMouseDown,onMouseUp:_onMouseUp,onDijitClick:_onClick,onMouseEnter:_onMouseEnter,onMouseLeave:_onMouseLeave,onContextMenu:_onContextMenu,onBlur:_onBlur">
<div id="Scene-${scene}Text" class="taskText" data-dojo-attach-point="text">
<table style="margin:0;padding:0">
<tr>
<td>${scene}</td>
</tr>
<tr>
<td>
<img id="Scene-${scene}Cloud" src="img/cloud.png" alt="Cloud cover" height="21" width="21">
<img id="Scene-${scene}Target" src="img/target.png" alt="ATR" height="21" width="21">
<img id="Scene-${scene}HSV" src="img/HSV.png" alt="HSV" height="21" width="21">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</li>
I've also cleaned up the code per the suggestions and there is no change in the behavior of the TaskButton's onClick event handler.
Hmm,
There is multiple errors...
you don't need to inherits from _WidgetBase, _TemplatedMixin and _OnDijitClickMixin, they come with Menu
Menu should be the Base (so should be first in the inheritance list)
you should no use domNode.firstChild.nextElementSibling.firstElementChild but instead you should use a data-dojo-attach-point in the template
cm = registry.byId('Scene-' + this.scene + 'ContextMenu'); should be this.cm = registry.byId('Scene-' + this.scene + 'ContextMenu');
dojo namespace should not be used. So dojo.style should be replaced by a require to dojo/dom-style and domStyle.set() and dojo.byId should be replaced by a require to dojo/dom and dom.byId()
dijit namespace should not be used. So dijit.hideTooltip should be replaced by a require to dijit/Tooltip then Tooltip.hide() and dijit.showTooltip should be replaced by Tooltip.show() and dijit.popup.close() should be replaced by a require to dijit/_base/popup then popup.close() and dijit.popup.open() should be replaced by popup.open()
var is missing before label in method _onMouseEnter
in onChange of the dijit.form.ComboBox you call a non existing method assignTask
in _changeTaskState method you require dijit/registry but it is already available. So the extra require is useless
probably many more but I am not there to refactor your code
finally nothing is attached to your _onClick method. I don't event understand how it can be sometimes executed... Butmaybe it is connected using data-dojo-attach-event ? If yes, then please also provide your template.
Try to apply all the changes to cleanup some mistakes, and see if it works better.
If no, please share the template of your button.
define([
'dojo/_base/declare',
'dojo/_base/event',
'dojo/_base/lang',
'dojo/dom',
'dojo/dom-class',
'dojo/dom-construct',
'dojo/dom-style',
'dojo/mouse',
'dojo/on',
'dojo/query',
'dojo/topic',
'dijit/Menu',
'dijit/MenuItem',
'dijit/MenuSeparator',
'dijit/PopupMenuItem',
'dijit/popup',
'dijit/Tooltip',
'dijit/Tree',
'dijit/tree/ForestStoreModel',
'dijit/registry',
'dijit/_base/popup',
'dijit/form/Button',
'dijit/_WidgetBase',
'dijit/_OnDijitClickMixin',
'dijit/_TemplatedMixin',
'dijit/_WidgetsInTemplateMixin',
'dojo/text!./templates/TaskButton.html'
], function(declare, event, lang, dom, domClass, domConstruct, domStyle, mouse, on, query, topic, Menu, MenuItem, MenuSeparator, PopupMenuItem,
Popup, Tooltip, Tree, ForestStoreModel, registry, popup, button, _WidgetBase, _OnDijitClickMixin, _TemplatedMixin, _WidgetsInTemplateMixin, template) {
return declare('TaskButton', [Menu, _WidgetsInTemplateMixin], {
scene: 0,
sceneId: 0,
target: '',
state: 'pending',
cloudCover: false,
cloudPercentage: 0,
targetInterest: false,
hsv: false,
previousState: 'pending',
backgroundcolor: '#414141',
templateString: template,
baseClass: 'TaskButton',
innerNode: undefined,
cm: null,
theTask: null,
eventHandle: null,
postCreate: function() {
// Get a DOM node reference for the root of our widget
var domNode = this.domNode;
this.innerNode = domNode.firstChild.nextElementSibling.firstElementChild;
domClass.replace(this.innerFill, 'task' + this.state + 'Background', 'task' + this.state + 'Background');
if (this.cloudCover && ((this.state === 'Ready') || (this.state === 'Unassigned'))) {
domClass.replace(this.innerFill, 'task' + 'Red' + 'Background', 'task' + this.state + 'Background');
}
this.previousState = this.state;
console.log('getting context menu for Scene-' + this.scene + 'ContextMenu');
cm = registry.byId('Scene-' + this.scene + 'ContextMenu');
this.own(
on(domNode, 'contextmenu', lang.hitch(this, '_showContextMenu'))
);
this.inherited(arguments);
},
startup: function() {
//Turn off button icons if warranted Must do here after dom nodes built
if (!this.cloudCover) {
domStyle.set(dom.byId('Scene-' + this.scene + 'Cloud'), 'display', 'none');
}
if (!this.targetInterest) {
domStyle.set(dom.byId('Scene-' + this.scene + 'Target'), 'display', 'none');
}
if (!this.hsv) {
domStyle.set(dom.byId('Scene-' + this.scene + 'HSV'), 'display', 'none');
}
this.inherited(arguments);
},
test: function(sceneId) {
console.log('testing');
if (sceneId != this.scene) {
domClass.replace('Scene-' + sceneId + 'Fill', 'taskInnerFill', 'taskInnerFillSelected');
}
},
buildRendering: function() {
console.log('buildRendering scene:' + this.scene);
this.inherited(arguments);
},
//
uninitialize: function() {
if (this.eventHandle != null) {
console.log('unsubscribing from event topic');
eventHandle.remove();
eventHandle = null;
}
this.inherited(arguments);
},
//
_onMenuClick: function(event) {
console.log('menu item clicked');
},
_showContextMenu: function(event) {
console.log('opening context menu for scene:' + this.scene);
this.inherited(arguments);
},
// This is always called
_onMouseDown: function(e) {
var scene = e.currentTarget.attributes['scene'].value;
if (e.button == 0) {
console.log('mouse left pressed, scene=' + scene + ' button=' + e.button);
domClass.replace('Scene-' + scene + 'OuterBorder', 'taskOuterBorderPressed', 'taskOuterBorder');
} else if (e.button == 2) {
console.log('mouse right pressed, scene=' + scene + ' button=' + e.button);
domClass.replace('Scene-' + scene + 'OuterBorder', 'taskOuterBorderPressed', 'taskOuterBorder');
}
this.inherited(arguments);
},
// This is always called
_onMouseUp: function(e) {
var scene = e.currentTarget.attributes['scene'].value;
if (e.button == 0) {
console.log('mouse left released, scene=' + scene + ' button=' + e.button);
} else if(e.button == 2) {
console.log('mouse right released, scene=' + scene + ' button=' + e.button);
}
domClass.replace('Scene-' + this.scene + 'OuterBorder', 'taskOuterBorder', 'taskOuterBorderPressed');
Tooltip.hide(e.currentTarget);
this.inherited(arguments);
},
//
_onMouseEnter: function(e) {
var label = 'Scene: ' + this.scene + '<BR>State: ' + this.state + '<BR>Target: ' + this.target;
Tooltip.show(label, e.currentTarget);
popup.close();
this.inherited(arguments);
},
//
_onMouseLeave: function(e) {
this._onMouseUp('');
this.inherited(arguments);
Tooltip.hide(e.currentTarget);
},
// This is what is not always called
_onClick: function(e) {
var scene = e.currentTarget.attributes['scene'].value;
console.log('scene ' + scene + ' clicked');
this._publishEvent(this.scene, 'clicked');
this.inherited(arguments);
},
//
_onBlur: function(e) {
popup.close();
this.inherited(arguments);
},
//
_onContextMenu: function(e) {
this.inherited(arguments);
this._publishEvent({
'scene': this.scene,
'sceneId': this.sceneId
}, 'clicked');
Tooltip.hide(e.currentTarget);
var widget = this;
theNode = 'TaskButtonContainer' + widget.scene;
console.log('mouse right clicked, scene=' + widget.scene + ' target: ' + e.target + 'current target');
theTask = missionCache.query({
'sceneId': this.scene
}).then(function(results) {
theTask = results;
if (widget.state === 'Unassigned' || widget.state === 'Ready') {
//The context menu should fire to allow assignment
var cb = new dijit.form.ComboBox({
style: 'width:96%;background-color:#414141;margin-top:4px;margin-bottom:4px;',
name: 'usersByTask',
placeholder: 'Assign this task to: ',
store: usersContextMenuCB,
labelAttr: 'name',
searchAttr: 'name',
onChange: function() {
theTask[0].taskStatus = 'Assigned';
theTask[0].taskOwner = this.item.userName;
missionCache.put(theTask[0]);
console.log('nothing');
widget.set('state', 'Assigned');
//assignTask(this.item.userName);
widget.domNode.classList.remove('Unassigned');
widget.domNode.classList.add('Assigned');
widget.domNode.setAttribute('dndtype', 'Assigned');
this.destroy();
},
onClose: function() {
this.destroy();
}
});
cb.toggleDropDown();
popup.open({
parent: widget,
popup: cb,
around: e.target,
onClose: function() {
popup.close(cb);
}
});
}
});
},
_publishEvent: function(sceneNumber, eventName) {
console.log('publishing ' + eventName + ' for scene ' + sceneNumber);
topic.publish('TaskButton/tasks', {
scene: sceneNumber,
task: this,
event: eventName
});
},
_setStateAttr: function(newState) {
if (newState != '') {
console.log('setting state for scene:' + this.scene + ' to ' + newState);
this._set('state', newState);
if (this.innerNode !== undefined) {
domClass.replace(this.innerFill, 'task' + newState + 'Background', 'task' + this.previousState + 'Background');
}
this.previousState = this.state;
this.state = newState;
}
this.inherited(arguments);
},
_changeTaskState: function(newState) {
var node = registry.byId(clickedItem);
if (node !== undefined) {
node.set('state', newState);
console.log('changed task ' + this.clickedItem + ' state to ' + newState);
}
this.inherited(arguments);
},
_menuTaskDetails: function(e) {
console.log('do task deatils');
}
});
})
I am developing an app where I use 2 API's a.k.a Instagram API and Google Map API. Using AJAX, I get the first set of Images filtered by a tag name. In the 1st set we receive 20 images. Among the received images, the images that have the latitude and longitude info (geotagged images) are displayed on the map.
Now the first time when my page loads, I cannot see the map. But when I press the load more button to get the next set of images, the Map works fine showing my previous images too.
Here is the code for what happens on page load:
$( window ).load(function() {
$.ajax({
type: "GET",
url: "https://api.instagram.com/v1/tags/nyc/media/recent?client_id=02e****",
dataType:'JSONP',
success: function(result) {
onAction(result, 2, tag);
instaMap(result, 2, from);
}
});
});
These are the functions being called:
/**
* [initialize description]
* Initialize the map with markers showing all photos that are geotagged.
*/
var initialize = function(markers) {
var bounds = new google.maps.LatLngBounds(),
mapOptions = {
scrollwheel: false,
mapTypeId: 'roadmap',
center: new google.maps.LatLng(22.50, 6.50),
minZoom: 2
},
gmarkers = [],
map,
positions,
markCluster;
markers = remDuplicate(markers);
// Info Window Content
var infoWindowContent = [];
for (var j = 0; j < markers.length; j++ ) {
var content = [
'<div class="info_content">' +
'<h3>' + markers[j][2] + '</h3>' +
'<a href="' + markers[j][3] + '" target="_blank">' +
'<img src="' + markers[j][4] + '" style="z-index:99999">' + '</a>' +
'</div>'
];
infoWindowContent.push(content);
}
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
// Display multiple markers on a map
var oms = new OverlappingMarkerSpiderfier(map);
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
positions = new google.maps.LatLng(markers[i][0], markers[i][1]);
marker = new google.maps.Marker({
position: positions,
map: map,
animation:google.maps.Animation.BOUNCE,
title: markers[i][2]
});
oms.addMarker(marker);
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.close();
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
map.setCenter(marker.getPosition());
};
})(marker, i));
gmarkers.push(marker);
}
google.maps.event.addListener(map, 'click', function() {
infoWindow.setMap(null);
});
markCluster = new MarkerClusterer(map, gmarkers);
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
map.setZoom(2);
google.maps.event.removeListener(boundsListener);
});
};
/**
* [onAction]
* OnAction() function helps in loading non-geotagged pics.
*
* #param {[type]} result [Result retruned from the Instagram API in json format]
* #param {[type]} likey [hearts the user has entered as per which the posts will be filtered]
*/
var onAction = function (result, likey, tag) {
$('.load-pics').remove();
if (result.pagination.next_url) {
paginate = removeURLParameter(result.pagination.next_url, 'count');
}
$.each(result, function(key, value) {
if (key === 'data') {
$.each(value, function(index, val) {
liked = val.likes.count;
link = val.link;
imgUrl = val.images.low_resolution.url;
locations = val.location;
if (liked >= likey) {
if (locations === null) {
output = '<li class="img-wrap">' + '<div class="main-img">' +
'<a href="' + link + '" target="_blank">' +
'<img src="' + imgUrl + '" ><span class="hover-lay"></span></a>' +'<p>' +
'<span class="heart"></span><span class="likes-no">' + liked + '</span>' +
'<span class="comment-box"></span><span class="comment-no">' +
val.comments.count + '</span> ' + '</p>' + '</div>' +
'<div class="img-bottom-part">'+ '' + '<div class="headin-hastag">' +
'by ' + '<h2>Sebastien Dekoninck</h2>#hello <span>#kanye</span> #helloagain #tagsgohere</div>'
+'</div></li>';
$('#instafeed').append(output);
}
}
});
}
});
if ($('#instafeed').children().length === 0) {
alert('There are no pics with ' + likey + ' likes or #' + tag + ' was not found.');
} else {
// $('.not-geo').remove();
// $('#instafeed').before('<button class="not-geo">Click To See Images That Are Not Geotagged <img src="assets/imgs/down.png" ></button>');
}
$('#instafeed').append('<div class="load-pics"><button id="show-more">Show more <span></span></button> </div>');
};
/**
* [instaMap]
* instaMap() will be the function which will deal with all map based functionalities.
*/
var instaMap = function(result, likey, from) {
$('.load-mark').remove();
if (result.pagination.next_url) {
pagiMap = removeURLParameter(result.pagination.next_url, 'count');
}
$.each(result, function(key, value) {
if (key === 'data') {
$.each(value, function(index, val) {
liked = val.likes.count;
link = val.link;
imgUrl = val.images.low_resolution.url;
locations = val.location;
if (liked >= likey) {
if (locations && locations.latitude !== null) {
tempArr = [
locations.latitude,
locations.longitude,
val.user.username,
val.link,
val.images.low_resolution.url
];
mark.push(tempArr);
}
}
});
}
});
if (mark.length) {
initialize(mark);
$('.map-parent-wrapper').append('<div class="load-mark"><button id="show-mark">See More </button></div>');
} else {
alert('No geotagged pics found in the retrieved set. Click see more');
$('.map-parent-wrapper').append('<div class="load-mark"><button id="show-mark">See More </button></div>');
}
};
I have created a See More button to retrieve the next set of images and load those on the Map. When clicking see more, everything seems to work fine. Not sure why it's happening so. Console.log does not show any error. Also, all the values I feed does flow appropriately. I even tried clearing cache. Not sure, why it's happening.
If instaMap is the function which is going to handle all your map based functionality, it has to be the one that loads map in your $( window ).load function ();
Otherwise, if you want Google maps to load on initial window load you need to put below in there:
google.maps.event.addDomListener(window, 'load', initialize);
I am working with a jquery dynamic flip book. I can add post it notes to either page the even or odd. This code create the notes select which page to add the note to and drags.
function CreatePostIt() {
$("#PostIt").dialog({ modal: true, autoResize: true, height: 500, width: 530,
open: function () {
$("#BookMenu").fadeOut(500);
BookMenuShow = false;
$("#pNotes").addClass("yellow");
$("#pNotes").removeClass("transparent");
$("#pNotes").removeClass("blue");
$("#pNotes").removeClass("green");
$("#note-body").text("");
$("#pNotes").css("font-size", $("#NoteFontSize").val());
color = "yellow";
$("#pNotes").text("");
if (PageIndex == 0) {
$("#rightTn").click();
$("#leftTn").attr("src", "images/blank.gif")
$("#rightTn").attr("src", tnNames[PageIndex]);
} else {
$("#leftTn").width(120);
$("#rightTn").width(120);
$("#leftTn").attr("src", tnNames[PageIndex - 1])
$("#rightTn").attr("src", tnNames[PageIndex]);
$("#leftTn").click();
}
},
buttons: {
"INSERT": function () {
var count = $(".npg" + PageSelected).length;
var Annotation = $("<div style='z-index:250000' class='note npg" + PageSelected + "' index='0'></div>");
var aId = "Page-" + PageSelected + "-Note-" + (count + 1);
AnnoCount = AnnoCount + 1;
$(Annotation).attr("id", "Page-" + PageSelected + "-Note-" + (count + 1));
$(Annotation).css("font-size", $("#NoteFontSize").val());
$(Annotation).css("display", "none");
$(Annotation).append("<img class='noteClose' rel='Page-" + PageSelected + "-Note-" + (count + 1) + "' style='float:right; padding:10px 10px 5px 5px' src='images/close.gif'/>");
$(Annotation).append("<div style='padding:25px 25px 25px 25px;' id='noteText" + (count + 1) + "' class='noteBody'>" + $("#note-body").val() + " </div>")
$(Annotation).addClass("liveNote");
$(Annotation).addClass("npage" + PageSelected);
$(Annotation).addClass(color);
$("#pgDv" + (PageSelected)).prepend(Annotation);
$.cookie("Book-" + bookid + "-Page-" + PageSelected, aId + "||" + $("#note-body").val() + "||" + "0,0,0,0||" + color + "||" + $("#NoteFontSize").val() + "<*>", { expires: 365, path: "/" });
**if (ZoomOn != true) {
if ("#rightPageShadow") {
Annotation.draggable({ cusror: "pointer", containment: 'parent'
});
} else {
Annotation.draggable({ cusror: "pointer", containment: "#leftPageShadow"
});
}
}
else if (ZoomOn = true) {
Annotation.draggable({
create: function () {
$(this).show();
},
cusror: "pointer",
containment: "parent"
});
}
$(Annotation).show();
// $("#PostItNoteInd").show();
$(this).dialog("close");
$("#note-body").text("");**
}
, "CANCEL": function () {
$("#pNotes").text("");
$("#leftTn").attr("rel", -10);
$("#leftTn").css("border", "0px solid red");
$("#rightTn").attr("rel", -10);
$("#rightTn").css("border", "0px solid red");
$(this).dialog("close");
}
}
});
var cw = $("#PostItDialogContent").width();
$("#PostIt").dialog("option", "width", cw + 20);
}
the problem I am have is when the post it note is place on the page on left and top it works. but on the right and bottom it does not. I have tried [x,y, x1, y1] but because each book is different I tried to used the my id tags if you #leftPageShadow with is on div and other is #rightPageShadow
Problem fixed I was losing the cookie id change cookie code.
I have a checkbox column in my JqGrid which get loaded from DB, so it is either checked or not checked when it is loaded.
What i want is : If checkbox is being checked or uncheked by user i want to update DB in at same. I dont want user to press enter or anything. only 1 click and send action to DB
name: 'Aktiv', index: 'Aktiv', width: 100, edittype: 'checkbox', align: 'center',formatter: "checkbox", editable: true, formatoptions: {disabled : false}
You can set a click event handler inside of loadComplete:
loadComplete: function () {
var iCol = getColumnIndexByName ($(this), 'Aktiv'), rows = this.rows, i,
c = rows.length;
for (i = 1; i < c; i += 1) {
$(rows[i].cells[iCol]).click(function (e) {
var id = $(e.target).closest('tr')[0].id,
isChecked = $(e.target).is(':checked');
alert('clicked on the checkbox in the row with id=' + id +
'\nNow the checkbox is ' +
(isChecked? 'checked': 'not checked'));
});
}
}
where
var getColumnIndexByName = function(grid, columnName) {
var cm = grid.jqGrid('getGridParam', 'colModel'), i, l;
for (i = 1, l = cm.length; i < l; i += 1) {
if (cm[i].name === columnName) {
return i; // return the index
}
}
return -1;
};
Instead of the alert you should use jQuery.ajax to send information to the server about updating the checkbox state.
You can see a demo here.
A small correction in the loadComplete: function().
in the demo you can find that even after the checkbox is checked, if you click outside the checkbox in that cell, the value gets changed to 'false' from 'true'.
To avoid this, just give the focus exactly on the checkbox alone by doing the following.
for (i = 1; i < c; i += 1) {
$(('input[type="checkbox"]'),rows[i].cells[iCol]).click(function (e) {
var id = $(e.target).closest('tr')[0].id,
isChecked = $(e.target).is(':checked');
alert('clicked on the checkbox in the row with id=' + id +
'\nNow the checkbox is ' +
(isChecked? 'checked': 'not checked'));
});
}
and thanks for the answer :-) (#Oleg) helped me a lot..in time of course.. ;)
To change values of other column based on click of checkbox
var weightedAvgPriceIndex = getColumnIndexByName($(this), 'WeightedAveragePrice'),
rows = this.rows,
i,
c = rows.length;
for (i = 1; i < c; i += 1) {
$(('input[type="checkbox"]'),rows[i].cells[iCol]).click(function (e) {
var id = $(e.target).closest('tr')[0].id;
isChecked = $(e.target).is(':checked');
var x = $('#' + id + ' td:eq(' + weightedAvgPriceIndex + ')').text();
$('#' + id + ' td:eq(' + weightedAvgPriceIndex + ')').text(Math.abs(x) + 10);
});
}