Develop Reference

Moving code from jquery to angularjs

I have following code block in jQuery which I need to convert it into angularjs
JS Code
command: [
{
name: "Delete",
text: "<span class='glyphicon glyphicon-trash' aria-hidden='true'></span>",
click: function (e) {
e.preventDefault();
//add a click event listener on the delete button
var tr = $(e.target).closest("tr"); //get the row for deletion
var data = this.dataItem(tr); //get the row data so it can be referred later
wnd.content(confirmationWindowTemplate(data)); //send the row data object to the template and render it
wnd.open().center();
wnd.title("Delete Prospect");
$("#yesButton").click(function (e) {
alert("hi")
})
//$("#noButton").click(function (e) {
$scope.noButton = function() {
alert("hi!");
}
},
]
HTML Code
<div class="pull-right">
<button class="btn btn-blue" id="yesButton">Yes</button>
<button class="btn btn-default" ng-click="noButton()"> No</button>
</div>
I have not posted the entire code as it would be too lengthy. I want to convert this jquery code into angularjs. As you can see I am trying to call Yes and No function with jQuery and Angularjs respectively. When I click on yes, I see an alert message "hi" but I don't get an alert message when I click on no.
I am sorry if this question provides insufficient details. I am stuck on this from past 2 days. Any help would be appreciated.

How/where your code $scope.noButton = function() { alert("hi!"); }
is placed? as per my angularjs knowledge, you required controller in your HTML code and then you can set button with ng-click inside that controller, which will finally bind function in your angular controller file code.
Ref - http://fdietz.github.io/recipes-with-angular-js/introduction/responding-to-click-events-using-controllers.html
and here your yes button code $("#yesButton").click(function (e) { alert("hi") }) is working with jQuery so its working correctly

Why does the jQuery file upload stop working after first upload?

I'm using the jQuery File Upload plugin. I'm hiding the file input and activating it upon clicking a separate button. (See this fiddle.)
HTML:
<div>
<button class="browse">Browse</button>
<input id="upload" type="file" style="display: none;" />
</div>
JavaScript:
var element = $("#upload");
$(".browse").click(function () {
$("#upload").trigger("click");
});
element.fileupload({
add: function () {
alert("add");
}
});
Notice that if you press the button then select a file, the add method is activated and you'll get an alert. Do it again, and you'll get another alert.
Now, see this fiddle. The only difference is that I've changed the following line
$("#upload").trigger("click");
to
element.trigger("click");
Notice that now, the first time you click the button then select a file, the add method is activated and you get the alert (just like before), but if you do it again, the add method never activates.
What is causing this difference in behavior?

This can also be solved by setting replaceFileInput to false, as stated by the documentation. This is because the plugin recreates the input element after each upload, and so events bound to the original input will be lost.

It looks as though the scope of element is being lost / changed after the add function. Resetting it like below seems to work.
var element = $("#upload");
$(".browse").click(function () {
element.trigger("click");
});
element.fileupload({
add: function () {
alert("add");
element = $(this);
}
});
Fiddle

Try this one: http://jsfiddle.net/xSAQN/6/
var input = $("#upload");
$(".browse").click(function () {
input.trigger("click", uploadit(input));
});
function uploadit(input){
$(input).fileupload({
add: function () {
alert("add");
}
});
}
Although there is one more way:
just change to this:
var element = $("#upload");
$(".browse").click(function () {
$("#upload").click(); // <----trigger the click this way
});
element.fileupload({
add: function () {
alert("add");
}
});

How to capture clicked button in js functions?

I have to buttons like this:
<input type='submit' id='submit' class='processAnimation'>
<input type='reset' id='reset' class='processAnimation'>
Now I have two js function. First function is called when ajax request is started and seconf function is called when ajax request is completed.
this.showLoading = function () {
backupsource = $('.processAnimation').attr('class');
$('.processAnimation').removeAttr('class').addClass('disabled-btn processAnimation');
$('.processAnimation').attr( 'backupsource', backupsource );
}
this.hideLoading = function () {
backupsource = $('.processAnimation').attr('backupsource');
if( backupsource != undefined ) {
$('.processAnimation').removeAttr('class').addClass( backupsource );
$('.processAnimation').removeAttr('backupsource');
}
}
EDIT: Above two functions are working and moving flower replaced clicked button. When request is complete then button is back. Problem is that when I click one button it replace all buttons(class=procesAnimation) with moving flower.
Thanks

Since you haven't posted your click event binding I am going to take a quick guess and say that your selector is not set right or conflicts with another element. try something like this:
$('input').click(function(){
switch( $(this).attr('id') ){
case 'submit' :
ShowLoading();
break;
case 'reset' :
HideLoading();
break;
}
});
and change the syntax of how you initialize the two functions to the following:
function ShowLoading(){
//do your show loading procedure here
};
function HideLoading(){
//do your hide loading procedure here
};

This is using the code u have currently
$('.processAnimation').click(function (){
if($(this).attr('type')=='submit'){
//submit has been clicked
}else{
//reset has been clicked
}
});
but it looks like you should really be using ID's rather than class's

if you have jQuery it is simple
$('#submit').click(showLoading)
$('#reset').click(hideLoading)
Just two different binding of events.
or did I miss something? :)

Change onclick action with a Javascript function

I have a button:
<button id="a" onclick="Foo()">Button A</button>
When I click this button the first time, I want it to execute Foo (which it does correctly):
function Foo() {
document.getElementById("a").onclick = Bar();
}
What I want to happen when I click the button the first time is to change the onclick function from Foo() to Bar(). Thus far, I've only been able to achieve an infinite loop or no change at all. Bar() would look something like this:
function Bar() {
document.getElementById("a").onclick = Foo();
}
Thus, clicking this button is just alternating which function gets called. How can I get this to work? Alternatively, what's a better way to show/hide the full text of a post? It originally starts shorted, and I provide a button to "see the full text." But when I click that button I want users to be able to click the button again to have the long version of the text go away.
Here's the full code, if it helps:
function ShowError(id) {
document.getElementById(id).className = document.getElementById(id).className.replace(/\bheight_limited\b/, '');
document.getElementById(id+"Text").className = document.getElementById(id+"Text").className.replace(/\bheight_limited\b/, '');
document.getElementById(id+"Button").innerHTML = "HIDE FULL ERROR";
document.getElementById(id+"Button").onclick = HideError(id);
}
function HideError(id) {
document.getElementById(id).className += " height_limited";
document.getElementById(id+"Text").className += " height_limited";
document.getElementById(id+"Button").innerHTML = "SHOW FULL ERROR";
document.getElementById(id+"Button").onclick = "ShowError(id)";
}

Your code is calling the function and assigning the return value to onClick, also it should be 'onclick'. This is how it should look.
document.getElementById("a").onclick = Bar;
Looking at your other code you probably want to do something like this:
document.getElementById(id+"Button").onclick = function() { HideError(id); }

var Foo = function(){
document.getElementById( "a" ).setAttribute( "onClick", "javascript: Boo();" );
}
var Boo = function(){
alert("test");
}

Do not invoke the method when assigning the new onclick handler.
Simply remove the parenthesis:
document.getElementById("a").onclick = Foo;
UPDATE (due to new information):
document.getElementById("a").onclick = function () { Foo(param); };

Thanks to João Paulo Oliveira, this was my solution which includes a variable (which was my goal).
document.getElementById( "myID" ).setAttribute( "onClick", "myFunction("+VALUE+");" );

I recommend this approach:
Instead of having two click handlers, have only one function with a if-else statement. Let the state of the BUTTON element determine which branch of the if-else statement gets executed:
HTML:
<button id="a" onclick="toggleError(this)">Button A</button>
JavaScript:
function toggleError(button) {
if ( button.className === 'visible' ) {
// HIDE ERROR
button.className = '';
} else {
// SHOW ERROR
button.className = 'visible';
}
}
Live demo: http://jsfiddle.net/simevidas/hPQP9/

You could try changing the button attribute like this:
element.setAttribute( "onClick", "javascript: Boo();" );

What might be easier, is to have two buttons and show/hide them in your functions. (ie. display:none|block;) Each button could then have it's own onclick with whatever code you need.
So, at first button1 would be display:block and button2 would be display:none. Then when you click button1 it would switch button2 to be display:block and button1 to be display:none.

For anyone, like me, trying to set a query string on the action and wondering why it's not working-
You cannot set a query string for a GET form submission, but I have found you can for a POST.
For a GET submission you must set the values in hidden inputs e.g.
an action of: "/handleformsubmission?foo=bar"
would have be added as the hidden field like: <input type="hidden" name="foo" value="bar" />
This can be done add dynamically in JavaScript as (where clickedButton is the submitted button that was clicked:
var form = clickedButton.form;
var hidden = document.createElement("input");
hidden.setAttribute("type", "hidden");
hidden.setAttribute("name", "foo");
hidden.setAttribute("value", "bar");
form.appendChild(hidden);
See this question for more info
submitting a GET form with query string params and hidden params disappear

How can I execute Javascript before a JSF <h:commandLink> action is performed? [duplicate]

This question already has an answer here:
Confirmation on submit
(1 answer)
Closed 7 years ago.
If you have a JSF <h:commandLink> (which uses the onclick event of an <a> to submit the current form), how do you execute JavaScript (such as asking for delete confirmation) prior to the action being performed?

Can be simplified like this
onclick="return confirm('Are you sure?');"

<h:commandLink id="myCommandLink" action="#{myPageCode.doDelete}">
<h:outputText value="#{msgs.deleteText}" />
</h:commandLink>
<script type="text/javascript">
if (document.getElementById) {
var commandLink = document.getElementById('<c:out value="${myPageCode.myCommandLinkClientId}" />');
if (commandLink && commandLink.onclick) {
var commandLinkOnclick = commandLink.onclick;
commandLink.onclick = function() {
var result = confirm('Do you really want to <c:out value="${msgs.deleteText}" />?');
if (result) {
return commandLinkOnclick();
}
return false;
}
}
}
</script>
Other Javascript actions (like validating form input etc) could be performed by replacing the call to confirm() with a call to another function.

This worked for me:
<h:commandButton title="#{bundle.NewPatient}" action="#{identifController.prepareCreate}"
id="newibutton"
onclick="if(confirm('#{bundle.NewPatient}?'))return true; else return false;"
value="#{bundle.NewPatient}"/>

You can still use onclick. The JSF render kit specification (see Encode Behavior) describes how the link should handle it. Here is the important part (what it renders for onclick):
var a=function(){/*your onclick*/}; var b=function(){/*JSF onclick*/}; return (a()==false) ? false : b();
So your function wont be passed the event object (which isn't reliable cross browser anyway), but returning true/false will short-circuit the submission.

In JSF 1.2 you can specify onclick events.
Also, other libraries such as MyFaces or IceFaces implement the "onclick" handler.
What you'd need to do then is simply:
<h:commandLink action="#{bean.action}" onclick="if(confirm('Are you sure?')) return false;" />
Note: you can't just do return confirm(...) as this will block the rest of the JavaScript in the onClick event from happening, which would effectively stop your action from happening no matter what the user returned!

If you want to execute something before the form is posted, for confirmation for example, try the form event onSubmit. Something like:
myform.onsubmit = function(){confirm("really really sure?")};

This never worked for me,
onclick="if(confirm('Are you sure?')) return false;" />
but this did
onclick="if(confirm(\"Are you sure?\"))return true; else return false;"

var deleteClick;
var mess="xxx";
function assignDeleteClick(link) {
if (link.onclick == confirmDelete) {
return;
}
deleteClick = link.onclick;
link.onclick = confirmDelete;
}
function confirmDelete() {
var ans = confirm(mess);
if (ans == true) {
return deleteClick();
} else {
return false;
}
}
use this code for jsf 1.1.