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')"
Related
I have dug and dug for a few hours today without much luck. My language is PHP and my javascript skills are not that great I am learning.
I have a list of buttons, each with their own value. When the button is pressed I would like for it to send the value of that button to a variable so the right file is loaded.
I know that this has got to be a simple thing but it's beyond me right now.
Code:
<button type="button" id="myButton" onClick="setval('shannen')" class="btn btn-primary cd-btn">VIEW</button>
<button type="button" id="myButton" onClick="setval('fall-features')" class="btn btn-primary cd-btn">VIEW</button>
var content_div = document.getElementsByClassName("cd-panel-content");
$(document).ready(function() {
setValue();
$("#myButton").on('click',setValue)
}) console.log(mysample);
function setValue() {
mysample=null;
var mysample=$("#myButton").val();
var mysample=mysample+".html";
console.log(mysample);
$(".cd-panel-content").load("emails/"+mysample);
When they click it a window opens on the right of the screen displaying an HTML file.
www.jeffcade.com to see the functionality. I have gotten it to work with one variable but then it will not change when a different button is pressed.
You're calling a "setval()" function with one argument, but you've written a "setValue()" function with no arguments. You could try changing your function to:
function setval(mySample) {
mySample=mySample+".html";
console.log(mySample);
$(".cd-panel-content").load("emails/"+mySample);
}
Currently, I'm doing an application and I need login to this one particular website. Basically, I need to make this button click using a javascript but I have no idea how to.
This is the button code I retrieved from the website:
<button type="submit" class="uk-width-1-1 uk-button uk-button-primary uk-button-large">Sign in</button>
Thank you for your help in advance
You can click on the button programmatically, in case of pure javascript :
(function(){document.querySelector('button[type="submit"]').click();})()
In case of Android JS Interface :
webView.loadUrl("javascript:(function(){"+
"l=document.querySelector('button[type=\"submit\"]');"+
"e=document.createEvent('HTMLEvents');"+
"e.initEvent('click',true,true);"+
"l.dispatchEvent(e);"+
"})()");
The general way to have button click events is to use something like jQuery. For example lets set the button to have an ID
<button id="my-button" type="submit" class="uk-width-1-1 uk-button uk-button primary uk-button-large">Sign in</button>
Then we would apply a click event to it with jQuery
$('#my-button').click(function(){alert('button has been clicked');})
Instead of the alert you could put whatever code you want in there :D
Example: Codepen example
EDIT: Example for a class:
Example for a class
(Note that we use a "." instead of "#" in the call)
-Kyle
So I ran into a small problem... I have a forEach tag and in it there is a button. The button is connected to a JS which loads another .JSP file. However it seems that only first button works if I connect the JS to the buttons id $("#imageshow").click like so, but if I use $("button").click it works fine. Despite being able to make it work I have too many buttons in the .JSP file to use it this way. So I would appreciate you help in this matter :)
The .JSP file:
<c:forEach var="building" items="${buildings}" >
<button id="imageshow" class="btn btn-default btn-xs" data-toggle="modal" data-target="#myModal" value="${building.getBuildingID()}">View</button>
</c:forEach>
This is the JS
$("#imageshow").click(function() {
var id = $(this).attr("value");
$("#imgas").load("SlideShow.jsp?id=" + id);
});
The id attribute should always have a unique value, which is currently not the case. Try using class instead (and querying as .imageshow.
Im actually having a problem with html5 button in visualforce pages. I have a requirement where when i click on a button, it should redirect to a certain page (user do not want link). For some reason which i don't know, the function i'm executing do not work with HTML5 button (in fact the page only refresh but do not redirect) but when i use input of type button, the function is executed as expected.
I want to use the html5 button as there are some specific css already defined for button in the plugin im using. Find below codes for my button and javascript function :
<button class="butt" onclick="newContact()" >Nouveau</button>
<script type="text/javascript">
function newContact(){
window.location = "/apex/VFP01_NewContact";
}
</script>
What did I do wrong here, and what is the limitation of html5 button ?
Got to know the answer. In visualforce page, the html5 button execute a submit of my form. A way to prevent this, was to specify the attribute type="button".
You really have two options.
You could consider wrapping a element with an anchor tag that points to the URL that you want to target as seen below :
<!-- Target the "YourAction" action in your "YourController" controller -->
<a href='#Url.Action("YourAction","YourController")'>
<input type="Button" id="mybutton" name="url button" value="Next" />
</a>
or you could handle this purely through Javascript and perform your navigation that way :
<!-- The onclick event will trigger a Javascript call to navigate -->
<input type="Button" id="mybutton" name="url button" value="Next" onclick="window.location.href='#Url.Action("YourAction","YourController")';" />
I was wondering if there is a way to use a traditional javascript confirmation box with the scala html templates in the play framework.
#for(item <- listItems) {
<li>
<b>Item: </b>#item.name<br>
#form(routes.Application.deleteItem(item.id)) {
<input type="submit" value="Delete" class="btn btn-danger">
}
</li><br>
}
That is the view I am working with at the minute. As you can see from the code it brings up list of "item" objects and a delete button appears beside each of them. I just wanted to prompt some sort of confirmation dialog before the deleteItem method actually gets called.
I know how to do this with some standard HTML and javascript but thats only for modifying html elements, is there away to do this using the play form helpers?
Thanks
Why not? :)
Actually I think you don't need to use single field form for this task, you can just use common link (of course it should point to GET route, also consider adding some hash to params, to prevent accidental deleting):
<a href="#routes.Application.deleteItem(item.id)"
class="btn btn-danger" onclick="return confirm('Are you sure?');">Delete</a>