We Keep Coding

Can´t use ng-click function

I created a button dinamically with javascript and I added the ng-click="callSomething()" , when i render it, it have the corresponding class, but when I press the button it doesn´t work, I created a Button directly in the frontend with the same function and it works
This works
<button ng-click="callSomething(1231)" id="somethingButton">Change</button>
This isn´t working
button = `<td><button ng-click="callSomething(${data[i].order_number})" class="btn btn-primary" >Change</button></td>`
Please your help

How to hide or disable angular button, once user click the button

I am very new to angular I have servicenow experience, I need one help in incident form I have one angular button (Create this incident) once user click the button that button should be hide or read only any code help
code :
<div>
<button class="btn btn-primary" ng-click="$root.trigger()">Create this ticket</button>
<hr/>
<h3 class="show-font"><b>OPTIONAL INFORMATION</b></h3>
<!--<p class="text-muted small">This will help us understand who should be looking into your ticket.</p>-->
</div>

Demo
create one variable make it default true;
isShow=true;
give button if condition in element
ng-if="isShow"
when you clickked give click function to html ng-click="test()"
change it
test(){
this.isShow=!this.isShow;
}

<form> is causing problems with my JavaScript code

I have simplified my code down to a very basic level to try to figure out why, when I add a form to any of my HTML pages that contain Javascript, the page renders twice: once with the JavaScript and once without, putting me back where I started.
Here's the simple HTML:
<form action="test.php" method="post">
<div class="section">
<fieldset>
<p id="myP"></p>
<button type='submit' name='NewClassTypes' value='NewClassTypes' id='save_button'>Save</button>
</fieldset>
</div> <!-- ends section -->
</form>
<script type="text/javascript" src="inc/js/scripts.js"></script>
So all I have is an empty paragraph and a Save button.
Then I have this Javascript code that just simple writes "Hello world!" to the paragraph element, when the Save button is clicked:
var saveButton = document.getElementById("save_button"); // Save button
var displaySomeText = function () {
var myParagraph = document.getElementById("myP");
myParagraph.textContent = "Hello World!";
}
saveButton.onclick = displaySomeText;
The problem is that when I click on the Save button, "Hello world!" displays for a brief second and then disappears.
BUT it works just fine IF I remove the FORM element.
Any ideas why this might be happening?
In the real code I need to submit data to the database, and I want to be able to use _POST to get the data I need out of all my inputs.

The reason is, after clicking on the submit button, it "submits" the form. Try changing the button's type="button" and this will not happen:
<!------vvvvvvvvvvvvv Change this!!! -->
<button type='button' name='NewClassTypes'
value='NewClassTypes' id='save_button'>Save</button>
Else, you need to give return false in your function. That would also work:
var displaySomeText = function () {
var myParagraph = document.getElementById("myP");
myParagraph.textContent = "Hello World!";
return false; // Add this!
}

The submit button type has a special functionality: it causes the form it is put in to be submitted by the browser. Putting a click handler on it does not prevent this from happening. So, the result is what is expected.
In order to not submit the form, you need to change the button type:
<input type='button' name='NewClassTypes' value='NewClassTypes' id='save_button'>Save</button>
In this case, the action property of the form doesn't make sense, as well as the method - they both are not used.

You may find it easier to use jQuery when troubleshooting issues like that.
$('#save_button').on('click', function(e){
e.preventDefault(); // don't submit the form as usual.
$('#myP').text('Hello World!');
});

Disabling a button when clicked

I have a form which users can use to send an ecard.
This is an example URL:
http://jimpix.co.uk/ecards/normal-ecard.asp?id=5480
At the bottom of the form there is this HTML (covering the send buttons):
<div class="col-lg-6">
<legend>Next bit...</legend>
<button type="button" id="BtnPrev" class="btn btn-info" onclick="return valFormPrev(theForm,'preview');"/>Preview Your Ecard</button>
<button type="button" id="BtnGo" class="btn btn-success" class="preview" onclick="return valFormGo(theForm,'process');"/>Send Now</button>
<p class="top10">Reset buttons so you can use them again</p>
</div>
Because the page can take a while to process when users click on a button, I added this to the end of the JS used to validate the forms (located at http://jimpix.co.uk/dist/js/ecard.js)
Say a user clicks the "Send Now" button, it calls the "valFormGo" function.
That contains this code near the end:
document.getElementById("BtnGo").disabled = 'true';
That disables the button if the user click on it, so they can't click it many times and send the same ecard many times.
That seems to work okay, but if, once they have sent the ecard, they press the back button to e.g. send again to someone else, the button remains disabled, even if the page is refreshed.
I had to set up a function to allow them to make the buttons active again via:
function ResetBtns()
{
document.getElementById('BtnPrev').removeAttribute("disabled");
document.getElementById('BtnGo').removeAttribute("disabled");
}
That works, but it is clunky.
I just wondered if anyone knows of a more elegant solution I might be able to follow to disable the button when pressed, or maybe have the button change the text to say "processing..." when it is waiting for the next page to process the data.
Basically I have made a hack job of this and it would be much appreciated if anyone might be able to advise please on possible alternatives.
Any advice would be much appreciated.
Thanks

Why not process the ecard on the same page using ajax method, then on success you can un-disable the submit button.
Can't really offer any code at this time as not sure of your current flow / method being used.

Try this:
//to disable buttons
$('BtnPrev').click(function(){
this.prop('disabled', true);
});
$('BtnGo').click(function(){
this.prop('disabled', true);
});
//to enable buttons
function ResetBtns() {
$('BtnPrev').prop('disabled', false);
$('BtnGo').prop('disabled', false);
}

Just make the function run like this:
<button onclick="myfunction()" id="activate"></button>
<script>
function myfunction(){if(unrun==true){unrun=false;
document.getElementById("activate").innerHTML="Processing....";
code goes here;}}
</script>

YUI3 button click event is acting like a submit type instead of a button type

I am using ASP.NET MVC 3 with the Yahoo API version 3. I am trying to get my YUI3 button to redirect to another page when I click on it, this button is my cancel button. The cancel button is a plain button type, but it is being treated like a submit button. It is not redirecting to the correct page, but acting like a submit button and it kicks off my page validation like what the submit button would do.
I thought that it might be with my HTML but I did validate it. It validated 100% correct. So I then stripped down the whole page to a bare minimum but the cancel button is still working like a submit button. Here is my HTML markup:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Create2</title>
</head>
<body class="yui3-skin-sam">
<h1>Test submit</h1>
#using (Html.BeginForm())
{
<button id="SaveButton" type="submit">Save</button>
<button id="CancelButton" type="button">Cancel</button>
}
<script src="http://yui.yahooapis.com/3.6.0pr4/build/yui/yui-min.js"></script>
<script>
YUI().use('button', function (Y) {
var saveButton = new Y.Button({
srcNode: '#SaveButton'
}).render();
var cancelButton = new Y.Button({
srcNode: '#CancelButton',
on: {
'click': function (e) {
Y.config.win.location = '/Administration/Department/List';
}
}
}).render();
});
</script>
</body>
</html>
I'm not sure what I am doing wrong here? Is this maybe a bug in their API? I am testing on IE8 and on the latest version of FireFox.
UPDATE:
I forgot to mention that if these buttons are not between form tags then the redirect works fine. If I put them in form tags then the redirect does not work.

I would use a link because you are redirecting to another page. Doing it this way you wouldn't need to initialize it with javascript or register the onClick listener.
<button id="SaveButton" type="submit">Save</button>
<a id="CancelButton" href='/Administration/Department/List'>Cancel</a>
Look at this link to style your link: http://yuilibrary.com/yui/docs/button/cssbutton.html

The Y.Button widget is removing the type attribute from the Cancel button. This makes that button behave like a submit button.
There are many possible paths to make this work. I'll start from simple to complex. The first is to avoid the issue entirely and not use JavaScript at all. Just use a link:
<form action="/Administration/Department/Create2" method="post">
<button class="yui3-button">Save</button>
<a class="yui3-button" href="/Administration/Department/List">Cancel</a>
</form>
After all, all that the Button widget is doing is adding a couple of css classes to each tag and a lot of other stuff that makes more complex widgets possible. As you can see in the Styling elements with cssbutton example, even <a> tags can look like nice buttons using just the YUI css styles. If you don't have to use JavaScript, better not to use it.
A second option is to avoid the Y.Button widget and use the Y.Plugin.Button plugin. It's more lightweight in both kb and processing power. And it doesn't touch the tag attributes, so your location code will work.
YUI().use('button-plugin', function (Y) {
Y.all('button').plug(Y.Plugin.Button);
Y.one('#CancelButton').on('click', function () {
Y.config.win.location = '/Administration/Department/List';
});
});
And finally you can hack around the behavior of the Y.Button widget by preventing the default action of the button:
var cancelButton = new Y.Button({
srcNode: '#CancelButton',
on: {
'click': function (e) {
e.preventDefault();
Y.config.win.location = '/Administration/Department/List';
}
}
}).render();