What I have is a 'random quote generator'. As the name suggests, it generates random quotes on button click. In this so called app of mine, I have a button that is supposed to post the 'generated quote'on the facebook wall. The same thing works smoothly in case of my twitter button whilst I am not able to do so in case of facebook.
<script>
$(document).ready(function(){
//alert("hi");
$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=40",function(json){
//alert("hello");
var colour_arr = ["YellowGreen","Turquoise","Tomato","Teal","SteelBlue","SlateBlue","SeaGreen","SandyBrown","Red","Purple","PaleVioletRed","PaleGreen","Orange","MediumVioletRed","MediumTurquoise","Magenta","LimeGreen","LightSalmon","Khaki","Gold","DodgerBlue","DeepPink","DarkOrange","Crimson","Aquamarine"];
var colour_num = 0;
var num = 0;
var html_quote = "";
/*json.forEach(function(val){
html += "<h3 id='quote'>" + val.content + "</h3>";
});*/
var html_author = "";
html_quote = "<h3 id='quote' class='colour'><i class='fa fa-quote-left' aria-hidden='true'></i>" + json[num].content + "</h3>";
html_author = "<h5 id='author' class='colour'> - " + json[num].title + "</h5>";
$("#quote-column").html(html_quote);
$("#author-column").html(html_author);
$(".colour").css("color",colour_arr[colour_num]);
$(".bg-colour").css("background-color",colour_arr[colour_num]);
$("#new-quote-btn").on("click",function(){
//alert("hello");
colour_num++;
num++;
//alert(num);
html_quote = "<h3 id='quote' class='colour'><i class='fa fa-quote-left' aria-hidden='true'></i>" + json[num].content + "</h3>";
html_author = "<h5 id='author' class='colour'> - " + json[num].title + "</h5>";
$("#quote-column").html(html_quote);
$("#author-column").html(html_author);
$(".my-btn").css("color","white");
$(".colour").css("color",colour_arr[colour_num]);
$(".bg-colour").css("background-color",colour_arr[colour_num]);
});
var randomQuote = json[num].content.replace("<p>","");
randomQuote = randomQuote.replace("</p>","");
$("#twitter-btn").on("click",function(){
//alert(json[num].content);
//var randomQuote = json[num].content.replace("<p>","");
//randomQuote = randomQuote.replace("</p>","");
//alert(randomQuote);
window.open("https://twitter.com/intent/tweet?text=" + randomQuote,"_blank");
//location.href = "https://twitter.com/intent/tweet?text=" + json[num].content;
//$(this).attr("href","https://twitter.com/intent/tweet?text=" + json[num].content);
});
$("#fb-btn").on("click",function(){
window.open("https://www.facebook.com/sharer/sharer.php?u=https://codepen.io/iamrkcheers/pen/gRjoeZ","_blank");
});
});
});
</script>
.box {
background-color : white;
border-radius : 5px;
}
.my-btn {
color : white;
}
#twitter-btn, #fb-btn {
width : 40px;
}
<html>
<body class="bg-colour">
<div class="container-fluid">
<div class="row" id="main-row">
<div class="col-md-12 col-sm-12 col-xs-12" id="main-column">
<br>
<br>
<br>
<br>
<br>
<br>
<div class="row" id="row-containing-block">
<div class="col-md-offset-4 col-md-4 col-sm-offset-3 col-sm-6 col-xs-offset-1 col-xs-10 box" id="column-containing-block">
<br>
<div class="row" id="quote-row">
<div class="col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-offset-1 col-xs-10" id="quote-column">
<!-- <h3 id="quote"></h3> -->
</div>
</div>
<div class="row" id="author-row">
<div class="col-md-offset-7 col-md-4 col-sm-offset-5 col-sm-6 col-xs-offset-3 col-xs-8" id="author-column">
<!-- <h5 id="author"></h5> -->
</div>
</div>
<br>
<div class="row" id="btn-row">
<div class="col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-offset-1 col-xs-10" id="btn-column">
<button type="button" class="btn btn-default my-btn bg-colour" id="twitter-btn"><i class="fa fa-twitter" aria-hidden="true"></i></button>
<button type="button" class="btn btn-default my-btn bg-colour" id="fb-btn"><i class="fa fa-facebook" aria-hidden="true"></i></button>
<button type="button" class="btn btn-default my-btn bg-colour pull-right" id="new-quote-btn">New Quote</button>
</div>
</div>
<br>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
</div>
</body>
</html>
Following is my working example ..
https://codepen.io/iamrkcheers/pen/gRjoeZ
Instead of the "Say something about this .." text, I want my 'random quote'.
Anyway to do this ?!?
Anyhelp is appreciated.
Thank You.
Try this method..
using Facebook;
private string PostFacebookWall(string accessToken, string message) {
var responsePost = "";
try {
//create the facebook account object
var objFacebookClient = new FacebookClient(accessToken);
var parameters = new Dictionary<string, object>();
parameters["message"] = message;
responsePost = objFacebookClient.Post("feed", parameters);
}
catch (Exception ex) {
responsePost = "Facebook Posting Error Message: " + ex.Message;
}
return responsePost;
}
Related
I'm trying to upload image and if I were need to add more images, I just simply need to click the button. Now, I have done the button and it works but the problem now is since new fields are created for uploading image, the name and id of the elements are similar. So, the javascript won't work. I think I need to insert index into the element but I can't figure it out how. Thanks!
function createGambar() {
var newDiv = document.createElement('div');
newDiv.setAttribute('class', 'input-group');
newDiv.innerHTML = "<div class='col-sm-6'><span>Lampiran 1</span><div class='input-group'><input type='text' class='form-control bg-light' id='label_file' disabled placeholder='Gambar'><input type='file' name='lampiran1' id='file1' hidden onchange='setFileName();'><div class='input-group-append'><div class='btn btn-primary px-4' id='browse_button'onclick='document.getElementById(\"file1\").click();'><i class='fa-solid fa-magnifying-glass'></i></div></div></div><center class='mt-2'><img id='thumb' src='' class='preview' /></center></div><div class='col-sm-6'><span>Kapsyen Gambar 1</span><div class='input-group mb-3'> <textarea class='form-control' style='resize:none' name='kapsyen' id='kapsyen' cols='20' rows='3'placeholder='e.g YM Pengarah Memberi Cenderahati Kepada Tetamu Jemputan' required></textarea></div></div>";
document.getElementById("newGambar").appendChild(newDiv);
}
function setFileName() {
var fileName = document.getElementById("file1");
document.getElementById("label_file").value = fileName.files[0].name;
preview1();
}
function preview1() {
thumb.src = "";
if (event.target.files[0]['type'].split('/')[0] === 'image') {
thumb.src = URL.createObjectURL(event.target.files[0]);
}
}
<div class="row" id="newGambar"></div>
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-6">
<button type="button" id="buttonAdd" class="btn btn-success mt-1 w-100" onclick="createGambar(); "><i class="fa-solid fa-add"></i> Tambah Perkembangan</button>
</div>
<div class="col-sm-3">
</div>
</div>
I wanted to join the HTML text with the values of the item.certificate_name.
I've tried many things but any of it didn't works.
The line I mean is I commented <!-- I WANTED THE CERTIFICATE NAME TO BE HERE-->. I've already inspected, I've already got the name value. The only problem is how to join the text with the value?
<div class="col-xs-12">
<div class="row">
<div class="col-xs-2">
<i class="glyphicon glyphicon-trash center" style="font-size: 50px"></i>
</div>
<div class="col-xs-8">
<div class="clTulisanHapus center" id="idTulisanHapus">
Anda Yakin ingin menghapus Pelatihan?
<!-- I WANTED THE CERTIFICATE NAME TO BE HERE -->
</div>
</div>
</div>
</div>
<div class="col-md-offset-8">
<div class="btn-group">
<input type="hidden" id="idDataId">
<input type="hidden" id="idDataNama">
<button type="button" id="idBtnHapusBatal" class="btn clBtnMdlHapus">Tidak</button>
<button type="button" id="idBtnHapusHapus" data-id="${item.id}" class="btn clBtnMdlHapus">Ya</button>
</div>
</div>
$('#idBtnHapusHapus').click(function() {
var angka = $('#idDataId').val();
var angka = $('#idDataNama').val();
debugger;
$.ajax({
url: './hapussertifikasi/' + angka,
type: 'DELETE',
success: function(model) {
debugger;
window.location = './sertifikasi'
},
error: function(model) {
debugger;
}
});
});
Use Node.textContent to concatenate the text content of the div with item.certificate_name value and CSS white-space: pre; to wrap text on line breaks:
var item = {
certificate_name: 'Certificate Name'
};
var div = document.getElementById('idTulisanHapus');
div.style.whiteSpace = "pre";
div.textContent += ' ' + item.certificate_name
<div class="clTulisanHapus center" id="idTulisanHapus">
Anda Yakin ingin menghapus Pelatihan?
</div>
I have this code:
<div class="container">
<div class="modal fade" id="modalSubscriptionForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Subscribe</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="form3" class="form-control validate val1" name="val1">
<label data-error="wrong" data-success="right" for="form3">Title</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="form2" class="form-control validate val2" name="val2">
<label data-error="wrong" data-success="right" for="form2">Desc</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-envelope prefix grey-text"></i>
<label data-error="wrong" data-success="right" for="form2">
Coordinates click:
<div class="coorX"></div>
x
<div class="coorY"></div>
</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-indigo saveBtn">Send <i class="fas fa-paper-plane-o ml-1"></i></button>
</div>
</div>
</div>
</div>
<div class="scalize imgpo">
<img src="img/jacket.png" alt="" class="target ">
<div class="item-point" data-top="130" data-left="300" id="point1">
<div></div>
</div>
<div class="item-point" data-top="180" data-left="462" id="point2">
<div></div>
</div>
<div class="item-point" data-top="380" data-left="215" id="point3">
<div></div>
</div>
<div class="item-point" data-left="357" data-top="458" id="point4">
<div></div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.imgpo').click(function(e) {
var posX = $(this).position().left,posY = $(this).position().top;
$('.coorX').html((e.pageX - posX -10));
$('.coorY').html((e.pageY - posY -10));
$(".tooltip").tooltip("hide");
$('.formAdd').click();
});
$('.saveBtn').click(function(e) {
var val1 = $(".val1").val();
var val2 = $(".val2").val();
var values = {
'val1' : val1,
'val2' : val2
};
alert('Save');
$.ajax({
url: "save.php",
type: "post",
data: values ,
success: function (response) {
alert('Save');
},
error: function(jqXHR, textStatus, errorThrown) {
alert('Error');
}
});
});
$('.removeMe').on('click', function() {
var number = $(this).attr('id');
$('#point' + number).remove();
$('.obiect' + number).remove();
});
$('.scalize').scalize({
styleSelector: 'circle',
animationPopoverIn: 'flipInY',
animationPopoverOut: 'flipOutY',
animationSelector: 'pulse2'
});
/*
$('.tooltips').tooltip({
html: true,
trigger: 'click',
placement: 'top'
})
*/
const $tooltip = $('.tooltips');
$tooltip.tooltip({
html: true,
trigger: 'click',
placement: 'top',
});
$tooltip.on('show.bs.tooltip', () => {
$('.tooltip').not(this).remove();
});
$tooltip.on('click', (ev) => { ev.stopPropagation(); })
});
</script>
<div class="itemsBox">
<form name="saveForm" action="#" method="post">
<div class="obiect1">Obiect 1 <div class="removeMe" id="1">X</div> </div>
<div class="obiect2">Obiect 2 <div class="removeMe" id="2">X</div> </div>
<div class="obiect3">Obiect 3 <div class="removeMe" id="3">X</div> </div>
<div class="obiect4">Obiect 4 <div class="removeMe" id="4">X</div> </div>
</div>
<input type="submit" value="Save" />
</form>
The above code displays the points in the image. Below the picture I have the possibility to delete points from the website and from the picture. After clicking on the image, a tooltip (Bootstrap) is displayed. After clicking on the background image, a form for adding a point in the picture is displayed. The form has the coordinates of the clicked point. It works fine.
How can you write a new point in the picture?
To add a new HTML code to the point in the image:
<div class = "item-point" data-left = "357" data-top = "458" id = "point4">
<div> </ div>
</ Div>
<div class = "obiect4"> Obiect 4 <div class = "removeMe" id = "4"> X </ div> </ div>
How to do it?
Prview: http://serwer1356363.home.pl/pub/component/index2.html
This will require some modification on $(".saveBtn").click() event, like this:
$('.saveBtn').click(function(e) {
e.preventDefault();
var val1 = $(".val1").val(); // title
var val2 = $(".val2").val(); // description
var cX = $(".coorX").text();
var cY = $(".coorY").text();
var newPoint = "<div class='item-point' data-top='"+cY+"' data-left='"+cX+"' id='point1'>" +
"<div>" +
"<a href='#' class='toggle tooltips' title='<h1><b>"+val1+"</b><br>"+val2+"</h1>' data-placement='top' data-html='true' rel='tooltip'></a>" +
"</div>" +
"</div>";
var nextObjNumber = $(".itemsBox").children("div").length + 1;
var newObject = "<div class='obiect" + nextObjNumber + "'>Obiect " + nextObjNumber +
"<div class='removeMe' id='"+nextObjNumber+"'>X</div>" +
"</div>";
$(".scalize").append(newPoint); // inserting new point
$(".itemsBox").append(newObject); // inserting new object
$('.scalize').scalize({
styleSelector: 'circle',
animationPopoverIn: 'flipInY',
animationPopoverOut: 'flipOutY',
animationSelector: 'pulse2'
});
const $tooltip = $('.tooltips');
$tooltip.tooltip({
html: true,
trigger: 'click',
placement: 'top',
});
$tooltip.on('show.bs.tooltip', () => {
$('.tooltip').not(this).remove();
});
$tooltip.on('click', (ev) => { ev.stopPropagation(); });
$("#modalSubscriptionForm").modal("hide");
$(".val1").val("");
$(".val2").val("");
alert('Saved!');
// var values = {
// 'val1' : val1,
// 'val2' : val2,
// 'coorY' : cY
// 'coorX' : cX
// };
//
// $.ajax({
// url: "save.php",
// type: "post",
// data: values ,
// success: function (response) {
// alert('Save');
// },
// error: function(jqXHR, textStatus, errorThrown) {
// alert('Error');
// }
//
//
// });
});
To fix the object numbering issue at the bottom, change your form like this:
<form name="saveForm" action="#" method="post" style="margin-left: 15px">
<div class="itemsBox" >
<div class="obiect1">Obiect 1 <div class="removeMe" id="1">X</div> </div>
<div class="obiect2">Obiect 2 <div class="removeMe" id="2">X</div> </div>
<div class="obiect3">Obiect 3 <div class="removeMe" id="3">X</div> </div>
<div class="obiect4">Obiect 4 <div class="removeMe" id="4">X</div> </div>
</div>
<input type="submit" value="Save" />
</form>
You can check out the full source over here: https://www.codepile.net/pile/5Pgzxg4Z
I've got a dropdown box which is populated with ajax according to what option i choose from another dropdown. I need to duplicate the dropdown box keeping the same options loaded via ajax, this is what i've done o far. Many thanks for your help
This is the code to get tha value from the first dropbox and then use it for ajax
$('#flatGroup').on('change',function(){
var countryID = $(this).val();
console.log(countryID);
if(countryID){
$.ajax({
type:'POST',
url:'../controllers/ctrl_admin_group_table_app/ctrl_admin_get_building_table.php',
data: {
group_id: countryID
},
success:function(html){
$('#flatTable-1').html(html);
$(".bs-select").selectpicker('refresh');
}
});
}
});
This is the code i'm using to close the second dropbox that receive the option from ajax
// start repeating form tabelle
//Start repeating form group add limit
var maxGroup1 = 5;
//add more fields group
var fieldGroup1= $(".fieldGroup1").clone();
$(".addMore1").click(function() {
var fgc1 = $('body').find('.fieldGroup1').length;
if (fgc1 < maxGroup1) {
var fieldHTML1 = '<div class="form-group fieldGroup1">' + fieldGroup1.html() + '<div class="col-md-1"><label class="control-label"> </label><i class="fa fa-close"></i></div></div>';
fieldHTML1 = fieldHTML1.replace('flatTable-1', 'flatTable-' + (fgc1 + 1));
fieldHTML1 = fieldHTML1.replace('flatMillesimi-1', 'flatMillesimi-' + (fgc1 + 1));
$('body').find('.fieldGroup1:last').after(fieldHTML1);
$('.bs-select').selectpicker({
iconBase: 'fa',
tickIcon: 'fa-check'
});
} else {
swal("Operazione Annullata", "Hai raggiunto il massimo numero di proprietari registrabili", "error");
}
});
//remove fields group
$("body").on("click", ".remove", function() {
$(this).parents(".fieldGroup1").remove();
});
// end repeating form
This is the HTML code
<div class="row">
<div class="col-md-9">
<div class="portlet-body form">
<div class="col-md-9">
<div class="mt-repeater">
<div data-repeater-list="group-b">
<div data-repeater-item class="row">
<div class="form-group fieldGroup1">
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Tabella</label>
<select class="form-control bs-select" id="flatTable-1" name="flatTable[]" title="Seleziona tabella millesimale"></select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label">
<i class="fa fa-info-circle red tooltips" data-placement="top" data-original-title="Quota del titolare dell'immobile" ></i>Millessimi<span class="required"> * </span>
</label>
<input type="text" id="flatMillesimi-1" name="flatMillesimi[]" class="form-control" placeholder="Millessimi dell'immobile" >
</div>
</div>
</div> <!-- Fine field group -->
</div>
</div>
<!-- <hr> -->
<a href="javascript:;" data-repeater-create class="btn btn-info mt-repeater-add addMore1">
<i class="fa fa-plus"></i> Aggiungi tabella</a>
<br>
<br>
</div>
</div>
</div>
</div>
</div>
Iam working with chat application.Here I have to store the messages in local storage those entered by individual user as well as group messages also.So I want to use local storage inorder to store the messages so that when I click on the particular user,previous messages sent by that user has to be shown.Iam strucked at writing code for this.How can I implement this code in javascript?
Here is my entire code:
var grp = angular.module("grpApp", [])
.config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('{|');
$interpolateProvider.endSymbol('|}');
})
.directive('scrollBottom', function () {
return {
scope: {
scrollBottom: "="
},
link: function (scope, element) {
scope.$watchCollection('scrollBottom', function (newValue) {
if (newValue) {
$(element).scrollTop($(element)[0].scrollHeight);
}
});
}
}
})
.controller("grpCtrl", function ($scope) {
document.getElementById("name").innerHTML = "Group";
$scope.friendsList = ["Devi", "Teja", "Sneha", "Srujana"];
$scope.msgdata = [];
var d = new Date();
$scope.time = d.toLocaleString();
console.log("hlooo" + $scope.time);
//$scope.uname=JSON.parse($stateParams.uname);
document.getElementById("clear").addEventListener("keyup", function (event) {
if (event.keyCode == 13) {
document.getElementById("submitmsg").click();
}
});
$scope.send = function () {
document.getElementById("submitmsg").disabled = false;
var retData = localStorage.getItem("storedData");
console.log("hiieeee" + retData);
var retrieveData = JSON.parse(retData);
console.log("heloooo" + retrieveData);
$scope.msgdata.push(retrieveData);
$scope.msgdata.push($scope.message + " " + " " + $scope.time);
$scope.message = "";
console.log("hi" + $scope.msgdata);
}
$scope.showGrp = function () {
document.getElementById("name").innerHTML = "Group";
$scope.msgdata = [];
var preData = $scope.msgdata;
localStorage.setItem("storedData", JSON.stringify(preData));
}
$scope.frndgrp = function (frnd) {
document.getElementById("name").innerHTML = frnd;
$scope.msgdata = [];
var preData = $scope.msgdata;
localStorage.setItem("storedData", JSON.stringify(preData));
}
});
<div class="container-fluid">
<div class="row content">
<div class="col-sm-4 sidenav" id="divlength" style="height:600px;overflow-y:scroll">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search friend.." ng-model="search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
<br>
<button class="btn btn-primary btn-lg" style="width:50%" ng-click="showGrp()">Group</button>
<br>
<br>
<div class="nav nav-pills nav-stacked" ng-repeat="frnd in friendsList|filter:search">
<a class="btn btn-primary" style="width:50%" ng-bind="frnd" ng-click="frndgrp(frnd)"></a>
<br>
<br>
</div>
<br>
</div>
<div class="col-sm-8" style="height:100px">
<h4 align="center" id="name" style="font-weight:bold"></h4>
<footer id="wrapper">
<div class="chatbox">
<div class="chatBox" scroll-bottom="msgdata" id="clearmsg">
<div ng-repeat="item in msgdata track by $index"><span class="btn" id="msg" style="background-color:lightgreen;color:black; margin-bottom:5px" ng-bind="item"></span>
</div>
</div>
</div>
<div class="input-group add-on" style="width:100%;">
<input class="form-control usermsg chatTextField" placeholder="Type a message" name="srch-term" type="text" ng-model="message" id="clear" required>
<div class="input-group-btn">
<button class="btn btn-success" type="submit" style="float:right" id="submitmsg" ng-click="send()" ng-disabled="!message"><span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</footer>
</div>
</div>
</div>