Develop Reference

hooking up button in JS without using the onclick event

<button id=trainingbutton document.getElementById("trainingbutton").addEventListener("click",
}); ></button>
function(){
trainingbuttonclicked=()=>document.getElementById("trainingbtn").innerHTML = "Hello World";
Completely new to JavaScript and am trying to hook up a button to show an alert. Above is my HTML first and my app.js is below. I would like to try to hook up the event without using a simple onclick event handler. My preferred method would be either the event handler or the inner HTML method. Any advice appreciated. I know it's something simple but maybe Ive been staring at it too long, because I can't see the answer

You need your script tag in order to insert an eventlistener, like so
<script>
const button = document.querySelector('#trainingButton"); // # id's and . for selecting a
class in the dom (document object model)
button.addEventListener('click', function(event) {
const string = 'some string';
alert(string);
});
</script>
Your Button id should only contain a string like trainingButton so that it becomes <button id="trainingButton">
> the script tag should be placed in the bottom of your body tag, in order for the DOM to load properly before any javascript runs
for more info
https://www.w3schools.com/jsref/met_element_addeventlistener.asp

You need to separate your HTML from your javascript. You can either have them in separate files or in the same.
If you'd like them in the same file you can do the following. (Note: the script has to be after the button because we want it to run after the button has been created)
<button id="trainingbutton">Training Button</button>
<script>
var trainingbutton = document.getElementById("trainingbutton");
trainingbutton.addEventListener('click', function(event) {
trainingbutton.innerHTML = "Hello World";
});
</script>
You can also define the script above between the script tags in a seperate file (*.js) and link it to your HTML file using <script src='*.js'></script>. As you add more to your HTML and JS it can help to organize.

"onchange" function never called when I load file in form

I am building a form using the bootstrap CSS in my Symfony project.
The problem is that when I set up a "File Input" field and when I actually load a file, the name of the file doesn't appear in this input.
So I tried to use this code :
$('.custom-file-input').on('change', function(event) {
var inputFile = event.currentTarget;
$(inputFile).parent()
.find('.custom-file-label')
.html(inputFile.files[0].name);
});
But the event "on change' is never called ( I tried to put an alert).
But it seems to work here. I don't understand where is the problem ...

I found the solution ! Just add :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Finally, the solution wasn't to add
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
But it was just to move the javascript includes in the block instead of the end of the !

Is this right way to call php file using jquery?

I am trying to call the php file onclick of button ,
i tried using ajax but many of them said not to use for downloading the file.
here is my code.
jQuery(document).ready(function($){
console.log("plugin script loaded3");
$('#csv').click(function()
{
alert("csv");
document.location.href = "/wp-content/plugins/est_collaboration/php/export_csv.php";
});
});
Even tried using $get but its not getting downloaded.
when i click the button it has to call php file which download csv format.

You can simply try this
Download

Change your jquery startup to simply:
$(function() {
$('#csv').click(function() {
alert("csv");
});
});
Alternatively, to download a "file", you can add it as the href to an anchor link, eg:
<a id='downloadlink' href='/wp-content/plugins/est_collaboration/php/export_csv.p‌​hp'>csv</a>
if you need to add parameters, you can change the href via jquery, eg:
$("#downloadlink")
.prop("href", "/wp-content/plugins/est_collaboration/php/export_csv.p‌​hp?param1=" + param1value);
Alternatively (again), it could be that you are adding the "#csv" button dynamically, after jquery startup has run, in which case you need event delegation. See this question for more info: Event binding on dynamically created elements?

simulate click in a SVG file when load page

i want create a focus on location "Molise, italy" when load a SVG map in my page http://goo.gl/0ZywjM
so i have created this simple script in jquery
<script>
jQuery('#path20684').click();
</script>
it work , but only after load the page and after insert this from chrome console , if insert this on footer not work because the svg file it not part of dom. how i can solve this, or have other solution ?
update it work only with this:
window.setInterval(function(){
jQuery('#path20684').click();
}, 1000);
but with this every second is clicked , so i think the problem is the script start before a SVG file is loaded, how solve ?

http://jsfiddle.net/CYhgZ/90/
please check the above link for demo
$(function() {
// when click event happens below code executed
$('path').on('click', function() {
alert("clicked")
});
//simulating click event automatically when page load
$('path').trigger("click");
//or
//$('path').click();
});

Setcontent of tinymce from external file

How can I load a specific html template inside my TinyMCE editor?
I saw this code but it doesnt work in me;
$.get("hello.html", tinyMCE.activeEditor.setContent);
and then I tried this code so that it will automatically load;
$(window).load(function(){
$.get("../../../../app/views/tools/prooftemplate.phtml", tinyMCE.activeEditor.setContent);
});
but it doesnt work.

Try this:-
You need to pass along the data to a callback function then use that data in the function as I've done. Data from the file is then passed to "d" so we update tinyMCE with the newly loaded data.
$(window).load(function(){
$.get("../../../../app/views/tools/prooftemplate.phtml", function(d){
tinyMCE.activeEditor.setContent(d);
});
});