Localization: client

Showing posts with label client. Show all posts

Wednesday, March 28, 2012

Links dont work properly in a working Modal Popup

Is it possible to have client side <a href links inside an extender?

I've got a Modal Popup working. A webservice is invoke via javascript on the client. The webservice queries a database and returns html to the javascript which inserts the markup into the Modal Popup panel. The popup works well, displaying a title, a description and an image. It also displays a <a href link, however this link doesn't work as intended. It displays as a link but when clicked goes nowhere. I've tried it with and without target="_blank". The only way make it function is by right clicking on it and Opening in a new tab or in a new window. Any advice would be very welcome as I'm stuck and it's far from user friendly in it's current state.

Hi oscar,

Do you got some code that replicates the error?

Kind regards,
Wim

Hello,

What is resulting output of the link?

Thanks,

Louis

Thanks both for taking the time to help out. I tried logging in to reply, entered my password incorrectly once and my user account has now been locked out, despite it letting me reset my password.

I've now got this working.

The web service returns a string containing all of the markup to be displayed in the panel:

strdetails += "<a href="http://links.10026.com/?link="""onClick=""javascript:popUp('"
strdetails += ds.Tables(0).Rows(0)("livemaplink").ToString()
strdetails += "')"">Live Map</a>"

then with the rest of the javascript functions in the aspx page is this:

function popUp(URL)

{window.open(URL);}

I'd tried adding the popup function to the panel in the strdetails string and it didn't work but this does.

Thanks again.

Hi oscar Version 2 Stick out tongue

Glad you got it to work!

Euhm, Even if none of our answer are actually solutions, I think you can still mark the thread as solved, somewhere on top, or mark your reply as answer. Because this thread is resolved ;)

Kind regards,
Wim

Will do, when my original account is unlocked that is! Big Smile

Cheers.

Will do, when my original account is unlocked that is! Big Smile

Cheers.

List of UpdatePanels on client side

Is there a way of getting a list of updatepanels in clientside script? If so, is there a way to figure out which one(s) are performing updates?

You can look at Sys.WebForms.PageRequestManager.getInstance()._updatePanelIDs. It's an array of UpdatePanel IDs on the page.

Only one panel can be in async postback at a time, so you could maintain a variable referencing the currently updating panel (if any), by setting and clearing it in BeginRequest and EndRequest.

fantastic. I appreciate the help

Listbox Client Controls?

I noticed that there's not a lot of support for listboxes on the client side. There's only the Web.UI.Select object, but it's pretty sparse in terms of functionality (ie. no clear or add methods).

Also haven't seen any examples of DataBinding a listbox - all the sample seem to work on ListView controls and binding to individual label elements, which isn't quite possible with lists.

Anybody have an example on how to bind a list using ATLAS declarative or script code?

+++ Rick --

Hi,

here's an example of a Web.UI.Select control bound to a DataTable. Hope it helps.

<%@. Page Language="C#" %> <%@. Import Namespace="System.Data" %> <%@. Import Namespace="System.Web.Services" % <script runat="server"> [WebMethod] public DataTable GetDummyDataTable() { DataTable dt = new DataTable(); dt.Columns.Add(new DataColumn("ID", typeof(int))); dt.Columns.Add(new DataColumn("Name", typeof(String))); dt.Columns.Add(new DataColumn("LastName", typeof(String)));

dt.Rows.Add(1, "John", "Doe"); dt.Rows.Add(2, "John", "Smith");

return dt; } </script <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>ListBox Databinding Example</title> </head> <body> <form id="form1" runat="server"> <atlas:ScriptManager ID="sm" runat="server" /> <div> <select id="myListBox"></select> </div> <div> <span>Selected Value is </span> <span id="myLabel"></span> </div> </form> <script type="text/javascript"> function populateList() { PageMethods.GetDummyDataTable(onGetComplete); } function onGetComplete(result) { var myListBox = Web.Application.findObject('myListBox'); myListBox.set_data(result); } </script> <script type="text/xml-script"> <page> <components> <select id="myListBox" textProperty="LastName" valueProperty="ID" firstItemText="Make Your Selection" /> <label id="myLabel"> <bindings> <binding dataContext="myListBox" dataPath="selectedValue" property="text" /> </bindings> </label> <application load="populateList" /> </components> </page> </script> </body> </html>

Thanks Garbin - fantastic!

Your example and some comments from other post have helped me see more of Atlas outside of the server controls.

Saturday, March 24, 2012

Load atlas js resource before charging page

Is it possible to load all Atlas resources on client before charging a page using Atlas ?
In fact, using Atlas means getting big javascript resources (near 300 ko for a page using webservice and updatepanel both).

My ideas is to :
- Load Atlas resources (with a loading message)
- And after load the page using Atlas

Thanks for your help.
ClémentM

hello.

well, the loading time should only hit you the 1st time the atlas files are loaded (they should be cached for future calls).

you can, however, show a loading msg. to dismiss it, you can handle the load event of the sys.application object.

load server page like frame

i have a page. this page loads to client. how can i load to this page (in selected area) another page from server, like in iframe but using ajax?

Hi,

Thank you for your post!

You can still use Iframe,then change the src of the Iframe to the page you want to load.

If you really want use Ajax, place a Iframe in an updatepanel.

If you have further questions,let me know!

Best Regards,

Wednesday, March 21, 2012

Loading a Google Map in a ModalPopup - Are Client Page Life-cycle Events Available?

Hello
I've been wrestling with this for a few days. What I'm trying to do is have a Google Map load in a ModalPopup. The problem that seems to be occurring is that the Google Map load function needs to be called once the ModalPopup as taken focus, not before. I've tried to capture a Client Page Life-cycle Event, but I can't seem to bind to any when using the ModalPopupExtender.

Any help on this would be greatly appreciated.
I've included the code to demonstrate what happening.

Note: On the page in the ModalPopup the Goggle Map button will launch the load function and you will see the map displayed correctly and operable.

Thanks in advance for any help!
-Nick

<%@dotnet.itags.org. Page Language="VB" %>
<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Google Map Modal Popup</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager" runat="server" />
<div>
The key for this google map will only work fromhttp://localhost/<br /><br />
<asp:LinkButton ID="GoogleMapLink" runat="server" OnClientClick="loadGoogleMap();"
Text="Click here for Google Map modal popup"></asp:LinkButton>
</div>
<asp:Panel ID="GoogleMapPanel" runat="server" CssClass="modalPopup" Style="display: none;">
<div id="map" style="width: 600px; height: 450px" onclick="return map_onclick()">
</div>
<table border="0" cellpadding="0" cellspacing="0" style="width: 600px">
<tr>
<td style="text-align: left;">
<input type="button" id="ec2Button" value="Truarchs/online llc" onclick="showEC2()" />
<input type="button" id="lathamButton" value="Trudeau Architects" onclick="showLatham()" />
<input type="button" id="loadMaps" value="Google Maps" onclick="loadGoogleMap()" />
</td>
<td style="text-align: right;">
<asp:Button ID="CloseButton" runat="server" Text="Close" />
</td>
</tr>
</table>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="GoogleMapLink"
PopupControlID="GoogleMapPanel" BackgroundCssClass="modalBackground" DropShadow="false" CancelControlID="CloseButton" />
</div>

<%--Google Map Key Forhttp://localhost/--%>
<script src="http://pics.10026.com/?src=http://maps.google.com/maps?file=api&v=2&key=ABQIAAAADGgFSNgb9MJymOhXwg9iYxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQOPKxK2SbX4-dnFLhrRFAmgsuEZQ"
type="text/javascript"></script>
<%--Google Map Loading JavaScript--%>
<script type="text/javascript">
//<![CDATA[
var ec2Lat = 42.64625505001615 ;
var ec2Lon = -73.75012636184692 ;
var lathamLat = 42.78112588794902 ;
var lathamLon = -73.78878235816955;
var toggleLat = lathamLat;
var toggleLon = lathamLon;
var map = null;
function loadGoogleMap() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(lathamLat, lathamLon), 13);
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
});
//EC2
var point = new GLatLng(ec2Lat,ec2Lon);
var label = "<b>Truarchs/Online llc:</b><br/>2 E-Comm Square, 324 Broadway<br/> Albany, NY 12207";
map.addOverlay(createMarker(point, label));
//Latham
point = new GLatLng(lathamLat,lathamLon);
label = "<b>Trudeau Architects:</b><br/>219 Forts Ferry Road<br/>Latham, NY 12110";
map.addOverlay(createMarker(point, label));
}
}
// Creates a marker at the given point with the given number label
function createMarker(point, label) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(label);
});
return marker;
}
function showLatham(){
//var map = document.getElementById("map");
map.panTo(new GLatLng(lathamLat, lathamLon));
}
function showEC2(){
//var map = document.getElementById("map");
map.panTo(new GLatLng(ec2Lat, ec2Lon));
}
//]]>
</script>
</form>
</body>
</html>

Here is a repost of the code, hope it doesn't break the form this time:

<%@. Page Language="VB" %>
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Google Map Modal Popup</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager" runat="server" />
<div>
The key for this google map will only work from http//localhost/<br /><br />
<asp:LinkButton ID="GoogleMapLink" runat="server" OnClientClick="loadGoogleMap();"
Text="Click here for Google Map modal popup"></asp:LinkButton>
</div>
<asp:Panel ID="GoogleMapPanel" runat="server" CssClass="modalPopup" Style="display: none;">
<div id="map" style="width: 600px; height: 450px" onclick="return map_onclick()">
</div>
<table border="0" cellpadding="0" cellspacing="0" style="width: 600px">
<tr>
<td style="text-align: left;">
<input type="button" id="ec2Button" value="Truarchs/online llc" onclick="showEC2()" />
<input type="button" id="lathamButton" value="Trudeau Architects" onclick="showLatham()" />
<input type="button" id="loadMaps" value="Google Maps" onclick="loadGoogleMap()" />
</td>
<td style="text-align: right;">
<asp:Button ID="CloseButton" runat="server" Text="Close" />
</td>
</tr>
</table>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="GoogleMapLink"
PopupControlID="GoogleMapPanel" BackgroundCssClass="modalBackground" DropShadow="false" CancelControlID="CloseButton" />
</div>

<%--Google Map Key For http//localhost/--%>
<script src="http://pics.10026.com/?src=http://maps.google.com/maps?file=api&v=2&key=ABQIAAAADGgFSNgb9MJymOhXwg9iYxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQOPKxK2SbX4-dnFLhrRFAmgsuEZQ"
type="text/javascript"></script>
<%--Google Map Loading JavaScript--%>
<script type="text/javascript">
//<![CDATA[
var ec2Lat = 42.64625505001615 ;
var ec2Lon = -73.75012636184692 ;
var lathamLat = 42.78112588794902 ;
var lathamLon = -73.78878235816955;
var toggleLat = lathamLat;
var toggleLon = lathamLon;
var map = null;
function loadGoogleMap() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(lathamLat, lathamLon), 13);
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
});
//EC2
var point = new GLatLng(ec2Lat,ec2Lon);
var label = "<b>Truarchs/Online llc:</b><br/>2 E-Comm Square, 324 Broadway<br/> Albany, NY 12207";
map.addOverlay(createMarker(point, label));
//Latham
point = new GLatLng(lathamLat,lathamLon);
label = "<b>Trudeau Architects:</b><br/>219 Forts Ferry Road<br/>Latham, NY 12110";
map.addOverlay(createMarker(point, label));
}
}
// Creates a marker at the given point with the given number label
function createMarker(point, label) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(label);
});
return marker;
}
function showLatham(){
//var map = document.getElementById("map");
map.panTo(new GLatLng(lathamLat, lathamLon));
}
function showEC2(){
//var map = document.getElementById("map");
map.panTo(new GLatLng(ec2Lat, ec2Lon));
}
//]]>
</script>
</form>
</body>
</html>

We'll be adding events like the one you want soon, though they're not there yet. You could probably add the one you need fairly easily with a small change or two to your ModalPopupBehavior.js.