I have a div that I am floating as a dialog over my page. When I use try and use the , the file selector does not get shown. Any help would be appreciated.
The function to create the floating div looks like
function openFloat($html)
{
$floatDiv = $('<div id="mainFloater" class="floater" ></div>');
$center = $('<div id="floaterCenter" class="floater" align="center"></div>');
$fieldset = $('<fieldset id="floaterFieldset" align="left" id="floaterFieldset"></fieldset>');
$fieldset.append($html);
$floatDiv.append($center);
$center.append($fieldset);
$('body').append($floatDiv);
}
openFloat($('<input type="file" name="file">'))
If I use the script at onload it does work.
<script type="text/javascript">
function openFloat($html)
{
$floatDiv = $('<div id="mainFloater" class="floater" ></div>');
$center = $('<div id="floaterCenter" class="floater" align="center"></div>');
$fieldset = $('<fieldset id="floaterFieldset" align="left" id="floaterFieldset"></fieldset>');
$fieldset.append($html);
$floatDiv.append($center);
$center.append($fieldset);
$('body').append($floatDiv);
}
$(document).ready(function(){
openFloat($('<input type="file" name="file">'));
});
</script>
I found the problem. I had some click handlers. A click on the mainFloater would hide everything. A click on the floaterFieldset would cancel the click (so it would not hide). However the cancel click also canceled the clicks for all buttons.
Related
I have this in line of code
<a class="btn btn-block btn-lg" ng-class='login.anchorClass' ng-href="{{login.idp_authnrequest_url}}"><img src="{{login.file_name}}"/>{{login.name}}</a>
But this displays url in bottom left which I want to hide ( that's the requirement). Can anyone help with this?
Since those links comes from ng-repeat I tried onclick="location.href='({{login.idp_authnrequest_url}})'"
but that only opens last url on every anchor tag click. Also thought about using button instead of anchor tag but since I have multiple button how would that work?
Welcome to Stack Overflow.
Have you try using jquery:
$(function(){
$("a").each(function (index, element){
var href = $(this).attr("href");
$(this).attr("hiddenhref", href);
$(this).removeAttr("href");
});
$("a").click(function(){
url = $(this).attr("hiddenhref");
window.location.href = url;
})
});
This works for me.
Here the reference answer https://stackoverflow.com/a/56340724/13955999
I am working on a form widget on Elementor on WordPress, when the user submits the submit button of the form, it will show a pop-up which is created by elementor. The pop-up actually is a DIV tag including my HTML code which I wrote in an HTML widget into the pop-up, as below, and this DIV will be added by some Elementor function to the body tag of the page dynamically when user presses submit button.
<div id="calenderchooser01" style="min-height:100px;"></div>
<script>
function calenderchooser(){
var calenderhtml="";
var numofunits = document.getElementById("form-field-field_numberunits");
if(numofunits.value>=15){
calenderhtml = "<div class='calendly-inline-widget' style='min-width:320px;width:100%;height:650px;'>over 15</div>";
}else if(numofunits.value<15){
calenderhtml = "<div class='calendly-inline-widget' style='min-width:320px;width:100%;height:650px;'>less than 15</div>";
}
document.getElementById("calenderchooser01").innerHTML = calenderhtml;
console.log(calenderhtml);
}
document.getElementById("thisisanidcustom").addEventListener("click",
calenderchooser
);
</script>
thisisanidcustom is the id of submit button form. Also, I tested it with assigning showing of this pop-up to a normal button.
In both cases when I press the button it shows error on the Chrome console:
Uncaught TypeError: Cannot set property 'innerHTML' of null
at HTMLAnchorElement.calenderchooser (9a48896437a750ba11b18d8323f96ea7.js:59)
it references this line :
document.getElementById("calenderchooser01").innerHTML = calenderhtml;
and I think it says that the div#calenderchooser01 does not exist.
I think maybe the function call occurs before adding the DIV to the body tag. but I have not access to Elementor default functions to edit them and say after popup occurs call the calenderchooser(). so in this situation how can I call the function calenderchooser() right after popups shows up. I also thought of something like an event listener on DIV existing change state if available but found nothing.
this worked for me using window.setTimeout() method:
<div id="over15" class='calendly-inline-widget' style='min-width:320px;width:100%;height:650px;display:none'>over 15</div>
<div id="less15" class='calendly-inline-widget' style='min-width:320px;width:100%;height:650px;display:none'>less than 15</div>
<script>
function functionCall(){
setTimeout(calenderchooser, 100);
}
function calenderchooser(){
var numofunits = document.getElementById("form-field-field_numberunits");
if(numofunits.value>=15){
document.getElementById("over15").style.display = "block";
console.log("over15");
}else if(numofunits.value<15){
document.getElementById("less15").style.display = "block";
console.log("less15");
}
}
document.getElementById("thisisanidcustom").addEventListener("click", functionCall
);
</script>
I have used an image instead of button, now I want to disable the onclick() event in some case as we disable a button. I tried many ways but doesn't work. Below is what I did:
<img title="Ok" class="mtbtn"id="upd_1" onclick="add_edited('1','MM');" src="/project/images/green_ok.gif" border="0">
The jQuery code is:
$("#upd_1").css('opacity','0.5');
$("#upd_1").unbind("click");
I also tried:
$("#upd_1").css('pointer-events','none'); and document.getElementById('upd_1').style.pointerEvents = 'none';.
Any solution?
Try this:
$("#upd_1").on('click',function(e){
e.preventDefault();
});
One hint is that you can give your click event a suffix so you can be sure it's the only event you are affecting. To bind:
$('#elementId').on('click.myevent', function () {
// your code
}
To unbind:
$('#elementId').off('click.myevent');
Not going into binding or unbinding the click event but how about creating a mask for the image. Hide the mask when you want the image to be clickable else show it.
img onclick="alert('clicked')" src="http://lh3.googleusercontent.com/mjejVTJKT4ABNKq2HGlkDs36f-QvzI2hKFER098vBIgiAoZ2H-SN5QPvFaZEVDZRxfujrS6pszZ_J-_di2F57w0IFE3KAciDwGAh-9RcCA=s660" alt="" />
<div id="mask"></div>
<script>
$('#mask').hide();
$('#disable').click(function() {
$('#mask').show();
});
$('#enable').click(function() {
$('#mask').hide();
});
</script>
Try the Plnkr: Plnkr
Try this way. Add your parameters in two attributes (data-a and data-b for example).
<img title="Ok" class="mtbtn"id="upd_1" data-a="1" data-b="MM" src="/project/images/green_ok.gif" border="0">
Then change your javascript in this way:
$(document).ready(function(){
$("#upd_1").bind("click", function(){
var a = $(this).data("a");
var b = $(this).data("b");
// Code here
$(this).unbind("click");
});
});
Here the result.
Alternative is this:
var semaphore = true;
function add_edited (a, b) {
if (semaphore) {
semaphore = false;
// Code here
}
}
Create a semaphore to manage the execution of the code to the click.
i understood you'r problem, there is no need to unbind() and re bind() the onclick event, you can simply remove and re-add onclick attribute using removeAttr() and attr()
<img title="Ok" class="mtbtn"id="upd_1" onclick="add_edited('1','MM');" src="/project/images/green_ok.gif" border="0">
JQuery:
$("#upd_1").css('opacity','0.5');
$("#upd_1").removeAttr('onclick');
to re add onclick event do the following:
$("#upd_1").css('opacity','1');
$("#upd_1").attr("onclick","add_edited('1','MM');");
that is all you need to do.
I am trying to display a text field on clicking a link on the same page.
html file
Add another question<br/><br />
<script>
function disp_qa()
{
document.getElementById("form_d").style.display="block";
document.getElementById("form_da").style.display = "block";
}
</script>
These does not seems to work.
How can i do it?
Thanks in advance
almost there:
Add another question<br/><br />
JSFiddle: http://jsfiddle.net/vGYhE/
another way:
Add another question<br/><br />
JS:
function disp_qa(event)
{
event.preventDefault();
document.getElementById("form_d").style.display="block";
document.getElementById("form_da").style.display = "block";
}
JSFiddle: http://jsfiddle.net/vGYhE/4/
I want to set target =_blank to the following code, so that the Test.aspx page open in new window.
Response.Redirect("Test.aspx?D1=" + TextBox1.Text + "&D2=" + TextBox2.Text);
How can I do that?
try to add this to your object:
OnClientClick="aspnetForm.target ='_blank';"
or put it in ASP.NET like here:
<asp:LinkButton ID="myButton" runat="server" Text="Click Me!"
OnClick="myButton_Click"
OnClientClick="aspnetForm.target ='_blank';"/>
like in here
The other part you need to add is to fix the form's target otherwise every link will open in a new window. To do so add the following in the header of your POPUP window.
<script type="text/javascript">
function fixform() {
if (opener.document.getElementById("aspnetForm").target != "_blank") return;
opener.document.getElementById("aspnetForm").target = "";
opener.document.getElementById("aspnetForm").action = opener.location.href;
}
</script>
and then add:
<body onload="fixform()">