Button in infoWindow

[CliveSwan]

Hi,

Is it possible to create a button in the infoWindow to launch a new window/web page??

Thanks,

Clive

[HemingZhu]

Hi,

Is it possible to create a button in the infoWindow to launch a new window/web page??

Thanks,

Clive

Yes, you could customized infoWindow a lots of way you want. In your case you could write a HTML Markup for a button and attach a onclick handler to open a new web page, and then set your infoWindow content to that html markup. You can read this to get more info: http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp/intro_formatinfowindow.htm

[CliveSwan]

Hi Zhu,

Thanks for the email. I was trying to implment the page you sent.

I am updating code spread over 4 files.

>>>>>>>>>>>>>>>>>>>>
The code in my code is:

            //Set the infoTemplate.
            infoTemplate = new esri.InfoTemplate();
            infoTemplate.title = "${STREET_NAME}";
            infoTemplate.content = "<b>Address: </b>${ADDRESS}<br /><b>PostCode:  </b>${POSTCODE}"
            graphic.setInfoTemplate(infoTemplate);
>>>>>>>>>>>>>>>>>>>>>>>>

I tried to put a button and URL into this, no luck. It did not work

[CliveSwan]

Also tried this, does not work ... error

In webpage
>>>>>>>>>>>>
map.infoWindow.setTitle("Identify Results");
map.infoWindow.setText(<a target='_blank' href=http://en.wikipedia.org/wiki/"+   +">Wikipedia Entry</a>");
map.infoWindow.setContent(tc.domNode);
map.infoWindow.resize(360, 200);
>>>>>>>>>>>>


In infoWindow
>>>>>>>>>>>>
this._closeButton = dojo.create("div", { "class": "close", title: "Close" }, this.domNode);
this._title = dojo.create("div", { "class": "title" }, this.domNode);
this._setText = dojo.create("div", { "class": "text" }, this.domNode);
this._content = dojo.create("div", { "class": "content" }, this.domNode);
>>>>>>>>>>>>

[HemingZhu]

Also tried this, does not work ... error

In webpage
>>>>>>>>>>>>
map.infoWindow.setTitle("Identify Results");
map.infoWindow.setText(<a target='_blank' href=http://en.wikipedia.org/wiki/"+   +">Wikipedia Entry</a>");
map.infoWindow.setContent(tc.domNode);
map.infoWindow.resize(360, 200);
>>>>>>>>>>>>


In infoWindow
>>>>>>>>>>>>
this._closeButton = dojo.create("div", { "class": "close", title: "Close" }, this.domNode);
this._title = dojo.create("div", { "class": "title" }, this.domNode);
this._setText = dojo.create("div", { "class": "text" }, this.domNode);
this._content = dojo.create("div", { "class": "content" }, this.domNode);
>>>>>>>>>>>>

Should something like this:

infoTemplate.content="<input type='button' value='open newpage' onclick='window.open(...)'/>" 

[CliveSwan]

Hi Zhu,

I added the code you suggested, still getting an error.
I am trying to get a button at the top of the infoWindow.

>>>>>>>>>>>>>
map.infoWindow.setTitle("Identify Results");

map.infoWindow.setText(infoTemplate.content=="<input type='button' value='open newpage' onclick='window.open(http://www.google.co.uk)'/>" );


map.infoWindow.setContent(tc.domNode);
map.infoWindow.resize(360, 200);
>>>>>>>>>>>>>>>>>>>>>>>

[HemingZhu]

Hi Zhu,

I added the code you suggested, still getting an error.
I am trying to get a button at the top of the infoWindow.

>>>>>>>>>>>>>
map.infoWindow.setTitle("Identify Results");

map.infoWindow.setText(infoTemplate.content=="<input type='button' value='open newpage' onclick='window.open(http://www.google.co.uk)'/>" );


map.infoWindow.setContent(tc.domNode);
map.infoWindow.resize(360, 200);
>>>>>>>>>>>>>>>>>>>>>>>

I don't think infoWindow has a setText method. I know it has setContent method.

[CliveSwan]

Hi Zhu,

I changed the code, still getting the same error "addIdentifyResultsToMap error, details: [object error]"

                map.infoWindow.setTitle("Identify Results");
map.infoWindow.setContent(infoTemplate.content=="<input type='button' value='open newpage' onclick='window.open(http://www.google.co.uk)'/>");
                map.infoWindow.setContent(tc.domNode);
                map.infoWindow.resize(360, 200);

[CliveSwan]

I have commented out the external infoWindow.js.
I have added in the code from the ESRI example (below).

I still get the external infoWindow not the default ESRI infoWindow??

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title> Mapping - COLGIS v0.01</title>

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.7/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.7/js/esri/dijit/css/Popup.css">
    <style>
       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
       .esriScalebar{
         padding: 20px 20px;
       }
       #map{
         padding:0;
       }
       .esriPopup.myTheme .titlePane,
       .dj_ie7 .esriPopup.myTheme .titlePane .title {
         background-color: #899752;
         color: #333333;
         font-weight: bold;
       }
       .esriPopup.myTheme .titlePane {
         border-bottom: 1px solid #121310;
       }
       .esriPopup.myTheme a {
         color: #d6e68a;
       }
       .esriPopup.myTheme .titleButton,
       .esriPopup.myTheme .pointer,
       .esriPopup.myTheme .outerPointer,
       .esriPopup.myTheme .esriViewPopup .gallery .mediaHandle,
       .esriPopup.myTheme .esriViewPopup .gallery .mediaIcon {
           background-image: url(../images/popup.png);
       }
       .esriPopup.myTheme .contentPane,
       .esriPopup.myTheme .actionsPane {
         border-color: 1px solid #121310;
         background-color: #424242;
         color:#ffffff;
      }

</style>

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.7/js/dojo/dojox/grid/resources/claro.css">
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.7"></script>
<script type="text/javascript" src="javascript/jquery-1.5.2.min.js"></script>
// <script type="text/javascript" src="myModules/infoWindow.js"></script>
//  <link rel="stylesheet" type="text/css" href="myModules/infoWindow.css">
<link rel="stylesheet" type="text/css" href="myModules/colgis.css">
<link rel="stylesheet" type="text/css" href="myModules/BingMapControl.css">
<script type="text/javascript" src="myModules/col_common.js" ></script>
<script type="text/javascript" src="myModules/colgis.js" ></script>
<link href="css/screen.css" media="screen" rel="stylesheet" type="text/css">

</head>

[CliveSwan]

I have 3 files. Test.html; test.js and infoWindow.js.
If I comment out the infoWindow.js, I get an error.


I added the following code in test.js and infoWindow.js, I still do not get a button added

>>>>>>>>>>>>>>>>>>>>>>>>>>>>
test.js
map.infoWindow.setTitle("Identify Results");

/// ADDED
map.infoWindow.setContent( tc.domNode =="<input type='button' value='open newpage' onclick='window.open(http://www.google.co.uk)'/>");
/// ADDED

map.infoWindow.setContent(tc.domNode);
map.infoWindow.resize(360, 200);
>>>>>>>>>>>>>>>>>>>>>>>>>>>>



>>>>>>>>>>>>>>>>>>>>>>>>>>>>
infoWindow.js
dojo.addClass(this.domNode, "myInfoWindow");
    /// ADDED
    this._openButton = dojo.create("div", { "class": "openButton", title:"Open" }, this.domNode);
   /// ADDED

    this._closeButton = dojo.create("div", { "class": "close", title: "Close" }, this.domNode);
    this._title = dojo.create("div", { "class": "title" }, this.domNode);
    this._content = dojo.create("div", { "class": "content" }, this.domNode);
>>>>>>>>>>>>>>>>>>>>>>>>>>>>