So I have a simple PHP share button fo facebook and I want to add pixel event code in it that tracks the button when it's clicked
Here is the code for the button:
<div class="row" style="margin-top: 10px;">
<div class="col-md-5 col-md-offset-1">
<a target="_blank" class="btn btn-block btn-social c-btn-square c-btn-uppercase btn-md btn-facebook" href="{{$facebook_link}}">
<i class="fab fa-facebook"></i> Share on Facebook
Where should I exactly put the code for the event which is:
<script>
fbq('track', 'SubmitApplication');
</script>
Welcome. You must handle event when button click.
Try this:
<script type="text/javascript">
var facebookButton = document.querySelector('a.btn-facebook');
facebookButton.addEventListener("click", () => {
fbq('track', 'SubmitApplication');
});
</script>
Related
I have a simple form
HTML
<form action="#Url.Action("Controler", "FES")" method="POST">
<button name="upload" type="submit" id="upload-fes-btn-control" class="btn btn-danger">Contrôler</button>
</form>
The request time when submitting may sometimes be long (more than 30s, bc of business logic on big file...)
I want to change the value of the button after user has clicked on it. The objective is to display a font-awesome loader instead of the initial text (<i class="fas fa-spinner fa-pulse"></i>). There is the jQuery snippet I use to achieve this...
jQuery
$("#upload-fes-btn-control").click(function () {
$(this).attr('value', '<i class="fas fa-spinner fa-pulse"></i>');
});
I'm facing an error due to this code in my Controller
A potentially dangerous Request.Form value was detected from the client
Controller
if (Request.Form["upload"] != null)
{
//Logic with ViewModel...
}
How can I change the text displayed in the button from text to fa image loader without throwing that error ?
use this code $(this).html('<i class="fa fa-spinner fa-pulse"></i>');
$("#upload-fes-btn-control").click(function (e) {
e.preventDefault();
$(this).html('<i class="fa fa-spinner fa-pulse"></i>');
//example after page load
setTimeout(function(){
$("#upload-fes-btn-control").html('');
$("#upload-fes-btn-control").html('Contrôler');
}, 5000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<form action="#Url.Action("Controler", "FES")" method="POST">
<button name="upload" type="submit" id="upload-fes-btn-control" class="btn btn-danger">Contrôler</button>
</form>
I know there a lot of things related to this stuff but I find it quite hard to implement
My current result is this. I added some details to the code to add to the DB then as I pressed the next button, it goes to another same page but its all about update and its not going anywhere to the page that I linked it to.
So far, this is what I've made to link the button to another page
if(!employeeExist){
$("#nextBtn").html("Next");
$("#nextBtn").removeClass("btn-success")
$("#nextBtn").addClass("btn-primary")
$('#a').hide();
$('#c').hide();
$('#d').hide();
$("#updateBtn").hide();
}else{
$("#updateBtn").html("Update");
$("#updateBtn").removeClass("btn-primary")
$("#updateBtn").addClass("btn-success")
$('#a').show();
$('#c').show();
$('#d').show();
$("#nextBtn").hide();
}
$("#updateBtn").click(updateCompanyInfo);
$("#nextBtn").click(updateCompanyInfo);
and this
if(employeeExist) {
$alertDiv("success","Company related information was successfully updated.",true);
} else {
$alertDiv("success","Company related information was successfully added.",true);
var fam = "${pageContext.request.contextPath}/employee/details/family?id="+empID;
window.location.replace(fam);
}
Here is the redirect part of my code
function Redirect() {
window.location="${pageContext.request.contextPath}/employee/details/family?id="+empID;
}
and the HTML part
<!-- Update -->
<div class="col-md-2 col-md-offset-8">
<br>
<div class="input-group">
<span class="input-group-btn">
<button id = "updateBtn" class="btn btn-success marginBtn">Update</button>
</span>
</div>
<br>
</div>
<!-- Next -->
<div class="col-md-2 col-md-offset-7">
<br>
<div class="input-group">
<span class="input-group-btn">
<button id = "nextBtn" class="btn btn-primary marginBtn" onclick="Redirect();">Next</button>
</span>
</div>
<br>
</div>
So how can I achieve this? Am I lacking something in the code or am I doing it the wrong way? Help me please!
I have to open a popup window when I click on a button, it is displaying but taking time. How can I overcome this problem so that it takes less time? I am calling a function when I click on the save button.
Save
Cancel
Delete
This is the code for the save button. When I click on this button the lessonsave function will be called, although it is taking longer than I would like it to.
<div class="col-sm-12 form-group fall-footer" style="margin-top: 35px;">
<sapn class="pull-right">
<button type="button" id="refresh" class="btn btn-save" onclick="LessonSave()">Save</button>
<button type="button" class="btn btn-cancel" id="historyLesson_Cancel">Cancel</button>
<sec:authorize access="#mySecurityService.hasPermissions('delete','46')">
<button type="button" id="h_lessondelete" class="btn btn-save" onclick="HistoryLessonDelete()">Delete</button>
</sec:authorize>
</sapn>
</div>
<script>
function LessonSave() {
$("#h_cmts").val("");
$("#h_curriculumtypemodel").modal("show");
}
</script>
I am trying to add some buttons to the GeoNetwork 3 MapViewer. Unfortunately I'm new to AngularJS, which GN3 is written in. So what I've done is editing the html-template that the 'gnMainViewer' directive is using.
ViewerDirectve.js:
module.directive('gnMainViewer', [
'gnMap',
function(gnMap) {
return {
restrict: 'A',
replace: true,
scope: true,
templateUrl: '../../catalog/components/viewer/' +
'partials/mainviewer.html',
[...]
}]);
In this template I can find the buttons that are shown in the MapView.
mainviewer.html:
<div class="wrapper" data-ng-controller="gnViewerController">
<div data-gn-alert-manager=""></div>
<div id="map" ngeo-map="map" class="map"></div>
<div gn-gfi="" map="map"></div>
<div gn-localisation-input map="map"></div>
<!--Top right buttons - Tools-->
<div class="tools tools-right" gi-btn-group gnv-close-panel data-ng-controller="toolsController">
<button class="btn btn-default" ng-model="activeTools.addLayers" type="submit"
rel="#addLayers" gi-btn gnv-tools-btn>
<span class="fa fa-plus"></span>
<span role="tooltip" data-translate="">addLayers</span>
</button>
<button class="btn btn-default" ng-model="activeTools.layers" type="submit"
rel="#layers" gi-btn gnv-tools-btn>
<span class="fa fa-tasks"></span>
<span role="tooltip" data-translate="">Layers</span>
</button>
[...]
</div>
</div>
So I've added a button let's say:
<button class="btn btn-default" ng-model="" type="submit"
rel="#" gi-btn gnv-tools-btn>
<span class="fa fa-beer"></span>
<span role="tooltip">NewButton</span>
</button>
to the template.
Then I've saved my changed and refreshed the MapView-Page on my server. But a new button will not be displayed. Also, changing the comment "Top right buttons" to something else will not make any changes to the displayed MapView-Page.
Even restarting the server won't change anything.
Could somebody explain me why AngularJS reacts like this? Any Ideas?
Turned out I had to run the page in debug mode e.g. http://localhost:8080/geonetwork/srv/ger/catalog.search?debug#/map
to force to load all AngularJS files seperately and without cache.
This the HTML Markup i used to Display Tracks . i Have some Jquery to accomplish some of requirements . But Most importantly i cant figure out a way to Play / Pause Multiple instance audio using Jquery .i have asked this every same question before . as you might notice from my code im Jquery Noob . Tried hours of googling . But no Luck
<div class="track-item">
<span>Track Uploaded by - DJ Hardwell</span>
<div class="track-default-options">
<audio src="http://195.154.217.103:8117/;mp3"></audio>
<div class="track-total-time">0.00 | 48.37</div>
<div class="track-seek-bar"></div>
<button class="play btn btn-xs btn-primary"><i class="fa fa-play"></i> Play</button>
<button id="pause" class="btn btn-xs btn-success"><i class="fa fa-download"></i> Download</button>
<button class="btn btn-xs btn-danger share"><i class="fa fa-share"></i> Share</button>
<div class="track-uploaded-date">
<p>Uploaded on 3 days ago</p>
</div>
</div>
<div class="track-share-options" style="display: none">
<button type="button" class="btn btn-xs btn-danger share-close"><i class="fa fa-minus"></i>
Show Less
</button>
<br/>
<button class="btn btn-xs btn-facebook"><i class="fa fa-facebook"></i> | Facebook</button>
<button class="btn btn-xs btn-twitter"><i class="fa fa-twitter"></i> | Twitter</button>
<button class="btn btn-xs btn-google-plus"><i class="fa fa-google-plus"></i> | Google+
</button>
</div>
</div>
This is Jquery code that i used to change some button states and to hide and show share buttons
// ****************************** //
// Track - Play / Share //
// ****************************** //
// Share Button
$(document).on('click' , '.share' , function(event){
event.preventDefault();
$(this).closest('.track-default-options').fadeOut('slow' , function(){
$(this).next().closest('.track-share-options').fadeIn('slow');
});
});
$(document).on('click' , '.share-close' , function(event) {
event.preventDefault();
$(this).closest('.track-share-options').fadeOut('slow' , function(){
$(this).prev().closest('.track-default-options').fadeIn('slow');
});
});
// Play Button
$(document).on('click' , '.play' , function(event){
event.preventDefault();
$(this).html('<i class="fa fa-pause"></i> Pause');
$(this).addClass('playing');
$(this).prev('.track-seek-bar').addClass('track-seek-bar-active');
$(this).prevAll('.track-total-time').css('visibility' , 'visible');
});
// Pause Button
$(document).on('click' , '.playing' , function(){
$(this).html('<i class="fa fa-play"></i> Play');
$(this).removeClass('playing');
$(this).prev('.track-seek-bar').removeClass('track-seek-bar-active');
$(this).prevAll('.track-total-time').removeAttr('style');
});
Right Now Everything Just works fine . Buttons hide and shows etc . What i really need is to only play one audio at a time .
As an Example if an audio is already playing in the browser , if the user chooses to play another track while previously selected music is still playing it need to be paused and start the new selected audio immediately.
This is Previously asked Question on the same topic . But it's Very different now .My Previous Question . I have Tried get it working the with new HTML .No luck with it though. That why i'm here .
i also have a FIDDLE Setup. you can really see what's my actual requirement and what i cannot understand to do.
Since i guess i have written a horrible Jquery Code , if you can and have time point me out an better way to do it
Please Suggest me an answer for this . ill really appreciate it ! . Thanks
This trick do the job, but you will need to change your code to display play/pause on .play or .pause
$('audio').on('play', function(){
$('audio').not(this).trigger('pause')
})