How to display popup in Magento - javascript

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>

Related

featherlight.js - Run script on modal load

Problem
HTML
<div id="form-lightbox">
<div class="form">
<div id="ajaxreplace">
<script type="text/javascript">
jQuery(function() {
jQuery.ajaxReplace({
//parameters
});
});
</script>
</div>
</div>
</div>
open lightbox
It is a custom script that replaces the script with a form from the backend.
The problem is, that featherlight.js copies the source and displays
the clone in the lightbox.
That duplication of code can't be handled by the library for the form.
I changed the script-tag-type to "text/x-template" so the script does
not run directly. But then the form isn't rendered in the lightbox.
Question: How can I use featherlight to run the script on loading the the lightbox?
To run code after the lightbox is opened, use callbacks (e.g. afterOpen).
If you don't want content to be duplicated, use the persist option.
HTH

How to load a view when a button is pressed?

I have a list of buttons in my <div>, when the user click on a specific div, I want display a view of my controller, for example:
<div class="row">
<div id="booking" class="command-buttons tile col-xs-12 btn">
<h3 class="title">Book appointment</h3>
</div>
</div>
I want load the appointment booking page when my user click on booking div. For load a view I use this code:
$this->load->view('appointments/book', $view);
but how I can do this using js? Usually a call a function that contains the view load, but in this case I'm on js side.
probably something like that:
$('div#booking').on('click', function() {
$(this).load( "view.html");
});
you can find some details here http://api.jquery.com/load/
I'm not entirely sure, but I think
echo $this->load->view('appointments/book', $view, true);
will return the html to your ajax success function and you can then easily inject it in the page.

Initializing Select2 inside of Highslide

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?

How to generate popup(usercontrol or div) on click of hyperlink residing in usercontrol of aspx?

Project is based on Nhibernate & spring framework with ext.net controls .
I have a usercontrol UCA.ascx which has a hyperlink on click of which I want to generate a popup to show details . So what can be done ? Any help is welcome
The target attribute allows you set the target window of the anchor.
<a target="_blank" href="url"></a>
you can write a function like this
function openWindow() {
var URL = "/Test.aspx"
window.open(URL);
}
and call like this
<a onclick="openWindow()" />
For popup you can use AJAX modal popup extender.
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx
Have you tried using JqueryUI Dialogue Box.
dialogue
add required input box inside the div which is going to popup.
<div id="dialog" title="Basic dialog">
//show details here....
</div>
you can modify the div and add whatever controls you want inside it.

How to call LinkedIn authorize javascript from button

This line of sample code from LinkedIn API works perfectly.
<script type="IN/Login" data-onAuth="loadData"></script>
but it runs automatically as the web page loads. I'd like to invoke this script using a button or link on a webpage. The idea being that the webpage loads and waits until the user is ready to authenticate.
Ideally I would like the LinkedIn Login image to appear, and wait, until clicked.
Thanks.
Based on your comment, it looks like you only want to display the SignIn plugin if the user has manually clicked a button/element on the page. Something like this, using jQuery, should work:
On your page, you have a button:
<div id="buttonControl">
<input type="button" id="showLinkedIn" value="Show LinkedIn" onclick="showLinkedIn();" />
</div>
<div id="buttonContent" style="display: none;"></div>
In a script block in the <head> of the page, you have the showLinkedIn() onclick function:
function showLinkedIn() {
// insert the SignIn plugin
$('#buttonContent').html('<script type="IN/Login" data-onauth="loadData"><\/script>');
// tell the LinkedIn JavaScript code to re-parse the element containing the SignIn plugin
IN.parse($('#buttonContent')[0]);
// hide button trigger, if needed
$('#buttonControl').hide();
// show the LinkedIn control
$('#buttonContent').show();
}
$('#buttonControl').click(function(){
$('#buttonContent').html('<script type="IN/Login" data-onauth="loadData"></script>');
$('#buttonControl,#buttonContent').toggle();
IN.User.authorize(loadData);
});
slightly different as the 'IN.parse($('#buttonContent')[0]);' does not seem to work...
tested 'IN.User.authorize(loadData)' and it works well! Got it from: http://developer.linkedin.com/documents/inauth-inevent-and-inui
You need to clear the cookies from the following method like
IN.User.logout(callbackFunction, callbackScope);
You need to call this function on that button from which you want to log out.
Example using jquery:
$('#demo') .click(function()
{
IN.User.logout(console.log("logged out..."));
});

Categories