I have a form with some text boxes. I'm using bootstrap and I have a jquery plugin for form validation. My question is somehow some functions in bootstrap stopping the validation code from executing. This validation is written to onblur event and that code is in the same page with the form within <script> tags. I want to know that is there a way to find the running script on onblur event on google chrome developer tools.
Try jQuery Debugger for Chrome browser
If possible - give wep-page link
You can also override addEventListener(fiddle) and log then it calls:
function myEventListener(event, callback) {
console.log(this, event, callback);
this._addEventListener.apply(this, arguments);
}
HTMLElement.prototype._addEventListener = HTMLElement.prototype.addEventListener;
HTMLElement.prototype.addEventListener = myEventListener;
document.querySelector('input').addEventListener('blur', function () {
document.body.style.background = 'red';
});
Related
I have a problem with my inputs, i had a custom floating label once there is text inside my input. My problem is chrome autofill add the text after my javascript onDocumentReady check for text. I want my javascript function to be called after chrome as loaded the text or any time of autocompletion. Is it possible?
I have tried launching the javascript function upon documentGetReady.
$( document ).ready(function() {
toggleInputsFloatingLabelCustomClass();
});
Use a change function instead to see if any of your inputs change
jQuery('input').change(function(){
toggleInputsFloatingLabelCustomClass();
}
this will solve your problem of chrome autofilling after your script has run
You can add onkeyup definition for your inputs eq.
<input onkeyup='toggleInputsFloatingLabelCustomClassWithWait();'/>
than you can check if user is stil writing eq. Every one seocond and execute your method if user is writing like this:
var timeout = null;
function toggleInputsFloatingLabelCustomClassWithWait() {
clearTimeout(timeout);
timeout = setTimeout(function () {
toggleInputsFloatingLabelCustomClass();
}, 1000);
}
So I have a very simple JS function written that works like the following.
There is a button that has the following code:
<button type="submit" class="large button" onclick="addCart(76,95,73,96);">
<i class="icon-shopping-cart"></i> Add to Cart
</button>
Now when that is clicked there is a very simple function added to the page below that looks like the following:
<script type="text/javascript">
function addCart(pid, pattr, pval, pscent = 0) {
...
}
</script>
This works perfectly in Chrome, Firefox, Chrome for Mobile, Safari for Mobile.
But this does not seem to work on Safari on Mac. Instead I get the following error:
ReferenceError: Can't find variable: addCart
I cannot figure out why. It's hard for me to add a listener because there are 7 buttons and a wide arrange of variables that are being sent, and I'd rather send that like I'm currently doing.
I finally found the issue.
The function was creating an error in Safari so it was never being defined. I changed the function to the following:
function addCart(pid, pattr, pval, pscent) {
pscent = (typeof pscent !== 'undefined') ? pscent : 0;
...
}
Notice the big difference is that I was no longer using the Function to declare a default value for 'pscent' and instead I do it the old school method. Not sure if this is being caused by an older version of Safari or what.
If you are here because of a similar error, look for some potential JS error in the function which will prevent the function from being declared.
Looks like you are submitting a form since the input type is "submit". Have you tried testing it with the input type set to "button"?
if you are using jquery try to use document ready function
$(document).ready(function() {
// code here
});
or use plain javascript self executing function here
(function() {
// your page initialization code here
// the DOM will be available here
})();
the possible reason is your function is not available at the time of click
Here is a sample (using jquery) https://jsfiddle.net/baphmoLt/
I have a page with JS functions (which are called on mouse click) within <script> ... </script> tags. While I was testing I had encountered problems with .click method not working many times. Therefore I decided to simply call that function manually. However I found no source on the Internet which taught to do this.
I want to avoid clicking the links and simply call for doSumbit('5').
Thank you!
The JS functions are:
<script language="javascript">
function doSubmit(infoTypeId) {
document.forms[1].INFOTYPEID.value = infoTypeId;
document.forms[1].action = document.forms[1].action + "#" + infoTypeId;
document.forms[1].submit();
document.forms[0].INFOTYPEID.value = infoTypeId;
document.forms[0].submit();
}
function doSubmitOne(infoTypeId) {
document.forms[0].INFOTYPEID.value = infoTypeId;
document.forms[0].submit();
}
</script>
and the on-click links are:
<a href="javascript:doSubmit('11')" >Engine News<br></A>
<a href="javascript:doSubmit('5')" >Parts Identification<br></A>
You can run arbitrary JS with execute_script
page.execute_script("doSubmit('5')")
if you expect a return value use evaluate_script - it's all documented here - http://www.rubydoc.info/gems/capybara/Capybara/Session#evaluate_script-instance_method
Of course if you're actually testing an app, you'd be much better off figuring out why click isn't working for you and fixing that, since by just calling JS functions you're not actually testing that your app works.
EDIT: typo doSubit changed to doSubmit
I have a very strange issue preventing my code from firing a JQUERY function - but only if the event is declared in an onclick attribute tag within the page's html. If that same function is assigned to an element with a javascript ".click(function()..." event, then the function is called properly and the code doesn't say "This event doesn't exist!", essentially.
I trawled through the internet looking for someone with the same issue, and while there are a lot of questions that look superficially like the issue I am having, none seem to address it exactly.
Here is an example:
//Delete an existing exclusion.
$.fn.deleteExclusion = function (idExclusion) {
document.cookie = idExclusion + "=; expires=; path=/";
$.fn.buildExclusions();
}
If I call this method by saying:
$("#someButton").click(function(){
$.fn.deleteExclusion();
)
... then the function exists and is run properly.
However, if I assign this function as follows (created on page load as part of page html):
Some Button
... then the function doesn't exist when I click that link.
This does not happen for one of my company's websites, which uses ASP.NET .aspx page structures. However, I am working on a new MVC application, which is where this behavior is occurring.
I am stumped, frankly. Right now, I am not sure what else to provide code-wise to demonstrate, without probably overdoing it with unnecessary details. Please let me know if you need additional code to help me figure this out.
You need to include Jquery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
jQuery(document).ready(function($){
$.fn.deleteExclusion = function (idExclusion) {
document.cookie = idExclusion + "=; expires=; path=/";
$.fn.buildExclusions();
}
});
We found a workaround. To get this working, we added:
//Set onclick events for delete exlusion anchor tag buttons created dynamically.
$(document).on("click", "a.deleteExclusion", function () {
$.fn.deleteExclusion($(this).attr("id").replace("delete", ""));
});
This created the onclick event on page load, but applied it to elements as they were created. It allowed elements created in our cshtml file initially, along with dynamically created html elements, to have a working click event.
HI,
I am developing a web page using asp.net.
I am using some links in my web page. For that I have used some code like this.
Test
and in the ChangeLoc() method I have written __doPostBack event.
This works fine in IE7 installed in my machine. But in IE6 in another machine it does not invoke the __doPostBack event.
Edit
When I change the void(0) in href it works fine.
I would like to know whether it is a bug with IE or a JavaScript problem.
function ChangeLoc( param, arg )
{
__doPostBack ( param, arg )
}
href and onclick both get fired when you click an element, you are overwriting the onclick event with void()
change to
test
or with jQuery.
$(function(){
$("#linkId").click(function(event){
ChangeLoc();
event.preventDefault();
});
});
Do you get an error? If so, what error do you get in IE6? Can you post the code for ChangeLoc()? Also, try changing your markup to the following and see if you get the same result:
Test
Edit: removed 'javascript:' from the onclick
You can also use unobtrusive javascript syntax:
test
<script type="text/javascript">
document.getElementById("chngLink").onclick = function(e) {
if (e && e.preventDefault) {
e.preventDefault();
}
ChangeLoc('TEST','');
return false;
};
</script>
it is not good to use <a>-element for javascript functions call.
Use styled <span onclick="my_function()" class="looks_like_hyperlink">...</span>