We Keep Coding

Add new html element to webpage dynamically in jquery

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

How to achieve a HTML check in JavaScript and jQuery

I want to create a check that will create the class form-group has-success has-feedback in a div and glyphicon glyphicon-ok form-control-feedback in an li.
What I am trying to achieve (when user has filled it out correctly):
<div class="form-group has-success has-feedback ">
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
How my code looks like:
function InputChecker(InputChecker, tracker) {
let div = ($('<div/>', {
'class': InputChecker
}));
return div;
}
function password(tracker) {
let input = ($('<input/>', {
'type': 'password',
'name': 'password',
'class': 'form form-control',
'id': 'password',
'placeholder': 'Fill in your password (minimum length of 8 characters required!)',
'required': true
})).on('keyup', function() {
tracker.pwd = $(this).val();
if ($(this).val().length < 8) {
var x = InputChecker('form-group has-success has-feedback', tracker);
console.log(x);
$(this).after('<span class="glyphicon glyphicon-ok form-control-feedback"></span>');
} else {
// Do something else
}
});
return input;
}
How my document.ready looks like:
let inputFieldStructure = $(eBlock('col-md-6 col-md-offset-3', tracker).append(InputChecker('', tracker)));
inputFieldStructure.append(loginName(tracker), userName(tracker), password(tracker), confirmPassword(tracker)).appendTo('#registerAndLogin');
How my HTML looks like:
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h1>test</h1>
</div>
<div class="panel-body">
<form action="registerAndLogin.php" method="POST" id="registerAndLogin">
</form>
</div>
<div class="panel-footer">
<h1>test</h1>
</div>
</div>
</div>
</body>

Just need two changes based upon information provided:
HTML:
<div id="passwordDiv">
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
<span id="passwordSpan"></span>
</div>
</div>
JS on success:
if ($(this).val().length < 8) {
$("#passwordDiv").addClass("form-group");
$("#passwordDiv").addClass("has-success");
$("#passwordDiv").addClass("has-feedback");
$("#passwordSpan").addClass("glyphicon");
$("#passwordSpan").addClass("glyphicon-ok");
$("#passwordSpan").addClass("form-control-feedback");
} else {
// Do something else
}

how can I clone ajax dropdown

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>

Post text on Facebook on button click

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;
}

jQuery ajax form submission to php not working with response from server

Note: this is a jQuery coding exercise and I am not allowed to use plugins or other modules.
I have a typical signup form. When the user completes registration and everything is valid I want to fade in a sign in element that the user can use to sign in right away.
Note: I am using the Skeleton framework
HTML:
<div class="container">
<form id="myForm" action="validate_signup.php" method="post">
<div class="row">
<div class="twelve columns">
<h3 class="center">Sign Up</h3>
</div>
</div><!--end row-->
<div class="row">
<div class="four columns offset-by-four">
<input class="u-full-width" type="email" placeholder="Email" id="email" name="email">
<span class="error">Email not entered</span>
</div>
</div><!--end row-->
<div class="row">
<div class="four columns offset-by-four">
<input class="u-full-width" type="password" placeholder="Password" id="pword" name="pword">
<span class="error">Password not entered</span>
</div>
</div><!--end row-->
<div class="row">
<div class="four columns offset-by-four">
<input class="u-full-width" type="text" placeholder="First Name" id="fname" name="fname">
<span class="error">First Name not entered</span>
</div>
</div><!--end row-->
<div class="row">
<div class="four columns offset-by-four">
<input class="u-full-width" type="text" placeholder="Last Name" id="lname" name="lname">
<span class="error">Last Name not entered</span>
</div>
</div><!--end row-->
<div class="row">
<div class="six columns offset-by-four">
<input class="button-primary" type="submit" value="Submit" name="signup">
</div>
</div><!--end row-->
</form>
<div class="row">
<div class="twelve columns">
<p id="response" class="center no-display"></p>
</div>
</div>
</div><!--end container-->
<script src="../js/jquery.js"></script>
<script src="../js/signup.js"></script>
jQuery:
// jQuery form validation
$(document).ready(function(){
// field mapping
var form_fields = {
'email' : 'email',
'pword' : 'password',
'fname' : 'first name',
'lname' : 'last name'
};
// ajax data
var ajaxData = {};
// make sure form fields were entered
$('#myForm').on('submit', function() {
for (var field in form_fields) {
if (!$('#' + field).val()) {
$('#' + field).next().addClass('error_show');
} else if ($('#' + field).val()) {
$('#' + field).next().removeClass('error_show');
ajaxData[field] = $('#' + field).val();
}
}
// 'signup' post field to indicate to php a submission was made
ajaxData['signup'] = 'Submit';
// send data if it is all there
if (Object.keys(ajaxData).length === 5) {
$('#response').hide().empty();
var request = $.ajax({
url : 'validate_signup.php',
method : 'POST',
data : ajaxData,
dataType : 'html'
});
request.done(function(response) {
if (response === 'Sign up complete.') {
$('#response').html(response + "<a href='signin.php'>Sign in</a>").fadeIn();
}
$('#response').html(response).fadeIn();
$("input[name=email], input[name=pword], input[name=fname], input[name=lname]").val('');
});
request.fail(function() {
alert('Your request could not be processed.');
});
}
return false;
});
});
I am not going to post the php as it is a big piece of code. Just know that if all user data is valid and a successful registration is made PHP outputs, Sign up complete. That is the response.
The main line in question is:
if (response === 'Sign up complete.') {
$('#response').html(response + "<a href='signin.php'>Sign in</a>").fadeIn();
}
First I tested this condition with console.log('response was Sign up complete) in place of $('#response').html(response + "<a href='signin.php'>Sign in</a>").fadeIn(); to make sure the condition worked, which it did. But, the fading in of a signin.php link does not work. Instead I am only seeing,
Sign up complete.

change this line
if (response === 'Sign up complete.') {
$('#response').html(response + "<a href='signin.php'>Sign in</a>").fadeIn();
}
$('#response').html(response).fadeIn();
to
if (response === 'Sign up complete.') {
$('#response').html(response + "<a href='signin.php'>Sign in</a>").fadeIn();
}else{
$('#response').html(response).fadeIn();
}
Your can also change the div style to see the fadein effect. example:
<div id="response" style="display:none">
Use time parameter to see the real effect.
$('#response').html(response + "<a href='signin.php'>Sign in</a>").fadeIn(1000);