Develop Reference

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.

How do I make my tweet button pull a string from my page into a newly composed tweet?

My codepen - http://codepen.io/illpill/pen/VbeVEq
For the sake of stacks policy, here is an example of code
<button class="btn btn-default btn-md pull-right" id="tweetButton">Tweet This</button>
My question is, how do I have it pull the quote from the page and compose it into a readily made tweet with added hashtags?

Start by adding a unique class to your Tweet button, then when someone clicks that button, get the current quote and pass it into a Tweet URL:
function tweet(message) {
window.open('https://twitter.com/intent/tweet?hashtags=hashtagshere&text=' + encodeURIComponent(message));
}
$('button.tweet').click(function() {
var currQuote = $('#quote').text();
tweet(currQuote);
});
Updated Codepen

How to use Bootstrap button-group and AngularJS to navigate between pages

I have this portion of code that creates a button group:
<div class="btn-group btn-group-lg">
<button id = "Image" type="button" class="btn btn-primary">Click1</button>
<button id = "Text" type="button" class="btn btn-primary">Click2</button>
</div>
I want to make it dynamic, in a sense that each button will take me to a different URL. I have come across this post:
How do I navigate to another page on button click with Twitter Bootstrap?
However, I cannot use <a></a> when dealing with a button group (or at least cannot think of a way to do so). So I guess I need a JS file with a function? How do I do that with AngularJS?

You can use a simple Javascript function such as:
go(path) {
window.location = path;
}
Then call it from your button with:
ng-click="go('index.html')"

How to click on particular button if multiple buttons are having same classes in protractor?

Html code
<button type="button" class="btn btn-default btn-sm pull-right" ng-click="move(1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-right"></i></button>
In angular protractor, is there any way to click on particular button if multiple buttons are having same classes. Please help me out on this.

you can distinguish the button by the button text. Like yiu can grab the element (button) by button text and perform your desired action
<button>Save</button>
element(by.buttonText('Save'));

You can click on the button by :-
By Id :
element(by.id('id')).click().then(function() {
});
By xpath :
element(by.xpath('//div[#id="ui-datepicker-div"]//a[#title="Next"]')).click(); // whatever your xpath is

Nested function in jQuery

I am new to javascript and jQuery. I am writing the following code to edit a portion of my web page. It is working perfect when I click on #edit_case first time but after clicking #cancel that returns me back. The #edit_case does not work.. What is wrong with this piece of code?
$("#edit_case").click(function(){
var oldHTML = $("#editable").html();
var newHTML;
newHTML = "<div class='panel-body' id='edit_fields'></div> <div class='panel-footer' id='footer-bottons'></div>"
$("#editable").html(newHTML);
$('#footer-bottons').html('<div class="text-right"><button class="btn btn-primary btn-sm" id="save">Save</button> <button class="btn btn-default btn-sm" id="cancel">Cancel</button></div>');
$("#cancel").click(function(){
$("#editable").html(oldHTML);
});
});
My HTML markup is like:
<div class="panel panel-default" id="editable">
<div class="panel-body">
Drop-down code
<li><a id='edit_case'>Edit</a><li>
Panel-Body Code...
</div>
Panel footer
</div>
When I click on Edit, the same text input fields appear as that on stackoverflow.com. On first time, Edit link works fine but when I cancel Edit both Edit and Delete do not work. I think click event is not occurring as I also have tried a check on it by using alert('test') and it isn't appeared after clicking on #cancel. Is this a problem of unbinding event? If it is, how would I correct it?

since the cancel button was not in the dom at first and since you are removing the edit_case, you need to do it with an ".on" put this code in the loading, not in the click event. if you put it in the click event, you will have multiple event that will be registered.
with working fiddle:
https://jsfiddle.net/2hjr6g94/
$(document).on('click','#cancel',function(){
$("#editable").html(oldHTML);
});
var oldHTML = $("#editable").html();
$(document).on('click','#edit_case',function(){
var oldHTML = $("#editable").html();
var newHTML;
newHTML = "<div class='panel-body' id='edit_fields'></div> <div class='panel-footer' id='footer-bottons'></div>"
$("#editable").html(newHTML);
$('#footer-bottons').html('<div class="text-right"><button class="btn btn-primary btn-sm" id="save">Save</button> <button class="btn btn-default btn-sm" id="cancel">Cancel</button></div>');
});

After running it once, the new html is in the variable value of "oldHtml". You need to store the old HTML outside of this functionality, so it is preserved.
Here is the process you are doing right now:
Get html.
Load new html.
Get html (now new html).
load oldHtml (still new html).
oldHtml gets overridden and stored everytime this function is called.