Avoid popping blocking when calling window.open from .change() - javascript

I have a select menu, for which I have the following code:
$('#sister-site-menu').change(function(){
if ($(this).val()) {
window.open($(this).val(), '_blank');
}
});
This however causes the popup blocker to be invoked in Chrome. I'm sure I've seen sites do this before, any ideas?
Thanks!

You can safely remove the 'blank'-part. Try this:
$('#sister-site-menu').on('change',function(){
if ($(this).val()) {
window.open($(this).val());
}
});
If that does not work, I see no other way around this.

Related

simple jQuery function not working in some browsers

I'm building a site where a user has to agree to terms and conditions. The checkbox is enabled after scrolling to the end of the box. Here is the code:
<script type="text/javascript">
$(function() {
$('#rules_box').scroll(function () {
if ($(this).scrollTop() >= $(this)[0].scrollHeight - $(this).height() - 15 ) {
$('#iagree').removeAttr('disabled');
}
});
});
</script>
This works in most browsers. However some refuse to work. Even if I just have
$('#iagree').removeAttr('disabled');
by itself without scroll conditions. This page is running many other javascripts that are working.
Some said it didn't work on their Mobile, and one said it didn't work on Firefox although it worked on my Firefox.
Is jQuery too finicky to work? Does this mean I have to do it another way?
EDIT:
you're quick to mark as a dupe, but this question hasn't been answered yet.
Problem persists in same select browsers, see updated code
$(function() {
$('#rules_box').scroll(function () {
alert('something');
$('#iagree').prop("disabled", false);
});
});
Does not fire alert or change checkbox state
For checkbox elements, you should use .removeProp() instead of .removeAttr()
$('#iagree').removeProp('disabled');
Also see: https://api.jquery.com/removeAttr/ and https://api.jquery.com/attr/
Please use
$('#iagree').prop("disabled", false);
Use .prop('disabled',false) instead of removeAttr('disabled').
related question

code not working, jcepopup window not reloading while closing

I'm having a problem with a form. I need to perform a query once a jcepopup window has closed, but so far i can't make it work. I tried the following code:
function passVal(val1,val2){
parent.document.getElementById('award_number').value=val1;
parent.document.getElementById('award_name').value=val2;
parent.document.getElementById('aw_number').value=val1;
parent.document.getElementById('aw_name').value=val2;
window.onunload = refreshParent;
window.parent.jcepopup.close();
}
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
}
However, so far it's not working, at least not the reload part. It returns the values, but i can't use them to trigger the next query that i would like to use.
Anyway, I'm open to suggestions. Thanks
Check the MDN docs which state:
You can and should handle this event through window.addEventListener() and the unload event. More documentation is available there.
window.addEventListener('unload', function () { console.log('do stuff'); } );
https://developer.mozilla.org/en-US/docs/Web/API/Window.onunload

script always working in chrome / firefox works only once in IE

In a partial view I have these lines of scripts:
<script type="text/javascript">
$(document).ready(function() {
$('#randomCard').click(function () {
alert("button clicked!");
$.get("#Url.Action("GetRandomCard")", {}, function (data) {
$('#rightSide').html(data);
});
});
})
</script>
This calls a Get method in my controller which returns a random card from a database. In chrome, this methods is 100% working. Firefox fires the event 100% of the time too. But in IE the action is fired only once while the alert always pops.
Can somebody help me figure out why?
EDIT
Following everyone's advice, I have debugged my session which made me realize that the html data was being added, not replaced. I have created an upper div #rightSide which gets updated with the data, thus resolving this small problem.
However, the problem of IE calling the partial view controller method is still active and I appreciate everyone's help to resolve this issue.
Fire up a debugger in IE. Run and see what fails.
Catch if there is an error from $.get(…).
( I bet on the randomCard-control being a anchor link and there being i subtle bug that makes the anchor get the page again. )
Don't forget to post your findings.
even if it is not an
$(document).ready(function() {
$('#randomCard').click(function (e) {
e.preventDefault();
alert("button clicked!");
//etc

How do I get this validationTextBox to focus?

After performing an ajax request if the input in the form was wrong I am trying to get this validatationTextBox to be focussed on and display an indicator message showing the problem.
The code is:
dijit.byId("passwordField").focusNode.focus()
The form element is as mentioned a validationTextBox.
The matter that is confusing me even further is that before in dojo 1.5, this piece of code was simply dijit.byId("passwordField").focus() and this worked fine. How can I fix this?
I have also tried :
require(["dijit/focus"],function(focusU){
focusU.focus(dojo.byId("ID"));});
But this does not work either.
If the dijit.widget.focus() fails, then the _FocuxMixin is not loaded properly during its startup.
With any dijit.form.Type, you should be able to successfully gain focus via:
dijit.byId('ID').focus();
I think youre confusing DOM event focus with widget focus handling. If you fire widget.focusNode.focus - you will not benifit from the messaging in ValidationTextBox in any browser.
Can you try something like this in the form tag:
<script language="javascript" type="text/javascript">
Sys.Application.add_load
(
function () {
window.setTimeout(focus, 1);
}
)
function focus() {
if (document.getElementById('txtComm1') != null) {
if (document.getElementById('txtComm1').disabled != true) {
document.getElementById('txtComm1').focus();
}
}
}
</script>
If your form fields are inside a dijit/Dialog, the Dialog will automatically focus on the first input. You can disable this behaviour by setting:
autofocus: false
on the Dialog, after which,
widget.focus();
should work fine.
This worked for me...
setTimeout(function(){
widget.focus();
}, 100);

windows.location.href not working on Firefox3

We have a JavaScript function named "move" which does just "windows.location.href = any given anchor".
This function works on IE, Opera and Safari, but somehow is ignored in Firefox. Researching on Google doesn't produce a satisfactory answer why it doesn't work.
Does any JavaScript guru knows about this behavior, and what would be the best practice to jump to an anchor via JavaScript?
Have you tried just using
window.location = 'url';
In some browsers, window.location.href is a read-only property and is not the best way to set the location (even though technically it should allow you to). If you use the location property on its own, that should redirect for you in all browsers.
Mozilla's documentation has a pretty detailed explanation of how to use the window.location object.
https://developer.mozilla.org/en/DOM/window.location
If you are trying to call this javascript code after an event that is followed by a callback then you must add another line to your function:
function JSNavSomewhere()
{
window.location.href = myUrl;
return false;
}
in your markup for the page, the control that calls this function on click must return this function's value
<asp:button ........ onclick="return JSNavSomewhere();" />
The false return value will cancel the callback and the redirection will now work. Why this works in IE? Well I guess they were thinking differently on the issue when they prioritized the redirection over the callback.
Hope this helps!
One observation to ensure in such a scenario
Following will work in IE, but neither in Chrome nor in Firefox (the versions I tested)
window.location.href("http://stackoverflow.com");
Following will work all the three
window.location.href = "http://stackoverflow.com";
Maybe it's just a typo in your post and not in your code, but it's window and not windows
I am not sure to follow you.
I just tried: going with FF3 to Lua 5.1 Reference Manual (long and with lot of anchors).
Pasting javascript:window.location.href="#2.5"; alert(window.location.href); in the address bar, I went to the right anchor and it displayed the right URL. Works also with a full URL, of course.
Alternative code: javascript:(function () { window.location.href="#2.5"; })();
Perhaps you forgot the #. Common problem, also with image maps.
I have the same problem and I guess this is related to a click event.
I have a function that moves the browser to a specific page. I attach that function to some click events: in a button and in a image. AlsoI execute the function when the user press escape (document onkeypress event).
The results are that in all cases the function is called and executed, but only when there is a click the browser goes to the address I want.
Update
I got it working! with a
setTimeout( "location.replace('whatever.html');", 0 );
I don't know why the location.replace wasn't working when the event was a keypress, but with the settimeout it works :)
Update
Returning false after the event when you press escape makes the redirection works. If you return true or nothing the browser will not follow
You've got to add return false; after the window.location.href as mentioned above.
function thisWorks()
{
window.location.href = "http://www.google.com";
return false;
}
function thisDoesNotWork()
{
window.location.href = "http://www.google.com";
}
window.location.href works fine in all versions of Firefox, as does document.location.href I think that there is something else in your code that is breaking things.
drop this in a blank page, if it works, it indicates there is something else wrong on your page.
<script>
window.location.href = 'http://www.google.com/';
</script>
You could also use window.location.replace to jump to an anchor without register it in the browser history:
This article illustrates how to jump to an anchor and uses href as read-only property.
function navigateNext()
{
if (!window.location.hash)
{
window.location.replace(window.location.href + unescape("#2"))
}
else
{
newItem = nextItem(window.location.hash)
if (document.getElementById(newItem))
{
window.location.replace(stripHash(window.location) + "#" + newItem)
}
else
{
window.location.replace(stripHash(window.location) + "#1")
}
}
}
Have you tried this?
Response.Write("<script type='text/javaScript'> window.location = '#myAnchor'; </script>";);
please add full javascript script tag
<script type="text/javascript" language="javascript"></script>
window.location.hash = "#gallery";
For reference I had the same problem.
onclick = "javascript: window.location('example.html');" didn't work under FF (latest)
I just had to rewrite to onclick = "javascript: window.location = 'example.html';" to get it working
I just overcome the same problem. and the problem is not in javascript, but the href attribute on the <a> element.
my js code
function sebelum_hapus()
{
var setuju = confirm ("Anda akan menghapus data...")
if (setuju)
window.location = "index.php";
}
my previous html was
Klik here
and I update it to
Klik here
or remove the href attribute
hope this helps.
window.location.assign("link to next page") should work in both (chrome and firefox) browsers.
window.location.assign("link to next page")
Another option:
document.location.href ="..."

Categories