i am using two newsletter form like the below link
http://www.astleyclarke.com/uk/jewellery-care
One is using mouse over function the email subscriber is popping up
and second 1 at the bottom. If I comment on any one of the forms then the other 1 is working fine.
Could any 1 help me solve this, or may have done with this.
below is the code for header.phtml
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('a.login-window').click(function() {
// Getting the variable's value from a link
var loginBox = jQuery(this).attr('href');
//Fade in the Popup and add close button
jQuery(loginBox).fadeIn(300);
//Set the center alignment padding + border
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
jQuery(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
jQuery('body').append('<div id="mask"></div>');
jQuery('#mask').fadeIn(300);
return false;
});
// When clicking on the button close or the mask layer the popup closed
jQuery('a.close, #mask').live('click', function() {
jQuery('#mask , .login-popup').fadeOut(300 , function() {
jQuery('#mask').remove();
});
return false;
});
});
</script>
<div id="login-box" class="login-popup">
<img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" />
<?php echo $this->getLayout()->createBlock('newsletter/subscribe')->setTemplate('newsletter/subscribe.phtml')->toHtml(); ?>
</div>
for footer.phtml
<?php echo $this->getLayout()->createBlock('newsletter/subscribe')->setTemplate('newsletter/subscribe.phtml')->toHtml(); ?>
Related
Js Xml Path : module_name-static-src-xml:
<div t-name="widget_1">
<button type="button" id = "button_1" >Click</button>
<div id = "test"> </div>
</div>
<div t-name="widget_2">
<p>Second Widget</p>
</div>
Js:
odoo.define("module_name.name", function(require) {
"use strict";
var Widget = require("web.Widget");
var Widget_Extend = Widget.extend({
template: "widget_1",
start: function() {
var self = this;
$(document).ready(function(){
setTimeout(function(){
$(document).on("click", "#button_1", function() {
var widget_call = '';
widget_call = '<div id ="test"></div>'
widget_call + = '<t t-call="widget_2"/>'
$('#test').html(widget_call);
});
});
});
}
});
core.action_registry.add("module_name.name", Widget_Extend);
});
Note:
I have tried to call "widget_2" using js but i could not get what i expect. I am not sure this the way to call the widget but i have tried a lot. If any one have some other way to call the 2nd widget from 1st widget using js kindly let me know.
Anticipating all kind of information about this problem.
Thanks.
you can inherited a widget to another widget As an example, it may look like this:
// in file a.js
odoo.define('module.A', function (require) {
"use strict";
var A = ...;
return A;
});
// in file b.js
odoo.define('module.B', function (require) {
"use strict";
var A = require('module.A');
var B = ...; // something that involves A
return B;
});
I'm calling inline html in ColorBox and it shows no content in IE8. This can be replicated on Jack Moores own site. Simply goto the demo site, http://www.jacklmoore.com/colorbox/example1/ , then click the second to the last link "Inline HTML". Then click the bottom link to update content ... in IE8 the box shows nothing.
I'm having the same problem, but I'm creating the div collection on the fly as shown below. Its for a check box confirmation. Any suggestions?
$('input[name$=chkApproved]').click(function (e) {
var th = $(this);
if (th.is(':checked')) {
var dialog = '<div">'
+ '<div id="dialog">'
+ '<p style="margin-top: 30px;">'
+ 'Are you sure you want to approve this program?</p>'
+ '<p style="font-size: small;">'
+ '<strong>Note:</strong> This cannot be undone!</p>'
+ '<p style="text-align: center;">'
+ 'Approve'
+ ' '
+ 'Cancel'
+ '</p></div></div>';
$.colorbox(
{
onLoad: function() {
$("#cboxClose").remove();
},
overlayClose: false,
href: dialog,
open: true,
title: "Program Approval",
inline: true,
height: "210px",
onClosed: function () {
$("[id$=btnHiddenApprove]").click();
}
});
e.stopPropagation();
} else {
th.attr('checked', false);
}
});
The problem on my page was a broken link. Just fixed that, so it shouldn't be a problem. That wasn't specific to IE8, and I haven't had any troubles with IE8.
The only problem I see with what you posted is that you have a stray quote mark in the opening <div> element. I checked your content in IE8 and that was indeed the issue:
This:
var dialog = '<div">'
Should be this:
var dialog = '<div>'
The stray quote mark makes your markup not well formed, and it's up to the browser how they want to respond or recover from the error, leaving for very inconsistent results.
Here is the revised code for who ever is interested .... this code will show a confirmation on a check-box, and uncheck it if cancel is selected. The onClosed event fires a hidden button click event that goes through the gridview and sets any checked check-boxes.
function UnCheckBox(cb) {
//alert(cb);
$('#' + cb + '').removeAttr('checked');
}
$(document).ready(function () {
$('input[name$=chkApproved]').click(function (e) {
var th = $(this);
if (th.is(':checked')) {
var dialog = '<div>'
+ '<div id="dialog">'
+ '<p style="margin-top: 30px;">'
+ 'Are you sure you want to approve this program?</p>'
+ '<p style="font-size: small;">'
+ '<strong>Note:</strong> This cannot be undone!</p>'
+ '<p style="text-align: center;">'
+ 'Approve'
+ ' '
+ 'Cancel'
+ '</p></div></div>';
$.colorbox(
{
onLoad: function() {
$("#cboxClose").remove();
},
href: dialog,
open: true,
title: "Program Approval",
inline: true,
height: "210px",
onClosed: function () {
$("[id$=btnHiddenApprove]").click();
}
});
e.stopPropagation();
} else {
th.attr('checked', false);
}
});
I am loading content using AJAX, and changing URL by using pushastate, below is my code, can anybody tell me how to implement onpopstate to enable back button in my case.
HTML
<div id="tabs" style="margin:1px 0px 0px 15px;">
<ul class="tabs-ul">
<li id="boardLi" class="current-tab"><a class="current-tab" href="board.jsp">Board</a></li>
<li id="aboutLi">Info</li>
<li id="photoLi">Photo Albums</li>
</ul>
</div>
JS
$(document).ready(function() {
function loadContent(path,c,pageName){
$.ajax({ url: path, success: function(html) {
$('#ajax-content').empty().append(html);
window.history.pushState({path:''},'',pageName+'?tab='+c);
}
});
}
function checkC(target){
var c='';
if(target=='aboutme.jsp')
{c='info';}
else if(target=='board.jsp')
{c='board';}
else if(target=='photo.jsp')
{c='photo';}
else if(target=='tab.jsp')
{c='ht';}
return c;
}
$(".tabs-ul li a").on('click', function(e) {
e.preventDefault();
$('#ajax-content').empty().append("<div id='loading'><img src='images/preloader.gif' alt='Loading' /></div>");
$('.tabs-ul li a').removeClass('current-tab');
$('.tabs-ul li').removeClass('current-tab');
$(this).addClass('current-tab');
$(this).parent().addClass('current-tab');
var url = window.location.pathname;
var pageName = url.substring(url.lastIndexOf('/') + 1);
var target=$(this).attr('href');
var c=checkC(target);
loadContent(target,c,pageName);
return false;
});
var loaded = false;
window.onpopstate = function(e) {
if (!loaded) {
loaded = true;
return;
} else {
alert(window.loacation.back().pathname);
loadContent();
}
};
});
When user clicks on link, first of all I am adding removing class for loading then I am getting URL and getting the page name from that URL(saved in 'pageName'), 'target' is href attr of clicked link and 'c' is the value I will be showing in url(for example, example.com/profile.jsp?tab=info, here if the href is info.jsp then 'c' would be info), finally I am calling 'loadContent' function which loads ajax content and changes URL using pushState.
My page shows posts stored in my Database through a loop. Each post is paired with a like and dislike button. The page has two master controls switches that show/hide all liked posts and show/hide all dislike posts.
This all works perfectly. I am now trying to paginate said posts while still keeping the above functions intact. This is proving difficult. In short, if I click on a div with class "like" var value is set to "1" and ajax fires, storing that value in my database and returns a success message. The same happens for dislike with the difference being that var value is set to "0".
If the user chooses to hide all liked posts, they do indeed hide but no other posts pop up in their places. I'd like it for the pagination to ALWAYS display X results per page even after some posts get toggled. As it is, If I hide 3 of 5 posts, only 2 posts remain instead of having 3 next posts come in.
imtech_pager.js looks for a div called "contained" and looks inside it for all divs with class "z". These divs then get paginated. This does work. It's just that it causes the above problem.
likedislike.js (toggling x number of posts doesn't result in pulling in the next x number of posts):
$(document).ready(function() {
likestatus = 1;
dislikestatus = 1;
$(document).on("click", ".like", function(){
postID = $(this).attr('id').replace('like_', '');
// Declare variables
value = '1';
myajax();
return false;
});
$(document).on("click", ".dislike", function(){
postID = $(this).attr('id').replace('dislike_', '');
// Declare variables
value = '0';
myajax();
return false;
});
function myajax(){
// Send values to database
$.ajax({
url: 'check.php',
//check.php receives the values sent to it and stores them in the database
type: 'POST',
data: 'postID=' + postID + '&value=' + value,
success: function(result) {
$('#Message_' + postID).html('').html(result).prependTo('#post_' + postID);
if (result.indexOf("No") < 0){ //If return doesn't contain string "No", do this
if (value == 1){ //If post is liked, do this
$('#post_' + postID).removeClass('dislike').addClass('like');
$('#dislikebtn_' + postID).removeClass('dislikeimgon').addClass('dislikeimgoff');
$('#likebtn_' + postID).removeClass('likeimgoff').addClass('likeimgon');
// If Hide Liked checkbox is on, toggle the post
if (likestatus % 2 == 0) {
$('#post_' + postID).toggle();
}
} else if (value == 0){ //If post is disliked, do this
$('#post_' + postID).removeClass('like').addClass('dislike');
$('#likebtn_' + postID).removeClass('likeimgon').addClass('likeimgoff');
$('#dislikebtn_' + postID).removeClass('dislikeimgoff').addClass('dislikeimgon');
// If Hide Disliked checkbox is on, toggle the post
if (dislikestatus % 2 == 0) {
$('#post_' + postID).toggle();
}
}
}
}
});
}
//When Hide Liked checkbox clicked, toggle all Liked posts.
$('#show_likes').on('click', function() {
countlikes = $('[id^=post_].like').length;
if (countlikes >0) {
likestatus++;
$('[id^=post_].like').toggle();
if (likestatus % 2 == 0) {
$('#hidelikedbtn').removeClass('hidelikedimgoff').addClass('hidelikedimgon');
} else {
$('#hidelikedbtn').removeClass('hidelikedimgon').addClass('hidelikedimgoff');
}
}
return false;
});
//When Hide Disliked checkbox clicked, toggle all Disliked posts.
$('#show_dislikes').on('click', function() {
countdislikes = $('[id^=post_].dislike').length;
if (countdislikes >0) {
dislikestatus++;
$('[id^=post_].dislike').toggle();
if (dislikestatus % 2 == 0) {
$('#hidedislikedbtn').removeClass('hidedislikedimgoff').addClass('hidedislikedimgon');
} else {
$('#hidedislikedbtn').removeClass('hidedislikedimgon').addClass('hidedislikedimgoff');
}
}
return false;
});
});
imtech_pager.js (this paginates all divs with class "z" - works fine)
var Imtech = {};
Imtech.Pager = function() {
this.paragraphsPerPage = 3;
this.currentPage = 1;
this.pagingControlsContainer = '#pagingControls';
this.pagingContainerPath = '#contained';
this.numPages = function() {
var numPages = 0;
if (this.paragraphs != null && this.paragraphsPerPage != null) {
numPages = Math.ceil(this.paragraphs.length / this.paragraphsPerPage);
}
return numPages;
};
this.showPage = function(page) {
this.currentPage = page;
var html = '';
this.paragraphs.slice((page-1) * this.paragraphsPerPage,
((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage).each(function() {
html += '<div>' + $(this).html() + '</div>';
});
$(this.pagingContainerPath).html(html);
renderControls(this.pagingControlsContainer, this.currentPage, this.numPages());
}
var renderControls = function(container, currentPage, numPages) {
var pagingControls = 'Page: <ul>';
for (var i = 1; i <= numPages; i++) {
if (i != currentPage) {
pagingControls += '<li>' + i + '</li>';
} else {
pagingControls += '<li>' + i + '</li>';
}
}
pagingControls += '</ul>';
$(container).html(pagingControls);
}
}
index.php (displays all the divs and buttons)
<div id="content">
<div id="mastercontrols">
<div id="show_likes" style="position:absolute;">
<a id="hidelikedbtn" class="hidelikedimgoff" href="#"><span></span></a>
</div>
<div id="show_dislikes" style="position:absolute; right: 0em;">
<a id="hidedislikedbtn" class="hidedislikedimgoff" href="#"><span></span></a>
</div>
</div>
<div id="contained">
<?php
$data = mysql_query("SELECT * FROM Posts") or die(mysql_error());
while($row = mysql_fetch_array( $data )){
?>
<div class="z">
<div id="post_<?php echo $row['postID']; ?>" class="post">
<div id="post_<?php echo $row['postID']; ?>_inside" class="inside">
<div id="like_<?php echo $row['postID']; ?>" class="like" style="position:absolute; right: 2.5em;">
<a id="likebtn_<?php echo $row['postID']; ?>" class="likeimgoff" href="#"><span></span></a>
</div>
<div id="dislike_<?php echo $row['postID']; ?>" class="dislike" style="position:absolute; right: 0em;">
<a id="dislikebtn_<?php echo $row['postID']; ?>" class="dislikeimgoff" href="#"><span></span></a>
</div>
<b><?php echo $row['Title']; ?></b><br>
<?php echo $row['Description']; ?><br>
<div id="postleft">
</div>
<div id="postright">
</div>
</div>
</div>
<div id="Message_<?php echo $row['postID']; ?>" class="reminder"></div>
</div>
<?php
}
?>
</div>
<div id="pagingControls"></div>
</div>
<script type="text/javascript">
var pager = new Imtech.Pager();
$(document).ready(function() {
pager.paragraphsPerPage = 5; // set amount elements per page
pager.pagingContainer = $('#container'); // set of main container
pager.paragraphs = $('div.z', pager.pagingContainer); // set of required containers
pager.showPage(1);
});
</script>
So any ideas? This perplexes me to no end! The variables are all different, everything formats properly. The divs do get paginated and the pagination buttons (page 1, 2, 3, etc) all work. There's just something inside imtech_pager.js that stops the rest of my code from working as it should.
Again:
Toggling some posts does not result in repopulating the paginated pages. (Hiding 3 of 5 posts results in leaving 2 posts on the page instead of bringing in the next 3 posts for a total of 5 posts on the page).
I think the issue is probably that the elements are being added and removed from the DOM which is then making them lose their handlers. You should be able to just delegate the events.
Since you are using 1.7, I believe the syntax would be:
$(document).on("click", ".dislike", function(){
instead of
$('.dislike').on('click', function() {
This is the equivilent to live pre-1.7. You can refine the delegation for better performance by replacing document with a more specific selector which is the parent of all of the elements you are trying to attach the handler to, but which is not being added and removed.
Hi I'm very new to javascript and Jquery. I found the Jcarousel plugin recently and I've tried several of the examples on sorgalla, but can't seem to figure it out.
What i want is to populate the carousel with images(links) from a database, the selection of images i want to display are based on 2 date parameters i get from a jqueryui slider. My idea was to do a ajax request with the "from" and "to" date parameters to a python script which returns the image links in JSON format. But my problem is that when I select a new range of images from the slider the carousel goes bananas(displaying empty boxes or half images).
I would appreciate if someone could nudge me in the right direction here, thanks.
Here's my script:
<script type="text/javascript">
function js(){
$('#mycarousel').empty();
var start_d=$("#valueAA").val();
var end_d=$("#valueBB").val();
$.getJSON("http://www.xxx.com/zzzzzzzzz/cgi-bin/hnf.py" ,
{start_d: start_d, end_d: end_d} ,
function(data){
var encoded = $.toJSON(data);
for(var i=0; i < data.articles.length; i++) {
$('#mycarousel').append('<li><img src="' + $.evalJSON(encoded).articles[i].img + '" width="120" height="100" alt="" /></li>');
}
jQuery('#mycarousel').jcarousel({scroll: 1});
}
);
}
$(document).ready(function() {
$(function(){
$('select#valueAA, select#valueBB').selectToUISlider({
sliderOptions: {
stop: function(e,ui) {
js();
}
}
});
labels: 12
//fix color
fixToolTipColor();
});
//quick function for tooltip color match
function fixToolTipColor(){
//grab the bg color from the tooltip content - set top border of pointer to same
$('.ui-tooltip-pointer-down-inner').each(function(){
var bWidth = $('.ui-tooltip-pointer-down-inner').css('borderTopWidth');
var bColor = $(this).parents('.ui-slider-tooltip').css('backgroundColor')
$(this).css('border-top', bWidth+' solid '+bColor);
});
}
});
</script>
Found a solution:
I can't just empty my ul for some reason, but a fix is to place your ul in a wrapper and destroy that wrapper and remake the ul between each imageset. Probably not the sexiest solution but it works..
solution:
function js(){
$('#wrap').remove();
$('#container').append('<div id ="wrap"></div>');
$('#wrap').append('<ul id="mycarousel" class="jcarousel-skin-tango"></ul>');
var start_d=$("#valueAA").val();
var end_d=$("#valueBB").val();
$.getJSON("http://www.xxx.com/zzz/cgi-bin/hnf.py" ,
{start_d: start_d, end_d: end_d} ,
function(data){
var encoded = $.toJSON(data);
for(var i=0; i < data.articles.length; i++) {
$('#mycarousel').append('<li><img src="' + $.evalJSON(encoded).articles[i].img + '" width="110" height="100" alt="" /></li>');
}
jQuery('#mycarousel').jcarousel({scroll: 1});
}
);
}