Develop Reference

How to open a new window/tab from javascript

It worked a year ago, but now it opens a new window/tab (which is the correct behavior), but it stays blank and does not open the URL specified.
I allowed popups in my Chrome setting but still the same result.
Pasting and executing the URL by hand works fine (like https://api.whatsapp.com/send?text=bla ).
<p>
<span class="tooltip"
><i class="fa fa-whatsapp"></i> <a
id="lblSuccess2"
href="javascript:sendWA()"
target="_blank"
><span class="tooltiptext" id="myTooltip2"
>Klik om te delen via WhatsApp</span
>WhatsApp</a
></span
>
</p>
function sendWA() {
var tekst = document.getElementById("txtVoorbeeldtekst").value;
var uriWA = "https://api.whatsapp.com/send?text=".concat(
encodeURIComponent(tekst)
);
window.open(uriWA, "_blank");
return false;
}

I managed to solve the problem. Use onclick instead of href, like this:
href="#" onclick="sendWA(); return false;"

Scrollbars & resizable are not appearing in onclick="window.open"

I'm trying to open a new window using onclick="window.open" for some reason the scrollbars & resizable Are not working in IE11,and it's working fine in but do work fine Chrome.
<div class="editor-field editorholder" style="height: auto;">
<a href="#Url.Action("QuickView", "Home", new { id = #Model.UniqueKey })" class="btn-mvc" onclick="window.open(this.href,'targetWindow','toolbar=0','location=0','status=0','menubar=0,','scrollbars=yes','resizable=yes','width=100','height=100'); return false;">
<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
</a>
</div>

Add both:
scrolling=yes, scrollbars=yes

Finally i found a solution:
onclick="window.open(this.href, 'popupwindow', 'width=1280 height=800 resizable scrollbars menubar=yes'); return false;"
thank you

how to display box on same page when a link is clicked

I am making php based web application .I'd like to have a box displayed on the same page when a link is being clicked using java script.How can i achieve this??
I have tried the below code
<script>
function a()
{
document.getElementsById("a").style.visibility="visible";
}
</script>
<a style="position:absolute;left:84%;top:32%;font-size:13px " href="" onclick="a()">
Forgot Password?
</a>
<div id="a" style="position:absolute;left:30%;top:10%;width:40%;height:40%;background-color:lightgray;visibility:hidden">
</div>

The method of document is wrong.
It should be getElementById, you could use Google chrome DEV tools (Ctrl + shift + i on windows, ⌘ + option + i on Mac) to debug your code.

You needed to fix getElementsById isn't plural, should be getElementById
To stop the page reloading on click, set href="javascript:a()"
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script>
function a()
{
document.getElementById("a").style.visibility="visible";
}
function close_a()
{
document.getElementById("a").style.visibility="hidden";
}
</script>
<a style="position:absolute;left:84%;top:32%;font-size:13px " href="javascript:a()">
Forgot Password?
</a>
<div id="a" style="position:absolute;left:30%;top:10%;width:40%;height:40%;background-color:lightgray;visibility:hidden">
<i class="fa fa-times-circle"></i> Close Me
</div>
added function to close and font awesome

Change your code to this and the box will be displayed:
<script>
function a()
{
document.getElementById("a").style.display="block";
return false;
}
</script>
<a style="position:absolute;left:84%;top:32%;font-size:13px " href="#" onclick="return a()">
Forgot Password?
</a>
<div id="a" style="position:absolute;left:30%;top:10%;width:40%;height:40%;background-color:lightgray;display: none">
</div>
There was an error in your code. getElementById is correct, and your <a> link refresh the page, correct method to avoid refresh is to change onclick="a();" to onclick="return a();" so that javascript look for return of function, and in function, we return false, therefore keep page same and avoid refresh.
Additionally you can add content to your box:
<script>
function a()
{
document.getElementById("a").style.display="block";
document.getElementById("a").innerHTML="<b>your other contents inside the box</b>";
return false;
}
</script>
<a style="position:absolute;left:84%;top:32%;font-size:13px " href="#" onclick="return a();">
Forgot Password?
</a>
<div id="a" style="position:absolute;left:30%;top:10%;width:40%;height:40%;background-color:lightgray;display: none">
</div>

jQuery: Disable onclick event using off() not working

Here is a simple example of what I'm trying to do, I have code in HTML and my aim is to disable the three hyperlinks #validate,#organize and #export:
<p id="menuitems" class="inline textcenter">
<a id="import" href="javascript:void(0);" onclick="switchScreen('Import');">IMPORT</a> >>
<a id="validate" href="javascript:void(0);" onclick="switchScreen('Validate');">VALIDATE</a> >>
<a id="organize" href="javascript:void(0);" onclick="switchScreen('Organize');">ORGANIZE</a> >>
<a id="export" href="javascript:void(0);" onclick="switchScreen('Export');">EXPORT</a>
</p>
When I'm trying to call the following, nothing happend. I'm using jQuery 1.11.4 and I've read that the methods for disabling event listeners have changed since 1.7. So I would like to know if there is an error in my JavaScript code below or some new changes:
$('#validate').off('click');
$('#organize').off('click');
$('#export').off('click');

One way would be to temporarily set the onclick to null, but store the original element onclick in the element or jquery object (e.g. data). With a helper function you can switch the elements on or off:
function setEnabled($a, Enabled ){
$a.each(function(i, a){
var en = a.onclick !== null;
if(en == Enabled)return;
if(Enabled){
a.onclick = $(a).data('orgClick');
}
else
{
$(a).data('orgClick',a.onclick);
a.onclick = null;
}
});
}
Which can be called with something like:
setEnabled($('#validate'), false);
(also works on jquery objects with multiple elements because of the each)
Example fiddle

You need to unbind the click event (which was declared inline) as follows.
document.getElementById("import").onclick = null;
document.getElementById("validate").onclick = null;
document.getElementById("organize").onclick = null;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="menuitems" class="inline textcenter">
<a id="import" href="javascript:void(0);" onclick="switchScreen('Import');">IMPORT</a> >>
<a id="validate" href="javascript:void(0);" onclick="switchScreen('Validate');">VALIDATE</a> >>
<a id="organize" href="javascript:void(0);" onclick="switchScreen('Organize');">ORGANIZE</a> >>
<a id="export" href="javascript:void(0);" onclick="switchScreen('Export');">EXPORT</a>
</p>

You could have jQuery take over your inline event, so that you can off() it later. Note that off() does remove the listener. You can't really disable it unless you put some logic in the handler itself to bail out if it shouldn't be running.
function switchScreen(screenName) {
console.log(screenName);
};
$(function() {
$('#menuitems a').each(function() {
var oldClick = this.onclick;
$(this).on('click', $.proxy(oldClick, this));
this.onclick = null;
});
$('#import').off('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="menuitems" class="inline textcenter">
<a id="import" href="javascript:void(0);" onclick="switchScreen('Import');">IMPORT</a> >>
<a id="validate" href="javascript:void(0);" onclick="switchScreen('Validate');">VALIDATE</a> >>
<a id="organize" href="javascript:void(0);" onclick="switchScreen('Organize');">ORGANIZE</a> >>
<a id="export" href="javascript:void(0);" onclick="switchScreen('Export');">EXPORT</a>
</p>

try unbind instead of Off since click event is defined inline, if click is attached using on then it will work with off.

Event attached through javascript doesn't recognize by jquery, so javascript and jquery mixed approached can't work properly - that's the reason jquery
.off('click'); doesn't detach click event.
Modify html:
<p id="menuitems" class="inline textcenter">
<a id="import" href="javascript:void(0);">IMPORT</a> >>
<a id="validate" href="javascript:void(0);">VALIDATE</a> >>
<a id="organize" href="javascript:void(0);">ORGANIZE</a> >>
<a id="export" href="javascript:void(0);">EXPORT</a>
</p>
Attach click event using jquery:
$(document).ready(function () {
$('#import').on("click", function () {
switchScreen('Import');
});
$('#validate').on("click", function () {
switchScreen('Validate');
});
$('#organize').on("click", function () {
switchScreen('Organize');
});
$('#export').on("click", function () {
switchScreen('Export');
});
});
Disable click event whenever required:
$('#import').off('click');
$('#validate').off('click');
$('#organize').off('click');
$('#export').off('click');
The above approach works for all standard browsers but just for IE we can have one more approach:
$('#validate').attr("disabled", "disabled");
$('#organize').attr("disabled", "disabled");
$('#export').attr("disabled", "disabled");

jQuery Selector - <i class>

I'm trying to inject jQuery into a HTML page to create a popup window when I click a link on the page. I'm having trouble with the Selector and/or Syntax.
HTML
<a href="/leads/19365876/edit" class="hoverable edit">
<i class="icon-pencil">
</i>
</a>
Attempted Solution
jQuery(document).ready(function($) {
jQuery('a.hoverable.edit').live('click', function(){
newwindow=window.open($(this).attr('href'),'','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
});
});

you forgot to give '_blank' name to your window:
window.open($(this).attr('href'),'_blank','height=200,width=150');