<script> $.getJSON("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_month.geojson", function(json)
{console.log(json); var newString = JSON.stringify(json, null, 0)var obj = JSON.parse(newString);alert(obj.features.length) })</script>
A helpful wrote some code which brought up an alert box on my website www.livehazards.com.
How do I convert this line of code into html so I can display that same sentence in my sidebar
Thanks in advance
alert("There have been " + obj.features.length + " Earthquakes in the last month");
With jQuery (since it looks like you're using jQuery there):
$("#elementID").text("There have been " + obj.features.length + " Earthquakes in the last month");
Where elementID is the ID of the element you want the text inside of.
Related
I'm trying to add an <a> element around a string that currently exists as a Javascript variable.
The resulting element should display as: 'copyright symbol' + 'companyName' + 'this year's date'. BUT with ONLY the variable 'companyName' acting as an html link
Existing JS
const companyName = "ANY BUSINESS NAME";
function setCopyrightText() {
$("#ifcCopyright").html("© " + companyName + " " + new Date().getFullYear());
}
Existing HTML
<span class="textHeavy fontWhite" id="ifcCopyright"></span>
I've tried several approaches and I'm beginning to realise there must be a simpler solution but I'm missing it _ I've been through several answers on Stack but unsuccessful in finding what I need
Thanks in advance for any suggestions
.html() takes A string of HTML to set as the content of each matched element. Did you try this :
const companyName = "ANY BUSINESS NAME";
function setCopyrightText() {
$("#ifcCopyright").html("© <a href='https://www.google.com' target='_blank'>" + companyName + "</a>" + new Date().getFullYear());
}
setCopyrightText();
Codepen
Please put link to your company site where the # is currently placed.
const companyName = "Peuconomia Int'l Pvt. Ltd.";
function setCopyrightText() {
$("#ifcCopyright").html("© " + companyName + " " + new Date().getFullYear().toString());
}
setCopyrightText();
I have an Ajax script that outputs both the title and description of certain jobs based on user input. While I can get these displaying without issue, I can't seem to insert a line break between the title and description. I have the following:
outputString = savedData[i].firstName + ". Description: " + savedData[i].cardNumber;
var paragraph = $("<p />", {
text: outputString
});
$("#data").append(paragraph);
I have tried inserting a traditional br line break, as well as, \n and \r\n both in the quotation marks before description which just displays the text of the line break rather than breaking the line, and also outside of the quotation marks which breaks any output. How can I successfully implement a linebreak?
Cheers.
As you are providing the outputString string as text, the html <br/> is being displayed as text in the string. You should specify it in as html and use <br/> for line break:
outputString = dataJobs[i].title + ". <br/>Description: " + dataJobs[i].description;
var paragraph = $("<p />", {
html: outputString
});
$("#data").append(paragraph);
If you would like to add a <br/> specifically, then you can do the following:
// assuming that your dataJobs[i].title and dataJobs[i].description are defined
var paragraph = $("<p />");
paragraph
.append(dataJobs[i].title + '.')
.append('<br />')
.append("Description: " + dataJobs[i].description);
$("#data").append(paragraph);
You need to add a <br/> in a separate append call, but not as part of a string. Hope this helps.
In the code below as the P tag has display property set to block by default, so there is no need for using line break.
Setting Title and Description in two different P tags that will solve your problem
Try the following code.
outputString = "<p>Title: "+dataJobs[i].title+"</p><p>description: "+dataJobs[i].description+"</p>";
$("#data").append(outputString);
I think the "jQuery way" should look like this:
var $outputString = $( "<span>" + dataJobs[i].title + ".<br>Description: " + dataJobs[i].description + "</span>" );
$( "#data" ).append($outputString.wrap( "<p></p>" ));
outputString = dataJobs[i].title + ". Description: " + dataJobs[i].description + "<br/>";
If I added the TrustPilot html code directly on the HTML page, it works fine but I needed to insert it with jQuery. I see the HTML code when inserted but it's not displaying.
$(window).on('load', function () {
var el = $('#some-element');
el.html( trustPilotHtml() );
function trustPilotHtml() {
var str = "<div " +
"class='trustpilot-widget' " +
"data-locale='en-GB' " +
"data-template-id='123456' "+
"data-businessunit-id='123456' " +
"data-style-height='500px' " +
"data-style-width='100%' " +
"data-theme='light' " +
"data-stars='4,5' " +
"data-schema-type='Organization'>" +
"<a " +
"href='https://some-url.com' target='_blank'>Trustpilot</a> " +
"</div>";
return $(str);
}
});
Is the only way of getting the element to display properly is to directly inserted into the HTML without javascript?
No it's not the only way.
You should have a bootstrap script in your inside the HEAD part of your HTML (or close to it).
This script takes care of initializing all the widgets (TrustBoxes in Trustpilot lingo) that you have in your HTML.
Of cause that doesn't work if you are injecting the HTML dynmically, so it's also possible to call window.Trustpilot.loadFromElement(trustbox); yourself, when if you need to.
Here trustbox is a HTMLElement, you could get by using document.getElementById("some-element") or similar.
Reference: https://support.trustpilot.com/hc/articles/115011421468
The following worked for me on a product list page which returned filtered list via ajax
var element = document.getElementsByClassName("trustpilot-widget");
for(var i=0; i<element.length; i++) {
window.Trustpilot.loadFromElement(element[i]);
}
On the first page load all product reviews are displayed as expected, but if the page is updated via ajax call (using filters for example) the reviews are lost. Running the above code after ajax, reloads the reviews
I am using a text effect plugin that works great when I enter text into the text box and click the button, as shown here: http://jsfiddle.net/bushell/5ttdejk3/
However, what I am trying to do is now load the data directly into the #digits div from an external js file. Something like this:
function loadJSON(from, to, petrolPrice, mpg)
{
$.getJSON("http://localhost:8888/petrol/petrolData.php?from="+from+"&to="+to+"&petPrice="+petrolPrice+"&mpg="+mpg, function(data) {
var mins = data.Minutes;
var target = $('#digits');
var output= data.Origin + " " + data.Destination + "-mins:-" + mins + "--" + data.PetrolCost;
document.getElementById("myDiv").innerHTML=output;
target.shuffleText(mins);
});
}
Some reason its not working, any idea why?
If your mins variable is a number, it won't work, shuffleText expects a string:
target.shuffleText(''+mins);
I have the following code snipet:
document.getElementById('PS_FORM/SUBJECT_PROPERTY/Business_Comments').value = com_textcl + "\n" ;
document.getElementById('PS_FORM/SUBJECT_PROPERTY/Business_Comments').value = com_text;
I want each of the values to be in their own line. Is there a way to get this done??
Thanks
Assuming that element (PS_FORM/SUBJECT_PROPERTY/Business_Comments) is a textarea, then the JS should be:
document.getElementById('PS_FORM/SUBJECT_PROPERTY/Business_Comments').value=
com_textcl + "\n" + com_text;
If it's a SELECT the code would be different (update your question).
If it's a div or some other HTML element (rather than a FORM element) then the code would be more like:
document.getElementById('PS_FORM/SUBJECT_PROPERTY/Business_Comments').innerHTML=
com_textcl + "<br />\n" + com_text;