Syntax for Attribute Query in HTML with embedded JavaScript

DavidTreering · ‎06-03-2013

I'm trying to call attribute variables of the current feature in my HTML. This worked as the contents of an infoWindow in the JS file:

...."<button class='button' id='infoWindowNEXT' onClick='executeZoomToNext(\"${nextpt}\");' >NEXT </button>"+....

But now I need to redesign and have the contents of the infoWindow display in a side panel. In the HTML, I can't get the attribute to come through due to syntax:

....<button class='button' id='infoWindowNEXT' onClick='executeZoomToNext("${nextpt}");' >NEXT </button>....

What am I missing?

JonathanUihlein · ‎06-07-2013

I should be able to help but I need a bit more information.

If I understand correctly, you want to move your button code from inside the JS file to somewhere in the <body> tag of your HTML document?

Second question, what does the "nextpt" variable generally represent in your code? (name strings, integers or a point object for example; be as specific as you can).

If you have any other questions, I can try to help with those as well.

DavidTreering · ‎06-11-2013

If I understand correctly, you want to move your button code from inside the JS file to somewhere in the <body> tag of your HTML document?

That's correct.

Second question, what does the "nextpt" variable generally represent in your code?

In my Feature Service, nextpt is an integer that simply enables me to cycle through a tour of features.

For example, feature#1 has id=1 and nextpt=2, feature#2 has id=2 and nextpt=3, etc. I have a function to advacne and zoom to the next or previous feature.

In the HTML file, this is on lines 45 and 47. In the JS file these functions are on lines 333 and 343.

I hope that clarifies. Thanks for your time and effort!

JonathanUihlein · ‎06-11-2013

Thank you for clarifying!

I took a look at your code and there are a number of ways to remedy this problem.
First of all, your code is fine in theory. The buttons should trigger a function when clicked and your map should zoom accordingly.

onClick='executeZoomToNext("${nextpt}");'

However, the problem is that the value sent by your onClick is not an integer, but literally "${nextpt}" as a string. Because the variable you are trying to access is a javascript variable, the HTML treats this as a simple string. You cannot directly copy/paste javascript variables into an HTML code block.

Now, there are two ways to handle this.

1) Change onClick to executeZoomToPrev(); and executeZoomToNext(); respectively and within these specific functions, get the id of the current feature using javascript. This ensures minimal changes to your current code (and is what I would do).

function executeZoomToNext(){
//var currentFeature = GET CURRENT FEATURE CODE
queryTask2 = new esri.tasks.QueryTask(mapservice+"/lurec_systems/MapServer/0");
query2 = new esri.tasks.Query();
query2.returnGeometry = true;
query2.outSpatialReference = map.spatialReference;
query2.outFields = ["objectid", "id", "name", "descrip", "system", "zoomlevel", "nextpt", "url"];
query2.where = "id = "+currentFeature+"";
queryTask2.execute(query2, showResult2);
}

2) Update the value of both onClicks dynamically each time a new feature is selected (using javascript). This way is more slightly more complicated but I have seen it in practice. (Also, this way is more work overall compared to way 1).

Hopefully this makes some sense. I can try to explain in a different way if this isn't enough information to lead you in the right direction.

Good luck!

DavidTreering · ‎06-11-2013

Thank you! I think the first option will work better for me. However, I have found that "currentFeature" is null despite a feature being selected. I could use a hint on how to assign a value to that var currentFeature.

However, I'm still confused as to why this is necessary, since I can use JS variables in the HTML in other places sucessfully, like line 54 that uses the url variable to get a photo. Isn't there some way to "escape" the HTML, or is it because this is within a function?

JonathanUihlein · ‎06-11-2013

1) I will look into assigning a value to currentFeature after lunch. I just need to examine your code again.

2) To be honest, I am not quite sure why it works on line 54 (and I don't believe it should).

This is the code my firebug extension is seeing after the page renders.

<a class="highslide" style="float:left" onclick="return hs.expand(this);" width="420" url"}"="" href="http://147.126.65.155/Images/campus/${">
<img id="sysPic" width="220px" url"}"="" src="http://147.126.65.155/Images/campus/mbeane_walk.jpg">
<span class="highslide-caption">Enlarge image</span>
</a>

I see that ${"url"} is replaced by mbeane_walk.jpg in the img tag but not the link tag.

I have not seen that syntax used directly in an HTML code block before (unless wrapped in PHP etc). Also, it doesn't seem to work on all browsers,.

I am assuming it has to do with jQuery or your web-server configuration (you are also using both jquery 1.6.4 and 1.9.1).

Hopefully someone else can join this discussion and provide insight on this particular mater. It is beyond my understanding and I too would like to know the answer!

DavidTreering · ‎06-12-2013

My colleague and I found a way to do this by adding two functions to the JS to store and then get the currentFeature.

function updateCurrentFeature(currentFeature){
      currFeature = currentFeature;
    }
    function getCurrentFeature(){
      return currFeature;
    }

Then since we need the currentFeature's id, within the executed queryTask we call

updateCurrentFeature(addedGraphic.attributes.id)

Then in the HTML, instead of trying to call the JS variable, which was being read as a string, we can pass getCurrentFeature() as the parameter to the executeZoomToPrev(currentFeature).

<button class='button' id='infoWindowPREV' onClick='executeZoomToPrev(getCurrentFeature());'>< PREV </button>

Many thanks to Jon and Paul S.!