Develop Reference

Why href link is not adding to the html using jquery

I create the variable for event link, as the user input the link, I want it to display as a hyperlink in HTML by using jquery. Since user could do a infinite input, therefore the output of the link will be on the next line.
var $event_link_selector = $('#event-link');
var event_link = $event_link_selector.val();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="event-link">Event Link:</label>
<textarea id="event-link"></textarea>
Ex: If the user enters www.example.com into the test area, I want the page to return me that link and be able to click on it. These are the jquery I currently trying but not working
//returns me the user input link as string instead of link
"<br> <a class='event-description'>"+ event.event_link + "</a>"
//returns none
"<br> <a class='event-description' href='" + event.event_link + "'></a>"

You didn't share your whole jQuery code... But it's already clear your quotes were misplaced!
$('#event-link').on('focusout',function(){
var event_link=$(this).val();
$(this).parent('.link-container').append('<a class="event-description" href="' + event_link + '">'+event_link+'</a>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link-container">
<label for="event-link">Event Link:</label>
<textarea id="event-link"></textarea>
</div>

Display images inside append

I have the following code :
$('.posts').append('<article class="post">\n' +
' <div class="postImages">'+displayPostImagesHere()+'</div>\n' +
' </article>');
and want to get images from firebase storage and display for each image in place of displayPostImagesHere() function the following code :
<div class="postImage"><img src="'+url+'" alt="Post image"></div>

jquery edit post with image missing something

I am trying to make a post edit using jquery. But i have a problem with image think.
I have created this DEMO from codepen.io .
In this demo you can see there are two edit button. If you click the edit1 then the image delete (x) button will be come on the right top bar but that will come just one time. It need to be come two delete button because there are two image. What is the problem on there and how can i fix that problems. Anyone can help me in this regard ?
JS
$(document).ready(function() {
$("body").on("click", ".editBtn", function(event) {
event.target.disabled = true;
var ID = $(this).attr("id");
var selected = $("#messageB" + ID + " .postInfo img").parent().html();
var currentMessage = $("#messageB" + ID + " .ptx").html();
var editMarkUp = '<div class="edi"><div class="del">x</div>' + selected + '</div><div class="edBtnS"><div class="edSv">Save</div><div class="cNeD" id="' + ID + '">Cancel</div></div><textarea rows="5" cols="80" id="txtmessage_' + ID + '">' + currentMessage + '</textarea>';
$("#messageB" + ID + " .postInfo").html(editMarkUp);
var data = $('#txtmessage_' + ID).val();
$('#txtmessage_' + ID).focus();
$('#txtmessage_' + ID).val(data + ' ');
});
$("body").on("click", ".cNeD", function(event) {
$(".editBtn").prop('disabled', false);
var ID = $(this).attr("id");
var currentMessageText = $("#txtmessage_" + ID).html();
$("#messageB" + ID + " .ptx").html(currentMessageText);
});
});
HTML
<div class="container">
<div class="postAr" id="messageB1">
<div class="postInfo">
<img src="http://hdwallpaperia.com/wp-content/uploads/2013/10/Home-Sweet-Home-Wallpaper.jpg" id="1">
<img src="http://www.dam7.com/Images/Puppy/images/myspace-puppy-images-0005.jpg" id="1">
</div>
<div class="ptx"> fdasfads fasd fadsf adsf adsf adsf asd fasd f dfsas</div>
<div class="editBtn" name="edit" id="1">Edit1</div>
</div>
</div>
<div class="container">
<div class="postAr" id="messageB2">
<div class="postInfo">
<img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701">
fdasfads fasd fadsf aldsf adsf adsf asd fasd f dfsassssg
</div>
<div class="editBtn" name="edit" id="2">Edit2</div>
</div>
</div>

I found that there are 2 main issues there.
you use html() function which get the HTML contents of the first element in the set of matched elements. take a look document
-> you will get html instead of src of img. But later when you try to set src attribute during creating an 'edit area' so that is the mainly reason why image doesn't
display (.attr() function is better to get src attribute)
same wrong logic with message ( .text() function could be the better
solution in this case)
don't forget to check if you have create an edit area or not. At the moment every time it will create a new "edit area". Duplicate !
Hope it will help you a bit.

JQM after ajax, popup not rendering correctly

I'm having problems with my popup after ajax is success, it's not sizing to the center, but on the second time it resizes(because it's already loaded). I tried to follow this example, but have errors(not popping up). From my code, is it better to do dynamic popup or there is any method that can do like beforepageshow, or load to show it in the center? For exemple below:
//popup
<div data-role="popup" id="popupFood" data-theme="a" class="ui-corner-all">
<div style="padding:10px 20px;">
<h3>Preferences</h3>
<div class="ui-block-a" id="foood" style="width:50%"></div>
<button type="button" onclick="someaction()" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Search</button>
</div>
</div>
//ajax success
function food(data, textStatus){
$('#foood').empty();
$.each(data, function (i, x) {
var foodTest = '<label for="grid-checkbox-' + x.id + '">' + x.description+ '</label>' +
'<input type="checkbox" name="grid-checkbox-' + x.id + '" id="grid-checkbox-' + x.id + '" value="' + x.id + '" data-mini="true" >';
$('#foood').append(foodTest);
});
$('#foood').enhanceWithin();
}

You can center popup by either
Opening it programmatically after successful Ajax. Note that you need to remove data-rel="popup" and set href to href="#" on Anchor tag.
$("#popupFood").popup("open");
Reposition it once it's open by listening to popupafteropen event and then override position using reposition option.
$("#popupFood").on("popupafteropen", function () {
$(this).popup("reposition", {
positionTo: "window"
});
});
Demo

How do I create a Jquery datepicker dynamically?

For my app, I'm trying to add a Jquery Datepicker after a certain event (for this example, let's just say when the page loads).
I'm currently trying to do something like this:
var mealControl = new MealControl();
$(document).ready(function(){
mealControl.createMealForm();
}); //document.ready
function MealControl() {
this.createMealForm = function(){
var currentDate = new Date();
var prettyCurrentDate = currentDate.getFullYear() + '/' + (currentDate.getMonth() + 1) + '/' + currentDate.getDate();
var innerHtml = "<p>Creating meal item data input here</p>" +
"<div>Title:<input id=\"mealTitle\" type=\"text\" align=\"center\" width=\"50\" class=\"ui-input-text ui-body-c ui-corner-all ui-shadow-inset\" />" +
"<br></div>" +
"<div class=\"ui-input-datebox ui-shadow-inset ui-corner-all ui-body-c\">" +
"<div class=\"ui-input-datebox ui-shadow-inset ui-corner-all ui-body-c\">" +
"<input data-options=\"{'mode':'calbox','calHighPicked':false, 'calHighToday':true, 'calHighPicked': false}\" data-role=\"datebox\"id=\"datePicker\" value=\"Enter consumption date here\" type=\"text\" align=\"center\" class=\"ui-input-text ui-body-c\"/>" +
"<a href=\"#\" class=\"ui-input-clear ui-btn ui-btn-up-c ui-btn-icon-notext ui-btn-corner-all ui-shadow\" title=\"date picker\" data-theme=\"c\" style=\"vertical-align: middle; float: right; \">" +
"<span class=\"ui-btn-inner ui-btn-corner-all\" aria-hidden=\"true\">" +
"<span class=\"ui-btn-text\">date picker</span>" +
"<span class=\"ui-icon ui-icon-grid ui-icon-shadow\"></span></span></a>"
"</div>"
$("#contentDiv").html(innerHtml);
} //createMealForm
When I do it this way, the button that should bring up the date picker does not do anything. However, if I put all of those elements right into my
<div data-role="content" id="contentDiv" class="ui-content" role="main">
the button works just fine. I'm completely stumped by this behaviour and any help would be much appreciated.
Also, I've read in other places it should be as simple as
("#datePicker").datepicker();
but that doesn't work for me either (Uncaught TypeError: Object [object Object] has no method 'datepicker').
Thanks

The reason it isn't working for you is because the input field you're binding the datepicker isn't available on document ready.
You need to bind the date picker after you've added the markup to the DOM.
Check out this fiddle
Adding the datepicker after you've this line should work
$("#contentDiv").html(innerHtml);
$('#datePicker').datepicker();

jQuery built-in functions has no calendar function. So, You've to import a plugin. There's a lot of them:
http://www.tripwiremagazine.com/2011/10/jquery-calendar-date-pickers.html
But, perhaps the most used is the jQuery UI cause it has a lot more function:
http://jqueryui.com/

You could use this: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/
for creating datepicker

all you need is the following:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
$(function() {
$( ".datepicker" ).datepicker();
});
</script>
and in the form :
<p>Date: <input type="text" class="datepicker"></p>
this will use the Jquery UI and create a datepicker for every input field with datepicker as class