Popup onclick Javascript doesn't work - javascript

I am building a form which will be loaded in popup by clicking on a text/image. This is my code and it is not working! Any ideas
<div>
Remind me
</div>
<div class="map-popup" id="remindme" style="display:none;">
<form>
<label for="remind_me_email" class="required"><em>*</em>E-Mail Address</label>
<div class="input-box">
<input type="text" id="remind_me_email" title="E-Mail Address" />
</div>
</form>
<div>
<button type="submit" class="button" id="remind_me_submit"><span>Submit</span> </button>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#remindmelink').click(function(){
e.preventDefault();
jQuery('#remindme').dialog('open');
return false;
});
});
</script>

$(document).ready(function(){
//open popup
var myPoplink = document.getElementById('remindmelink');
$(myPoplink).on('click',function(){
alert('Hello!'); // to be replaced with $('#remindme').dialog('open');
});
});

invalid $('.myPoplink') selector. i.e there is no class .myPoplink found in the HTML. Try using $('#remindmelink')
$(document).ready(function(){
//open popup
$("#remindmelink").on('click',function(event){
event.preventDefault();
alert('Hello!'); // to be replaced with $('#remindme').dialog('open');
});
});

Just in case put href="#" here is the
jsfiddle
$(document).ready(function(){
//open popup
$(document).on('click','#remindmelink',function(){
alert('Hello!'); // to be replaced with $('#remindme').dialog('open');
return false;
});
});

It was jQuery conflict as some javascript was copied inline in some other pages! Solved by removing the inline scripts and using
var j = jQuery.noConlifct();
j(document).ready(function(){
j('#remindmelink').click(function(){
j('#remindme').fancybox();
});
});

You can try this:
$(document).on('click','#remindmelink',function(e){
e.preventDefault();
alert('Hello!'); // to be replaced with $('#remindme').dialog('open');
});
UPDATE:
jQuery(document).ready(function(){
jQuery('#remindmelink').click(function(){
e.preventDefault();
jQuery('#remindme').show();
jQuery('#remindme').dialog('open');
return false;
});
});
DEMO

Related

Replace alert function with an image

$(".site-main").on("sf:ajaxstart",function(){
alert("show loader");
});
$(".site-main").on("sf:ajaxfinish",function(){
alert("hide loader");
});
I got this above code from a forum and it is showing me the alerts as it should. However, I'm planning to show a loader image with location path <img src="/path/image.gif" class="loader"> instead of the alert.
How can I go about this?
You could do like this
$(".site-main").on("sf:ajaxstart",function(){
$('img.loader').show()
});
$(".site-main").on("sf:ajaxfinish",function(){
$('img.loader').hide()
});
Note:- You can do toggle show hide.based on events triggered. Here is the basic demo which will help you to understand the functionality.
$(document).ready(function() {
$(document).ajaxStart(function() {
$("img").show();
}).ajaxStop(function() {
$("img").hide('slow');
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://icon-library.net/images/loading-icon-png/loading-icon-png-12.jpg" height='50px' width='50px' alt="Loading" class='loader' style="display:none">
<form>
<button type="button" class="btn" onclick="showLoader(); return false;">Show Data</button>
</form>
<script>
function showLoader() {
$.post("/echo/json", {});
}
</script>

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.

How to get button link in alert box

In below code i am trying to get button href attribute value and show it in alert box using jquery.
When i click on button because of href value(i.e. $value['3']) it will redirect to our retailer link,But by using jquery when i get button link without page refresh by using href attribute it only take first link on any button link.
Actually i wan't that particular button link without page refresh.
<html><head>
<script src="jquery-1.11.3.js"></script></head>
<script>
$(document).ready(function(){
$('.button').click(function(){
var href = $('a').attr('href');
alert(href);
})
});
</script><body>
<?php
$data=array(
array("HTC desire 210 black","Flipkart",20000,"http://www.flipkart.com"),
array("HTC desire 326 white","Snapdeal",22000,"http://www.snapdeal.com"),
array("HTC desire 516","Amazon",23000,"http://www.amazon.in")
);
foreach($data as $value)
{
?>
<input type="button" value="Get link's href value" class="button" /><br/><br/>
<?php
}
?></body></html>
Try:
$('.button').click(function(){
var href = $(this).parent('a').attr('href');
alert(href);
})
change in script
<script>
$(document).ready(function(){
$(document).on('click','.button',function(){
var href = $(this).attr('data-link');
alert(href);
})
});
</script>
change in html
<input type="button" value="Get link's href value" class="button" data-link="<?php echo $value['3']; ?>"/><br/><br/>
Try This this is work fine for me.
$(document).ready(function(){
$('.button').click(function(){
var href = $(this).closest('a').attr('href');
alert(href);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button class="button">Google</button>
<button class="button">Yahoo</button>
<button class="button">Bing</button>
So you want to alert the href value of a link when you click on it? use preventDefault();
$(document).ready(function(){
$('a').click(function(e){
alert( $(this).attr('href') );
e.preventDefault();
return false;
})
});
Or if you want to click on a button only then
$(document).ready(function(){
$('.button').click(function(e){
alert( $(this).parent('a').attr('href') );
e.preventDefault();
return false;
})
});

Remove specific lines on button click

If I have the following:
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<input type="submit" value="Submit" />
How to make (div test1 and test3) removed upon clicking on the submit button?
Try this:
var button = document.querySelector('input[type="submit"]');
button.onclick = function(event) {
event.preventDefault();
var ids = ['test1','test3'];
var count = ids.length;
while(count--) {
document.getElementById(ids[count]).remove();
}
};
<div id="test1">test1</div>
<div id="test2">test2</div>
<div id="test3">test3</div>
<div id="test4">test4</div>
<input type="submit" value="Submit" />
Using jQuery, you should have something like this jsFiddle :
$(document).ready(function(){
$('#submit-btn').click(function(e){
e.preventDefault();
$('#test1, #test3').remove();
})
});
You could try with JQuery hide accordian, here's an example:
Put this in your head tag:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("#1, #3").hide();
});
$("#show").click(function(){
$("#1, #3").show();
});
});
</script>
And this n your body tag:
<div id="1">If you click on the "Hide" button, I will disappear.</div>
<div id="2">If you click on the "Hide" button, I will disappear.</div>
<div id="3">If you click on the "Hide" button, I will disappear.</div>
<div id="4">If you click on the "Hide" button, I will disappear.</div>
<button id="hide">Hide</button>
<button id="show">Show</button>

Jquery Hide/show not working

I am just learning Jquery, I wanted to know if anyone can tell me what is wrong with my script. When a user hits submit on the form, I want 2 two div tags to open and the one containing the form to close.
Thanks!
This is the script
<script>
$('#form_container').submit(function()
{
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show()
});
</script>
These are the div and form
<div id="mydivhide1" style="visibility:hidden">1111</div>
<div id="mydivhide2" style="visibility:hidden">2222</div>
<div id="form_container">
<form id="form_710370" method="post" convert.php">
<input id="Website" name="url1" type="text" value=""/>
<input id="saveForm" type="submit" name="submit" value="submit" />
</form>
</div>
Submit your form not div like,
$('#form_710370').submit(function(){
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show();
return false;
});
And hide your div's by using display:none not by visibility:hidden like,
<div id="mydivhide1" style="display:none">1111</div>
<div id="mydivhide2" style="display:none">2222</div>
Updated if your script is written before your DOM elements then use $(function(){...}) like,
$(function(){
$('#form_710370').submit(function(e){
e.preventDefault(); // add this
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show();
return false;
});
});
Here's a fiddle: http://jsfiddle.net/cdJU9/1/
I've added CSS to hide the top divs, I think your inline style of visibility hidden was overriding the JS.
CSS
#mydivhide1, #mydivhide2{ display: none; }
HTML
<div id="mydivhide1">1111</div>
<div id="mydivhide2">2222</div>
The fiddle throws an error for some reason but you get the idea ?
You can do like this, please focus your syntax with semicolon at the end.
<script>
$('#saveForm').click(function(){
$(this).parent().hide();
$('#mydivhide1, #mydivhide2').show();
});
</script>
it should be
<script>
$('#form_710370').submit(function()
{
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show()
});
</script>
it should be:
$('#form_710370').submit(function()
{
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show()
})
You've got a typo in there:
<form id="form_710370" method="post" convert.php">
should be
<form id="form_710370" method="post" action="convert.php">
And for the JS:
$('#form_710370').submit(function() {
$('#form_container').hide();
$('#mydivhide1, #mydivhide2').show();
})
edit: http://jsfiddle.net/GZEmw/

Categories

Resources