How to append a string variable in Jquery html elememt attribute - javascript

Please , I have a JQuery code when appends data to a div element sucessfully like this
$('#conversation').append('<div id="receiver"><p><b>' + username + ':</b> ' + data + '</p></div><br>');
Now supposing I want to have an anchor tag which will have a hyperlink inside as an atrribute and I want to pass a variable to that href attribute not the link itself since I don't know the kind of link that will be sent. I have problems tring to append this.
$('#conversation').append('<div id="receiver"><p><b>' + username + ': <a id="link" href="'+ data +"></a></p></div><br>');
This does not work. Any idea how to go about this.
This is my whole code snippet
socket.on('updatechat', function (username, data) {
//showing username and the message sent
var checkifdataisalink=data;
var check=checkifdataisalink.split('://')
if((check[0]=='http')||(check=='https'))
{
$('#conversation').append('<div id="receiver"><p><b>' + username + ': <a id="link" href="'+ data +"></a></p></div><br>');
}else{
$('#conversation').append('<div id="receiver"><p><b>' + username + ':</b> ' + data + '</p></div><br>');
}
});

Apart from the missing quote, your or part of the if condition was missing [0]. See below.
//For demo purposes only
var check = ["http", "other-part-of-the-url"];
var username = "user";
var data = "data";
// --;--
if(check[0] == 'http' || check[0] == 'https') {
$('#conversation').append('<div id="receiver"><p><strong>' + username + ':</strong> <a id="link" href="' + data + '">' + data + '</a></p></div><br/>');
} else {
$('#conversation').append('<div id="receiver"><p><strong>' + username + ':</strong>' + data + '</p></div><br/>');
}
Demo#fiddle

Change
$('#conversation').append('<div id="receiver"><p><b>' + username + ': <a id="link" href="'+ data +"></a></p></div><br>')
into:
$('#conversation').append('<div id="receiver"><p><b>' + username + ': <a id="link" href="'+ data +'"></a></p></div><br>');
Just one ' was missing after data

Related

POST route in Leaflet map giving errors

Is there any way to use a form in leaflet mapping to open another page?
I'm using a post route for this and have even tried embedding it in an tag but to no avail.
At the moment the form data is in a for loop like so
map_data.forEach(element => {
console.log('program=' + element.program + ', lat=' + element.gps_lat + ', long=' + element.gps_lon);
data[i] = L.marker([element.gps_lon, element.gps_lat], {icon: redIcon}).addTo(map);
var url = '{{ route("opentraining", ":training_id") }}';
var alt_url = '{{ route("opentraining") }}';
url = url.replace(':id', element.id);
data[i].bindPopup(
'<strong>' + element.program + '</strong>'
+ '<br />'
+ '<b>Location:</b> ' + element.location + ', ' + element.district + ', ' + element.province
+ '<br />'
+ '<b>Description:</b> ' + element.description
+ '<br /><br />'
+ '<form onsubmit="' + alt_url + '" method="POST" class="formEditTraining">#csrf<input type="hidden" name="training_id" value='+ element.id + '>'
+ '<button type="submit" value="submit" class="btn btn-primary trigger-submit">View Record</button>'
+'</form>'
).openPopup();
i++;
});
Even when use the route directly within the form it makes no difference all I get is an error saying POST method isn't supported.. What could I be missing ?
You're using the wrong attribute for the URL in your <form> tag. onsubmit is for specifying a JS function to run before the form is submitted. To specify the URL you want to submit the form to, use action. Since you are not specifying action at the moment, it's posting it back to the same URL that the form is on, which evidently is not set up to receive POSTs.

Can´t get the output using jQuery with rest

I am using jQuery with REST in my application and I want to get the ouput mentioned below using the jQuery within my webpage .
I used the code below to search by get a company by id (each company has id, name other info supplier and buyers) but the result does not show up for me with my code, any suggestion on what have I missed?
REST is a concept for HTTP request exchange, so you're making RESTful request calls (e.g. 'get') against the REST-API you implemented on server side.
<input name="find" type="text" maxlength="300" id="find"/>
<button onclick="findId()"> Find By ID </button>
<div id="info"></div>
<script>
function findId()
{
var id = document.getElementById("find").value;
$("#info").html("");
$.getJSON("http://localhost:8080/company/" + id, function(data)
{
for (var i in data) {
$('#info').append("<p>ID: " + data[i].id + "</p>")
$('#info').append("<p>Name: " + data[i].name + "</p>")
$('#info').append("<p>Other Info: " + data[i].otherInfo + "</p><br>")
$('#info').append("<p>Supplier: " + data[i].suppliers + "</p><br>")
$('#info').append("<p>Buyers: " + data[i].buyers + "</p><br>")
}
});
}
When I type http://localhost:8080/company/ into my browser I get the following output:
[{"id":1,"name":"Test 1","otherInfo":"Test 1","suppliers":[{"id":1,"name":"Test 1","address":"Test 1","buyers":[{"id":1,"name":"Test 1","address":"Test 1"}]},{"id":2,"name":"Test 2","address":"Test 2","buyers":[{"id":3,"name":"Test 3","address":"Test 3"},{"id":2,"name":"Test 2","address":"Test 2"}]}]},{"id":2,"name":"Test 2","address":"Test 2","suppliers":[{"id":3,"name":"Test 3","address":"Test 3","buyers":[{"id":4,"name":"Test 4","address":"Test 4"}]}]}]
If i type http://localhost:8080/company/1 into my browser i get
{"id":1,"name":"Test 1","otherInfo":"Test 1","suppliers":[{"id":1,"name":"Test 1","address":"Test 1","buyers":[{"id":1,"name":"Test 1","address":"Test 1"}]},{"id":2,"name":"Test 2","address":"Test 2","buyers":[{"id":3,"name":"Test 3","address":"Test 3"},{"id":2,"name":"Test 2","address":"Test 2"}]}]}
Is it a cross domain request? If so you can get around it by using jsonp instead of json.
function findId()
{
var id = document.getElementById("find").value;
$("#info").html("");
$.getJSON("http://localhost:8080/company/?callback=?" + id, function(data)
{
for (var i in data) {
$('#info').append("<p>ID: " + data[i].id + "</p>")
$('#info').append("<p>Name: " + data[i].name + "</p>")
$('#info').append("<p>Other Info: " + data[i].otherInfo + "</p><br>")
$('#info').append("<p>Supplier: " + data[i].suppliers + "</p><br>")
$('#info').append("<p>Buyers: " + data[i].buyers + "</p><br>")
}
});
}

Why is my json get request not working?

I am working on building a movie search app. It is my first time using json. I cannot figure out why my code is not working. I have it running on localhost using xampp.
On submit
$('.search-form').submit(function (evt) {
// body...
evt.preventDefault();
var $searchBar = $('#search');
var omdbApi = 'http://www.omdbapi.com/?';
var movieSearchTerm = $searchBar.val();
var searchData = {
s:movieSearchTerm,
r:json
}
Here is the callback function
function displayMovies(data) {
// for each search result
$.each(data.items,function(i,movie) {
movieHTML += '<li class="desc">';
//movie title
movieHTML += '<a href="' + movie.Title + '" class="movie-title">';
//release year
movieHTML += '<a href="' + movie.Year + '" class="movie-year">';
//poster
movieHTML += '<img src="' + movie.Poster + '" class="movie-poster"></li>';
$('#movies').html(movieHTML);
}); // end each
// movieHTML += '</li>';
}
$.getJSON(omdbApi, searchData, displayMovies);
});//end submit
r:json
You made a typo.
You haven't created a variable called json and the service expects the value of r to be json.
String literals need to be surrounded with a pair of " or '.
data.items
And the JSON returned doesn't have items, it has Search.

email message with changing information

I am trying to create email templates just using an html file. This file will display a list of mailto links that, when clicked, will open a template with message. I got it working for the most part but some of these templates use prompts to add information to the message before creating it. The problem is that it doesn't seem to work right. Here is my code.
function sendReport(emailName, addresseList){
document.writeln('<a onClick="setPrompt(this,\'' + addresseList + '\')" href="mailto:' + addresseList + '?subject=' + 'Report' + '&body=' + 'Here is the report.' + '">' + emailName + '</a><br />');
}
function setPrompt(obj, addresseList){
var reportName = prompt("Report name","");
obj.attr('href', ='mailto:' + addresseList + '?subject=' + reportName + '&body=' + "Here is the report."); //<-- this is the line that is giving me trouble.
}
You have a typo in the last line and there is no .attr() built in function in Javascript. This should fix it:
obj.setAttribute('href', 'mailto:' + addresseList + '?subject=' + reportName + '&body=' + "Here is the report.");

using multiple clauses in if in jQuery template

I want to use a variable in the if clause which is in jQuery template. Console log says:
Uncaught Syntax Error: Unexpected token {
Here is my code:
var isActive = true;
var isPasive = false;
var isGuest = false;
var tmp = '<script>' +
'{{each hastalar}}' +
'<a href="#" class="patientRow" data-name="${$value.M_AdiSoyadi}" data-tc="${$value.M_TcKimlikNo}" data-tahlilgunu="${$value.M_TahlilGunu}"> ${M_AdiSoyadi}' +
'{{if $value.M_HastaBulunmaDurumu == "1" && ${isActive} }}' +
'<img id="imgMember_${$value.M_TcKimlikNo}" src="images/greenmember.png" title="Hasta klinik ve DYOB kayıtlarıyla örtüşüyor." style="width:15px;height:15px;"/>' +
'{{else $value.M_HastaBulunmaDurumu == "2" }}' +
'<img id="imgMember_${M_TcKimlikNo}" src="images/bluemember.png" title="Hasta kliniğinizde mevcut fakat DYOB sisteminde sizin kliniğinizde görünmüyor. Lütfen DYOB sistmine hasta kaydını yapınız." style="width:15px;height:15px;"/>' +
'{{else $value.M_HastaBulunmaDurumu == "3"}}' +
'<img id="imgMember_${M_TcKimlikNo}" src="images/redmember.png" title="Hasta kliniğinizde mevcut değil fakat DYOB sisteminde sizin kliniğinizde görünüyor. Lütfen kan tahlili yapılan hastaların listesini kontrol ediniz." style="width:15px;height:15px;"/>' +
'{{/if}}' +
'<img id="imgResult_${$value.M_TcKimlikNo}"/>' +
'<img id="imgInfo_${$value.M_TcKimlikNo}"/>' +
'</a>' +
'{{/each}}' +
'</script>';
I use jquery.tmpl.min.js. What should I do to use the variable in if clause?
For a generic approach of replacing your variables in JavaScript strings you could you the following snippet;
var tmp = '<script>' +
... +
'<\/script>'
.replace('${isActive}', isActive)
.replace('${isPassive}', isPassive)
.replace('${isGuest}', isGuest)
For a more detailed solution on your problem, we need information about the framework and template engine which you are using.
EDIT:
I noticed that the closing script tag causes an error. YOu might want to escape the closing script tag at the like so:
<\/script>

Categories

Resources