Initializing Magnific Popup with form element (input) - javascript

What I want:
I want to initialize a modal Magnific Popup from a radio button on an HTML form. The popup will then display the "send" button.
Actually, I want to initialize the popup by clicking on the label of the radio input because I'll replace the radio elements with custom CSS radio buttons.
I'm using Zepto because it's lighter and I wouldn't use jQuery otherwise.
What's the problem:
If I click on a label, I do get a Magnific modal, but the radio option doesn't get selected.
If I click on the radio button itself, the option does get selected and the modal appears. But, if I dismiss the modal to choose another option, the modal appears without changing the option. (This is not usable anyway because I'll hide the stock radio buttons — as previously mentioned).
My code: (http://jsfiddle.net/Nkc5X/)
HTML:
<form action="#">
<label>
<input type="radio" name="whatside" title="Left" value="Left">
<span>Left</span>
</label>
<label>
<input type="radio" name="whatside" title="Right" value="Right">
<span>Right</span>
</label>
<div id="modal" class="white-popup-block mfp-hide">
<h2>Modal dialog</h2>
<button type="submit" value="Send">Send</button>
<a class="popup-modal-dismiss" href="#">Dismiss</a>
</div>
</form>
JavaScript:
$(function () {
$('label').magnificPopup({
type: 'inline',
items: {src: '#modal'},
preloader: false,
modal: true
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
What I've tried:
I've several tried variations on my html/javascript to no avail. I've tried initializing the popup using different selectors (label and input elements, class, id).

Okay, I left this problem simmer for a while and finally found a solution.
I initialize the popup from the input element: $('input').magnificPopup, which allows me to select the option when clicking on the label.
I reset the form controls using native JavaScript, using the method described in this SO answer: $('form')[0].reset();
Working JSFiddle here: http://jsfiddle.net/Nkc5X/1/
$(document).ready(function() {
$('input').magnificPopup({
type: 'inline',
items: {src: '#modal'},
preloader: false,
modal: true
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
$('form')[0].reset();
});
});

You can do it like this
$.magnificPopup.open({
items: {
src: '<div class="my-container">here is the content of the html you want to popup</div>'
},
callbacks: {//this is optional
close: function () {
//do something on exit
}
}
});

Related

hide a div when clicking outside 2 div jquery

i have a problem with js
i have a icon and a form
my form is appear when i click on icon
i want to my form was hide when clicked outside form
now when i click on icon to show my form , js hide my form becuase it outside of my form
any body can help me?
mycode for show/hide when click on icon:
$(document).ready(function(){
$("#icon").click(function(){
$("#form-subscribe").animate({
height: 'toggle'
});
});
});
and my code for hide form when clicked outside of form:
$(document).ready(function()
{
$("#main").mouseup(function(e)
{
var subject = $("#form-subscribe");
if(e.target.id != subject.attr('id') && !subject.has(e.target).length)
{
$("#form-subscribe").animate({
height: 'hide'
});
}
});
});
You can accomplish this by inspecting the e.target DOM node inside of a jQuery $.contains() method.
Link to jQuery Contains Method: https://api.jquery.com/jQuery.contains/
Here is a JSFiddle: https://jsfiddle.net/iamjpg/eq43eve5/
HTML:
<div>
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
<form id="form">
<div>
<input>
</div>
<div>
<input>
</div>
<div>
<input>
</div>
</form>
Javascript:
$('.fa').on('click', function() {
$('#form').show();
})
$(document).on('click', function(e) {
// If e.target is not inside of the form container AND not
// the icon triggering the initial showing of the form,
// hide the form div.
if (!$.contains(document.querySelector('#form'), e.target) && !$(e.target).hasClass('fa')) {
$('#form').hide();
}
})

Fancybox doesnt open onclick submit form

When I fill in my form and send it the fancybox is not coming up.
Here is the code i am using for the fancybox:
<div class="hidden" id="fancybox-popup-form">
(your Fancybox content goes in here)
</div>
<style>
.hidden { display: none; }
</style>
This is the confirmtation text i filled in at the plugin Gravity forms
<script type='text/javascript'>
$('#gform_submit_button_2').click(function () {
$#gform_submit_button_2([
{ href : '#fancybox-popup-form' }
]);
});
</script>
And this is the HTML for the button where i need to click on the fire the function
<input type="submit" id="gform_submit_button_2" class="button gform_button" value="Verzenden" tabindex="6" onclick="if(window["gf_submitting_2"]){return false;} window["gf_submitting_2"]=true; ">
Thanks for your time!
When I fill in my form and send it the fancybox is not coming up.
When you send it the page will be refreshed by the submit so your fancybox will not shown, so try to prevent the default action (submit) using preventDefault() :
$('#gform_submit_button_2').click(function (e) {
e.preventDefault();
//Your code
})
Hope his helps.

Change text of button if it has a display of none?

I have a list of of checkboxes that are being used a search fields for a database. When someone clicks a checkbox it will show a button with the text from the label of that checkbox. However, I need that button to be have empty text when it is not visible (in the case of someone clicking the checkbox to hide the button).
Here's my code:
$(document).ready(function() {
$('#locationAll').click(function() {
var value = $('#locationAll').parent().text();
$('#location-all-button').html(value + " ×").toggle('fast');
});
});
$(document).ready(function() {
$('.search-popup').click(function() {
$(this).hide('fast');
});
if ($('.search-popup').css('display') == 'none') {
$(this).text("");
};
});
button {
background-color: lightgray;
border-radius: 20px;
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox" value="all" id="locationAll" />All
</label>
<br>
<br>
<button class="search-popup btn" id="location-all-button"></button>
For some reason I can't make the button stay hidden before the checkbox on the example here but that isn't a problem in my full code. if you need more info let me know I might have missed something.
Ok so I changed a few things. I made this work for any checkbox that follows the naming scheme I made really quickly. The scheme is the id of the button = the "button-"+id. Also I hiding all buttons with a class right form the start to set their default state.
$(document).ready(function()
{
\\change to allow all checkboxes to trigger
$('input[type=checkbox]').click(function()
{
\\change the id so it match a button when add "button-" to the start
\\this allows me to target the matching button with any chechbox
$('#button-'+$(this).attr('id')).toggle('fast');
});
$('.search-popup').click(function()
{
$(this).hide('fast');
\\ sets the check box to false so it not checked when you close it
$("#"+$(this).text().replace("  ×","")).attr('checked', false);
});
\\hides all buttons right form the start
$('button.search-popup').each(function()
{
$(this).hide();
});
});
<label>
<input type="checkbox" value="all" id="All" />All
</label>
<br>
<br>
<button class="search-popup btn" id="button-All">All  ×</button>
now if you want to create and remove buttons when a checkbox has changed state you can add an if state meant in that checks to see if the button with the matching id exists or not,!$(tag).size().

How to dynamically load content from an external url, inside of a jquery ui modal dialog widget?

I asked this question before, but I don't think I explained properly for what I am trying to accomplish.
There are multiple links on my website and I want to open the content from the link in a jquery ui modal dialog widget.
I'm trying to use 'this' to reference the link that the user selects dynamically.
What am I doing wrong here?
The code I'm using is below:
comment #1
comment #2
comment #3
<div id="somediv"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#somediv").load(this.getTrigger().attr("href")).dialog({
autoOpen: false,
width: 400,
modal: true
});
$("#test").click(function(){$( "#somediv" ).dialog( "open" );});
});
</script>
http://jsfiddle.net/qp7NP/
A couple changes: changed ID to Class and used IFrame.
comment #1<br>
comment #2<br>
<a href="http://ask.com/" class="test" >comment #3</a><br>
<div id="somediv" title="this is a dialog" style="display:none;">
<iframe id="thedialog" width="350" height="350"></iframe>
</div>
<script>
$(document).ready(function () {
$(".test").click(function () {
$("#thedialog").attr('src', $(this).attr("href"));
$("#somediv").dialog({
width: 400,
height: 450,
modal: true,
close: function () {
$("#thedialog").attr('src', "about:blank");
}
});
return false;
});
});
</script>
In case you want to pull in the HTML instead of IFrame, you will have to use Ajax (XMLHttpRequest), something like this: http://jsfiddle.net/qp7NP/1/
You can't have multiple elements with the same Id.
Change your links to to class="test" instead and therefore your click event to $('.test').click().
Also if you still have problems, and I remember I had some similar issues because how JQUery Dialog behaves itself with the DOM. It will literally rip your #somediv out of content and append it to the bottom of a page to display that dialog. I solved my dynamic dialog loading issues with wrapping it in another div.
<div id="somediv-wrap">
<div id="somediv">
</div>
</div>
<script>
$(document).ready(function() {
$("#somediv-wrap").dialog({
autoOpen: false,
width: 400,
height:200,
modal: true
});
$(".test").click(function(event)
{
event.preventDefault();
var link = $(this).attr('href');
$("#somediv").load(link,function(){
$( "#somediv-wrap" ).dialog( "open" );
});
});
});
</script>

How to execute javascript function from a dynamic html result? Jquery

Please have a look at this code -
When I click on myLink I get a modal dialog window which shows the html as defined below. This html includes a button (id=test_button), and when I click on this button I want to do an ajax request.
But its not working. So to test it I am just doing an alert but it wont work as well.
Also will it be possible to update existing dom element values (just populate a form) from within a test_button click function.
Thanks for your help.
$('#myLink').click(function(event) {
event.preventDefault();
$('<div id="iContainer">Test: <input type="text" value="" id="test_text" />
<input type="button" id="test_button" value="click" /></div>').appendTo('body');
$("#iContainer").dialog({
width: 600,
modal: true,
close: function(event, ui) {
$("#iContainer").remove();
}
});
});
$('#test_button').click(function() {
alert('I am in Alert');
//alert($('#test_text').val());
});
Try with Events/live:
$('#test_button').live("click", function(){
alert('test');
});
The problem is that you're attempting to attach the click handler before the element exists.
As stated by CMS, you can either use .live() or you can add the click handler in your $('#myLink').click() function
Like so:
$('#myLink').click(function(event) {
event.preventDefault();
$('<div id="iContainer">Test: <input type="text" value="" id="test_text" />
<input type="button" id="test_button" value="click" /></div>').appendTo('body');
$("#iContainer").dialog({
width: 600,
modal: true,
close: function(event, ui) {
$("#iContainer").remove();
}
});
$('#test_button').click(function() {
alert('I am in Alert');
//alert($('#test_text').val());
});
});

Categories