Change a class to add it to a link - javascript

I have this little code here:
<script>
$(function() {
$('.insert_usrdata_name').text($('.client-profile td:contains("Name:")').next().text());
$('.insert_usrdata_email').text($('.client-profile td:contains("E-mail:")').next().text());
$('.insert_usrdata_regdate').text($('.client-profile td:contains("Registration:")').next().text());
$('.insert_usrdata_logindate').text($('.client-profile td:contains("Last Login Time:")').next().text());
$('.insert_usrdata_loginIP').text($('.client-profile td:contains("Last Login From:")').next().text());
$('.insert_webdata_domain').text($('.account-information td:contains("Domain:")').next().text());
$('.insert_webdata_status').text($('.account-information td:contains("Status:")').next().text());
$('.insert_diskusg_percentage').text($('.account-information td:contains("Disk Usage:")').next().text());
$('.insert_diskusg_numbers').text($('.account-information td:contains("Disk Usage:")').next().text());
$('.insert_bandwidthusg_numbers').text($('.account-information td:contains("Bandwidth:")').next().text());
$('.insert_srvdata_url').text($('.account-information td:contains("Server Name:")').next().text());
$('.insert_srvdata_srvload').text($('.account-information td:contains("Web Server Load:")').next().text());
$('.insert_srvdata_dbload').text($('.account-information td:contains("MySQL Server Load:")').next().text());
$('.progress.xs .diskusgbar').css('width', $('#diskUsageProgressBar .green-bar').css('width'));
$('.progress.xs .bandusgbar').css('width', $('#BandwidthProgressBar .green-bar').css('width'));
});
</script>
When I use <span class='insert_webdata_domain'>N/A</span> it load website URL if URL is available... But I want to make it work with a link for example Load site . How to achieve this?

Replace your line :
$('.insert_webdata_domain').text($('.account-information td:contains("Domain:")').next().text());
to :
$('.insert_webdata_domain').text('' + $('.account-information td:contains("Domain:")').next().text() + ' ');
Update
as per your comment if you want to keep span and also want to add link then:
$('.insert_webdata_domain')
.text($('.account-information td:contains("Domain:")').next().text())
.append('' + $('.account-information td:contains("Domain:")').next().text() + ' ');

Related

implementing html tags of js variable

When I click open first window link a popup opens.
in that popup you will see a grid with two columns.
in that first column i need to combine name and and icon.
so i added span tag before a tag but its not working.
can you guys tell me how to combine.
providing code below.
http://jsfiddle.net/cepzsokp/
var a = $('<span></span><a/>', {
class: 'sportsDataPlayer',
download: 'download.csv',
type: 'text/csv',
href: URL.createObjectURL(data),
html: ev.FileName
});
return a[0].outerHTML;
You can not do that html mark up. easiest thing would be just add the span before the outerHTML
var a = $('<a></a>', {...})
return "<span></span>" + a[0].outerHTML;
I have edited your latest jsfiddle. Here is the working DEMO
I have modified this line of code as below:
return "<span onclick="window.open('" + model.mobileVersion + "', 'popup', 'width=800,height=600,scrollbars=yes,resizable=no')" class='" + skyCloudmageProfilePic + " displayInlineBlock " + kendotxtMenu + "'></span>" + a[0].outerHTML;

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

Json Individual Links in Table column

I have one page with a json table pulling in information from the json api. This works fine. Now my issue is, On the far right column i'm wanting a link to another page of mine, This link will be a unique link. At the moment, As you can see by the code, i can get it to link to the html page 12345, But all the rows link through to this. Which does not help Ha!
I'm ideally wanting the first button to link to 1.html then second button to link to 2.html and so on and so forth.
Here is the code i have so far.
for(var i =0;i < json.results.collection1.length;i++) {
var title = json.results.collection1[i].Name.text;
var venue = json.results.collection1[i].Venue.text;
var date = json.results.collection2[i].Date;
var button = "<button class='redirect-button' data-url='12345.html'>Link</button>";
$("#apple").append("<tbody><tr><td>"+title+"</td><td>"+venue+"</td><td>"+date+"</td><td>"+button+"</td></tr></tbody>");
$("#apple").find(".redirect-button").click(function(){
location.href = $(this).attr("data-url");
});
}
},
Obviously all help would be greatly appreciated. Thanks Sam
Just to explain the comment above
The link you're creating is a <button> but really it's just a string.
So by concatenating the URL part of the string based on something (like your i index in your loop) you can change it to anything you want.
so for example :
var button = "<button class='redirect-button' data-url='" + i + " .html'>Link</button>";
this gives an element that looks like :
<button class='redirect-button' data-url='0.html'>Link</button>
would give you 0.html, 1.html, etc (change the data-url='" + i + " .html' to data-url='" + (i+1) + " .html' and you get 1.html, 2.html, 3.html...)
or if you can change the API to give you a proper link in the return you can make it a bit more readable with:
var button = "<button class='redirect-button' data-url='" + json.results.collection2[i].LinkUrl + " .html'>Link</button>";
results in :
<button class='redirect-button' data-url='abcd.html'>Link</button>
assuming the return is called LinkURL and it's value is 'abcd'
Finally you append this string to the $("#apple") element and then the click event is added that looks for the data-url value and changes the current browser location to that new value.

Dynamic str replace with javascript on html containing stream

I have a html which looks roughly like this
<div id="wallPostTemplate">
<li id='comment-content--oOo-id-oOo-' class='comment-content' comment_id='-oOo-id-oOo-'>
<a class='comment-avatar' href='-oOo-link-oOo-'>
<img class='small_avatar' src='<?="../" . MESTO_ZA_UPLOAD_FAJLOVA_KORISNIKA ?>-oOo-korisnikPodaci.Slika-oOo-'></a>
-oOo-text-oOo-
</li>
</div>
Now I get the contents of the html into a sting with $('#wallPostTemplate').text() and then I want to replace dynamically the occurrences of the string -oOo-id-oOo-
with whatever data I have stored inisde a variable like -oOo-id-oOo-, -oOo-text-oOo- and so on...
Now I tried numerous ways to tackle this thing but I always end up without a solution.
Here is my latest try out. HELP pls Q_Q
var regex = new RegExp('{\-oOo\-'+index+'\-oOo\-}', "g");
post = post.replace(regex, value);
Also I tried str.replace but it does not work... It seems new lines are the problem but I have no idea how to over come this.....
edit:
To make it more simple to understand i made a example on jsfidle: http://jsfiddle.net/DdBFB/
And as you can see, you can see nothing.... it dous not work when you get the content over the html function.
If I understand your question your goal is make something like a post template that will be loaded in runtime/cliente side. So if this is really your goal you can try use the jQuery Template Plugin
Sample for your case: (don´t tested yet)
var tmlpPost = "<div id='${postId}'>" +
" <li id='comment-content-${postId}' class='comment-content' comment_id='${postId}'>" +
" <a class='comment-avatar' href='${link}'>" +
" img class='small_avatar' src='<?="../" . MESTO_ZA_UPLOAD_FAJLOVA_KORISNIKA ?>${korisnikPodaciSlika}'>" +
" </a> " +
" ${postText}" +
" </li>" +
"</div>";
$.tmpl( tmlpPost, { "postId" : "123" , "link" : "http://posturl.com", "korisnikPodaciSlika" : "something", "postText" : "Post text goes here..."}).appendTo( "#yourPostWall" );
Or using <script> not a var: See this Fiddle
<script id="tmlpPost" type="text/x-jquery-tmpl">
<div id='${postId}'>
<li id='comment-content-${postId}' class='comment-content' comment_id='${postId}'>
<a class='comment-avatar' href='${link}'>
<img class='small_avatar' src='<?="../" . MESTO_ZA_UPLOAD_FAJLOVA_KORISNIKA ?>${korisnikPodaciSlika}'>
</a>
${postText}
</li>
</div>
</script>
Now on page load:
$("#tmlpPost").tmpl( { "postId" : "123" , "link" : "http://posturl.com", "korisnikPodaciSlika" : "something", "postText" : "Post text goes here..."}).appendTo( "#output" );​
Although your question is not really clear I've whipped up an example that replaces a value based on a regular expression.
var source = "-oOo-korisnikPodaci.Slika-oOo-";
var id = "korisnikPodaci.Slika";
var regex = new RegExp('\-oOo\-' + id + '\-oOo\-', "gmi");
// Match
source.replace(regex, "hello world"); // => "Hello World"
// Mismatch
source = "-oO!!!o-korisnikPodaci.Slika-oO!!!o-";
source.replace(regex, "hello world"); // => "-oO!!!o-korisnikPodaci.Slika-oO!!!o-"
ok, i figured the answer was that i set the regex flags wrong, so i went to jsfiddle and fiddled with it and you can see the answer there :)
http://jsfiddle.net/DdBFB/11/
I was missing the multi line flag Q_Q....im no good with regex even in php not to speak in js...

Fetching facebook likes count with jquery goes wrong

i have a little script which fetches the likes and tweets count about a url via jquery. Now it works great, but when a certain page has 0 like/shares, then jquery returns 'undefined' because the 'shares' part is not shown in the output.
$(document).ready(function() {
url = "http://awebsitehere.com/";
beforecounter = " <b>";
aftercounter = "</b>";
// Get Number of Facebook Shares
$.getJSON('http://graph.facebook.com/'+url+'&callback=?',
function(data) {
$('#facebook').append(beforecounter + data.shares + aftercounter);
});
// Get Number of Tweet Count
$.getJSON('http://urls.api.twitter.com/1/urls/count.json?url='+url+'&callback=?',
function(data) {
$('#twitter').append(beforecounter + data.count + aftercounter);
});
})
How would I have to edit this script to display 0 instead of undefined when facebook has got 0 shares/likes for a certain url?
try this:
$('#facebook').append(beforecounter + (data.shares || 0) + aftercounter);
and likewise for the twitter value.
At first you have to create a username of your page(see under your page name #username. Just click it...)
Then goto https://developers.facebook.com/tools/explorer/ and get an access token key
Then script something like that
function facebookLikesCount(access_token, pageusername)
{
var url = "https://graph.facebook.com/"+pageusername+"?fields=likes&access_token="+access_token+"";
$.getJSON(url,function(json){
alert(json.likes);
});
}
facebookLikesCount('your accesstoken', 'pageusername');
its work for me.

Categories

Resources