The Div IDs change when I push a change to Axshare

advanced-prototyping
#1

I’ve been injecting some CSS/Javascript into a prototype (via plugins) and I’ve been targeting the divs with the IDs (#u123 etc.). The problem is if I make a change to the prototype and push to axshare, the IDs sometimes change and I have to inspect element to find out what the new ID is and replace it everywhere. Does anyone know how the IDs are generated?

The only slight fix I have is using variables so I only have to change the ID in one place, at least for my javascript plugin. Is there another workaround for this? Any info into the ID generation would help so I can keep in mind what’ll actually affect the IDs and I could try to avoid upsetting it.

Example setup to provide context:

Plugin 1:
<script type=“text/javascript”>
var headerJs = ‘#u317’;
…
$(headerJs).addClass(“small”);
</script>

Plugin 2:
<style>
#u317.small{
height: 50%;
}
</style>

some dynamic panel OnClick opens link “javascript:void($(headerJs).removeClass(“small”)”

Thanks in advance!

#2

IDs will change whenever you add/remove widgets. Don’t use the ID to target elements. Instead give the widget a name which will then appear in a data-label attribute. You then target that attribute instead. If you really need the ID, use the data-label as a selector then get the element’s ID from there. For example, using jQuery:

$(’[data-label=YourWidgetName]’)

Or using AxQuery:

$axure(’@YourWidgetName’)

This will apply to the names of panel states as well, so you could target an individual panel state instead of the whole panel itself.

For what it’s worth, if you give a widget a Selection Group, that is also added as an attribute you could target, called “selectiongroup”

#3

Thanks! This worked!

#4

Quick question on this: lets say I have a text object named MYTEXT, and am using a javascript function to make changes to it.

$axure(’@MYTEXT’).text(“Hello world!”); <- This works, and changes the text of the widget as expected

$axure(’@MYTEXT’).fontsize(25); <-this doesn’t work.
$axure(’@MYTEXT’).style.fontSize = “xx-large”; <- also doesn’t work

I see that Axure has it’s own API, where .text(); is a function. Seems like using the data-label is not necessarily accessing the string object as expected. Is there a way to get non-Axure API javascript functions to work?

EDIT: quick follow-up: I can get this to work…
document.getElementById(“u19_input”).style.fontSize = “25px”;

However, I had to manually look up the ID. I suppose what I need is a way to get the ID using the data-label. You mentioned this was possible?

#5

Hi!

If it’s not a input field, you can set its text as follows. However, if there is no text in it to begin with, there will be no span whose text to set. (Though you could write code that adds a span - along with it’s surrounding paragraph tag - if it doesn’t exist.) So you’ll want to at least put a space in it in (within Axure) order to manipulate its text. This assumes you’ve named the object “mytext”

$("[data-label=mytext]").find('span').text("foo")
$("[data-label=mytext]").find('span').css("fontSize", 30)

If it’s a text field, use this to set its text, In this case it the field can be blank. Here the field is named “myfield”

$("[data-label=myfield]").find('input').val("foo")

The reason to use find() above is because the element that has the data-label attribute is not the input field itself; it’s a div surrounding it.

#6

Thank you!

Since I’ve already made some ground with another method, I’m still curious how to get the div ID from the data-label. @nkrisc said “If you really need the ID, use the data-label as a selector then get the element’s ID from there.” Any idea how to retrieve it from there?

#7

If you are using jQuery, you would add .attr(‘id’) to the end of the selector. E.g.,

$("[data-label=mytext]").attr('id')

If you are using $axure(’@mytext’), you’d do the following:

$axure('@mytext').$().attr('id')

This will get the id of surrounding div, however, and the not the object whose text you want to set. If it’s a rectangle, say, and not an input field, Axure simply appends “_text” to this outer div’s id to the div that contains the text (assuming there is already text in there), so:

$("[data-label=mytext]").attr('id')+"_text"

The same thing for a text field, except here add “_input”

$("[data-label=myfield]").attr('id')+"_input"

Edit: this illustration might be helpful:

shot 2018-06-22 at 3.49.59 PM.png846×294 30.2 KB

#8

You’re my hero. This will save me from having to manually update the div id in reference as things change by using a variable instead with this method. Thank you!

#9

Hi,
I am new to axure coding, and it would mean a lot if you could answer this.

Does this work, when we want to use this for working on a click ?
For example : $(’.ssClick’).click(function(){alert(‘click’)} – works, ssClick is the id of data element.
How does we make such calls using this data-label thing?

thanks in advance.

#10 
$('[data-label="label name"]')