I have a django template as follows ..
...
<div class="row">
<div class="col-lg-12">
<button type="submit" class="btn btn-primary" id="related"}>KIRK</button>
</div>
</div>
...
And a script in the same template
<script>
$(document).ready( function() {
$("#related").click( function(event) {
alert("You clicked the button using JQuery!");
});
});
</script>
On button click I want to show an alert, however, this does not seem to work for me ? I cannot figure out what I am doing wrong ? Is it the way the script is defined or am not using the right selector ?
Change your html to look like this:
<div class="row">
<div class="col-lg-12">
<button type="submit" class="btn btn-primary" id="related">KIRK</button>
</div>
</div>
(remove the } )
Use whatever debugger/javascript console you prefer (I use Firebug, but you can do it with the Firefox and Chrome built-in consoles as well, I don't know about IE developer tools, which suck):
Verify that you load jQuery (and not just some javascript file of your own named jquery.js)
Verify that jQuery is loaded, and that you have one and only one node in the DOM with the id related by typing $('#related')`.
Verify that your .click line is executed after jQuery is loaded.
Try using a version of Firefox that isn't years old. I'm using 38.0, and you're using 10.0? That was released in 2013.
Related
I am confused. This exact CSS works on other sites and same browser.
But on a certain website. The drop down does not work?
Is there a Heading Setter or something? Website setting? Its confusing me.
<button onclick="javascript:showElement('bshd')" style="padding:2px;"> Button </button>
<div id="bshd" style="display:none;">
This Should Show Now
</div>
I get that this showElement fucntion is custom made by you? You can achieve the same thing by using jquery show() function:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<button onclick="$('#bshd').show()" style="padding:2px;"> Button </button>
<div id="bshd" style="display:none;">
This Should Show Now
</div>
I am trying to run an alert when clicking at a <a> tag.
$('#login-button1').click(function() {
alert(1234);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a ui-sref="tabsController.inCio" id="login-button1" class="button button-stable button-block LoginButton1" href="#/tabsController/home">Login</a>
Nothing happens when I click the button. I ve tried many other ways to run the alert but none of them seems to have affected the tag.
Console log does not display any error message.
It seems that your project is AngularJS.
If you use AngularJS, you can use ng-click directive.
In HTML:
<a ui-sref="tabsController.inCio" ng-click="alertMethod()" class="button button-stable button-block LoginButton1">Login</a>
In Controller:
$scope.alertMethod = function () {
alert(1234);
}
It is supposed to work, everything looks alright, make sure you have jQuery imported correctly. like:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
or whatever version of jQuery you are wishing to use, code works fine with above version as seen in this Fiddle
How to use to jquery hide api in my rails application with the following block of code .. especially for the close button...
<div class="loginwrapperinner">
<div class="widgettitle">
<button type="button" class="close" data-dismiss="alert">×</button>
<%= "<div class=\"flash_error\">#{h alert}</div>".html_safe unless alert.blank? %>
<%= "<div class=\"flash_notice\">#{h notice}</div>".html_safe unless notice.blank? %>
</div>
.....
</div>
Cleaner version:
HTML
<div class="loginwrapperinner">
<div class="widgettitle">
<button type="button" class="close" data-dismiss="alert">×</button>
<!-- empty container will not appear (try to not using html_safe!) -->
<div class="flash_error"><%= h(alert || '') %></div>
<div class="flash_notice"><%= h(notice || '') %></div>
</div>
.....
</div>
Javascript
$('.close').
siblings('.flash_error, .flash_notice').hide().
prevObject.parent().hide();
A brief explanation may change the way you've thought of this problem:
rails is generating html via the view. It is never (should never be) responsible for javascript.
Inside of your javascript file(s) is where you'll write functionality like this.
So, lets say your view has generated a message box and that box's close button had a class of box_close_button, you could simply go into your JS file and attach a listener to that class:
$('.box_close_button').doSomeJavascriptHere(function() { //whatever you want. })
So, now its not a matter what to do in rails, but rather, whats the proper jquery selectors to do what you want
I found the following solution for my problem.
$(function(){
$('.close').click(function(){
$(this).parent().hide();
});
});
<div id="feesnav">
<div style="float: right;">
<button id="b2" class="adjustuserfees_button active" onclick="cusers(this)"/>
</
Say I want to click on button b2 using python selenium. Tried all sorts of xpath definition and it retunrs can't find the locator error
The following code does not work:
self.sel.fire_event("//div[#id='feesnav']//button[#id='b2']", 'click')
or self.sel.mouse_down("//div[#id='feesnav']//button[#id='b2']")
Any suggestions?
That is very simple I think the example detailed here, is what your looking for.
Here is summary of what is detailed there.
<html>
<head>
<script type="text/javascript">
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>My First Web Page</h1>
<p id="demo"></p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
Goodluck.
Isn't there a click() method or you are saying it is not working for you? If you are going the javascript route you could try something like below
String myScript="var element= document.getElementById('b2');";
if(browser is not IE) //add some logic here
myScript=myScript+"var evObj = document.createEvent('MouseEvents');evObj.initEvent('click',true,true);element.dispatchEvent(evObj);";
else
myScript=myScript+"element.fireEvent('onclick');
selenium.getEval(myScript);
I still don't think you would need to go JS route. Selenium should be able to do the click for you. Are you sure there are no hidden duplicate elements? Also there is no sync issue with your code, like you are trying to click on the button before even the page is loaded etc?
I am a novice in jQuery, and am trying to create this page. In all browsers I tested, when I click the red button a coupon code appears, except for IE. Why does this happen? And how can I fix it?
I hate this browser, really...
Javascript:
$(".coupon_button").live('click', function (event) {
$(".coupon_button").remove().fadeOut('slow');
$(".coupon_main").after($("<div class='coupon_code'>code:newhgcoupon</div>").fadeIn());
//$(".coupon_main").after().fadeIn('slow').html("<div class='code'>code:newhgcoupon</div>");
});
HTML:
<div class="module">
<div class="coupon_title">Pay <span class="yellow">1 Cent</span> your First Month</div>
<div class="coupon_main">To help save you some time, we created a link that takes you directly to the easily missed area on the official Medifast site that lists all of their latest specials and discounts.</div>
<div class="coupon_button"><img src="button.png" /></div>
<div class="coupon_footer">Expiration: 11-30-2010</div>
</div>
Your script is not executing in IE. To fix it, just change the script type to text/javascript.
IE does not recognize the application/javascript type as being a script at all.
I think you're missing your document.ready function. Add this line right above the first line of your script:
$(document).ready(function() {