We Keep Coding

<button> inside <a> is reloading the page

I have an react app with structure like this.
private navigate(){
alert("navigate");
}
<a href="#gotothisid">
<button onclick="navigate()"></button>
</a>
<div id="gotothisid">
</div>
On click, the page is reloading after the alert but it should just shift the focus to #gotothisid.
What is missing here? Is there anyway to achieve both button click and a href together without reloading the page?
I want to achieve both button click and a href together without reloading the page.

The default behaviour of a button is submit: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type.
You just have to add:
<button onclick="navigate()" type="button"></button>
so your button won't trigger a submit that reload the page.

ajax cart success hide div and display another

I'm using ajaxify for some add to cart funcionality of my shopify collection page.
All works fine however I need to hide a div once the item has been added to cart and display another.
The Html looks something like this
<div class=“col-add-to-cart”>
<div class="col-add-btn-container">
<button type="submit" name="add" class="add-to-cart-main" data-add-to-cart="">
<span data-add-to-cart-text="">Add to cart</span>
</button>
<p class="ajaxified-cart-feedback success" style=""><i class="fa fa-check"></i> Added to cart! <a href="/cart">View
cart</a> or continue shopping.</p>
</div>
<div class="col-container">
<div class="col-add">
<div class="expand-icon expanded">
</div>
<div class="checkmark">
</div>
</div>
</div>
</div>
And the relevant JS
$addToCartBtn.addClass('inverted');
_setText($addToCartBtn, _config.addedToCartBtnLabel);
_showFeedback('success', '<i class="fa fa-check"></i> Added to cart! View cart or continue shopping.', $addToCartForm);
window.setTimeout(function () {
$addToCartBtn.prop('disabled', false).removeClass('disabled').removeClass('inverted');
$('.col-add-to-cart').find('.expand-icon.expanded').css("display", "none");
$('.col-add-to-cart').find('.checkmark').css("display", "block");
_setText($addToCartBtn, _config.addToCartBtnLabel);
}, _config.howLongTillBtnReturnsToNormal);
So as you can see I'm setting the checkmark to display: block and hide the expand-icon.expanded.
This works for the expand-icon as only one on the page has the .expanded class, however it shows all the .checkmark divs for each product. I only need it to display for the checkmark within the same container div as the .ajaxified-cart-feedback .success div. I've tried to do that with the col-add-to-cart container but doesn't seem to work.

You need to limit your query to a certain scope. From the info you provided I can't tell for sure what is happening, but you could try replacing $('.col-add-to-cart') with $addToCartBtn.closest('.col-add-to-cart')
The first one will select every element on the page with that class, causing the effect you observed. The second will start from $addToCartBtn (which I am assuming is a single element, in the context you need), find its closest parent with 'col-add-to-cart', then allowing you to "find" within the right context.
You could also try starting the query from $addToCartForm. It is not clear which element it refers to, but if it works for _showFeedback, it might work for your case too. That would look like this: $addToCartForm.find('.checkmark').css("display", "block");

Add a Back button after removing nav-bar in Meteor-Ionic app

In a Meteor-Angular-ionic app, after hiding the nav-bar in a template to achieve a full-screen view using
<ion-view hide-nav-bar="true">
how do we add a Back button on the top left of the screen that will bring the user back to the previous page?
The idea is to have no visible navbar in one particular template/controller, but still have a back button.

One solution could be to add your custom back button, which will be navigating to the previous screen.
In your template, add the following button
<button class="button icon-left ion-android-arrow-back button-clear button-dark"
ng-click="myGoBack()">
</button>
Now, define the custom myGoBack function in your controller
// Your controller
function MyCtrl($scope, $ionicHistory) {
// myGoBack method
$scope.myGoBack = function() {
$ionicHistory.goBack();
};
}
Remember to inject the dependency of ionicHistory in your controller.
Please refer the link ionNavBackButton
for more detailed information.
Hope this will help.
Thanks!

Use the following div
<div class="col-md-12">
<button class="pull-left btn btn-primary"> Back </button>
<div>

Link inside a button not working in Firefox

I have two links inside a button but the links don't seem to work on Firefox.
<button class="btn login">
<b>Log In</b>
|
<b>Sign Up</b>
</button>
I tried JavaScript onclick and redirecting - even that is not working.

This doesn't work because it is not allowed by HTML5:
Content model: Phrasing content, but there must be no interactive
content descendant.
Interactive content means any of the following elements:
a audio (if the controls attribute is present) button details embed
iframe img (if the usemap attribute is present) input (if the type
attribute is not in the hidden state) keygen label menu (if the type
attribute is in the toolbar state) object (if the usemap attribute is
present) select textarea video (if the controls attribute is present)
If it does work in some browsers it's just because they're trying to
play nice with malformed markup and provide some sort of meaningful result.
In other words: rewrite your HTML, it's a mess. If you want the links to look like they're in a button, put them in a div element and style that to look like one, instead of abusing semantically wrong elements for it.

<a> is not allowed inside <button>
Phrasing content, but there must be no interactive content descendant.
<a> is interactive content (regardless of whether it has an href apparently, but yours do). Thus you can't depend on having the links as children of the button and what Firefox is doing is correct. Use another element to contain the <a>s

I have two links inside a button but […]
“Yeah, but let me stop you right there …”
http://www.w3.org/TR/html5/forms.html#the-button-element:
4.10.8 The button element Content model: Phrasing content, but there must be no interactive content descendant.
--->
Interactive content is content that is specifically intended for user interaction.
⇒ a, audio […]
So, if you are writing invalid HTML, expect unexpected behavior ;-)

You can add this in the button element.
onclick="window.location.href='/link1'"
Example
<button onclick="window.location.href='/login'">Login</button>

That's invalid HTML,
Do something like this instead:
<ul>
<li>Log in</li>
<li>Sign up</li>
</ul>

Use javascript: window.location for the button.
<div class="product">
<button onClick="javascript: window.location='/checkout/outfield-
banner/1'">Add to Cart</button>
</div>

Or, you can put the button inside the anchor, it won't have the exact same look since it'll be two different buttons, but it will be a button that acts as a link. It's still not technically correct but it does work in FireFox.
<a href="/login">
<button class="btn login">
<b>Log In</b>
</button>
</a>
<a href="/signup">
<button class="btn login">
<b>Sign Up</b>
</button>
</a>

How to stop a button from toggling within div tag using jQuery?

I have a link which triggers div tag to toggle. The problem is that I don't want my button(which is within the div), to toggle. How do I stop it from toggling?
This is my html code:-
Upload Videos
<div id="uploadVideos" class="menu">
<input name="submit" type="submit" value="Upload" id="btn" />
</div>
This is my jQuery code:-
$(document).ready(
function upload(){$("#uploadVideoLink").click(
function uploadTog(){$("#uploadVideos").toggle();}
);}
);

You need to get it outside the <div> you can't hide an element without all the elements inside of him. It's just the way DOM is.

If you mean that you don't want to hide the button that's not possible i think as long as the button is inside the div becuase toggle() assign display: none; to the div thus hiding everything inside it
One thing you could do is this one (this would toggle all elements inside the div but not the button):
Upload Videos
<div id="uploadVideos" class="menu">
<div>sometext</div>
<input name="submit" type="submit" value="Upload" id="btn" />
<div>sometext</div>
</div>
$(document).ready(
function upload() {
$("#uploadVideoLink").click(
function uploadTog() {
$("#uploadVideos *:not(#btn)").toggle();
});
});
fiddle
http://jsfiddle.net/K5NL4/

If I understand correctly, you will need to move the button outside the div. With a little styling you should be able to get the interface to look right.
Either position the toggled-on DIV on top of the outside button, and place another identical button inside the DIV on top of the original button. Or position the toggled-on DIV adjacent to/just below the button, and just create a border that makes it seem like the button is now 'part' of the toggled DIV.