Why href link is not adding to the html using jquery - javascript

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>

Related

Featherlight with google street view images

I am trying to fetch Google Street View images and display them in a light box using featherlight. The images are defined dynamically based on which map icon a user selects.
My image displays without issue but the lightbox freezes for a second and then returns a page of random characters as if the image has been attempted to read as text.
An example of my code is as follows:
let streetView_imgURL = "https://maps.googleapis.com/maps/api/streetview?size=600x300&location=" +
props.Latitude + "," + props.Longitude + "&key=MYKEY";
document.getElementById("selectedSchool").innerHTML = (props ?
"<div class='imgbox'>" +
"<img style='width:100%;' data-featherlight='" + streetView_imgURL + "'src='"
+ streetView_imgURL + "'>"
If I understood your issue well, try this:
http://jsfiddle.net/markovica/1njee7ah/2/
<style>.gsv-screenshot {display: none}</style>
<a href=".gsv-screenshot" class="" data-featherlight>Click Me</a>
<div class="lightbox gsv-screenshot">
<i class="featherlight-close fa fa-close"></i>
<img style='width:100%;' src="https://maps.googleapis.com/maps/api/streetview?size=600x300&location=44.8165107,20.4603276">
</div>
find a way to generate items this way. It doesn't seem to have issues.

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>

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.

How to submit values to JavaScript using two pages..?

I am trying to submit values to JavaScript using two pages "index.php" and "fonts.html".
Here is the JavaScript code that I have used in index.php:
<script language=javascript>
var cp = new ColorPicker();
var fp = new FontPicker('window');
function pickFont(font) {
document.getElementById('fimg').src='http://example.com/im/font/' + font + '.png';
document.getElementById('fid').value=font;
}
if (document.getElementById('fid').value) {
pickfont(document.getElementById('fid').value);
}
</script>
The values should be submitted from "fonts.html" which has the code:
<body>
<p><form method=get action="/fonts.html" style="display:inline"><input type=submit name=cat value="Favorites"></form>
<div id="Favorites">
<img alt="Times-Roman " style="border: outset 1pt" border=1 vspace=1 hspace=1 src="http://www.example.com/im/font/Times-Roman.png">
<img alt="ariel " style="border: outset 1pt" border=1 vspace=1 hspace=1 src="http://www.example.com/im/font/font/ariel.png">
</div>
</body>
When user opens index.php they will get a link; when they click on the link they will be redirected to "fonts.html" where they gets an option to click on one of images "Times-Roman.png" and "ariel.png" .
Now what I am trying to do two things:
when the user clicks on "Times-Roman.png". '('fimg').src' should get the location of "Times-Roman.png"
and
('fid').value should hold the value "Times-Roman.ttf"
I know this can be implemented by adding JavaScript code in the second page "fonts.html" but not exactly getting the code. Your response much appreciated...
font value you are passing to pickfont needs to be a string, you are treating as variable

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

Categories

Resources