We Keep Coding

Mouse over Popup on multiple markers leaflet.js?

so I have a leaflet map with lot of markers placed on it. I want to have a popup with like the status of asset etc on 'hover' over the marker. I see some examples on google and try to implement but none of them is firing any events. here is my code with my attempt. how can i achieve this feature? do i have to use somekind of tooltip instead of popup?
buildMarkerLayer = (rawAssetsObjects) => {
let markersGroup = null;
var self = this;
markersGroup = L.markerClusterGroup({
spiderfyOnMaxZoom: true,
showCoverageOnHover: true,
zoomToBoundsOnClick: true,
spiderfyDistanceMultiplier: 2
});
self.$localForage.getItem('showAllAreas').then((_showAll) => {
if(_showAll){
this.loadAllAreas();
}else{
this.hideAllAreas();
}
});
angular.forEach(rawAssetsObjects, function(_asset) {
if(_asset.latitude && _asset.longitude){
markersGroup.addLayer(L.marker(L.latLng(_asset.latitude,
_asset.longitude), {
id: _asset.id,
icon: L.divIcon({
html: self.siMarkers.createHTMLMarker(_asset)
})
}).on('click', function(e) {
//dismiss the event timeline
self.$mdSidenav('right').close();
self.centerOnClick(_asset);
//set the selected asset to a shared service for availability in
//other controllers
self.siMapRam.setActive(_asset);
//inform detail controller of a newly selected asset to query
self.$rootScope.$broadcast('ActiveAssetChange');
self.dgModal.display();
}).bindPopup('work').on('mouseover',function(ev) {
markersGroup.openPopup();
}));
};
});
return markersGroup
}
so I added the mouseover function and is responding on the console with error, so at least i know the listening part is working

I was close to the answer, while following many examples on google they made L.Marker into a variable like var marker = L.marker. Then call marker.openPopup(). My case, as you can see, I straight called L.marker. Problem was calling L.marker.openPopup() or L.marker(openPopup()) throws error saying openPopup is undefined. so the solution was pretty straight forward and make L.marker into a variable. like below. I also added small popup formatting like where pop-up should display using popAnchor and HTML formatting, for future flowers
angular.forEach(rawAssetsObjects, function (_asset) {
let marker = L.marker(L.latLng(_asset.latitude,
_asset.longitude), {
id: _asset.id,
icon: L.divIcon({
html: self.siMarkers.createHTMLMarker(_asset),
popupAnchor: [0,-80]
})
});
if (_asset.latitude && _asset.longitude) {
let content = "<b>"+_asset.name+"</b>"+"<br>"+"<b>"+'Status: '+"</b>"+_asset.status
markersGroup.addLayer( marker.bindPopup(content)
.on('mouseover', function (e) {
self.siMapRam.setActive(_asset);
self.$rootScope.$broadcast('ActiveAssetChange');
marker.openPopup()
})
.on('click', function (e) {
//dismiss the event timeline
self.$mdSidenav('right').close();
self.centerOnClick(_asset);
//set the selected asset to a shared service for availability in
//other controllers
self.siMapRam.setActive(_asset);
//inform detail controller of a newly selected asset to query
self.$rootScope.$broadcast('ActiveAssetChange');
self.dgModal.display();
}));
};
});
return markersGroup
}

changing the url without loading a new page

For my single page website, I have an index of projects. If a project is clicked it opens up a slideshow on the same page. So basically, I only have one URL, and if anyone wants to link to a specific project, they can't.
I'm trying to make it so that if I click on a project, it changes the URL. And so that URL can be used to get to my website with that project opened.
Here is a link to what I have so far.
For reference, I'm trying to achieve something that is found on this site.
I found some good suggestions here, but what happens when I use something like this (below), a new URL is created but it doesn't open up the project if I renter that URL into the browser.
<a href="#" id='click'>Click to change url to bar.html</a>
<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

function processAjaxData(response, urlPath){
document.getElementById("content").innerHTML = response.html;
document.title = response.pageTitle;
window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
}
You can use `window.onpopstate to sense the back/forward button navigation
window.onpopstate = function(e){
if(e.state){
document.getElementById("content").innerHTML = e.state.html;
document.title = e.state.pageTitle;
}
};
I would appreciate someone with more skill to check this over for me

You can use id at elements which has slideshow as unique URL; at .ready() start animation of element where id matches .location.hash
$().ready(function() {
// `location.hash`: `id`: `#slideshow1` of element linked to
// from, e.g., `http://example.com/#slideshow1`
var currentSlideshow = $(location.hash);
// do slideshow stuff at `currentSlideshow`: `#slideshow1` element
})

using a hash might work best in this case
$(document).ready(function({
//loading a page
var project = window.location.hash
yourProjectLoadFunction(project);
//setting a url
$('.number').click(function(e){
$this = $(this);
window.location.hash = $this.attr('id');
});
});

Javascript redirect only seems to work when chrome debugger is open

I have written a Jquery-Ui Dialog to popup as a confirmation on particular links. This however does not redirect to my Delete page correctly. However if I open the debugger in chrome to debug, then the code works as expected.
I have found the same question, however the solution does not seem to work for me. It is exactly the same scenario though. Question here JavaScript redirect not working and works only in Chrome if debugger is turned on
So I have my link
<div id="confirm-dialog">
<div class="dialog-inner">
<p id="confirm-dialog-message"></p>
</div>
</div>
Delete
And I have my javascript
$('.confirmLink').click(function (e) {
BodyScrolling(false);
var theHref = $(this).attr("href");
var theTitle = $(this).attr("title") == null ? "Confirm..." : $(this).attr("title");
var theText = $(this).attr("data-confirm-message") == null ? "Are you sure?" : $(this).attr("data-confirm-message");
$("#confirm-dialog-message").html(theText);
$("#confirm-dialog").parent().css({ position: "fixed" }).end().dialog("open");
$("#confirm-dialog").dialog({
title: theTitle,
close: function() {
BodyScrolling(true);
},
buttons: [
{
text: "Yes",
class: "mws-button red",
click: function () {
$("#confirm-dialog").dialog("close");
window.location.href = theHref;
return false;
}
},
{
text: "No",
class: "mws-button black",
click: function () {
$("#confirm-dialog").dialog("close");
}
}]
});
return false;
});
So when I click my Delete link, I am indeed presented with my confirm dialog with Yes and No buttons, css styled correctly, and has captured the link href and bound it to the Yes button. If I click "No", I am kicked back and nothing further happens - Correct!
If I click Yes, it should take send me on to the original href that it captured. I have thrown alert(theHref) on the Yes Button click just before the redirect and it does show me the correct address (/Customer/Delete/73865878346587), but the redirect does not happen.
When I open the chrome debugger to debug the javascript or see if any errors occurred, then everything works as expected and redirects me correctly!
In IE, it does not work either.
I have tried...
window.location.href = theHref
window.location = theHref
location.href = theHref
$(location).attr('href', theHref)
I have also tried adding return false; after my redirect. Nothing works.
The link I added above to the same question said to make sure that the Yes button is being rendered on the page as a ... which mine is.
Can anyone shed any light?

Instead of window.location.href = theHref;
have you tried window.location.replace(theHref);?
Back to basics, try: window.location = theHref;

Well I have found the answer. Javascript was a red herring!
I did try to remove the confirmLink jQuery class so that the link was just a standard link that went straight to my controller to perofm my delete. When I did this test, the link worked perfectly. Therefore I denoted the problem be with my javascript. However, it seems that this was not quite the case and had only worked again if the Debugger in Chrome had been or was open at the time aswell.
When I revisited the non confirm link option again, I found this not to work properly, therefore denoting the problem not with the javascript.
It appears that you cannot perform a Delete action from a HTML Link in MVC. This is obviously because of security risks involved as anyone could perform a Delete on an Id. I had thought of this in my implementation and had added code to check where the Request had come from and if it wasn't from my List page, then it threw back an error and wouldn't perform the Delete. It didn't matter what I named my controller either, eg Test, the link performing my HTTP GET request would never hit this. There must be some algorithm that determines what the action is doing and stops you from performing the action on a HttpGet request. For more information about Delete Actions, check out this post http://stephenwalther.com/archive/2009/01/21/asp-net-mvc-tip-46-ndash-donrsquot-use-delete-links-because
It seems that you can only perform this by a HTTP Post, which means either using a Ajax.ActionLink or by using a Form and a submit button. Then your Action must be specified for HttpPost.
If, like me, you wish to keep your Link as a HTML Link, then you can do the following which is what I did, code below. I kept my HTML Link, set it up to point to my HttpPost Delete Action. Added my confirmLink class for jquery to bind my dialog box to. I pick up the link href and set the Yes button in the jquery dialog to dynamically create a Form and set the method to post and the action to the links href. Then I can call submit on the new dynamically created form to perform my Post to my Delete action.
My Delete Link
Html.ActionLink("Delete", "Delete", "Caterer", new { id = caterer.Id }, new { #class = "mws-ic-16 ic-delete imageButton confirmLink", #data_confirm_title = "Delete " + caterer.Name, #data_confirm_message = "Are you sure you want to delete this caterer, " + caterer.Name + "?" })
My Javascript
function LoadConfirm() {
$('.confirmLink').click(function (e) {
e.preventDefault();
BodyScrolling(false);
var actionHref = $(this).attr("href");
var confirmTitle = $(this).attr("data-confirm-title");
confirmTitle = confirmTitle == null ? "Confirm..." : confirmTitle;
var confirmMessage = $(this).attr("data-confirm-message");
confirmMessage = confirmMessage == null ? "Are you sure?" : confirmMessage;
$("#confirm-dialog").dialog({
autoOpen: false,
modal: true,
width: 400,
closeOnEscape: true,
close: function () { BodyScrolling(true); },
title: confirmTitle,
resizable: false,
buttons: [
{
text: "Yes",
class: "mws-button red",
click: function () {
StartLoading();
$(this).dialog("close");
var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", actionHref);
form.submit();
}
},
{
text: "No",
class: "mws-button black",
click: function () {
$("#confirm-dialog").dialog("close");
return false;
}
}
]
});
$("#confirm-dialog #confirm-dialog-message").html(confirmMessage);
$("#confirm-dialog").parent().css({ position: "fixed" });
$("#confirm-dialog").dialog("open");
});
}
My Action
[HttpPost]
[Authorize(Roles = "User")]
public ActionResult Delete(long id)
{
//Perform my delete
return RedirectToActionPermanent("List");
}

A working method to open a webpage in new window?

I have been trying to write a code in sencha touch, which has a button and when i click on that , it should open a webpage as a pop-up in a new window .
Window.open()-I cannot use this method because it doesn't work fine
in phones.Though I realise this is the easiest way to open a new
browser window.
document.location.href=url - This method opens the URL in the same
page , but I want it to be opened in a new window as pop-up.
Is there any other way to open a page in a new window when a user clicks a button, Below is my code
Ext.application({
name: 'Opening new page',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: false,
items: [
{
xtype: 'button',
text: 'click to open google',
ui: 'confirm',
handler: function() {
document.location.href=("http://www.google.com/");
}
}
]
});
}
});

Please try this code:
handler: function() {
var link = Ext.getDom('hidden_link');
link.href = 'http://www.google.com'/;
var clickevent = document.createEvent('Event');
clickevent.initEvent('click', true, false);
link.dispatchEvent(clickevent);
}

I don't know exactly how to do it in Ext.js, but I was basically thinking along the same lines as #bunlong-van. Create a anchor tag that targets a new window, add it to the page, and then click it.
This is how it could be done in jQuery:
$('button').bind('click',function(e){
var $me = $(this);
e.preventDefault();
e.stopPropagation();
$('<a />')
.attr('href', $me.data('href'))
.attr('target', '_blank')
.css({display:'none'})
.appendTo($('body'))
.get(0).click();
});
Full Sample: http://jsbin.com/adakur/edit

Hey #coding you can that is a Overlay is a type pop-up, try this into handler event,
var overlay = new Ext.Panel({
floating : true,
modal : true,
centered : true,
width : 500,
height : 500,
styleHtmlContent : true,
html: '<div><iframe style="width:100%;height:100%;" src="http://www.sencha.com/products/touch">Your device does not support iframes.</iframe></div>',
}).show('pop', true)
And please use your brain, I do not I can be doing your homework. I hope this helps. :) Ciao

Use window.open() in your handler as mentioned below:
handler: function() {
window.open("http://www.google.com/", "_blank");
}

Create a pop up window(a simple window) in your working page and make its visibility to false.. when you click on the button, change its visibility to true and give the focus to it..
also you can open anything in that popup window..
or you can use this jQuery code
$(document).ready(function() { tb_show(title, "testpage.aspx?id=" + url + "&TB_iframe=true&width=700&height=600", null); });
in this you can pass the parameters you want. this will open as a new popup window.

Using showModalDialog together with Selections

I need to use the showModalDialog method to display a message to a user, which will also need to have two buttons, a "Yes" and "No" but unsure how to approach this method.
I am using IE8 and unsure how to declare this and how I need to assign this that will also cater for both "Yes" and "No" options.
If "No" is pressed, I basically want the showModalDialog closed, with no further action required by the user.
If "Yes" is pressed, I then want it to go off and call a JavaScript function.
I have looked online but I can't seem to find any examples relating to what I am after here.
I am seeking links to good examples that relates to my requirement above.

If you are using jQuery, then you would use it's powerfull widget library http://jqueryui.com
DEMO: http://so.devilmaycode.it/help-with-showmodaldialog-together-with-selections
IMPLEMENTATION:
$(function() {
var external_data = "i'm outside the func";
$('.show-modal-dialog').click(function(e) {
var internal_data = "i'm inside the call";
var a = this;
e.preventDefault();
$("#dialog-message").dialog({
title: 'this is a modal dialog',
modal: true,
open: function(event, ui) {
$(this).append(a.href); //append inside the Dialog it self
},
buttons: {
'Yes': function() {
alert(a.href + ' ' + external_data + ' ' + internal_data);
},
'No': function() {
$(this).dialog("close");
}
}
});
});
});
BODY:
<div id="dialog-message"><p>Lorem Ipsum Est</p></div>
<a class="show-modal-dialog" href="http://www.google.it">Show Modal Dialog</a>

If you are using jquery.ui you, checkout this sample. If you don't want to use jquery.ui, take a look at Block.UI plugin.