jQuery Text Effect Not Working - javascript

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);

Related

I'm unable to display hyperlink via a jsp function it displays my link as text

I have below function taking text as inputs and returning text with warning symbol in a box
function showErrorMessage3(textErrorMessage1, textErrorMessage2, textInputName) {
console.log("showErrorMessage2, textErrorMessage1=[" + textErrorMessage1 + "], textErrorMessage2=["+ textErrorMessage2 +"], textInputName=[" + textInputName + "]");
$('.error_txt_input dd').text(textErrorMessage1+'\n'+textErrorMessage2);
$('.error_txt_input').css('display','block');
$('.error_txt_input').addClass(textInputName + '_Error');
}
this code should display the URL being passed in TextErrorMessage1 as a hyperlink.
But it is instead displaying it as plain text.
I'm assuming that $('.error_txt_input dd') is an <a> tag thus you can do this:
$('.error_txt_input dd').attr('href', textErrorMessage1);
if not then try this:
$('.error_txt_input dd').wrap(function() {
var link = $('<a/>');
link.attr('href', textErrorMessage1);
link.text(textErrorMessage1+'\n'+textErrorMessage2);
return link;
});

Cannot show TrustPilot HTML when inserted with JavaScript (jQuery)

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

Converting Javascript Alert Into HTML

<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.

encodeURIComponent not working with Twitter button

I'm currently trying to make an app that tweets out the quote that's currently in the text bubble. However, when I use this line of code,
<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text" + encodeURIComponent(quote.quote + ' - ' + quote.author);>Tweet</a>
It doesn't take me anywhere. Is there any way I could get this working or would I need to use an external Twitter button?
Thanks!
CodePen Link: http://codepen.io/Jelani/full/rOmrOJ/
You can't embed javascript in your markup like that. One approach you could take would be to add some code to your randomQuote function like this:
var randomQuote = function() {
... // current code
var text = quote.quote + ' - ' + quote.author;
$('.twitter-share-button').attr('href', "https://twitter.com/intent/tweet?text="+encodeURIComponent(text));
}
Another approach would be to move your quote variable declaration out of the randomQuote function and set an onclick on the twitter-share-button
<a class="twitter-share-button" onclick="goTweet()">Tweet</a>
that calls a function that does something like:
function goTweet() {
var text = quote.quote + ' - ' + quote.author;
window.location.href = "https://twitter.com/intent/tweet?text=" + encodeURIComponent(text);
}

How to include javascript generated text into html link?

I have a javascript that displays a generated text into a div:
document.getElementById('phrase').innerHTML = phrase;
PHRASE_TEXT_GETS_SHOWN_HERE
Basically I'm trying to set up a link that will take the text and post it to twitter with a link:
Clicky for tweety
How can I include the generated text in the link?
Do you mean like:
function setPhrase(phrase) {
var url = 'http://twitter.com/home?status=' + encode(phrase);
$('#phrase').html('' + phrase + '');
}
...?
Un-jQuerying it should be straightforward enough, if that's how you roll.
This is un-jQueried:
function setPhrase(phrase) {
var url = 'http://twitter.com/home?status=' + encodeURI(phrase);
document.getElementById('phrase').innerHTML = '' + phrase + '';
}
If you didn't see my failbraining encode for encodeURI as an error you should use Firebug. It may also fail if you have more than one element with the id phrase or if you have no elements with the id phrase.

Categories

Resources