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);
}
Related
I want to create a table in jQuery mobile. The table will be updated from mysql. Please tell me the procedure to create and update the table in jQuery mobile.I am completely new to the platform.
You should use AJAX to update your table without refreshing the page. From your jquery/html page you do an ajax call to update the table after you add new data to it (I assume this is why you need to update).
It works something like this:
Have a separate script to DISPLAY your table
Use JQUERY AJAX to display the table for you on page load
$(document).on("pageinit", "#visualUnitList", function () {
LoadVisualUnitTable();
});
Write the function to display the table
function LoadVisualUnitTable() {
$.post('unit_DisplayVisualTable.php', 'unitSearchBox=<?php echo $_POST ['unitSearchBox'];?>, function(data) {
$("#visualUnitListTable-popup-popup").remove(); //<!-- remove "select columns to display" popup from dom before reloading - fix for button not working after reload -->
$("#visualUnitTable").html(data).enhanceWithin();//<!-- load data to div -->
});
return false;
};
This will make your table appear on the screen. If you want to update it/edit the data in the table you need to write more ajax to POST the data to a separate php(?) script. After you have posted your data you will simply run LoadVisualUnitTable() as I have in point 1. within your AJAX.
I hope this can help.
p.s. For any future questions you might ask, it's much easier to write a response if you give more details about what you are trying to achieve, and even better if you can post existing code that you've been working on.
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 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)
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?
Using jquery UI 1.8's autocomplete, is there any known way to take the results and return them to a different div element on the page, or to customize how they look upon return? I want to have the results show up in a list that can be interacted with, essentially.
There does not seem to be a built in way to return the results to another location on the page. However, customizing how they look is quite straightforward, that is just a matter of applying CSS to the widget. The Theming docs will explain all the detail.
I would suggest attaching an event handler to one of the events of the autocomplete (maybe search) and writing your own custom code to capture the results and move them to the the required place in the DOM.