Develop Reference

How to click Dynamics 365 Ribbon Button via javascript

I am trying to figure out how to click a button on the D365 ribbon. The button will refresh the page and i am going this route because ultimately i want to refresh all of the elements on the page.
I have tried accessing via query selector with no luck
document.querySelector("#rr_jobprofile\\|NoRelationship\\|Form\\|Mscrm\\.Modern\\.refreshCommand72 > button").click();
html for the button
<button aria-label="Refresh" aria-hidden="true" title="Refresh" tabindex="-1" data-id="rr_jobprofile|NoRelationship|Form|Mscrm.Form.rr_jobprofile.RefreshModernButton" data-lp-id="Form:rr_jobprofile-rr_jobprofile|NoRelationship|Form|Mscrm.Form.rr_jobprofile.RefreshModernButton" type="button" class="pa-ak pa-kx pa-go pa-ep pa-aj pa-om pa-at pa-sx pa-sy flexbox"><span class="pa-az pa-ah pa-a pa-hh "><span class="pa-ho pa-hj pa-st pa-cd pa-bd pa-a pa-at "><img src="/uclient/resources/images/Refresh.svg?v=1.4.2043-2012.2" alt="" title="" class="pa-oh pa-cg pa-bd pa-cc "></span><span aria-label="Refresh" tabindex="-1" class="pa-hj pa-bd pa-st pa-v pa-e pa-cm pa-oz pa-cl ">Refresh</span></span></button>

Really really really recommend against manipulating or navigating the DOM. There are methods in the formContext.Controls collection to refresh any control on the page that requires it, or the page itself. Refreshing an HTML web resource is a little less obvious, but I've had good success using the getSrc() and setSrc() functions of the control. This function (not mine I got it on some blog years ago and added it to my toolbox) works very well, and will work both on the form (e.g. on load or on change) and from the ribbon.
function refreshWebResource(executionContext, WebRrscName) {
var _crmForm = executionContext.getFormContext();
var webResource = _crmForm.getControl(WebRrscName);
if (webResource != null) {
var webResourceSrc = webResource.getSrc();
webResource.setSrc(null);
webResource.setSrc(webResourceSrc);
}
}
Code's original source: https://community.dynamics.com/crm/f/microsoft-dynamics-crm-forum/232589/refreshing-the-web-resource-in-dynamics-365

Try
document.querySelector('[data-id="rr_jobprofile|NoRelationship|Form|Mscrm.Form.rr_jobprofile.RefreshModernButton"]').click()
Selectors for data attributes use attribute selectors syntax instead of starting with a tag name or characters # or .. For example
button[data-id=xxxx] selects a button whose data-id attribute value is exactly xxxx.
button[data-id|=xxxx] selects a button whose data-id attribute value starts with xxxx`.
`

Creating dynamic divs

Trying to make a dynamic div but i don't know how. Wrote a solidity smart contract that accepts an array of struct. In the smart contract i can use a get function to display the data inside. Data in the array is treated like a history, it consists of amount (making a crowdfund site), date, currency used, etc. Since the get function in the smart contract can only extract one part of the array, i thought of putting the get function into the while loop and extract the whole history array..
<div id=set>
<a>value1</a>
<a>value2</a>
</div>
I'm trying to dynamically create another div with the same amount of < a > in the div. If i had 10 sets of data to display in that div, i wish to create only 10 sets of that div. Can createElement() be used to do that? Couldn't find any solution that works. Totally have no idea on how to create it. Can someone please help.
Would it be rational to extract the data from the array using a while loop and putting it in a div to display or would it use too much gas for this to work?

I don't get why would you want to do this, but you can do like this:
$('#set a').each(function(){
$('#set').after( "<div></div>");
});
It selects all of the <a>...</a> inside the <div id="set">...</div> element, and for each one of those inserts a <div></div> element. It inserts the element right next to #set but you can change that to any other element you could select.
I'm supplying jQuery code since you tagged the question as jQuery.
Hope it helps,

You can get the number of anchor tags by using this function getElementsByTagName('a').length from the hosting div. Then use that number to create new divs. This solution is done using vanilla JS.
function createDynamicDivs(){
var newDiv = document.createElement("div");
var noOfAnchors = document.getElementById('set').getElementsByTagName('a').length;
for(var i=0;i<noOfAnchors;i++){
var newContent = document.createElement("a");
newContent.textContent= "Test ";
newDiv.appendChild(newContent);
}
document.getElementById('new').appendChild(newDiv);
}
<div id=set>
<a>value1</a>
<a>value2</a>
</div>
<div id="new"></div>
<button onclick="createDynamicDivs()">Generate</button>

A function with changing variable, dependent on a class

So, first some background.
I have 9 types of rooms that are displayed as thumbnails with the name. What I want to do is that on click "Additional Information" - the rooms with disappear and the expanded version of a chosen room type will appear with the description and bigger picture. Also, there is an ability to go next and previous in the expanded view. I do not have a problem with this expansion and previous/next. BUT!
Here is what I am trying to achieve: if the code looks approximately like
<ul id="room_holder">
<li><div class="room 1">Additional Info</div></li>
<li><div class="room 2">Additional Info</div></li>
and so on...
And the expandable area will look something like:
<div id="expandable">
<div id="picture">Blah-blah-blah, some description, etc</div>
</div>
So, basically, what I can't figure out is how to get the needed slide to show when the correspondint thumbnail is pressed. I know I can do the .addClass method, and copy the code 9 times, for each of the numbers (1-9). But I believe it is 9 times more compact if I have some sort of function, that gets the second class name (the number) by using .split(' ')[1] and then using it as part of the variable in the part which opens the corresponding expandable view. So, my question is: how do I do this? I am a newbie with javascript, but try to learn on the go!
Oh, and the codepen that I've been trying to deal with is:
http://codepen.io/godban/pen/QbZmxz

Firstly, you should use data-* attribute instead of classes (new in HTML5) data attributes, w3school :
<ul id="room_holder">
<li><div class="room" data-room="1">Additional Info</div></li>
<li><div class="room" data-room="2">Additional Info</div></li>
Then, use the click function from jQuery .click( handler ), use it this way to know which one has been clicked :
$(".room").click(function(event){
var target = event.currentTarget;
var room = $(target).data("room");
alert(room);
});

Retrieve dynamic value from DIV in Javascript to perform logic

I am new to both Java and HTML, I have a DIV that is populated with a dynamic value
<div id=test>
<span
Test="TBinaryText"
SITENAME="test site"
OBJECTNAME="Temperature"
OBJECTTYPE="0"
INSTANCE="1"
DEVICE="1"
PROPERTYID="85"
INCLUDEUNITS="1"
ARRAYINDEX="-1"
STYLE="position:absolute;top:73;left:188;height:16;width:34;z-index:43;overflow:hidden;font- family:Arial;font-size:8pt;font-weight:700;font-style:normal;mask:0.1;">???
</span>
</div>
In the script I am storing the DIV as part of an Array (simplified for posting)
var trial = [
['string',43,23,1,test]
]
I want to use the value of the 'test' DIV to perform logic to determine the pin color of a marker on a map. If I alert the element of the array that contains the DIV it displays [Object] and not the content or value. I found and implemented a jQuery plugin to display the content, this works to perform the logic if the content of the DIV is a static number.
var color =0;
$(trial[4]).each(function(){color= $(this).output()});
alert([color]);
if (color <5 ){ icon= pinImageBlue} else if (color>11) {icon=pinImageRed} else {icon= pinImageGreen}
However when I populate the DIV as above the alert will display the code and not the actual value. Currently to get the plugin to work I am using jQuery 1.3.2 as the newer versions error out. For the mapping i am using the google v3 API and the infobox API.
The plugin that allows the content of the DIV display is:
(function($){
$.fn.output=function(d){
return (this.is(":text")) ? this.val(d) : this.html(d)
}
})(jQuery);
Is there a way to access the actual value of the code in the DIV and not the code itself?

Yeah you are looking for .text()
Here's a jsfiddle where I run your code and grab the value. I did it using jQuery 1.8.3

Spring AutoPopulatinglist issue

I am adding elements dynamically using java script(Adding textboxes when we click add).Each of this textbox would be an element of a bList in my domain class.
See Below
Code:
Class A
{
Approach1
List<B> bList= LazyList.decorate(
new ArrayList<B>(), new InstantiateFactory(
B.class));
Approach2
List<B> bList= new AutoPopulatingList(B.class)
}
So basically i am trying to add elements to bList.
I know that i need to use autopopulatinglist or lazy list.But neither of these work.When i try to post the form it complains telling that collection has 0 elements and the index is invalid.
Is the above declaration enuf to ensure that i have the list ready to add elements.
Also when i read about using autopopulating list.Ref: http://blog.richardadamdean.com/?p=12
It says that we have to change the formBackingObject method in the controller to instantiate a new AutoPopulatingList:
Code:
ShoppingBasketForm sbf = new ShoppingBasketForm();
sbf.setItems(new AutoPopulatingList(ShoppingBasketItem.class));
But i am using spring webflow not spring MVC, So where exactly i put this logic.
Even if i try to access <form:input path="bList[0]" /> it would complain
Please advice.

https://jira.springsource.org/browse/SWF-990 <-- look at this issue.