Develop Reference

Edit onclick url in button

I'm trying to edit the url in a button onclick event. Below is the source of the button and the text I'd like to strip from the onclick portion. The end goal is to have a Tampermonkey script that allows me to easily download stp files without manually editing a link after clicking it.
Remove
"fusion360://command=insert&file=" +
From
<button type='button' class="event btn btn-default btn-lg btn-block" onclick='window.location.href = "fusion360://command=insert&file=" + encodeURIComponent("https://assets.sas-automation.com/cad/SWM%203.stp");' data-category="Product Sidebar Right" data-action="Button Click" data-label="Opened CAD File in Fusion" aria-label="button">Open in Fusion360</button>

There are many ways to achieve this, here is one that came to my mind:
Use a getElementsByClassName (or any other selector function) to grab the button
Save the onclick attribute value (which is of text type) to a variable
Find the given substring and replace it with an empty string
Save the result back to the button's onclick attribute.
NOTE: your solution has a gotcha: in order to get a proper redirect on button click, you have to remove the method encodeURIComponent since the url appears to be encoded already.
And you should be good to go. You can play with the snippet.
var button = document.getElementsByClassName('event btn btn-default btn-lg btn-block')[0];
var onClick = button.getAttribute('onclick')
.replace(/"fusion360:\/\/command=insert&file="\s*\+\s/, '')
.replace('encodeURIComponent(', '')
.replace(');', '');
button.setAttribute('onclick', onClick);
<button type='button' class="event btn btn-default btn-lg btn-block" onclick='window.location.href = "fusion360://command=insert&file=" + encodeURIComponent("https://assets.sas-automation.com/cad/SWM%203.stp");'
data-category="Product Sidebar Right" data-action="Button Click" data-label="Opened CAD File in Fusion" aria-label="button">Open in Fusion360</button>

Hiding button in javascript

In HTML file, there are 3 buttons as save,edit and cancel. Im hiding save and edit button depends on the functionality in javascript.
<div class="controls col-sm-9">
<button onclick="modJs.save();return false;" class="saveBtn btn btn-primary pull-right"><i class="fa fa-save"></i> <t>Save</t></button>
<button onclick="modJs.editrecord();return false;" class="EditBtn btn btn-primary " style="display:none;"><i class="fa fa-save"></i> <t>Update</t></button>
<button onclick="modJs.cancel();return false;" class="cancelBtn btn pull-right" style="margin-right:5px;"><i class="fa fa-times-circle-o"></i> <t>Cancel</t></button>
</div>
in my javascript fucntion, im showing and hiding edit and save buttons.
if(object != undefined && object != null) { //editing selected
$(".editBtn").show();
$(".saveBtn").hide();
this.fillForm(object);
}
Already i gave display:none in html tag for edit button. I want to show edit button if object is not null (that means edit). By the above code, the save button get hide, but edit button is not showing.

I guess there is a little spelling mistake there
replace
$(".editBtn").show();
with
$(".EditBtn").show();
Or maybe simply change classname EditBtn to editBtn to keep naming consistent.

In your HTML you're using the class EditBtn, in the JS code you use the class editBtn. Class names are case sensitive! Change it in the HTML to editBtn.

jQuery class selector is not working on elements generated by JSON in Datatables

I am having a problem and perhaps the I'm the one who is committing the error or did not understand how the DOM works at all, I'm not sure. The point is that the project I'm working from the server side using PHP and with this piece of code:
$user[] = '<a class="btn btn-default btn-sm" href="' . $this->generateUrl('edit-user', array('id' => $entity->getId()), true) . '"><i class="fa fa-pencil-square-o"></i> Editar</a> <a class="btn btn-danger confirm-delete" data-id="' . $entity->getId() . '" href ="#"><i class="fa fa-times-circle-o"></i> Eliminar</a>';
This convert to JSON and then using this call:
$('#datatable').dataTable({
"ajax": Routing.generate('get-list-user'),
"language": {
"url": "{{ asset('bundles/backend/js/plugin/datatables/resources/dataTables.spanish.lang.json') }}"
}
});
It relies on a Datatable component. That generate a HTML code like this:
<td>
<a class="btn btn-default btn-sm" href="http://tanane.dev/app_dev.php/admin/user/1/edit"><i class="fa fa-pencil-square-o"></i> Editar</a>
<a class="btn btn-danger confirm-delete" data-id="1" href="#"><i class="fa fa-times-circle-o"></i> Eliminar</a>
</td>
Then on the same template where I am rendereando element after having loaded jQuery and all the necessary libraries I'm using this code:
$(".confirm-delete").on('click', function () {
var id = $(this).attr('data-id');
console.log(id);
});
when you click any button with .confirm-delete generated by PHP and rendered in the template but the same is not working for me in the console nothing comes out. Am I doing something wrong? It is a normal behavior of the DOM? I had understood that I could use .on () to create elements in the air and if I remember what I used but in this case not working for me, any ideas or help?

When you call the following function:
$(".confirm-delete").on('click', function () {
//Code
});
Only the current existing DOM elements that match .confirm-delete will be attached the event. If you need to attach events dyanmically, you should use event delegation. Event delegation will attach the event to the parent element, but only fire the event if the 2nd selector matches one of the clicked elements:
$("#datatable").on('click', ".confirm-delete", function () {
//Code
});
With that code, every time #datatable is clicked, it will check if one of the clicked elements is .confirm-delete and if so, it will execute the code.
Sidenote: this inside the function still refers to the .confirm-delete element

HTML Button redirects pages

I have the following button:
<div class="form-group">
<button onclick="assign_all()" class="btn btn-default">Vælg alle</button>
</div>
Now this calls a JavaScript function called assign_all
This works fine however when it is done executing the JavaScript it simply tries to load a page. Which is fairly odd (its like if you click on an A tag)
As you can see below nothing in my javaScript indicates that it should reload / load a page:
function assign_all() {
var info = [];
var i = 0;
$('.user_list').each(function () {
if ($(this).hasClass('show')) {
info[i] = $(this).find('.user_id').val();
i++;
}
})
}
Can anyone tell me why this is happening?

It's because the default button element's type attribute is set to submit. Your button element is attempting to submit a form. Simply give it a type of button:
<button onclick="assign_all()" class="btn btn-default" type="button">...</button>

Add type="button" to your button tag. it must solve the issue

you can do this also
<button onclick="assign_all();return false;" class="btn btn-default">Vælg alle</button>

Weird markup/binding behavior while using angular

This is not a major issue, but I've never seen the behavior I'm about to describe, and I thought if a group of people could help me understand it, it would be you guys. Basically, when I put a button in a header, my data-ng-click did not fire. When I wrote out the same line again, the click worked fine. My question is basically, am I missing something with my code that causes my issue? I'll go through the steps I've just followed to troubleshoot this;
I have a page, it looks like;
<div data-ng-app="myApp" data-ng-controller="myController">
<h1>Title<button type="button" class="btn btn-primary pull-right" data-ng-click="showMe()">Click Me</button></h1>
I click the button, the showMe function which is defined in $scope in my controller doesn't alert as I would expect. So, I modify my code;
<div data-ng-app="myApp" data-ng-controller="myController">
Click Me
<h1>Title<button type="button" class="btn btn-primary pull-right" data-ng-click="showMe()">Click Me</button></h1>
And the alert shows. So, I wonder if it's something to do with my putting the button in header causing some issues for whatever.
<div data-ng-app="myApp" data-ng-controller="myController">
<div class="row">
<h1>Title</h1>
<button type="button" class="btn btn-primary pull-right" data-ng-click="showMe()">Click Me</button>
</div>
And nothing works. So, I decided to type out the same button again, above the existing button and see if a particular element was causing an issue. I started with button with data-ng-click. Alert fires. I keep adding things back in until I get
<button type="button" class="btn btn-primary pull-right" data-ng-click="showMe()">Click Me</button>
<button type="button" class="btn btn-primary pull-right" data-ng-cliok="showMe()">Click me</button>
And the new button works. So, I delete the new button, the old button doesn't work. I delete the old button, the new button works. I open the file in a text editor and show all characters, nothing out of the ordinary, it's not a result of any copy and paste mistake.
I'm obviously going to leave the new button in place, but if I an explanation is possible, then I would like to try and get one.

So, pixelbits pointed out my issue. On my monitor, the font I was using in the editor makes very little distinction between the c and an o in the word click. Even though I believed myself to have read over the line several times, it wasn't until I went back to look at the line looking for that particular issue that I realized I had just completely overlooked it.
Thank you pixelbits, and thank you guys for taking the time to look.