How do I create a Jquery datepicker dynamically? - javascript

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

Related

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>

How to dynamically update what is being appended using javascript

I am trying to append a box to a list. This box should have a heading which identifies it, but I am having trouble figuring out how to increment each heading by 1.
Currently, the boxes are being generated by this code when a button is clicked.
function createBoxYes(i) {
var box = '<div class="panel-heading">Question 1</div>';
$("#yesColumn").append(box);
}
However, I am trying to increment the Question number based on the input, i. It should equal i + 1. My first thought was to put an id on the div, but if I used findElementById("question"), then it would select all of the boxes, and I want to simply have each box generated to remain unchanged.
Thanks for the help!
This may help you.
function createBoxYes(i) {
var box = '<div class="panel-heading">Question' + (i + 1) +'</div>';
$("#yesColumn").append(box);
}
Just put i+1 in there.
I hope this ll helps you:
var questions = 1;
function createBoxYes() {
var box = '<div class="panel-heading">Question ' + ++questions + '</div>';
$("#yesColumn").append(box);
}
$('#addBox').bind('click', createBoxYes);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<div id="yesColumn" class="panel panel-default">
<div class="panel-heading">Question 1</div>
</div>
<button id="addBox" class="btn btn-info">Add</button>

Create a popup using bootstrap

I have to create a popup like this:
And then, bind it to an html element and make it appear when hovering it.
I'm using bootstrap, and so far i've been trying this:
HTML:
<a data-toggle="uid-popover" class="od-icon info-icon clientreference-info-button cursor-pointer"></a>
Javascript:
var popoverTemplate = ['<div class="timePickerWrapper popover">',
'<div class="arrow"></div>',
'<div class="popover-content">',
'</div>',
'</div>'].join('');
var content = ['<div>TEST</div>', ].join('');
$('[data-toggle="uid-popover"]').popover({
content: content,
template: popoverTemplate,
placement: "up",
html: true
});
I would like to know if it's possible to locate the popup just in front of the hovering item, but i'm not able to do it, because the "placement" parameter only accepts "up,bottom,left,right" inputs.
If there is any other way to make popups easier with or without bootstrap, I would be really thankful to know.
Thanks.
You can set it manually like following. please create fiddle I could not insert link also could not create a snippet.
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<p>Click on button to see Popover</p>
<div style="width:200px; margin: 0 auto;">
pop
</div>
$(function () {
$('#example').popover();
$('#example').on("shown.bs.popover",function(e){
$(".arrow").hide();
var d = $(".popover")[0];
d.style.left = ((d.offsetLeft) - ($(".popover").width()/1.4)) + "px";
d.style.top = ((d.offsetTop) + ($(".popover").height()-15)) + "px";
})
});

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

Categories

Resources