I'm using a responsive datatables on which I'm trying to handle click on a row, so you get redirected to a new page if you click on the row. This works fine, but if the table is collapsed I cannot show the child row, since clicking on the expand icon activates the row click and I get redirected.
So I'm trying to see if I can check whether the icon is clicked or not, but I cannot figure out how to do it
I have tried to use
$("#jobListTable").hasClass('collapsed')
in order to see, if the table is collapsed or not, but I still miss how to check what cell i clicked
Simplyfied fiddle can be found here: http://jsfiddle.net/Anja_Reeft/agouq6ts/5/
But my actually code is
$('#jobListTable tbody').on('click', 'tr', function (e) {
var data = oTable.row( this ).data();
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
oTable.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
var selectedTaskID = data.taskID;
var selectedJobNumber = data.jobNumber;
var selectedReqno = data.reqno;
var selectedPriority = data.priority;
var selectedCreatedBy = data.createdBy;
var selectedEmployeeInitials = data.employeeInitials;
var selectedShortDescription = data.shortDescription;
var selectedLongDescription = data.longDescription;
var selectedSourceReference = data.sourceReference;
var selectedAktivitetstype = data.aktivitetstype;
var selectedDueDatetime = data.dueDatetime;
var selectedRecurrence = data.recurrence;
var selectedStatus = data.status;
var selectedStatusColor = encodeURIComponent(data.statusColor);
var teamID = "";
if (sessionStorage.getItem("teamID")) {
teamID = "&teamID="+sessionStorage.getItem("teamID");
}
document.location.href="jobinfo.php?taskID="+selectedTaskID+"&jobNumber="+selectedJobNumber+"&reqno="+selectedReqno+"&priority="+selectedPriority+"&createdBy="+selectedCreatedBy+"&employeeInitials="+selectedEmployeeInitials+"&shortDescription="+selectedShortDescription+"&longDescription="+selectedLongDescription+"&sourceReference="+selectedSourceReference+"&aktivitetstype="+selectedAktivitetstype+"&dueDatetime="+selectedDueDatetime+"&recurrence="+selectedRecurrence+"&status="+selectedStatus+"&statusColor="+selectedStatusColor+teamID;
} );
Please let me know if you need futher information.
In cases anyone has a simular problem:
I changed my code so I added a button to each row
"columns": [
{
data: null, // can be null or undefined
defaultContent: '<button type="button" id="jobInfoBtn" class="btn btn-sm"><i class="fa fa-info-circle" aria-hidden="true"></i></button>',
},
and then changed my on click function
$('#jobListTable tbody').on('click', 'tr', function (e) {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
oTable.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
$('#jobListTable tbody').on('click', 'button', function (e) {
var data = oTable.row( $(this).parents('tr') ).data();
var selectedTaskID = data.taskID;
var selectedJobNumber = data.jobNumber;
var selectedReqno = data.reqno;
var selectedPriority = data.priority;
var selectedCreatedBy = data.createdBy;
var selectedEmployeeInitials = data.employeeInitials;
var selectedShortDescription = data.shortDescription;
var selectedLongDescription = data.longDescription;
var selectedSourceReference = data.sourceReference;
var selectedAktivitetstype = data.aktivitetstype;
var selectedDueDatetime = data.dueDatetime;
var selectedRecurrence = data.recurrence;
var selectedStatus = data.status;
var selectedStatusColor = encodeURIComponent(data.statusColor);
var teamID = "";
if (sessionStorage.getItem("teamID")) {
teamID = "&teamID="+sessionStorage.getItem("teamID");
}
document.location.href="jobinfo.php?taskID="+selectedTaskID+"&jobNumber="+selectedJobNumber+"&reqno="+selectedReqno+"&priority="+selectedPriority+"&createdBy="+selectedCreatedBy+"&employeeInitials="+selectedEmployeeInitials+"&shortDescription="+selectedShortDescription+"&longDescription="+selectedLongDescription+"&sourceReference="+selectedSourceReference+"&aktivitetstype="+selectedAktivitetstype+"&dueDatetime="+selectedDueDatetime+"&recurrence="+selectedRecurrence+"&status="+selectedStatus+"&statusColor="+selectedStatusColor+teamID;
} );
Related
When ever i try to save special character like ä,ö to my DojoGrid which loads and saves data via xe:restService the character get messedup,
When ever i end the grid directly it save ok, but when ever i work on it in the background and save it, it get messedup.below is the script on my button
var args = {
onComplete: function() {},
onError: function() { alert('Update error'); }
}
var grid = dijit.byId('#{id:grid}');
var selectedIDs =grid.selection.getSelected();
var store = dataGrid.store;
var Index = grid.selection.selectedIndex;
if(Index != null){
var curEntry = dataGrid.getItem(Index);
var nextEntry = dataGrid.getItem(Index-1);
currentViewIndex = store.getValue(curEntry,"ViewIndex");
nextViewIndex = store.getValue(nextEntry,"ViewIndex");
store.setValue(curEntry, 'ViewIndex',nextViewIndex);
store.setValue(nextEntry, 'ViewIndex',currentViewIndex);
grid.update();
restService1.save(args)
XSP.partialRefreshPost("#{id:gridDiv}",{});
}
We are trying to find suggestions, or implementation options on how to hide a marker once a new point on the map has been clicked.
In our application, once the user clicks on a particular pin on the map, we display a new pin (in a different lat/long location) that is associated with the click event. I.e. a point should be in oklahoma, but the map is displaying texas, so once the marker texas is clicked, a new marker in oklahoma is shown. Our issue is that whenever a user selects a new point, we are not able to "hide" the marker for the previous selection, which then clutters our screen.
Any suggestions on how we could handle this issue?
Code is below:
require(["esri/map", "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol", "esri/graphic", "dojo/_base/array", "dojo/dom-style", "dojox/widget/ColorPicker", "esri/InfoTemplate", "esri/Color", "dojo/dom", "dojo/domReady!", "esri/geometry/Polyline", "esri/geometry/geodesicUtils", "esri/units","esri/symbols/SimpleLineSymbol"],
function( Map, Point,SimpleMarkerSymbol, Graphic, arrayUtils, domStyle, ColorPicker, InfoTemplate, Color, dom, Polyline, geodesicUtils, Units,SimpleLineSymbol) {
map = new Map("mapDiv", {
center : [-98.35, 35.50],
zoom : 5,
basemap : "topo"
//basemap types: "streets", "satellite", "hybrid", "topo", "gray", "oceans", "osm", "national-geographic"
} );
map.on("load", pinMap);
var arr = [];
var initColor, iconPath;
function pinMap( ) {
map.graphics.clear();
iconPath = "M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z";
var infoContent = "<b>Id</b>: ${Id} ";
var infoTemplate = new InfoTemplate(" Details",infoContent);
$.post( '{{ path( 'points' ) }}', {}, function( r ) {
arrayUtils.forEach( r.points, function( point ) {
if (point.test==1) {
initColor = "#CF3A3A";
}
else {
initColor = "#FF9900";
}
arr.push(point.id,point.pinLon1,point.pinLat1,point.pinLon2,point.pinLat2);
var attributes = {"Site URL":point.url,"Activity Id":point.id,"Updated By":point.updated,"Customer":point.customer};
var graphic = new Graphic(new Point(point.pinLon1,point.pinLat1),createSymbol(iconPath,initColor),attributes,infoTemplate);
map.graphics.add( graphic );
map.graphics.on("click",function(evt){
var Content = evt.graphic.getContent();
var storeId = getStoreId(Content);
sitePins(storeId);
});
} );
}, 'json' );
}
function getStoreId( content ){
var init = content.split(":");
var fin= init[2].split("<");
return fin[0].trim();
}
function sitePins( siteId ) {
iconPathSite = "M15.834,29.084 15.834,16.166 2.917,16.166 29.083,2.917z";
initColorSite = "#005CE6";
var infoContent = "<b>Distance</b>: ${Distance} Miles";
var infoTemplate = new InfoTemplate(" Distance to Location",infoContent);
var indexValue=0;
for (var index = 0; index < arr.length; index++){
if (arr[index]==storeId){
indexValue =index;
}
}
pinLon1 = arr[indexValue+1];
pinLat1 = arr[indexValue+2];
pinLon2 = arr[indexValue+3];
pinLat2 = arr[indexValue+4];
var line = {"paths":[[[pinLon1, pinLat1], [pinLon2, pinLat2]]]};
line = new esri.geometry.Polyline(line);
var lengths = Number(esri.geometry.geodesicLengths([line], esri.Units.MILES)).toFixed(2);
var attributes = {"Distance":lengths};
var graphicSite = new Graphic(new Point (pinLon1,pinLat1), createSymbol(iconPathSite, initColorSite),attributes,infoTemplate);
var pathLine = new esri.Graphic(line, new esri.symbol.SimpleLineSymbol());
map.graphics.add( pathLine );
map.graphics.add( graphicSite );
}
function createSymbol( path, color ) {
var markerSymbol = new esri.symbol.SimpleMarkerSymbol( );
markerSymbol.setPath(path);
markerSymbol.setSize(18);
markerSymbol.setColor(new dojo.Color(color));
markerSymbol.setOutline(null);
return markerSymbol;
}
} );
</script>
As far as I get the code, it shows the distance between the marker and the point then clicked.You are creating point and polyline on each click event on map. Following can help:
1) Please provide id say 'abc' to polyline, graphic site.
2) Then on every click event remove the graphic and polyline with id 'abc'.
dojo.forEach(this.map.graphics.graphics, function(g) {
if( g && g.id === "abc" ) {
//remove graphic with specific id
this.map.graphics.remove(g);
}
}, this);
3) Then you can create the new polyline and point as you are already doing it.
I open windows as follows:
app.js:
var NavigationController = require('NavigationController').NavigationController,
TestWindow = require('main_windows/tmain').TestWindow;
//create NavigationController which will drive our simple application
var controller = new NavigationController();
//open initial window
controller.open(new TestWindow(controller));
function openWindow(name, naController, event) {
var TestWindow2 = require('main_windows/t' + name).TestWindow;
var win = Titanium.UI.currentWindow;
var swin = Titanium.UI.createWindow();
if(event.bid)
swin.bid = event.bid;
if(event.uniq)
swin.uniq = event.uniq;
if (event.zipcode)
swin.zipcode = event.zipcode;
if (event.user_id)
swin.user_id = event.user_id;
if (event.service_id)
swin.service_id = event.service_id;
if (event.service_name)
swin.service_name = event.service_name;
if (event.user_uniqid)
swin.user_uniqid = event.user_uniqid;
if (event.user_name)
swin.user_name = event.user_name;
if (event.user_email)
swin.user_email = event.user_email;
if (event.provider_id)
swin.provider_id = event.provider_id;
if (event.provider_name)
swin.provider_name = event.provider_name;
if (event.total)
swin.total = event.total;
if(event.response)
swin.response = event.response;
swin.backgroundColor = '#f7f7f7';
swin.barImage = 'images/example.gif';
naController.open(new TestWindow2(naController, swin));
}
Here is the NavigationController.js
exports.NavigationController = function() {
this.windowStack = [];
};
exports.NavigationController.prototype.open = function(/*Ti.UI.Window*/windowToOpen) {
//add the window to the stack of windows managed by the controller
this.windowStack.push(windowToOpen);
//alert('open' + this.windowStack.length);
//grab a copy of the current nav controller for use in the callback
var that = this;
windowToOpen.addEventListener('close', function() {
// alert('open' + that.windowStack.length);
if(that.windowStack.length > 1)
{
//alert('pop' + that.windowStack.length);
that.windowStack.pop();
}
});
//hack - setting this property ensures the window is "heavyweight" (associated with an Android activity)
windowToOpen.navBarHidden = windowToOpen.navBarHidden || false;
//This is the first window
if(this.windowStack.length === 1) {
if(Ti.Platform.osname === 'android') {
windowToOpen.exitOnClose = true;
windowToOpen.open();
} else {
//alert('nav' + this.windowStack.length);
this.navGroup = Ti.UI.iPhone.createNavigationGroup({
window : windowToOpen
});
var containerWindow = Ti.UI.createWindow();
containerWindow.add(this.navGroup);
containerWindow.open();
}
}
//All subsequent windows
else {
if(Ti.Platform.osname === 'android') {
windowToOpen.open();
} else {
//alert('nav2' + this.windowStack.length);
this.navGroup.open(windowToOpen);
}
}
};
//go back to the initial window of the NavigationController
exports.NavigationController.prototype.home = function() {
//store a copy of all the current windows on the stack
//alert('reset' + this.windowStack.length);
var windows = this.windowStack.concat([]);
for(var i = 1, l = windows.length; i < l; i++) {
(this.navGroup) ? this.navGroup.close(windows[i]) : windows[i].close();
}
this.windowStack = [this.windowStack[0]]; //reset stack
//alert('n' + this.windowStack.length);
};
Here is tmain.js
exports.TestWindow = function(navController) {
var win = Ti.UI.createWindow({
backButtonTitleImage : 'images/backb.gif',
fullscreen : false,
navBarHidden : true,
});
var t1 = null;
win.backgroundImage = 'images/back.jpg';
var view = Titanium.UI.createView({
width : '100%',
height : '100%',
top : 270,
layout : 'vertical'
});
var b3 = Titanium.UI.createImageView({
url : 'images/login.gif',
height : 80
});
view.add(b3);
var b4 = Titanium.UI.createImageView({
url : 'images/signup.gif',
top : 0,
height : 80
});
view.add(b4);
win.add(view);
var list1 = function(e) {
openWindow('login', navController, e);
};
b3.addEventListener('click', list1);
var list2 = function(e) {
openWindow('register', navController, e);
};
b4.addEventListener('click', list2);
win.addEventListener('close', function (e) {
alert(3);
b3.removeEventListener('click', list1);
b4.removeEventListener('click', list2);
});
return win;
};
So I use the openWindow function to open windows in the app. I have a logout botton, that when people click on it, calls the function navController.home() (see Navigation Controller), but the problem is clicking on the logout link causes corrupt window state - meaning that the application crashes and when you try to open it, windows are mixed together (like buttons in window 3 show up in window 2).
What am I doing wrong?
To start off with, I would like to say that I have been looking on the internet for a really long time and have been unable to find the answer, hence my question here.
My latest school project is to create an admin page for adding articles to a database, the articles are connected to a point on a google map. The requirement for adding the point on the map is that the user is able to click the map once and the marker is produced, if the map is clicked a second time the first marker is moved to the second location. (this is what I am struggling with.)
The problem is, as the code is now, I get the error that markersArray is undefined. If I place the var markersArray = new Array; underneath the eventListener then I get an error that there is something wrong the main.js (googles file) and markersArray[0] is undefined in the second if.
By the way, I have to use google maps API v2, even though it is old.
<script type="text/javascript">
//<![CDATA[
var map;
var markers = new Array;
function load() {
if (GBrowserIsCompatible()) {
this.counter = 0;
this.map = new GMap2(document.getElementById("map"));
this.map.addControl(new GSmallMapControl());
this.map.addControl(new GMapTypeControl());
this.map.setCenter(new GLatLng(57.668911, 15.203247), 7);
GDownloadUrl("genxml.php", function(data) {
var xml = GXml.parse(data);
var Articles = xml.documentElement.getElementsByTagName("article");
for (var i = 0; i < Articles.length; i++) {
var id = Articles[i].getAttribute("id");
var title = Articles[i].getAttribute("title");
var text = Articles[i].getAttribute("text");
var searchWord = Articles[i].getAttribute("searchWord");
var point = new GLatLng(parseFloat(Articles[i].getAttribute("lat")),
parseFloat(Articles[i].getAttribute("lng")));
var article = createMarker(point, id, title, text);
this.map.addOverlay(article);
}
});
}
var myEventListener = GEvent.bind(this.map,"click", this, function(overlay, latlng) {
if (this.counter == 0) {
if (latlng) {
var marker = new GMarker(latlng);
latlng1 = latlng;
this.map.addOverlay(marker);
this.counter++;
markers.push(marker); //This is where I get the error that markersArray is undefined.
}
}
else if (this.counter == 1) {
if (latlng){
alert (markers[0]);
this.map.removeOverlay(markers[0]);
var markers = [];
this.map.addOverlay(marker);
this.counter++;
}
}
});
}
function createMarker(point, id, title, text) {
var article = new GMarker(point);
var html = "<b>" + title + "</b> <br/>"
GEvent.addListener(article, 'click', function() {
window.location = "article.php?id=" + id;
});
return article;
}
I solved the problem. I'm not exactly sure why it worked but this is what it looks like now:
var markersArray = [];
function load() {
if (GBrowserIsCompatible()) {
this.counter = 0;
this.map = new GMap2(document.getElementById("map"));
this.map.addControl(new GSmallMapControl());
this.map.addControl(new GMapTypeControl());
this.map.setCenter(new GLatLng(57.668911, 15.203247), 7);
GDownloadUrl("genxml.php", function(data) {
var xml = GXml.parse(data);
var Articles = xml.documentElement.getElementsByTagName("article");
for (var i = 0; i < Articles.length; i++) {
var id = Articles[i].getAttribute("id");
var title = Articles[i].getAttribute("title");
var text = Articles[i].getAttribute("text");
var searchWord = Articles[i].getAttribute("searchWord");
var type = Articles[i].getAttribute("type");
var point = new GLatLng(parseFloat(Articles[i].getAttribute("lat")),
parseFloat(Articles[i].getAttribute("lng")));
var article = createMarker(point, id, title, text);
this.map.addOverlay(article);
}
});
}
var myEventListener = GEvent.bind(this.map,"click", this, function(overlay, latlng) {
var marker = new GMarker(latlng);
if (this.counter == 0) {
if (latlng) {
latlng1 = latlng;
this.map.addOverlay(marker);
markersArray.push(marker);
this.counter++;
}
}
else if (this.counter == 1) {
if (latlng){
this.map.removeOverlay(markersArray[0]);
this.map.addOverlay(marker);
this.counter++;
}
}
});
}
function createMarker(point, id, title, text) {
var article = new GMarker(point);
var html = "<b>" + title + "</b> <br/>"
GEvent.addListener(article, 'click', function() {
window.location = "article.php?id=" + id;
});
return article;
}
For some reason in IE8 when I run this function after an onclick event it causes a page refresh. I don't wan the page refresh to happen.
var edealsButton = dojo.byId("edeals_button");
var edealEmailInput = dojo.byId("edeals_email");
var edealsSignup = dojo.byId("edeals_signup");
var edealsThankYou = dojo.byId("edeals_thankyou");
var currentValue = dojo.attr(edealEmailInput, 'value');
if (currentValue != '' && currentValue != 'Enter your email') {
var anim = dojox.fx.flip({
node: edealsSignup,
dir: "right",
duration: 300
})
dojo.connect(anim, "onEnd", this, function() {
edealsSignup.style.display = "none";
edealsThankYou.style.display = "block";
})
dojo.connect(anim, "onBegin", this, function() {
var criteria = { "emailAddress": '"' + currentValue + '"' };
alert("currentValue " + currentValue);
var d = essentials.CallWebserviceMethod('AlmondForms.asmx/SignupEdeal', criteria);
d.addCallback(function(response) {
var obj = dojo.fromJson(response);
alert(obj.d);
if (obj != null && obj.d != null) {
//alert(obj.d);
if (obj.d == false)
{
var edealSuccess = dojo.byId("edeals_succes_thankyou");
var edealError = dojo.byId("edeals_error_thankyou");
alert("edealError: " + edealError);
dojo.style(edealSuccess, "display", "none");
dojo.style(edealError, "display", "inline-block");
}
else
{
var edealSuccess = dojo.byId("edeals_succes_thankyou");
var edealError = dojo.byId("edeals_error_thankyou");
dojo.style(edealSuccess, "display","inline-block");
dojo.style(edealError, "display", "none");
}
}
else {
var edealSuccess = dojo.byId("edeals_succes_thankyou");
var edealError = dojo.byId("edeals_error_thankyou");
dojo.style(edealSuccess, "display", "none");
dojo.style(edealError, "display", "inline-block");
}
});
})
anim.play();
edealEmailInput.innerHTML == 'Enter your email';
}
else
{
dojo.attr(edealEmailInput, 'value', 'Enter your email');
dojo.style(edealEmailInput, 'color', '#CC2525');
}
It looks like your "d.addCallback" code might not be disposed of properly. You might want to try placing "dojo.stopEvent()" possibly before the "anim.play();" line and see if this would stop the postback.
From the api.dojotoolkit.org site, the dojo.stopEvent() "prevents propagation and clobbers the default action of the passed event". From the docs.dojocampus.org site, they say that "dojo.stopEvent(event) will prevent both default behavior any any propagation (bubbling) of an event."
Good luck, and hope this helps you out some.