We Keep Coding

Laravel Mix Javascript undefined function onClick

I am using Laravels Mix feature with javascript and I am having a bit of trouble. I've made a new javascript file and included it in app.js, I've then done a function in this file. I want to call it from an onClick event however its giving me an error.
In cart.js I have an array that is adding all the products, and I also have this line of coded added.
<a onClick="removeProduct(${product["id"]})" class="btn-remove1">Remove</a>
Also in cart.js I have this function, that needs to be called on the onClick event.
function removeProduct(id) {
console.log(id);
}
However, It then gives me this error when trying to call removeProduct()
Uncaught ReferenceError: removeProduct is not defined at HTMLAnchorElement.onclick
So I'm not sure how to handle this, I guess I could use jQuery and wait for the object to be clicked and then get the id but just wondering if I can do it by onClick. Thanks for any help!
Edit:
Looking into this some more, Webpack is including Cart.js and in app.jss the function removeProduct() is there. Do I need to somehow call it like Cart.removeProduct() or something? (I've never used web pack/mix before)

I've found out with webpack you need to define it in the global scope. You can simply do that by adding this line of code.
window.removeProduct = removeProduct;

Clear your cache and then check or check that js file is included into your file or not.

Parsing parameters onclick for angularjs app

I am working on enhancing a feature of an already deployed application. All the js code is minified and i only can excess html files. I need to call a function on-click of a 'div' which parse some elements and open a new tab with resolved url(url updated with help of parsed elements).
My initial thought is to make a function in a new js file and add link to it on main html page. Evidently the call to function is fine with on click attribute call on the div. But while passing the angular controller parameters it throws error -
<div onclick="jumpToPage({{vm.username}})"></div>
function jumpToPage(user){
console.log(user);
};
Note - I don't have access to update minified files and i know i can un-minified it but there are lot of files and process is too long.
Please let me know how to resolve/pass parameter to JavaScript function

It should be onclick="jumpToPage(vm.username)">
If you pass {{vm.username}} it will get evaluted.
e.g. vm.username ="some_name"
so,your controller will get some_name and not referance to vm.username
and
it try to search for the same refarance.If it not find then throw exception.

try to use ng-click, when we use ng-click we don't need to use {{}} anymore, since it is automatically bind the model.

Meaning of $get('0')?

I just upgraded to jQuery 1.12 from an older version. I'm going through the code, trying to resolve breaking changes.
One such change is occurring in the following code:
$(document).ready(function() {
Sys.Application.add_unload(applciationUnloadHandler);
function applciationUnloadHandler() {
var contactDropDown = $get('0');
createCookie('NewProgram_ContactID_Cookie', contactDropDown.value, null);
}
});
This code fails because $get('0') returns null.
But I really don't understand what this is supposed to be doing. I don't see $get() defined anywhere. I can see from looking at the code behind that the '0' argument represents a contact ID, but I can't see what the code is supposed to be doing.

$get is a shortcut function for Sys.UI.DomElement.getElementById
The $get method provides a shortcut to the getElementById method of the Sys.UI.DomElement class.
Reference

$get is defined in the ASP.NET AJAX Client Side Library that should be included if you are using a ScriptManager.

Call laravel {{action(Controller#method}} with passing variable from vue.js array

So im my view (made with using Blade templates) I have link with href that calls Controller directly, that looks like:
<a id="#{{user.id}}" href="{{action('Controller#method')}}>update</a>
and it works fine, but now I need to pass some additional data, which is taken from vue.js array, which also should be put in curved braces, like:
<a id="#{{user.id}}" href="{{action('Controller#method', ['user_id' => #{{user.id}}])}}>update</a>
and here I start getting messages about unexpected { symbol. I've tried removing # symbol, and putting this variable outside href quotes, but it didn't work. Is there any possibility to solve this?
UPD: I also tried putting this link in vue method, like
$.getJSON('{{action("Controller#method", ["user_id" => '+vm.user.id+'])}}')
but in this case literally "vm.user.id", not variable gets passed in link
UPD2:
I'm now trying to pass data not in link, like $.getJSON('{{action("Controller#method")}}', {user_id: vm.user.id})
and I'm getting links like update?user_id=123, but I need format like update/123

I'm really not familiar with vue.js, but in general PHP would execute on server, and javaScript on client. So first line
<a id="#{{user.id}}" href="{{action('Controller#method', ['user_id' => #{{user.id}}])}}>update</a>
has this part #{{user.id}} PHP can't understand, as it's javaScript notation, so you get some kind of syntax error.
And for second line
$.getJSON('{{action("Controller#method", ["user_id" => '+vm.user.id+'])}}')
I think that this could not get executed either since this doesn't load Laravel, and to PHP {{action("Controller#method")}} has no particular meaning without Laravel loaded.
You could do something like this. Hardcoding part of URL that will render from server, and adding rest of the URL when it goes to client.
For example you can have server generate URL like this:
<a id='url' href="http://example.com/controller/method/">update</a>
And then have some kind of javascript function on client that would append vm.user.id to it when page loads
$(document).ready(function(){
$('#url').attr('href', $('#url').attr('href') + vm.user.id);
});
I think this would result in having an URL like this
<a id='url' href="http://example.com/controller/method/123">update</a>

Firebreath Object in AngularJS

I have tried to include a FireBreath plugin object in an AngularJS view, however when I try to render the view I get this error:
TypeError: Cannot read property 'nodeName' of undefined
I am able to successfully include the object in the view with $compile like this:
$("body").append($compile('<object id="plugin" type="application/x-firebreathplugin" width="0" height="0></object>')($scope));
However, after including the object like this I cannot get my plugin to fire an event in the JS.
Doing something like this:
plugin = document.getElementById('plugin');
console.log(plugin);
Returns
TypeError
In the Chrome console. But I can still do:
plugin.callFunction();
And have a FireBreath method execute. The issue is when I try to get an event to fire in the JS. No matter what I try, I cannot get the event to fire. So this code will never execute:
var addEvent = function(obj, name, func) {
obj.addEventListener(name, func, false);
}
addEvent(document.getElementById('plugin'), 'firebreathEvent', function(data) {
console.log('data ' + data);
});
var plugin = document.getElementById('plugin');
plugin.functionThatTriggersFireBreathEvent();
Does anybody know if it has something to do with accessing the object after calling $compile? I noticed that in regular HTML (before using AngularJS) logging the plugin in the console returns this :
<JSAPI-Auto Javascript Object>
So I am thinking that whatever I am getting with document.getElementById after using $compile is not the same.
What would be easier is is if I could just include the <object> tag in the view.html file and have it display in <body class='ng-view'> but I get the top TypeError, so if anyone has any ideas for that, that would be preferred.
Any help is appreciated. Thanks.

If anyone is interested, because I could not get the event to fire, I followed along to this link:
http://colonelpanic.net/2010/12/firebreath-tips-asynchronous-javascript-calls/
(which I think is your blog #taxilian) to get the data back to the JS.
Plugin Code: Great example in the link.
JS Code:
//attach FireBreath Object to AngularJS View
$("body").append($compile('<object id="plugin" type="application/x-firebreathplugin" width="1" height="1"><param name="onload" value="pluginLoaded"/></object>')($scope));
var callback = function(data) {
//data is an object
console.log(data.resultFromFireBreath);
}
plugin = document.getElementById("plugin");
plugin.getData(callback);
This will have to work for now until someone can figure out how to attach an event to the plugin object after $compile.

I ran into the same problem and was able to make the problem go away by creating a read-only nodeName property in my plugin object. I asked about this in a firebreath forum post and taxilian suggested adding this to JSAPIAuto.cpp, which also worked, so I submitted a pull request with the change.

I once spent about 6 hours trying to make FireBreath plugins work with jquery; it was really educational, but ultimately I determined that it wasn't worth the work.
Long story short is that it's not worth it; particularly since even if you could make it work, it would break on IE9 where FireBreath doesn't support addEventListener (IE never gives it the even info, so it's a little hard to support) and you would need to use attachEvent anyway.