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`.
`

Can somebody help me understand this more. Javascript selection

How does this work? and what are other ways to do it?
redirect = function(sectionName){
document.location.assign('about/' + sectionName + '/');
};

If by block menu you mean an HTML menu made of other HTML elements like divs, ordered / unordered lists then the response below applies, other than that, please explain in detail what do you mean by block menu
select is an object which contains a reference to the HTML "select" tag, so is options in the line var opsArray= select.options; the code provided by you will not work with block menus.
You have will have to create a function which looks totally different.
Let's say this is your menu:
<ul id="list">
<li id="about" onclick="redirect(this.id)">About</li>
<li id="news" onclick="redirect(this.id)">News</li>
</ul>
your javascript code will have to be:
redirect = function(sectionName){
document.location.assign('projects/' + sectionName + '/');
};
This is one way to do it, there are too many ways to do this. Hopefully I understood your question correctly.

Creating a ListView with JQuery mobile doesn't work correctly

Using JQuery mobile I want to add a ul-ListView to a window dynamically creating it via JScript, there is a problem.
When I add the ListView fixed to HTML, everything works fine. The definition looks like
...
<div data-role=content>
<ul id='listviewAktuelleChecklist' data-role=listview data-theme="d" data-divider-theme="d" data-inset=true>
<li id="listDividerAktuelleChecklist" data-role=list-divider>yyy Checklist</li>
<li id='LoadChecklist'> <a> Checkliste von Market-Value laden </a></li>
</ul>
</div>
...
and when showing in Firefox its just what was expected. But when I create it by JScript, it looks like that:
(sorry guys, I'm not allowed to add a picture here due to missing references, so heres a link to the picture:
http://www.market-value.de/downloads/ul.jpg
The top ListView is what I get via the HTML definition, below the "OK" button what was generated (for those who don't view the picture: the generated Listviw shows just as a normal HTML "ul" with bullets...)
I used that code:
$("#BTN1").bind ("click", function (event)
{
var html = "";
html += "<ul id='ChecklistListea' data-role=listview data-theme='d' data-divider-theme='d' data-inset=true>"
html += '<li id="listDividerAktuelleChecklista" data-role=list-divider>yyy Checklist</li>'
html += "<li id='LoadChecklista'> <a> Checkliste laden </a></li>";
html += "</ul>";
$(html).appendTo('#DivChecklistListe');
$("#ChecklistListe").listview("refresh");
});
I tried some different methods for creating the dynamic HMTL, but the result was always the same.
Does anyone knows, what is going wrong here?
ps: if I define the ListView in HMTL directly and only add the ListItems everything works fine!

First you are calling refresh on a wrong id, but even in case of a correct id this will not work. This is because you are creating a listview from scratch, ul element with inner li elements.
In this case it is not enough to call listview('refresh') because listview first must be initialized before it can be refreshed.
It can be done like this:
$("#ChecklistListea").listview().listview("refresh");
First .listview() call will initialize a listview and second one will style it.
Working example: http://jsfiddle.net/Gajotres/4HRNK/

Issues with linking and images in jQuery

Code
(Note that the result will not display properly without the images referenced)
I'm a student worker at a University with some programming experience. My boss wants me to make a slideshow similar to the one that can be seen here. I don't know anything about Javascript or jQuery other than the basic W3 schools tutorials so I decided to get code from outside sources to modify for my own purposes.
Two issues have arisen with this build of the code.
My first problem is the simpler of the two.
I'm trying to make little thumbnail images at the bottom of the slideshow to tab between slides. Unfortunately due to nested quotes the IDE (Aptana if it matters) interprets the coded quotes as
"$('.slideshow').blinds_change(<img src="
and
" />)"
Thus it displays " />)" instead of the proper thumbnail image.
My second problem is making each slide into a link. For some reason a simple tag doesn't work.
<li><img class="slide" src="img\sakaiupgrade.png" alt="Whats new in Sakai?" /></li>
I assume this has more to do with the Javascript/jQuery side of things, which is way above my head at the moment.
Thanks in advance for any help you can give me!
If you want to throw in some images yourself the size is w500 h350 for the slides and w77 h54 for the tabs. Or I could try uploading all the relevant images if need be.

You need to add this to the head of your page, underneath the <script tags.
This will start off the blinds process.
<script language="javascript">
$(document).ready(function()
{
$(".slidehsow").blinds();
});
</script>
Next, you <a links are find, however if you'd like to add a thumbnail change them to:
<img src="img/somethingThumbnail.jpg" alt="Link to Slide 1" />
And as they, job's a carrot!
So you main images are contained within the <li> elements and the thumbnails are within the <a elements.
Edit for Question 2
Looking through the jQuery blinds code, there's no means for it to translate the <li> items into proper links - as the images are changed to a background image of a new div.
You'll need to edit the jquery.blinds-0.9.js file, like so:
Line 49 becomes:
blinds_images[blinds_images.length] = { 'title': e.alt, 'src': e.src, 'href': $(this).parent().attr("href") }
This add the parent elements (the the image) href attribute to the array.
Line 89 becomes:
,'cursor': 'pointer'
This means the mouse will become link a link pointer when over the image
Insert this line into line 91:
tile.click(function (e) { window.location = blinds_images[0]['href']; });
This set's up the default link from the first tile.
Finally, line 115 (or 114 before inserted line) becomes:
$(this).find('.tile_' + i + '_' + j).show().css('background', 'transparent ' + 'url("' + config.images[config.img_index]['src'] + '") -' + (i * config.tiles_width) + 'px -' + (j * config.tiles_height) + 'px no-repeat').click(function (e) { window.location = config.images[config.img_index]['href']; });
Again, this picks up the href and directs the browser there when clicked for a particular slide.
With these changes, you're usual code of <li><img src="someIMage.png" /></li> will work as expected.
CAVEAT I've not tested this without the <a elements, so the list items without links will either need an empty one (maybe) or the jQuery code will need to be tweaked further to capture any null values.

To your first issue:
You can escape your quotes using a slash, e.g.
"$('.slideshow').blinds_change('<img src=\"/some/path\" />')"
To your second issue:
Your link is incorrect. It should be:
href="http://google.com"

Updating an HTML list using Js

So I have a js game like scrabble. Now when the user makes a new word, I would like the word to be added to a list that is displayed in a div on my page.
The issue is I quite don't understand, how I could keep my old word created and insert a new word with new formatting and everything in a list form.
I know there is a list tag --
<ul>
<li>apple</li>
<li>ball</li>
</ul>
but what I can't really figure out is how do I use java script to enter the word as a new list entry.
I have used js to display the word created by the following syntax
document.getElementById('currentword').innerHTML = word;
where word is the variable that holds the current word created and currentword is the div id. but how do I use this kind of syntax for a list?
Please help!
Thanks
EDIT: I would also like the last entry to the list as the first item on my list. Seems like the list populates itself but the latest entry gets hidden and the list doesn't really auto scroll down as the items are added.
PS: Also incase someone knows how I could replace the tacky scroll bar option generated by CSS to a custom scroll bar. It would be great if you could point me in the correct direction!

Given a list:
<ul id="theList" >
<li>apple</li>
<li>ball</li>
</ul>
you could add an <li> like this (assuming that the variable word contains the word you want to add):
document.getElementById('theList').innerHTML += ('<li>'+word+'</li>');
There are other ways too, but this one is probably the simplest.

I use jQuery for dom manipulation and would recommend the same for you, it adds a lot of readability and tons of neat (x-browser friendly) functionality.
For example... the append api call would do the job if you were using jQuery.
<ul id="words">
<li>Some Word</li>
<li>Another Word</li>
</ul>
$("#words").append("<li>" + yourNewWord + "</li>");
Or with straight javascript...
document.getElementById('words').innerHTML += '<li>' + yourNewWord + '</li>';
EDIT:
I believe in motools the equivalent to .append is .grab

Basic idea:
var li = document.createElement("li");
li.innerHTML = "new text";
document.getElementById("TheULsId").appendChild(li);

<ul>
<li>apple</li>
<li>ball</li>
</ul>
then,
var newListItem = $('<li></li>').html("myNewWord");
$("ul").append(newListItem);

Well to the exact solution of my question, I figured out the rest from mootools docs :)
This fiddle demonstrated most of it.. http://jsfiddle.net/WngSS/1/
As for the scroll bar goes, well to customize ur own scrollbar you just use css effects.