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.
Related
I need a button to open both "Bootstrap Modal" and Load iframe.
for now i have following concept:
User click on Modal Button Modal opens and then user need to click on another button in the Modal to load the iframe.
i found some solutions, but most of them using javascript with url in it. in my case i cant use this because i get the url from a button where this button has a dynamic id that get generated by a shortcode. as well i cant add this shortcode in the javascript, i already tried.
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#fileShareModal[wpv-post-id]">Open Modal</a>
<a class="btn btn-warning" href="[wpv-post-url]?layout_id=201" target="myiFrame[wpv-post-id]">click to load iframe</a>
<iframe name="myiFrame[wpv-post-id]" src="about:blank" class="max-h-600"></iframe>
I would like to get the dropdown-item button to open the modal and load the iframe. is that possible while keeping the structure of my urls the same?
You can open modals with jquery:
`
$(selector).modal("show");
`
So that means you can add an event to the button wich loads the iframe, and also open the modal
You need to add ids to each button:
`
$(idOfTheIframeLoader).click(e =>
$(idOfModal).modal("show")
);
`
i have a simple drop down menu and a button that submits an ajax form in a page and a js function calls onclick function of that button on a loop with some delay (every 10 sec onclick method of that button calls and therefore some form get submitted and refreshes).
now the problem is every time that button get clicked through js code dropdown menu closes automatically.
i suspect that calling onclick of that button steal the focus of dropdown menu and because of that each time js code calls it menu closes.
so, how can i prevent such a behavior when onclick of button get called? or is there any better way is to submit a ajax form on a loop with delay?
UPDATE
Code is a part of big project but for better understanding you can consider something like this:
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<form action="/navigationbar/_submitpush" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#pushwindow" id="form3" method="post">
<button id="pushsubmitButton" type="submit" style="display:none">realSubmitButton</button>
<script type="text/javascript">
function checkingPush() {
//Doing something
setTimeout(goingToLoop, 5000);
}
function goingToLoop() {
document.getElementById('pushsubmitButton').click();
}
checkingPush();
</script>
</form>
</div>
Every 5 sec goingToLoop calls and that call onclick function of pushsubmitButton button and drop down menu closes
AND you can simulate that with dev console of browser (open drop down menu, execute document.getElementById('pushsubmitButton').click() in console and menu closes even if button placed outside of form and do nothing)
The problem is that bootstraps dropdown is build using css and stays open by :focus. Simulating a click on an other element also sets the :focus to the other element.
You could change your dropdown to a JavaScript-solution or simulating a click on the dropdown-button after your click on your pushsubmitButton.
I have a div with an ui-sref attribute such that I am essentially treating it as a big button; however, within that div I have an actual button that also has an ui-sref attribute, but it is pointed to a different state.
When I click on the button, the state referenced by the button flashes on the screen before being replaced by the state referenced by the div.
How do I get only the button to set the state upon clicking it?
<div ui-sref="loadDocument({doc: documentName})">
{{documentName}}
<button class="btn" ui-sref="viewMetadata({doc: documentName})">
View Metadata
</button>
</div>
Not feasible, always parent element click will called.
try this
<div">
<span ui-sref="loadDocument({doc: documentName})"> {{documentName}}</span>
<button class="btn" ui-sref="viewMetadata({doc: documentName})">
View Metadata
</button>
</div>
I have a link with button behavior (bootstrap built-in) that i need to remove once it's clicked.
<a class="btn btn-success" type="button" href="#default">Home Page</a>
Currently i am using jQuery to remove the button e.g.
var btn = $('.btn');
btn.remove();
Actually this works just fine except that if you refresh the page the button as you guess it present on the page again. I want to remove it permanently though not sure if it's doable on the client side.
The project is an ASP.NET one-page web app.
Thank you
event.preventDefault() should help in this:
<a class="btn btn-success" type="button" href="#default">Home Page</a>
$('.btn').click(function(event){
event.preventDefault();
$(this).remove();
});
This used to be my (working) code:
<div onclick="location.href='http://somewebsite.com/';">
Link
</div>
If I'd click the link, I would be taken to http://someotherwebsite.com/. If I'd click somewhere else in the div, I would be taken to http://somewebsite.com/. Perfect.
Then, I decided that I wanted to open http://someotherwebsite.com/ in a new tab upon clicking the link, so I changed my code to this:
<div onclick="location.href='http://somewebsite.com/';">
Link
</div>
However, if I'd click the link now, I would be taken to http://somewebsite.com/ instead of http://someotherwebsite.com/! Apparently, adding target="_blank" to my anchor tag caused my onclick method to override my anchor tag's href. What's going on?
Edit: It turns out, my code does function properly in Chrome, but not in Safari 7.0.5. What can I do to add Safari support?
Try
<div onclick="location.href='http://somewebsite.com/';" target="_self">
Link
</div>
jsfiddle http://jsfiddle.net/guest271314/8deea/