I'm upgrading an old Rails 2.1 app and am replacing the google_maps plugin with the Gmaps4Rails gem. The conversion has been pretty straight forward so far. The remaining task is to programmatically show and hide the markers infowindows on mouseOver of a list of addresses which I display beside the map.
My question is how do I get a handle to the marker to display the infowindow?
I found this question, but it seems to deal with the mouseOver of the marker. Essentially, I want to use a mouseOver event from an element outside of the map to show the infowindow of a marker.
Any help is appreciated.
This behavior seemed to be built into the google_maps plugin (as far as I can tell).
There is no builtin way to achieve this in gmaps4rails. But here are the relevant steps:
1) In your controller
Foo.your_scope.to_gmaps4rails do |obj, marker|
# Add any custom elements here
marker.json { :id => obj.id }
end
This will add the id of each element in the Gmaps.map.markers array.
2) In your view
Html:
add to each side element an attribute with the id of the related object
Javascript:
Write a js function which retrieves a marker from it's id (basically, loop Gmaps.map.markers and check each element's id)
write a js function which observes your side elements mouseOver. In it's callback, find the related marker thanks to the above function and finally trigger this: foundMarker.infowindow.open(Gmaps.map.map, foundMarker.serviceObject)
Related
I am using Shield ASP.NET MVC charts on a page. I need the charts to initially show data for my visitors, and I need to provide the user the possibility to hide the charts by clicking on the corresponding button(s). For this purpose I use the following function:
<script>
function HideChart() {
document.getElementById("DataSpot").innerHTML = "";
}
</script>
And I am placing the charts as follows:
<p id="DataSpot">
#(Html.ShieldChart()
.Name("chart")
.PrimaryHeader(header => header.Text("Profile Hits"))
.Export(false)
.AxisX(axisX => axisX
………..
)
</p>
<button onclick="HideChart()">Hide Chart</button>
The problem is, that when I click on the button, nothing happens.
#user2492467,
Do you need to hide the chart or do you need to wipe out its content? If just hiding the chart, the approach suggested by Chris would work just fine. However, if you need to irrevocably wipe out the chart from the page altogether, then clearing its content is not enough. Only removing the rendered chart markup would open the door for memory leaks, as references to the DOM nodes may remain in the chart javascript component.
A better approach would be to find the javascript component instance and call its .destroy() method. This will ensure the component is fully destroyed and no memory is leaked:
$("#DataSpot").swidget().destroy();
Note that you still need to give your chart a name using the MVC wrapper's .Name("DataSpot") method just like Ed suggests. This will give your chart's HTML element an ID that you can use with jQuery to find the chart instance.
The .swidget() method is a standard jQuery extension method added by the Shield UI javascript framework. It returns the javascript component instance associated with the element matched by the jQuery selector. This is how you find the chart instance.
How about:
<script>
function HideChart() {
document.getElementById('DataSpot').style.display='none';
}
</script>
You should also update your button:
<button type="button" onclick="HideChart()" value="Hide Chart" />
Actually there is something happening, obviously not the thing that you need. This is because you need to wipe out the rendered chart by referencing its container.
The element is fine and if you put some text in your function and execute it you will see that it will appear on the appropriate spot. However to hide the chart you need to use it’s name. In other words the following statement:
document.getElementById("DataSpot").innerHTML = "";
should be changed to
document.getElementById("chart").innerHTML = "";
or you may rename the chart to
.Name("DataSpot ")
and remove the P element in both cases since it makes no use.
I'm very new to backbone.js but we're starting to use more and more JS on the front end and I wanted to use some framework to give the code structure - backbone seems to suit our needs.
So started off with a very simple test app that launches a dialogue window using jquery-ui. The problem I have is that since jquery-ui adds a wrapper DIV round the original template used by backbone, the events no longer fire.
I don't want to use the jquery-ui event model as I'd rather just use the one - how can I bind backbone's to this new structure?
It looks as though the call to _.template() is actually doing the wrapping in an extra div. The parent div with the events bound to it is being left behind appended to #well. A simple workaround is to call .parent() on the result of getting the element with the model class ID. See here for example
There's more than likely some information in the _ documentation that might shed some more light on the problem too.
OK - at the end of this project, I finally realised that I hadn't answered this. What happens is when you create a .dialog with JQueryUI, it actually detatches your original DOM element and moves it to the bottom of the DOM wrapped in it's own JQueryUI markup to turn it into a dialog.
Since the Backbone view's element has now been moved, Backbone doesn't pick up any events that fire as it's happening outside it's own "view" as far as it is concerned.
So what you have to do is reassign the view's element:
var dlg = this.$("#dialogue-properties").dialog({ ..});
this.setElement(dlg);
Where this is the view. This is done within the initialize method
You can create div wrapper in your view and modal it's content, as described here (first part of the post)
cocovan does a good job explaining the problem in his answer. However, as for the solution, the JQuery UI team actually added a method at the end of 2012 (Allow dialog to be attached to a element other than body) that takes care of this issue.
It is the appendTo(selector) method (jQuery Dialog appendTo method). So simply specify to which element you want the dialog appended.
I'm writing google api 3 code, here: http://jsfiddle.net/zVaGN/2/
First i call the two Fusiontables to appear on the map, then i created a html element outside the map which should, when clicked, open a custom infowindow which i have previously created in Fusiontables. So i don't know how to make a function which will call the already created infowindows from the fusiontables when i click on a html element.
So i want this efect http://econym.org.uk/gmap/example_egeotestmon.htm
But mine should call the custom infowindows from fusiontables that already exist. How to do this???
Thanks anyone!
UPDATE
Thanks for the reply Eric. I didn't know this, i tried with a function that would look like this:
function izbor() {
var infowindow = new google.maps.InfoWindow({
query: {" SELECT 'ExtendedData' FROM " + tableid};
});
infowindow.open(map);
}
But i don't know what to call from the table, what is the name of infowindows in the fusiontables.. I called for ExtendedData, because when i exported the fusiontable to kml file, that was the code for the infowindow, but this code for google api 3 that i wrote probably isn't good..
UPDATE #2
I have tried it here, but it doesnt work..
jsfiddle.net/zVaGN/4/
Thank You anyway for the help, if You come up with some other solution, please write!
I don't think this is possible in Fusion Tables. In Fusion Tables you don't really have control over the creation of the overlays displayed on the map, whether markers or polygons. Fusion Tables is creating tiles on the fly with the overlays already rendered and AFAIK you have no control over the click events on them, besides using infoWindowSuppress: false, which does allow you to display your own infoWindow with the values returned from the FT click event.
EDIT
This function will display the html returned from Fusion Tables. Seems like there should be a way to trigger a click event on the layer from within the page.
google.maps.event.addListener(layer, 'click', function(e){
alert(e.infoWindowHtml);
}
I have a JQuery Mobile (1.0rc1) application that has a list view with a search filter implemented. It's similar to this sample.
Under certain conditions, I am dynamically loading additional items into the list with an ajax call. When this happens I want to clear anything entered in the search filter, otherwise I end up with a partially filtered list.
I've tried firing the clear button like this:
$('.ui-button-clear', $.mobile.activePage).click();
and clearing the form like this:
$("form > input", $.mobile.activePage).val('');
but neither worked. Can someone enlighten me to the proper way to accomplish this?
You should be able to clear clear the searchfilter with
$('input[data-type="search"]').val("");
Edit: To update the list you will also have to trigger the "change"-event on the searchfilter:
$('input[data-type="search"]').trigger("keyup");
JSFiddle
if you talking about Jquery mobile listview, then you need this
$('#autocomplete li').click(function () {
$('.ui-input-clear').trigger("click");
});
I use the following code:
$("form")[0].reset();
The [0] points to the DOM element method.
Also see How to reset (clear) form through JavaScript?
I'm using gmaps4rails and I need to execute javascript inside a marker's info window. Every marker's underlying object has a sound file associated with it, and I want to be able to play that file inside the info window. The player I'm using is jwplayer and it is instantiated with javascript call with few params.
I've tried to use the gmaps4rails own method to insert the code into info window like below
def gmaps4rails_infowindow
"<div id='jwplayer_#{self.id}'>Here comes the player...</div>
<script type=\"text/javascript\">
//<![CDATA[
jwplayer(\"jwplayer_#{self.id}\").setup(#{options});
//]]>
</script>"
end
but that doesn't work. Actually anything with a < script> tag inside that method seems to break the gmap4rails map loading anyway I try it.
Is there a way to get javascript executed inside the info window by using gmaps4rails, or do I need to roll some other solution for that?
You won't be able to add any <script> in gmaps4rails (as well as raw google maps API I guess).
You should deal with this problem using click event on the marker + close event of infowindow.
Use the callbacks to add these functions.