Jquery multiple ID selector doesn't work - jquery-selectors

I tried this script but didn't work for the second given ID;
The both element are inside an iframe
<script>
jQuery(document).ready(function(){
$("#subscribe_newsletter, #close_bar").each(function(){
$(this).click(function(){
alert("with each");
$.cookie( "nl_cookie" , 1 , { path: "/" } );
$("#footer_accept_newsletter").hide("slow");
});
});
cookieValue = $.cookie("nl_cookie" , { path: "/" });
if(!cookieValue){
$("#footer_accept_newsletter").removeClass("hidden");
}
});
</script>
I tried also the following code but no success;
$("#subscribe_newsletter, #close_bar").click(function(){
$.cookie( "nl_cookie" , 1 , { path: "/" } );
$("#footer_accept_newsletter").hide("slow");
});

It work for me
$(document).ready(function(){
$("#segement1, #segement2, #segement3").click(function(){
alert($(this).attr("id"));
});
});
Check it FIDDLE

Related

Problem with facebook login from the facebook application

I also encounter a problem with a project, login with facebook works on absolutely any browser, even those on mobile, but in the integrated browser in the facebook application it doesn't work, it just doesn't connect me, it sends me back to login ... can you help me with a piece of advice please? Thank you.
I used this script:
<script>
(function(){
var body = $('body');
var socialLoginErrorElm = $('#loginError');
var loginModal = $('#loginModal');
body.on('social-login:error', function(e, error) {
socialLoginErrorElm.removeClass('hide').html('<div class="alert alert-danger">' + error + '</div>');
loginModal.removeClass("logging-in");
});
window.loginWithFb = function(){
FB.login(function(response) {
if (response.authResponse) {
if(response.authResponse.grantedScopes.split(',').indexOf('email') < 0) {
//If email permission not granted
body.trigger('social-login:error', (__('fbNoEmailError')));
return;
}
FB.api('/me', {fields: 'id,name,email'}, function(response) {
console.log('Logged in as ' + response.name + '.');
//Dual check email - needed to if check if the user has a verified email ID
if(!response.email) {
body.trigger('social-login:error', (__('fbNoEmailError')));
return;
}
body.trigger('loggedIn:fb');
});
} else {
body.trigger('social-login:error', (__('fbPermissionError')));
}
}, {
scope: 'email',
auth_type: 'rerequest',
'return_scopes': true
});
}
var body = $('body');
body.on('click', '[data-action="loginWithFB"]', function(e){
loginWithFb();
e.preventDefault();
});
body.on('loggedIn', function(){
loginModal.modal('hide');
});
body.on('loggedIn:fb', function(){
if(!User.isLoggedIn()) {
$.get(BASE_PATH + '/login/fb').success(function(response){
User.setData(response.user);
}).fail(function(jqXHR, textStatus, errorThrown){
body.trigger('social-login:error', jqXHR.responseText);
}).always(function(){
loginModal.removeClass("logging-in");
});
}
});
body.on('prompt-login', function(e, message){
loginModal.find('.login-prompt-message').html(message);
loginModal.modal('show');
});
})();
function showNewPointsAlert(addedPoints) {
var alertOptions = {
title: "+"+ addedPoints +" " + __('points'),
text: __('earnedNewPointsMessage'),
imageUrl: "{{LeaderboardHelpers::getPointsIcon()}}",
confirmButtonText: __('earnedNewPointsOkayBtnText'),
allowEscapeKey: true,
allowOutsideClick: true,
customClass: 'new-points-alert'
}
#if(!empty($mainBtnColor))
alertOptions.confirmButtonColor = '{{{$mainBtnColor}}}';
#endif
swal(alertOptions);
}
$('body').on('user-activity-recorded', function() {
$.get('{{route('getMyPoints')}}').success(function(response) {
if(response && response.points) {
var oldPoints = parseInt(User.data.points);
var newPoints = parseInt(response.points);
User.data.points = newPoints;
User.setData(User.data);
if(oldPoints != newPoints) {
var animateClass = 'animated bounceIn';
$('#headerUserMenu').removeClass(animateClass).addClass(animateClass);
var addedPoints = parseInt(newPoints) - parseInt(oldPoints);
#if(MyConfig::isTrue('leaderboard.showNewPointsAlert'))
showNewPointsAlert(addedPoints);
#endif
}
}
}).fail(function() {
});
});
</script>

populate select with datajson using React js

I'm trying to populate a select using React js, I'm using the example given on the react js docs(https://facebook.github.io/react/tips/initial-ajax.html) , which uses jquery to manage the ajax calling, I'm not able to make it work, so far i have this:
here the codepen : http://codepen.io/parlop/pen/jrXOWB
//json file called from source : [{"companycase_id":"CTSPROD","name":"CTS-Production"},{"companyc ase_id":"CTSTESTING","name":"CTS-Testing"}]
//using jquery to make a ajax call
var App = React.createClass({
getInitialState: function() {
return {
opts:[]
};
},
componentDidMount: function() {
var source="https://api.myjson.com/bins/3dbn8";
this.serverRequest = $.get(source, function (result) {
var arrTen = result[''];
for (var k = 0; k < ten.length; k++) {
arrTen.push(<option key={opts[k]} value={ten[k].companycase_id}> {ten[k].name} </option>);
}
}.bind(this));
},
componentWillUnmount: function() {
this.serverRequest.abort();
},
render: function() {
return (
<div>
<select id='select1'>
{this.state.opts}
</select>
</div>
);
}
});
ReactDOM.render(
<App />,
document.getElementById('root')
);
html
<div id="root"></div>
any idea how to make it works, thanks.
You need to call setState to actually update your view. Here's a workable version.
//json file called from source : [{"companycase_id":"CTSPROD","name":"CTS-Production"},{"companyc ase_id":"CTSTESTING","name":"CTS-Testing"}]
//using jquery to make a ajax call
var App = React.createClass({
getInitialState: function() {
return {
opts:[]
};
},
componentDidMount: function() {
var source="https://api.myjson.com/bins/3dbn8";
this.serverRequest = $.get(source, function (result) {
var arrTen = [];
for (var k = 0; k < result.length; k++) {
arrTen.push(<option key={result[k].companycase_id} value={result[k].companycase_id}> {result[k].name} </option>);
}
this.setState({
opts: arrTen
});
}.bind(this));
},
componentWillUnmount: function() {
this.serverRequest.abort();
},
render: function() {
return (
<div>
<select id='select1'>
{this.state.opts}
</select>
</div>
);
}
});
ReactDOM.render(
<App />,
document.getElementById('root')
);

fancybox.close() and open another fancybox

Is the first time that I'am using this forum.
My problem is that I want to close a fancybox to open another fancybox. And for that I am using in my code the parent.$.fancybox.close() to close the Fancybox Iframe Window. When the user click in the Add to cart button. The fancybox close and my program in js STOP running. Example:
$(x).click(function(){
parent.$.fancybox.close();
idCombination = $('#idCombination').val();
$.ajax({
type: "POST",
url: baseUri + '?rand=' + new Date().getTime(),
data: 'controller=cart&add=1&ajax=true&qty=' + $('#quantity_wanted').val() + '&id_product=' + id_product + '&token=' + static_token + ( (parseInt(idCombination) && idCombination != null) ? '&ipa=' + parseInt(idCombination): ''),
beforeSend: function() {
$('#loading_img').show();
},
success: function(q) {
$.ajax({
type: "POST",
url: path + "ajaxcart/pop_up.php",data:'referer='+document.referrer,
beforeSend: function() {
$(".shop").show();
$('#loading_img').show();
},
success: function(res) {
$(".shop").show();
$("#shopping").show();
$('#loading_img').hide();
$('#shopping').html(res);
}
});
}
});
$("html, body").animate({scrollTop: 300}, "slow");
return false;
});

Single Post subscription not working in my meteor code

I want to display only single elements based on the ID passed. I am using the subscribe and publish method of meteor for the same, also FlowRouter for Routing. When i try to get the data using findOne and pass the Id, it does't return any data, but when i do find({}), it gets all the data and displays it, not sure why findOne is not working..
Note : I am trying to fetch record based on the Object ID(_id) provided by MongoDB.
posts = Mongo.collection("allPosts");
<Template name="stdSingleView">
{{#if Template.subscriptionsReady}}
{{#with studenthistory}}
{{id}} - {{name}}
{{/with}}
{{else}}
Loading....
{{/if}}
</Template>
Template.stdSingleView.onCreated(function(){
var self = this;
self.autorun(function(){
var Id = FlowRouter.getParam('id');
self.subscribe('singlePost', Id);
});
});
Template.stdSingleView.helpers({
studenthistory: function(){
var id= FlowRouter.getParam('id');
return posts.findOne({_id: id});
}
});
if (Meteor.isServer) {
Meteor.publish("allposts", function() {
return posts.find({});
});
Meteor.publish('singlePost', function(id) {
check(id, String);
return posts.find({_id: id});
});
}
pages.route( '/:id', {
name: 'singleView',
action: function( params ) {
BlazeLayout.render('stdSingleView');
}
});
When you do findOne using _id, Please wrap it to the New Mongo.ObjectID and then pass it.
Try this code :
Meteor.publish('singleStudent', function(id) {
check(id, String);
return attendanceRegCol.find({"_id": new Mongo.ObjectID(id)});
});
Template.studentSingleView.helpers({
studenthistory: function(){
var id= FlowRouter.getParam('id');
return attendanceRegCol.findOne({"_id": new Mongo.ObjectID(id)});
}
});
find will return a cursor, which contains only one document. You need to loop through that in order to get the data, or You change the helper into findOne
Template.stdSingleView.helpers({
studenthistory: function(){
var id= FlowRouter.getParam('id');
return posts.findOne({_id: id});
}
});

bootstrap typeahead url/redirect

$(function(){
var orthoObjs = {};
var orthoNames = [];
var throttledRequest = _.debounce(function(query, process){
$.ajax({
url: 'json/ortho4.json'
,cache: false
,success: function(data){
orthoObjs = {};
orthoNames = [];
_.each( data, function(item, ix, list){
orthoNames.push( item.searchPhr );
orthoObjs[ item.searchPhr ] = item;
});
process( orthoNames );
}
});
}, 300);
$(".typeahead").typeahead({
source: function ( query, process ) {
throttledRequest( query, process );
}
,updater: function (item) {
var url = "orthoObjs[item.searchUrl]";
window.location = url;
Whats the best way to get the redirect to work? I have seen similar questions, but can't get this to work. Documentation on typeahead isn't great. I am using underscore.js for the each function. Just want a simple search query that redirects when the user selects.
I actually got this to work. I got a little help... but here it is. There is the JSON file..
[
{ "id":1, "searchUrl":"invisalign.html", "name":"invisalign" }
,{ "id":2, "searchUrl":"invisalign.html", "name":"invisalign teen" }
,{ "id":3, "searchUrl":"clearbraces.html", "name":"clear braces" }
]
And the HTML code....
Lots of good stuff here.. http://fusiongrokker.com/post/heavily-customizing-a-bootstrap-typeahead
And the search code..
<form method="post" id="myForm" class="navbar-search pull-left">
<input
type="text"
class="search-query typeahead"
placeholder="Search Our Website"
autocomplete="off"
data-provide="typeahead"
/>
<i class="fa-icon-search icon-black"></i>
</form> </li>
$(function(){
var bondObjs = {};
var bondNames = [];
$(".typeahead").typeahead({
source: function ( query, process ) {
//get the data to populate the typeahead (plus an id value)
$.ajax({
url: '/json/bonds.json'
,cache: false
,success: function(data){
bondObjs = {};
bondNames = [];
_.each( data, function(item, ix, list){
bondNames.push( item.name );
bondObjs[ item.name ] = item.searchUrl;
});
process( bondNames );
}
});
}
, updater: function ( selectedName ) {
window.location.href =bondObjs[ selectedName ];
}
});
});
</script>