angularjs fb like don't render value - facebook

I've a strange behavior with this code
.controller('ContestantCreateCtrl',function($scope,CONFIG) {
$scope.shareurl = 'https:'+CONFIG.site.absoluteUrl+'/';
})
.directive('btFbParse', function () {
return {
restrict:'A',
link:function (scope, element, attrs) {
console.log(scope.shareurl);//it works
if(scope.facebookIsReady){
FB.XFBML.parse();
}
}
};
})
if in the view I set up
<div class="fb-like" data-href="https://my-dev.me/public/" data-width="120" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="true" data-send="false"></div>
<div bt-fb-parse></div>
it works
but if in the view I set up
<div class="fb-like" data-href="{{shareurl}}" data-width="120" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="true" data-send="false"></div>
<div bt-fb-parse></div>
I get form facebook api
"/plugins/error/api?code=100&message=The+href+URL+must+be+absolute&hash=AQDVWDuDsG3_aVQh
I tried also with
scope.$apply()
in the directive the fb like works but angular show me
a Error: $digest already in progress
I don't know which way to turn ....
Update
with
_.defer(function(){
scope.$apply();
FB.XFBML.parse();
});
it works :)
thanks to https://stackoverflow.com/a/17958847/356380

Related

How to close Materialize modal only when user clicks on close btn?

I want to close modal ONLY when user clicks on close button. I know, how to do this in Bootstrap. Could you help with Materialize?
You can customize the behavior of Materialize modal using Options which can be found Here at the bottom of the page
change option dismissible to false (which by default in modal plugin is true) so modal only get closed when click on close button.
$('.modalselector').leanModal({
dismissible: false
);
Example Modal
$(document).ready(function(){
$('.modal-trigger').leanModal({
dismissible: false
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Close
</div>
</div>
You can close the modal with the following code:
$('#modalname').closeModal(); or $('#modalname').modal('close');
$(document).ready(function(){
$('#modal1').openModal({
dismissible:false
});
});
Try This It worked for me
Below code worked for me with materialize.css 1.0.0
$(document).ready(function(){
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems,{
dismissible:false
});
var singleModalElem = document.querySelector('#login-page');
var instance = M.Modal.getInstance(singleModalElem);
instance.open();
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div id="login-page" class="modal">
<form class="login-form">
<div class="row">
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input class="validate" id="nick_name" type="text">
<label for="nick_name" data-error="wrong" data-success="right">Nick Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
Entra
</div>
</div>
</form>
</div>
None of the methods worked for me. However, this did,
$('#modal1').closeModal({ dismissible: true});
The leanModal(), openModal(), and closeModal() all failed for me. Things must have changed since then. Instead:
$("#modal1").modal({
dismissible: false
});
or even just calling the modal a second time:
$("#modal1").modal();
Just set the data-backdrop property to static.
If you only want to insert button for closing the modal (sometime CSS conflict won't allow the modal to close) use this:
<span
class="modal-action modal-close"
style="float:right; font-size:30px;"
onclick="$('#myModal2').closeModal();"
>
X
</span>
Came across the need to do something similar and thought I'll share this for others who are looking for it too. I'm using Materialize 1.0.0 and none of the suggestions above worked for me. Basically, we want to be able to have control over the modal's 'dismissible' property and change it whenever we want, from wherever we want and it shouldn't matter if it is before or after the modal is open. The most elegant way I found was to do it this way. This will control the modal's behavior from disappearing when a user clicks outside of its area.
var m = M.Modal.getInstance(modal);
m.options.dismissible = true|false;
where the modal param is your modal div.
Hope that helps.
Pure JavaScript, this is the way.
The span element that will close the modal.
var span = document.getElementsByClassName("close")[0];
When you want to click the X to close the modal you can use this.
span.onclick = function() {
modal.style.display = "none";
}
If you are clicking outside of modal this will close the modal.
window.onclick = function(event) {
if(event.target == modal) {
modal.style.display = "none";
}
}
$(".modal4").addClass('modal-close');
Where modal4 is class of modal you want to close
In Vue Js, By using materialize-css package
Install package npm i materialize-css
import the package import M from 'materialize-css';
Attach the code below in your eventListener such as click
methods: {
closeMaterializeModal(){
var elem = document.getElementById("modal4");
var instance = M.Modal.getInstance(elem);
instance.close();
}
}
Below code worked for me.
$('#modal1').closeModal();
Reference: materializecss

Jquery .on 'click' event doesn't work in a partial view rendered inside modal popup

I have a main view that has a button "AddSkillBtn" which on clicked shows a modal popup witha partial view inside. Works fine so far. I have a link inside the partial view "addAnotherSkill" which on clicked has to show an alert. However, the click event doesn't get fired at all. Please find below the code snippet - Any help much appreciated!!
**jQuery:**
$('#AddSkillBtn').click(function (e) {
$.ajax({
url: '#Url.Action("MyAction", "MyController")',
type: "POST"
success: function (result) {
$("#AddContainer").html(result);
$('#AddModal').modal('show');
}
});
});
$("#addAnotherSkill").on('click', function () {
alert("Hi!!");
});
**Main View**
<p><a id="AddSkillBtn" href="javascript:void(0)" class="btn btn-rounded btn-primary">Add new Skill</a></p>
<div class="modal modal-wide fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="AddLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="AddLabel">Add New Skills</h4>
</div>
<div class="modal-body">
<div id="AddContainer">
</div>
</div>
</div>
</div>
</div>
**Partial View rendered in the modal popup has**
<a id="addAnotherSkill" href="javascript:void(0)"><i class="fa fa-plus"></i> Add Another</a> //clicking on this link does nothing
Your element with id="addAnotherSkill" is being added to DOM dynamically. In order to use event delegation using the .on() function, it needs to be
$(document).on('click', '#addAnotherSkill', function (e) {
e.preventDefault();
...
}
Note you should change document to the closest ancestor of the element which exists when the page is first loaded.
Note also the use of e.preventDefault() which means that you can just use <a id="addAnotherSkill" href="#"> (my preference but I have seen arguments for and against - for example the answers here)

Bootstrap Modal closes on submit

I've been searching for a while for a solution to this issue, but nothing seems to be working... I have a form within a modal from bootstrap, and I need to perform validation on the form before submitting. On submission it just goes to another page, simple.
But when the validation fails, what I want is for the modal to not close, the form will not submit (already in place), and then I have some jquery-ui effects on the form fields. I've tried things like:
$('#modalDiv').modal('show');
when validation returns false, or adding that to that modal's hide.bs.modal event, but it just wigs out, goes away, and leaves the backdrop in place...?
Could there be some kind of conflict between bootstrap and jquery-ui? I'm surprised there isn't a simple way of disabling modal close on form submit, but I guess I'm not the first one to get into that debate lol. Any suggestions??
I have been searching for a solution for a long time. I came up with the following "solution" I'd rather call a workaround. I removed the html form element and the used ajax for the validation.
HTML Code:
<div class="modal fade" id="addCategoryModal" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Add Category</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="categoryName">Category Name*</label>
<input type="text" class="form-control" id="categoryName" placeholder="Category Name">
</div>
<div>
<button class="submit" id="addCategoryBtn">Submit</button>
</div>
</div>
<div class="modal-footer">
<div id="message-warning" style="display: none;"></div>
<div id="message-success" style="display: none;"></div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
AJAX Code:
$( document ).ready(function() {
/* Add Category*/
$('#addCategoryBtn').click(function() {
var categoryName = $('#categoryName').val();
if (categoryName == "") {
$('#message-warning').html("Please add Category");
$('#message-warning').fadeIn();
}
else{
var data = 'categoryName=' + categoryName;
$.ajax({
type: "POST",
url: "insert.php",
data: data,
success: function(msg) {
// Category was added
if (msg == 'OK') {
$('#message-warning').hide();
$('#categoryName').val("");
$('#message-success').html("Category Added");
$('#message-success').fadeIn();
}
// There was an error
else {
$('#message-warning').html(msg);
$('#message-warning').fadeIn();
}
}
});
}
});//End Add Category
});//End Document Ready Function

angularjs socials share buttons troubles the display is only in one page

I'm going mad with a simple embedded of social buttons.
Put it in this way I've got two states home and blog
with this code
home
<div id="socials-bar" class=" clearfix">
<ul class="pull-right">
<li>
<div class="fb-like" data-href="http://mydomain.com" data-layout="standard" data-action="like" data-show-faces="false" data-share="true"></div>
</li>
<li>
Tweet
</li>
<li>
<div class="g-plusone" data-size="small" data-annotation="inline" data-width="120" data-href="http://mydomain.it"></div>
</li>
</ul>
</div>
//other html
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
<script>
window.___gcfg = {lang: 'it'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
blog
<div class="clearfix">
<ul class="article-socials pull-right">
<li>
<div class="fb-like" data-href="http://mydomain.it/blog/{{article.id}}/{{article.slug}}" data-layout="standard" data-action="like" data-show-faces="false" data-share="true"></div>
</li>
<li>
Tweet
</li>
<li>
<div class="g-plusone" data-size="small" data-annotation="inline" data-width="120" data-href="http://mydomain.it/blog/{{article.id}}/{{article.slug}}"></div>
</li>
</ul>
</div>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
<script>
window.___gcfg = {lang: 'it'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
The problem is that the I see them only in the home
page if I get rid off of them in home I can see them in the blog state
Do you know what could be the problem ?
UPDATE: I've updated the below directives and registered them on bower with the package name 'angulike', for full details and a working demo go to http://jasonwatmore.com/post/2014/08/01/AngularJS-directives-for-social-sharing-buttons-Facebook-Like-GooglePlus-Twitter-and-Pinterest.aspx
The problem is that the social buttons only get initialized on page load by default, so in an angularjs app you need to re-initialize the buttons yourself when the view changes. I got them working by creating a directive for each, below is the code:
Google Plus Button Directive
app.directive('googlePlus', ['$window', function ($window) {
return {
restrict: 'A',
template: '<div class="g-plusone" data-size="medium"></div>',
link: function (scope, element, attrs) {
scope.$watch(function () { return !!$window.gapi; },
function (gapiIsReady) {
if (gapiIsReady) {
$window.gapi.plusone.go(element.parent()[0]);
}
});
}
};
}]);
Tweet Button Directive
app.directive('tweet', ['$window', function ($window) {
return {
restrict: 'A',
template: 'Tweet',
link: function (scope, element, attrs) {
scope.$watch(function () { return !!$window.twttr; },
function (twttrIsReady) {
if (twttrIsReady) {
$window.twttr.widgets.load(element.parent()[0]);
}
});
}
};
}]);
Facebook Like Button Directive
app.directive('fbLike', ['$window', function ($window) {
return {
restrict: 'A',
template: '<div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>',
link: function (scope, element, attrs) {
scope.$watch(function () { return !!$window.FB; },
function (fbIsReady) {
if (fbIsReady) {
$window.FB.XFBML.parse(element.parent()[0]);
}
});
}
};
}]);
HTML to use the directives
<div data-fb-like=""></div>
<div data-tweet=""></div>
<div data-google-plus=""></div>
If I understand, probably you should remove the script in blog state template.
Anyway, I can share how I do in my sample project:
index.html
directive for social buttons
template for
social buttons
basically in index there are scripts for social buttons available for all states

rendering fb-like buttons with knockoutjs

My page contains list of posts, each post has its own like button. The posts are JSON-ly retrieved from the server. Each like should have ofcourse its own href, which is part of the post json object. So naturally I'd expect this to work (assuming "fb_data"
is json object {fb_data: {href: my_post_path}):
(html fb-like widget code, with simple knockoutjs data-bind)
<li class="fb">
<div class="fb-like" data-send="false" data-layout="button_count" data-width="85" ata-show-faces="false" data-bind="attr: {href: fb_data.href}"></div>
<span class="like-container"><span class="likebox" title=""></span> Friends<br/>Like this!</span>
</li>
so that didn't work.
I tried another approach and implemented custom binding for that purpose:
(html)
<li class="fb">
<div class="fb-like" data-send="false" data-layout="button_count" data-width="85" data-show-faces="false" data-bind="render_like: fb_data"></div>
<span class="like-container"><span class="likebox" title=""></ span> Friends<br/>Like this!</span>
</li>
(js)
ko.bindingHandlers.render_like = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
var fb = valueAccessor();
$(element).attr(fb);
FB.XFBML.parse(element);
}
};
ok, that didn't work either. I turn to the hard, ugly, not elegant way and had this:
(html)
<li class="fb" data-bind="render_like: fb_data"></li>
(js)
ko.bindingHandlers.render_like = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
var fb = valueAccessor();
var fb_like_str = '<div class="fb-like" data-send="false" data layout="button_count" data-width="85" data-show-faces="false"' href="' + fb.href + '" </div>';
fb_like_str += '<span class="like-container"><span class="likebox" title=""></span> Friends<br/>Like this!</span>';
$(element).html(fb_like_str);
FB.XFBML.parse(element);
}
};
that one worked, but it doesn't feel like the knockout spirit ... what
is the problem with the first 2??
OK, I think I've just figured out what the problem was. Initiating my viewModel should come after FB.init, like that -
window.fbAsyncInit = function() {
FB.init({appId: 172535899504455, status: true, cookie: true, xfbml: true});
var myVM = new myViewModel(rec_data, $("#myselector").get(0));
}
now the nice easy first way is working!