I am new to Magento, in the checkout page. I have a text field and onblur of the text field will open a fancy box popup.
so in the checkout.phtml I placed a div to show their content in the pop up and set CSS attribute display as none.
In on blur I called a JS function and load the poup, for that I write the JS function - jQuery(".zipformcont").fancybox().trigger('click');
zipformcont is class name of div.
The issue is pop up is loading with an error - "The requested content cannot be loaded.
Please try again later."
Please help me to fix this. thanks.
Instead of using .trigger(); why not call fancybox like this:
jQuery.fancybox();
Fancybox triggers depending on the selector its connected to. Not the div its going to open.
jQuery(function(){
jQuery('#zipcode').blur(function(){
jQuery.fancybox({
"content":$('#formcontainer'),
"hideOnContentClick": true,
"hideOnOverlayClick": true
});
});
});
This should do it and get rid of the onblur attribute
I tried another option and it is working fine now.
Option
1) Created a div with CSS attribute - display as none
<div style="display:none"><a id="azcodelink" href="#zipcode_form">test</a></div>
2) In the textfield, Onblur called a JS function
<input type="text" name="namefld" id="namefld" value="" onblur="openpopup()" />
3) In the JS function, I trigered the click function of "azcodelink"
function openpopup() {
$("#azcodelink").trigger('click');
}
4) The id - zipcode_form - has the pop up content
<form id="zipcode_form">
...
</form>
Thats all..
Thanks for all your support.
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none',
iframe : {
preload: false
}
});
});
</script>
<script type="text/javascript" src="http://dev.smartparcelbox.com/skin/frontend/rwd/default/js/jquery.fancybox.pack.js"></script
Related
Hi I am printing the ajax html response to div element and giving radio input option to select the file. after selecting the specific file the another div should show the message. but the ajax html response is not working
Jquery script:
$(document).ready(function()
{
$('#upload').ajaxForm({
beforeSubmit: function() {
$('#Analysis').show();
$('#Content_column').hide();
$('#file_list').show();
$('#trait').show();
$('#trait').html('Submitting...');
},
success: function(data) {
var $out = $('#file_list');
$out.html('       File list:');
$out.append('<div id="list">');
$('#list').html(data);
$out.append('</div>');
}
});
});
The output of this script is
<ul class="php-file-tree"><li class="pft-directory">Genotypic<ul><input id="Penotypic" type="radio" name="uploads/Genotypic/" value="uploads/Genotypic/jquery.txt" />jquery.txt<br><input id="Penotypic" type="radio" name="uploads/Genotypic/" value="uploads/Genotypic/marker.csv" />marker.csv<br></ul></li><li class="pft-directory">Other</li><li class="pft-directory">Penotypic<ul><input id="Penotypic" type="radio" name="uploads/Penotypic/" value="uploads/Penotypic/namPheno.csv" />namPheno.csv<br><input id="Penotypic" type="radio" name="uploads/Penotypic/" value="uploads/Penotypic/perl.pl" />perl.pl<br></ul></li></ul>
Jquery script:
$('#Penotypic').click(function() {
var $out1 = $('#trait');
$('#trait').show();
$out1.append('Submitted...');
});
this is not showing anything in the div trait. may be the html response is loading as a tesxt so the #Penotypic is not recognised. please help me to fix this.
Thanku
You have many inputs of id="Penotypic". Make every id unique or use classes as function trigger.
I wouldn't use "/" in the name attribute. See: http://www.w3.org/TR/html401/types.html#type-name
Then try if your ajax script does work. If it doesn't work, try if it works from static page (don't use your first jQuery script, but it's output as a static form). You probably need to bind your event trigger. Use jQuery's on().
Following the simple example from Jquery: Accordion Example
Using a remoteLink function from grails (AJAX) the information is pulled back from the controller and sent back to the GSP, which works fine. I do however want this data to be placed within a Accordion container... click here for screenshot of current functionality.
(Event Create Page rendering form template) _form - GSP:
<g:remoteLink controller="event" action="showContacts" method="GET" update="divContactList">Show Contacts!</g:remoteLink>
<div id="divContactList">
<g:render template="contactListAjax" model="[contactList: contactList]" />
</div>
<script type="text/javascript">
$(document).ready(function()
{
alert("Checking if I'm ready :)");
$( "#accordion" ).accordion({
header: 'h3',
collapsible: true
});
});
</script>
_contactListAjax - GSP Template
<div id="accordion">
<g:each in="${contactList}" status = "i" var="contact">
<h3>${contact.contactForename}</h3>
<div><p>${contact.email}</p></div>
</g:each>
</div>
Not quite sure what I'm doing wrong here, as I'm encasing the data with the div with an id accordion, yet doesn't load. Please refer to screenshot link above to see what is currently happening.
UPDATE
Event (Standard Generated CRUD, only showing where the relivant imports are) create - GSP
<link rel="stylesheet" href="${resource(dir: 'css', file: 'jquery.ui.accordion.css')}"/>
<g:javascript src="jquery-1.7.1.min.js"></g:javascript>
<g:javascript src="jquery-ui.min.js"></g:javascript>
Try replacing:
$(function() {
$( "#accordion" ).accordion({
collapsible: true
});
})
with
$( "#accordion" ).accordion({
collapsible: true
});
Edit:
You can't use an <r:script /> tag after the request is finished. The server has already laid out all of the resources. Change it to a standard javascript tag. Also the inclusion of your javascript and css files should be elsewhere on the page.
I solved this... (well Hack & Slash for now... not the best, but only viable solution for now)
var whatever is the stored HTML generated by the AJAX and placed into the divContactList on the update function. The Accordion is deleted and then rebuilt (not the best approach I realise)
var whatever = $('#divContactList').html();
$('#accordion').append(whatever)
.accordion('destroy').accordion({
collapsible: true,
active: false
});
I'm trying to load a google+ 1 button on a page, the goal is to have the buttons markup inserted into the page via ajax and then make the call for the button to be rendered.
The button renders fine when the page is loaded first time around. The problem arises when the markup is fetched from /displaycode.php and then the render call is made again.
REFRESH
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
$('#live-preview').empty();
$("#live-preview").load('/displaycode.php #code');
gapi.plusone.go();
return false;
});
gapi.plusone.go();
});
</script>
<div id="live-preview"><div id="code"><div class="g-plusone"></div></div></div>
</div>
A demo of the problem can be viewed here http://32px.co/googleplusdemo.php . Thanks for any help in advance.
Render method
Use explicit render: https://developers.google.com/+/plugins/+1button/#example-explicit-render
gapi.plusone.render('live-preview')
instead of:
gapi.plusone.go();
Also needs "{"parsetags": "explicit"}" set:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
Edit
You further have to make sure to call render after the jQuery load is complete. So the element is really in the DOM.
$(function() {
$("#btn").click(function(e) {
e.preventDefault();
$('#live-preview').empty(); // Not necessary
$("#live-preview").load('/displaycode.php #code', function() {
gapi.plusone.render('live-preview');
});
});
gapi.plusone.render('live-preview');
});
I have to load accordion panels into one of my pages using AJAX and I'm finding that JQuery is 'accordionizing' all of the panels defined in the HTML file, but none of the panels loaded via Javascript. One other little quirk: I'm doing this on a nested accordion - the accordion within an accordion. It's accordion inception, if you will.
I checked other Stack Overflow questions and the JQuery Forum and I found that most of them are about resizing panels after loading data. The closest question I found was here, but it doesn't answer my question because trying to destroy and then re-accordion-ize my JS-loaded panels does not work.
This is the relevant section of my html head section:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/flick/jquery-ui.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".accordion").accordion({
collapsible: true,
icons: false,
autoHeight: false,
active: false
});
});
</script>
This is the relevant section of my html body section:
<div class="accordion">
<h3 id="acc1">First panel title</h3>
<div>First panel content</div>
<h3 id="acc2">Second panel title</h3>
<div class="accordion" id="ajaxresults-aliaslist">This is where the nested accordion goes</div>
<h3 id="acc3">Third panel title</h3>
<div>Thirdpanel content</div>
</div>
<script type="text/javascript">
$("#ajaxresults-aliaslist").load("/loadaliaslist/");
</script>
When javascript loads "/loadaliaslist/", it received a message with the following content:
<h3>1st panel within a panel title</h3>
<div>1st panel within a panel content</div>
<h3>2nd panel within a panel title</h3>
<div>2nd panel within a panel content</div>
<h3>3rd panel within a panel title</h3>
<div>3rd panel within a panel content</div>
I know that the content above is being passed to the div because the content appears un-accordionized when I load the page. Instead of an accordion within an accordion, I just get a bunch of boring content sitting at the first level of the dream sequence. I've got to go down a level... Wait, where was I?
Right, one more thing: I have tried two things that did not work:
- I tried putting both the load and the accordion scripts at the bottom of the page (load first), hoping that the order would matter. (noobish? not sure...)
- I tried adding a script at the end to destroy and recreate the panels like so:
$("#ajaxresults-aliaslist").accordion('destroy').accordion();
That's all. I really hope someone out there is the Leonardo DiCaprio of accordions, and can help rescue me from my predicament. Much appreciated!
Untested but try something like this...
The issue is most likely due to the fact that the event handlers aren't being attached to the inserted content (via Ajax).
$(function() {
var config = {
collapsible: true,
icons: false,
autoHeight: false,
active: false
}
$(".accordion").live('load', function(){
$(this).accordion(config);
}).accordion(config);
});
EDIT: Changed the code a bit (still untested).
EDIT FROM OP: SOLUTION FOUND
After playing around more, I found a way to solve this problem as long as AJAX is loading the new data immediately on pageload. Solution was to call the accordion function, only once, immediately after the load. As in the solution below:
<script type="text/javascript">
$("#ajaxresults-aliaslist").load("/loadaliaslist/",
function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an <strong>error</strong>: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
/* All panels are accordionized immediately after loading the content */
$(".accordion").accordion({
collapsible: true,
icons: false,
autoHeight: false,
active: false
});
});
</script>
A word of caution: This will only work if all of the accordion content is loaded immediately. If there are pieces of content loaded after the first accor
I suppose that you want to reset the accordion control. Try to do this:
$('#accordion')[0].innerHTML = "";
After that fill the control with your HTML using the append.
Is there a JQuery plugin that allows me to 'unhide' a form by after clicking a link? Like I have an invite link that can take me to a one text field form for an email address but I want this form to just drop down (pushing the rest of the content down also) and shows the form to submit the email. If you guys can think of a JQuery plugin that lets me do this, please let me know
Edit:
So I did this
<div class='add-link'>
<div id='invite_link'><a href=''>Invite User</a></div>
<div id='invitation_form'>
<form>
<input type='text'/>
</form>
</div>
</div>
and my jquery looks like
<script type="text/javascript">
$(function()
{
$("table").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
$('#invitation_form').hide();
}
);
$('#invite_link').click(function() {
$('#invitation_form').slideDown();
});
Do you guys see any error that causes the form not to slide down. It hides the form when the page loads but when I click the link it is not sliding down.
$('a.mylink').click(function() {
$('#MyForm').slideDown();
});
I don't think you need a jQuery plugin for this. The base jQuery library should be sufficient.
$('#showFormLink').click(function () {
$('#form').slideDown();
});
If you're looking for animation, that's possible as well by passing in a duration argument to slideDown.
Take a look at the jQuery show documentation.