Initializing Select2 inside of Highslide - javascript

I have a corporate web mail service and I use Twitter Bootstrap Modal Window in order to compose and answer emails online. Such a Modal Window contains 2 Select2 elements for TO and CC fields, usual input field for a subject, textarea and Send button.
I was looking for a different type of popup window for that and I decided to use Highslide instead of Modal as with Highslide I can switch focus back to the main page, open more windows with emails in the same time, move the Highslide windows around etc.
So I took my modal content and saved it as a separate html page and I'm getting it with a ajax request but I can't figure out now how to initialize Select2 and other elements as those needs to be initialized at the page load and I renger the Highslide Window later as opposite to Modal Window that was alway present on the page.
Here what was my original index.php whith Modal Window working:
<table id="datatable">
// ajax table with all the emails
</table>
<div id="modal-email" class="modad hide fade">
//here is email form goes...
<label>TO:</label><input id="email-to" />
<label>CC:</label><input id="email-cc" />
<label>Subject:</label><input id="email-subject" />
<textarea id="email-body" />
<button>Send</button>
</div>
$('#email-to').select2({
// initialization parameters
});
$('#email-cc').select2({
// initialization parameters
});
$(document).ready( function() {
$('#datatable').delegate('tr', 'click', function() {
fill_email_values();
$('#modal-email').modal('show');
}
});
So now I took the #modal-email and moved to a separate file
email.form.html:
<label>TO:</label><input id="email-to" />
<label>CC:</label><input id="email-cc" />
<label>Subject:</label><input id="email-subject" />
<textarea id="email-body" />
<button>Send</button>
and I have modified the index.php file into:
<table id="datatable">
// ajax table with all the emails
</table>
<div class="highslide-html-content" id="highslide-form-email">
//form will get inserted here with hs.htmlExapnd command
</div>
$('#email-to').select2({
// initialization parameters
});
$('#email-cc').select2({
// initialization parameters
});
$(document).ready( function() {
$('#datatable').delegate('tr', 'click', function() {
$.ajax ({
type: 'GET',
url: 'email.form.html',
success: function(data) {
return hs.htmlExpand(null, {
contentId: 'highslide-form-email',
maincontentText: data
});
}
});
fill_email_values();
}
});
Obviously when I had Modal Window loading with the index.php page I could initialize all the elements including Select2 but now when I'm loading the email.form.html later only after a click occurs then initial Select2 initialization fails because the elements does not exists yet. However I can't initialize the Select2 later when I put out the popup form as I belive those needs to be initialized on Document Ready or something like and this time has past by. How can I do this?

Related

My form submission get blocked because the frame is sandboxed and the 'allow-forms' permission is not set

I'm trying to build a custom form and submission post for Hubspot.
I have the following code
HTML
<head>
<script src="prezzi-form-submit.js"></script>
</head>
<body>
<form class='form-inline' id='my-custom-form'>
<div class="form-group">
<input type='email' class='form-control' placeholder='Your email address' required>
</div>
<button class="btn btn-primary" type='submit'>Sign up</button>
</form>
<!-- Actual form that gets submitted to HubSpot -->
<div class="hidden" id='hubspot-form'>
<script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script>
<script>
hbspt.forms.create({
portalId: 'my-portal-id',
formId: '92b9b82a-0da2-4e23-8a30-04541c05ce6d',
onFormReady: function($form) {
$form.attr('target', 'hubspot-iframe');
}
});
</script>
<!-- iFrame that data will get submitted to. This hack stops the page redirect. -->
<iframe name="hubspot-iframe" id="hubspot-iframe" sandbox="allow-forms"></iframe>
</div>
</body>
JS (prezzi-form-submit.js)
// // Send form data to HubSpot from the client.
function submitToHubSpot(data) {
var $form = $('#hubspot-form form'),
k;
// Loop through each value and find a matching input.
// NOTE: Doesn't support checkbox/radio.
for (k in data) {
$form.find("input[name='" + k + "']").val(data[k]);
}
$("form input:submit").trigger("click");
}
// Here's how you'd use this.
$('#my-custom-form').on('submit', function() {
var formData = {};
$(this).serializeArray().forEach(function(data) {
formData[data.name] = data.value;
});
submitToHubSpot(formData);
// We sent the data. Now do whatever else you want.
alert('Gee, thanks Jonathan! Now I can focus on onboarding my customers with Appcues!');
window.location.href = 'http://appcues.com';
})
When I press the submit button, I get the following error in the console
Blocked form submission to " " because the form's frame is sandboxed
and the 'allow-forms' permission is not set.
As you can see I have the
sandbox="allow-forms"
set in the I frame but it isn't working.
How can I fix this error?
Sometimes when you click a link from an application, the tab opened will have javascript disabled/sandboxed.
Close the tab and reopen the same URL in a fresh tab, it might work.
Ran into the same problem with an iFrame form on Hubspot and got the same JS error. Discovered it has to do with the live preview using the HS Design tool.
In the drop down at the top there's the "Live preview with display options" then the "Preview without display options". It's the "preview with display options" selection that makes it "Sandboxed", try the one without. Hope this is helpful for someone.
Instead of setting the allow-form attribute in the html, set it within the .js using
el.setAttribute('sandbox', 'allow-forms');
It is because the frame itself is being sandboxed but the script is being called prior to the form being submitted which triggers submission of the frame but since the user wouldn't be able to submit, it wont call the iframe properties to respect the attribute set there

How to load div only on click and not when page loads?

Can any one help me to shout out my problem in scripting page. I'm developing website which displays property. I wanted to know how to block a div from loading when page loads and the content should display and load only on click of a button. Let me explain it below.
<button id="loader" onclick="loaddiv(#items)" value="View Content">
This loads data from external server using API. It has lots of data and images.
Please help.
The DIV itself should not have any content when the page loads, so simply a empty div with an ID tag..
Where you have "loaddiv(#items)" ... this is invalid, well the # part anyway... try "loaddiv('#items')" to make it a string in which jquery can then handle.
Once the page has loaded, then you would use jquery with something like get/post.
<div id='items'><!-- i'm empty for now --></div>
<button id="loader" onclick="loaddiv('#items')" value="View Content">
<script>
function loaddiv(sID) {
$.get( "ajax/test.html", function( data ) {
$(sID).html( data );
});
}
</script>

pass HTML link id to js AJAX function through modal plugin

I have over 1.5 million dynamically created (php/html/js) web pages that contain lists of up to 300 people, to whom I need to allow visitors to send messages by using a popup form that is triggered by link next to each person's name. I'm using the PopEasy jquery modals plugin http://thomasgrauer.com/popeasy/ .
All these modals/forms are identical, except for a unique recipient ID associated with each link that needs to be passed through to the AJAX code that fires to save the message to that person's record when the modal's form's Send Message btn is clicked (e.g. "1001', '1002' in the examples below).
For each page, I could dynamically create up to 300 form DIVs, one for each link, but would rather find a clever way to transfer the recipient ID with just one modal/form DIV, to cut down the bandwidth. I should be ok, if I can reference the ID of the link from within the AJAX code (as the "u" var in the example below).
Ideas?
(my competencies: js: "barely any" / html and php: "average".
Here is the code that works for just two links/divs/forms:
<a id="1001" class="modalLink" href="#modal_1001">Send msg</a>
<a id="1001" class="modalLink" href="#modal_1002">Send msg</a>
// the plugin uses the class to fire, and the href to know which of several DIVs of
// that class to use; if the a#id isn't needed, I can strip the "modal_" part out of
// the href to save having to parse it
<div id="modal_1001" class="modal">
<form method="post" action="">
<textarea>(write your msg here)</textarea>
<button type="button" onclick="storeMsgAjax(1001,1234)">Send message</button>
</form>
Close Form
</div>
<div id="modal_1002" class="modal">
<form method="post" action="">
<textarea>(write your msg here)</textarea>
<button type="button" onclick="storeMsgAjax(1002,1234)">Send message</button>
</form>
Close Form
</div>
And here is the js modal plugin function:
$(document).ready(function(){
$('.modalLink').modal({
trigger: '.modalLink', // id or class of link or button to trigger modal
olay:'div.overlay', // id or class of overlay
modals:'div.modal', // id or class of modal
animationEffect: 'slideDown', // overlay effect | slideDown or fadeIn | default=fadeIn
...(other options)...
close:'.closeBtn' // id or class of close button
});
});
And here is the AJAX code:
function storeMsgAjax(s,u)
{
var m = document.getElementById("msgtxt").value;
var url = "http://ifinallyfoundu.com/storeMsg.php?s="+s+"&m="+m+"&u="+u+"&t=" + Math.random();
xmlHttp2 = GetXmlHttpObject();
if (xmlHttp2 == null) {alert("Browser does not support HTTP Request"); return;}
xmlHttp2.onreadystatechange = function()
{
if (xmlHttp2.readyState == 4 && xmlHttp2.status == 200)
{
var formSaveResults = xmlHttp2.responseText;
document.getElementById("modal_"+s).innerHTML = formSaveResults+'<br><br>Close Form' ;
}
}
xmlHttp2.open("GET", url, true);
xmlHttp2.send(null);
}
Looks like I can add an onclick script to each link to put the ID in the innerHTML of a hidden page element, which should be accessible to the AJAX routine. I'm sure there is probably a more elegant solution, but this seems to work.

How to display popup in Magento

I am developing an extension for Magento and am trying to display a popup window to the user during checkout if their data is not able to be properly validated. I am trying to avoid making my own theme or modifying the default to trigger the window to pop up.
Is there another method that I can use to trigger this from the controller? Perhaps through getLayout I can inject the javascript to open the popup and then reload the page?
I would do something like this
<div style="display:none;">
<div id="mycontent">
// your content
</div>
</div>
<button type="button" id="linktopopup" href="#mycontent">
<script type="text/javascript">
("#linktopopup").fancybox({
autoDimensions: false,
afterShow: function(){
// append something to form!
}
});
</script>

Hide, load, and show div with javascript

I have a few pages from each other to interact with page with id load, as below:
inside process.html
<div id="guest_details"> </div>
<div id="first_start"> </div>
<script>
<! -
$('#guest_details').load('?p=guest_details.html');
$('#first_start').load('?p=first_start.html')
$('#guest_details').hide('slow');
$('#first_start').SlideUp('slow')
->
</Script>
inside guest_details.html
<form action="guest_details.php" <form method="POST" id="guest">
<!-- Some cell here -->
<a onclick="$('#guest').submit();" class="button" id="first_start"> <span> <?php echo $button_submit;?> </span> </a>
</Form>
That I want is when the submit button is clicked then:
data sent to guest_details.php
If the data has been sent then hide < div id="guest_details"> < /div>
showing the show < div id="first_start"> < /div>
but when I make it like the above, that not work, Could someone give a clue how to correct?
Thanks a lot
Looking at your previous question and your tags, I assume you are not much aware of AJAX.
You need to
1.post the form asynchronously (without reloading the page, using AJAX).
2. On successfully sending the data, do the dom manipulations.
I suggest using jquery for doing an AJAX post.
Here is a sample code, using jquery:-
$('#guest_details').load('?p=guest_details.html');
$('#first_start').load('?p=first_start.html')
function ajaxPostForm()
{
$.post('guest_details.php',
function(data) {
//Dom manipulation
$('#guest_details').hide('slow');
$('#first_start').SlideUp('slow')
});
}
And your form html inside guest_details.html needs to be like:-
<form method="POST" id="guest">
<!-- Some cell here -->
<a onclick="ajaxPostForm();" class="button" id="first_start"> <span> <?php echo $button_submit;?> </span> </a>
</Form>
The $.post given above is a very basic AJAX post. You may add further features as give in Jquery Post.
Also if you want to post the entire form, you can refer jQuery Form Plugin
Updates
I think I understood your problem better this time. Inside your update where you say this-
by default guest_details.html is
showing and first_start.html is hiding
referring to the sections as guest_details and first_start would make more sense because guest_details.html may mean the page guest_details.html which you might have opened in another window.
Anyway, I am sure you mean the sections inside the page process.html as you have used jquery .load(). Let's call the first_start.html and guest_details.html as sections first_start and guest_details respectively.
As per your updates do you mean the following:-
Initial state
Section guest_details is shown and first_start is hidden
Cases/Situations
When form inside guest_details section is submitted, then hide the section guest_details and show first_start section.
At this state when guest_details is hidden and first_start is shown, the button on first_start can be clicked and on doing so the guest_details section shows again.
During these states where one section is hidden and another is shown reloading/refreshing the page should preserve the states.
If above is the complete scenario, here is the code:-
<script>
<! -
initiateSections(<?php echo $this->session->data['display_state']; ?>);
//state can have "display_first_start" or "display_guest_details"
function initiateSections(state)
{
$('#guest_details').load('?p=guest_details.html');
$('#first_start').load('?p=first_start.html')
if(state == "display_first_start")
{
displayFirstStart();
}
else
{//If chosen or by default
displayGuestDetails();
}
}
function ajaxPostGuestDetails()
{
$.post('guest_details.php', //In this post request - set $this->session->data['display_state'] = 'display_first_start'; in php
function(data)
{
//Dom manipulation
displayFirstStart();
});
}
function ajaxPostFirstStart()
{
$.post('first_start.php', //In this post request - set $this->session->data['display_state'] = 'display_guest_details';
function(data)
{
//Dom manipulation
displayGuestDetails();
});
}
function displayGuestDetails()
{
$('#first_start').hide('slow');
$('#guest_details').slideUp('slow');
}
function displayFirstStart()
{
$('#guest_details').hide('slow');
$('#first_start').slideUp('slow');
}
->
</Script>
You need to implement ajax to post the data to php
http://api.jquery.com/jQuery.ajax/
use ajax success to do your post success activities.
Once ajax is successful do the HTML manipulations
success: function(data) {
}

Categories