JQuery dialog close - javascript

I'm facing a problem with dialog closing in JQuery
Here's the code I have :
$(window).on("click",function(e){
if($(e.target).not("#test")){
$("#test").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dialog open id="test"></dialog>
<input type="submit" onclick="$('#test').show()">
Well, function works like it supposed to(closes dialog when I click outside of it's content) but then I can't toggle it again. Because of the function, I suppose.
Also I tried to fix it with such way but it don't work either :
if($("#test").css("display","block")){
$(window).on("click",function(e){
if($(e.target).not("#test")){
$("#test").hide();
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dialog open id="test"></dialog>
<input type="submit" onclick="$('#test').show()">
Is there any way to fix this?
That you very much for spending your precious time with my problem!
Thank you very much for any help or advice!

Your submit click event fires first and then the window click event fires. Hence your dialog keeps getting hidden. Ensure you are not propagating the click event from your submit button if you want to show the dialog.
You might want to add validation to ensure your dialog is not already open when clicking submit though.
$(window).on("click", function(e) {
console.log('window click');
if ($(e.target).not("#test")) {
$("#test").hide();
}
});
$('input[type=submit]').on('click', function(){
$('#test').show();
event.stopPropagation();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dialog open id="test"></dialog>
<input type="submit" onclick="">

You don't need show or hide functions, you just need to use the open property and change it to false or true.
$(window).on("click",function(e){
if($(e.target).not("#test") && !$(e.target).is("#submit")){
$("#test")[0].open = false; // or document.getElementById("test").open = false;
}
});
$('#submit').click(function() {
$('#test')[0].open = true; // // or document.getElementById("test").open = true;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dialog open id="test"></dialog>
<input type="submit" id="submit">

Related

How to add only one click event on a label?

Hello i'm trying to add an event of click on a button when the user click a label,
its working fine but the user have to click on the label twice i need to make it work from the first click
this is my function :
(function($){
$('.next-on-click .forminator-checkbox-label').on('click', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<lable class="next"> Next </lable>
<button class="check">Check</button>
<script>
$('.next').click(function() {
alert("Hi");
$('button.check').trigger('click');
});
</script>
example:
$('.next-on-click .forminator-checkbox-label').on('dblclick', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
})
So why would you need JavaScript to handle the click? Adding an for attribute on a label will click the button.
$("#btn").on("click", function () {
console.log("clicked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="btn">Label</label>
<button id="btn">Button</button>

When checkbox is checked show hidden button and hide the visible button

I am a beginner in javascript, hopefully you can help me with this problem..
I have 2 buttons in html form and 1 checkbox, 1 button should be hidden and the other is visible. My problem is how to show the hidden button and hide the visible button at the same time when the checkbox is checked..
I know how to hide/show the button flip-ch1 but I can't do it to other button.
I have a script here:
$(document).ready(function() {
$('#flip-ch1').hide();
$('#radio').mouseup(function() {
$('#flip-ch1').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="radio" id="radio">
<button class="btn_style" id="ch1">Add</button>
<button class="btn_style" id="flip-ch1">Add</button>
</div>
Toggle them both:
<script type="text/javascript">
$(document).ready(function(){
$('#flip-ch1').hide();
$('#radio').mouseup(function () {
$('#ch1').toggle();
$('#flip-ch1').toggle();
});
});
</script>
Just add this line:
$('#ch1').toggle();
So, the complete js code would be:
$(document).ready(function () {
$('#flip-ch1').hide();
$('#radio').mouseup(function () {
$('#flip-ch1').toggle();
$('#ch1').toggle();
});
});
Do not get confused by the .hide(). It is used to hide one of the buttons only in the beginning. No need to use afterwards. The reason that you do not see any changes after toggling the checkbox, is that when first button is hidden the second one gets its place, the place does not remain empty. You can spot all this that I mentioned on inspect element of any major browser.
Try $('#radio').is(':checked') as below
$(document).ready(function() {
$('#flip-ch1').hide();
$('#radio').on('change', function() {
if ($('#radio').is(':checked')) {
$('#flip-ch1').show();
$('#ch1').hide();
} else {
$('#flip-ch1').hide();
$('#ch1').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="radio" id="radio">
<button class="btn_style" id="ch1">Add 1</button>
<button class="btn_style" id="flip-ch1">Add 2</button>
</div>

How to close easyui dialog when click outside?

In my project, I use easyui dialog.
I choose easyui-linkbutton to open dialog successfully.
Because it has no title, I want to close this dialog when clicking outside.
I don't know how to define.
Here is my js code:
<script>
$(document).ready(function()
{
$('#dlg').window('close');
});
</script>
Here is my html code:
<div class="easyui-panel" style="padding:5px;">
addNewFile
</div>
<div id="dlg" class="easyui-dialog" title="" data-options="iconCls:'icon-save'" style="width:88px;height:260px;top:160px;left:176px;padding:10px">
<label style="cursor:pointer">one</label><br />
<label style="cursor:pointer">two</label><br />
<label style="cursor:pointer">three</label>
</div>
Who can help me ?
try this one also and share the information if not work.write this code on document load.
$(document).mousedown(function(e) {
var clicked = $(e.target);
if (clicked.is('#dlg') || clicked.parents().is('.ui-widget-content') || clicked.is('.ui-dialog')) {
return;
} else {
$('#dlg').dialog("close");
}
});
});
Try once may this help.
$('#dlg' ).bind('clickoutside',function(){
$('#dlg' ).dialog('close');
});
$('#dlg' ).dialog({
clickOutside:true,
});
I have tested, it works fail.

Using jQuery focus and blur to show and hide a message

I am clicking to set focus on a textbox, and once I have set focus I am trying to display a simple message. Then on blur that message disappears.
Here is my code: If I click on the textbox it displays the message but if I click the button it doesn't set focus as I thought it would.
<script>
$(document).ready(function(){
$("#clicker").click(function(){
$("#T1").focus(function(){
$("#myFocus").show();
});
});
$("#T1").blur(function(){
$("#myFocus").hide();
});
});
</script>
<body>
<div id="clicker" style="cursor:pointer; border:1px solid black; width:70px;">
Click here!
</div>
<br /><br />
<input id="T1" name="Textbox" type="text" />
<div id="myFocus" style="display: none;">focused!</div>
You need to trigger the focus event, instead of defining it. Try this instead:
<script>
$(function() { // Shorthand for $(document).ready(function() {
$('#clicker').click(function() {
$('#T1').focus(); // Trigger focus
});
$('#T1').focus(function() { // Define focus handler
$('#myFocus').show();
}).blur(function() {
$('#myFocus').hide();
});
});
</script>
The problem is here:
$("#T1").focus(function(){
$("#myFocus").show();
});
You should trigger the event with focus() not attach a callback with focus(function(){...}
Fixed code:
$(document).ready(function(){
$("#clicker").click(function(){
$('#T1').focus();
});
$("#T1").blur(function(){
$("#myFocus").hide();
}) .focus(funcion(){
$("#myFocus").show();
});
});

How to activate a script after the button is press? [JQuery]

I need to activate cpa lead when the button is press.
code:
<script type="text/javascript" src="http://www.cpalead.com/mygateway.php?pub=52514&gateid=NjE1Njk%3D"></script>.
And the button is just <input type="button" />
So I need to activate the <script> after the button is clicked. Help please?
You will have this button as:
<input type="button" id="activator" />
and then your JS Code
var loaded = false;
$("#activator").click(function(){
if (!loaded) {
$.getScript("http://www.cpalead.com/mygateway.php?pub=52514&gateid=NjE1Njk%3D", function(){ loaded = true; });
} else {
alert("script already loaded");
}
return false;
});
Not tested, but as documented in the JQuery documentation, it should work...
References:
JQuery getScript()

Categories

Resources