I am using jquery .load function to load the results from server and append it in my html:
$("#content").load('Get/classPosts?class=arts&min=1', function (responseText, textStatus, XMLHttpRequest) {
arr = $.parseJSON(responseText);
for (i = 1; i < arr.length; i++) {
if (arr[i] != null) {
$('#content').append("<section class='contentpost'><div class='contentimg'><a href='" + arr[i][0] + "'><img src='" + arr[i][2] + "'/></a> </div><div class='contenttitle title'><a href='" + arr[i][0] + "'>" + arr[i][1] + "</a></div></section>").slideDown(100);
}
}
});
As far as fetching and appearance of of data through .load is concerned its fine, but there are few issues that i am facing with this:
most important is that it is not actually appending the new data at
the end of the #content but it is just replacing the existing html
with the new one.
And before inserting the new data at the top of #content there is raw JSON string is being displayed, like this:
[
["93","Title-1","http://stackoverflow.com"],
["92"," Title-2","http://stackoverflow.com"],
["90"," Title-3","http://stackoverflow.com"],
["89"," Title-4","http://stackoverflow.com"],
["89"," Title-5","http://stackoverflow.com"],
null,null,null,null,null]
I don't know why it is there on page.
However, this would be a little off question but i would appericiate if somebody can also help me with .slideDown(100); function at the end, i want each new content to come out as animated sliding down but its not working also.
thankyou!
load() does this by default. When you call load first, you are telling it to replace the html inside the #content div. You need to use GET or POST to retrieve the information and then append it to #content.
Something like this:
$.get('Get/classPosts?class=arts&min=1', function (data) {
if(data.length > 0) {
arr = $.parseJSON(data);
var newId;
for (i = 1; i < arr.length; i++) {
if (arr[i] != null) {
// unique id for slidedown to work
newId = $('.contentpost').length;
$('#content').append("<section id='contentpost-"+newId+"' class='contentpost'><div class='contentimg'><a href='" + arr[i][0] + "'><img src='" + arr[i][2] + "'/></a> </div><div class='contenttitle title'><a href='" + arr[i][0] + "'>" + arr[i][1] + "</a></div></section>");
// slide down pointing to the newly added contentposts only
$('#contentpost-'+newId).slideDown(100);
}
}
}
});
What you also need to do is set the contentpost class' to hidden in css, something like:
.contentpost {
display:none;
}
You need this or the slidedown won't work. The div needs to be hidden.
Related
I am working on Navigation path display
Dashboard > BusinessSelection > TaxPeriod > VehCategories > VehTaxable
for that I am using session storage. In navigation path I want replace some text For ex: "VehCategories" instead display "Category". But where I am doing mistake I am not able to understand.
I have written a if condition
if (text == "VehCategories") {
text = "Category";
}
and the text I am storing in session storage for that code is below
if (typeof (Storage) != "undefined") {
if (sessionStorage.breadcrumb) {
var breadcrumb = sessionStorage.breadcrumb;
if (breadcrumb.indexOf(text) == -1) {
sessionStorage.breadcrumb = breadcrumb + " > <a href='" + pageName1 + "' id='" + filename + "'>" + text + "</a>";
var current = sessionStorage.getItem('breadcrumb');
alert(current);
sessionStorage.setItem('breadcrumb', current);
}
} else {
sessionStorage.breadcrumb = "<a href='" + pageName1 + "'>" + text + "</a>";
}
}
everything is working fine. but only replacing string I am facing problem. After replace a string of final result showing below:
Dashboard > BusinessSelection > TaxPeriod > Ca
Please help me I am struggling lot.
I think preferred way would be to store it as a parsed array and then parsing it:
sessionStorage.setItem('breadcrumb',JSON.stringify([1,2,3]))
console.log(JSON.parse(sessionStorage.getItem('breadcrumb')))
Than after manipulating the array elements you can build the html with Array.reduce.
Currently making a website to index and play movies stored on my hard drive that I've recently pulled off dvds just as a little side project. I have a 'master movie list' JSON file with all the data I need for each movie including the name, video source, video poster source, and genre which I would like to allow the use of placing a movie in multiple different genres.
Currently the problem I'm having is while I'm parsing through the genre list generated its not placing the html in the correct ID that id like it to on the webpage.
For example:
"genre":"comedy,recent,scifi"
I went about it how I thought I should, through getJSON and setting an output variable to which I get the genre value, split to make it an array, and get the element by going through each of them in a loop. Its not placing it in the right place though. The example above would be placed in comedy, recent, scifi, horror, and a few others for some reason and I have absolutely no reason why.
$.getJSON('/webresource/data/movies.json', function(data) {
console.log(data);
var output = '';
var ele = $('');
$.each(data, function(key, val) {
output += '<div class="video_box lazy-background" video-src="' +
val.video_src + '" video-poster-src="' +
val.video_poster_src + '">' +
'<h5>' + val.name + '</h5>' +
'</div> ';
var genres = val.genre;
var genresarray = genres.split(',');
for (i = 0; i < genresarray.length; i++) {
var genreelement = $('#' + genresarray[i]);
genreelement.html(output);
}
});
});
[ {
"name": "a star is born", "video_src":"/files/movies/A%20Star%20Is%20Born/astarisborn.mp4", "video_poster_src":"https://images-na.ssl-images-amazon.com/images/I/51R-TU6VaTL.jpg", "genre":"recently,romance,drama"
}
] // this is an example of the json
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="genre_box">
<h3>RECENTLY ADDED</h3>
<div class="scroll_box" id="recently"></div>
</div>
<div class="genre_box">
<h3>ACTION</h3>
<div class="scroll_box" id="action"></div>
</div>
<div class="genre_box">
<h3>COMEDY</h3>
<div class="scroll_box" id="comedy"></div>
</div>
Your output variable is being appended to and kept on every iteration of your $.each loop. What you want is to append to the end of $("#action"), $("#comedy"), etc. You should do something along these lines:
$.getJSON('/webresource/data/movies.json', function(data) {
console.log(data);
$.each(data, function(key, val) {
var output = '<div class="video_box lazy-background" video-src="' +
val.video_src + '" video-poster-src="' +
val.video_poster_src + '">' +
'<h5>' + val.name + '</h5>' +
'</div> ';
var genres = val.genre;
var genresarray = genres.split(',');
for (var i = 0; i < genresarray.length; i++) {
var genreelement = $('#' + genresarray[i]);
genreelement.append(output);
}
});
});
My question is this, if I have an Text html element that looks like...
<a id='1' onmouseover="changeImage('setname/setnumber')">Cardname</a>
Can I retrieve the id (in this case 1) on a mouseover event so that I may use it in javascript to do something else with it.
Not sure if I can do this, but I'm hoping I can. What I have is a bit of javascript code that is taking data from an xml document. I have a list of 500+ cards that I have parsed through and stored by categories that are used often. Here are the relevant functions as they apply to my question.
var Card = function Card(cardName, subTitle, set, number, rarity, promo, node)
{
this.cardName = cardName;
this.subTitle = subTitle;
this.set = set;
this.number = number;
this.rarity = rarity;
this.promo = promo;
this.node = node;
}
Where node is the position within the list of cards, and due to the formatting of the document which I started with contains each card alphabetically by name, rather than numbered logically within sets.
Card.prototype.toLink = function()
{
var txt = "";
this.number;
if (this.promo == 'false')
{
var image = this.set.replace(/ /g, "_") + '/' + this.number;
txt += "<a id='" + this.node + "' onmouseover=changeImage('" + image + "')>";
txt += this.toString() + "</" + "a>";
}
else
{
var image = this.set.replace(/ /g, "_") + '/' + this.rarity + this.number;
var txt = "";
txt += "<a id='" + this.node + "' onmouseover=changeImage('" + image + ')>";
txt += this.toString() + "</a>";
}
return txt;
}
Here is what I am using to populate a list of cards, with names that upon hovering over will display a card image.
function populateList () {
for (i = 0; i<cards.length; i++)
document.getElementById('myList').innerHTML += '<li>'+cards[i].toLink()+</li>;
}
What I am trying to do is retrieve the id of the element with the onmouseover event so that I can retrieve everything that is not being saved to a value.
I realized I can pass the id as part of the changeImage function as a temporary workaround, though it involves rewriting my toLink function and my changeImage function to include a second argument. As a married man, I've enough arguments already and could do with one less per card.
In summary, and I suppose all I needed to ask was this, but is there a way using only javascript and html to retrieve the id of an element, onmouseover, so that I may use it in a function. If you've gotten through my wall of text and code I thank you in advance and would appreciate any insights into my problem.
if I have an Text html element that looks like...
<a id='1' onmouseover="changeImage('setname/setnumber')">Cardname</a>
Can I retrieve the id (in this case 1) on a mouseover event so that I may use it in javascript to do something else with it.
Yes, if you can change the link (and it looks like you can):
<a id='1' onmouseover="changeImage('setname/setnumber', this)">Cardname</a>
Note the new argument this. Within changeImage, you'd get the id like this:
function changeImage(foo, element) {
var id = element.id;
// ...
}
Looking at your code, you'd update this line of toLink:
txt += "<a id='" + this.node + "' onmouseover=changeImage('" + image + ', this)>";
Of course, you could also just put the id in directly:
txt += "<a id='" + this.node + "' onmouseover=changeImage('" + image + ', " + this.node + ")>";
And then changeImage would be:
function changeImage(foo, id) {
// ...
}
I didn't use quotes around it, as these IDs look like numbers. But if it's not reliably a number, use quotes:
txt += "<a id='" + this.node + "' onmouseover=changeImage('" + image + ', '" + this.node + "')>";
I have a large text document filled with random words, urls, email-addresses etc. An example: "word 2014 john#doe.com http://www.example.com/ http://example.com/image.gif", but it could look differently, there could be linebreaks, multiple spaces, tabs etc. And the data could very fast become huge (it is a type of bookmarking service so data is arriving all the time in the form of images, text and hyperlinks).
Another example of content in the text document (the one I use for testing):
http://movpod.in/images3/MovPod-logo.png
https://dt8kf6553cww8.cloudfront.net/static/images/developers/chooser-drawing-vfln1ftk6.png
http://xregexp.com/assets/regex_cookbook.gif
asd asd ad feaf
apa
http
I want to wrap all these strings in tags, and be able to target out images, hyperlinks, emails and strings. I have tried different ways but unsure which is the best, and also, there is a RegExp I do not fully understand.
The end result should be:
<span>word</span>
<span>2014</span>
<a class="mail" href="mailto:john#doe">john#doe.com</a>
<a class="url" href="http://www.example.com/">http://www.google.com/</a>
<a class="img" href="http://example.com/image.gif">http://example.com/image.gif</a>"
Match. This approach is however not keeping the text order intact, but it works.
arr = data.split("\n");
for (i = 0; i < arr.length; i++)
{
arr2 = arr[i].split(' ');
for (j = 0; j < arr2.length; j++)
{
if (arr2[j].match(/(.gif|.png|.jpg|.jpeg)/))
{
ext = arr2[j].substr(-4);
ext = ext.replace(".","");
imgs += '<a class="img '+ext+'" href="'+arr2[j]+'">'+arr2[j]+'</a>';
}
else if (arr2[j].match(/(http:)/))
{
urls += '<a class="url" href="'+arr2[j]+'">'+arr2[j]+'</a>';
}
else
{
spans += '<span>'+arr2[j]+'</span>';
}
}
}
Regexp. I thought it would be possible to look for the inverse at exp_all, as in anything else but containing http. It does not however.
var exp_img = /(https?:\/\/([\S]+?)\.(jpg|jpeg|png|gif))/g,
exp_link = /([^"])(https?:\/\/([a-z-\.]+)+([a-z]{2,4})([\/\w-_]+)\/?)/g,
exp_all = /^((?!http).)*$/g;
text = data.replace(exp_all, '<span>$3</span>');
text = text.replace(exp_img, '<a class="img" href="$1">$1</a>');
text = text.replace(exp_link, '<a class="url" href="$2">$2</a>');
So, the best way of accomplishing this plain-text to HTML conversion would be appreciated. I would love if there was already some type of library for this. I was looking at Markdown but then I would still have to update the plain-text for the Markdown, so I guess not an option.
And if possible I would like to strip out "http://" and have it as clean and neat as possible.
Im making a few assumptions about your data (for example, that every entry is always there.) If that's true, then something like this should work fine:
<script>
var data = ['word\n 2014\t\t john#doe.com\n\n\n\n\n http://www.example.com/ http://example.com/image.gif apa http',
'fooo 2013 foo#bar.com http://www.blah.com/ http://blah.com/gif.gif asd asd ad feaf'];
function htmlify(string){
var elem = string.replace(/[^\w\s\/#:\.]/g,'').replace(/\s+/g, ' ').split(' ');
var result = [];
for (var i = 0; i < elem.length; i++){
if (elem[i].match(/http:/)) {
if (elem[i].substr(-4).match(/.gif|.png|.jpg|.jpeg/)){
result.push("<a class='img' href='" + elem[i] + "'>" + elem[i] + "</a>");
} else {
result.push( "<a class='url' href='" + elem[i] + "'>" + elem[i] + "</a>");
}
} else if (elem[i].match(/\w+#\w+\.\w+/)){
result.push("<a class='mail' href='mailto:" + elem[i] + "'>" + elem[i] + "</a>");
} else {
result.push("<span>" + elem[i] + "</span>");
}
}
return result;
}
var result = data.map(htmlify);
console.log(result);
</script>
I'm having issues dynamically creating content from an array of images. What I want to happen is that when keywords are entered into the searchbar (try "joyride" or "nick"), all of the images that match the keywords show up. Currently, only one image shows up, and it doesn't necessarily match the keyword. I think I'm going wrong with the javascript function - I feel like I shouldn't be using innerHTML to create the photos, especially because when the keyword is deleted, it just leaves the one image.
Would it be easier to do it all in jQuery/javascript, instead of generating the initial gallery of images in jQuery and trying to do the filtering in javascript? I'm lost.
http://scf.usc.edu/~uota/itp301/final/odc-photos.html
This is a working version of the page, with the arrays and other code that I am using.
Thanks in advance!
$(document).ready(function(){
for(var i = 0; i < src.length; i++){
var content = "<div class='pics' id='imagesection" + i + "'>";
content += "<div class='images'><img class='imagesfiles' height='133px' width='200px' src='" + src[i] + "'></div>";
content += "</div>";
$("#gallery").append(content).hide().fadeIn(250);
}
});
var songSearch = function(keyword){
var foundFlag = false;
var content = "";
for (var i = 0; i < src.length; i++){
if (tags[i].toLowerCase().indexOf(keyword) != -1 || keyword == "") {
content = "<div class='pics' id='imagesection" + i + "'>";
content += "<div class='images'><img class='imagesfiles' height='133px' width='200px' src='" + src[i] + "'></div>";
content += "</div>";
findFlag = true;
}
}
if(findFlag){
document.getElementById("gallery").innerHTML = content;
}
else{
content = "Your search did not return any results.";
}
}
</script>
It looks like the problem is on this line in the songSearch function:
content = "<div class='pics' id='imagesection" + i + "'>";
You are redefining the variable content instead of concatenating it. This way it will always be just the last image. Try changing it to:
content += "<div class='pics' id='imagesection" + i + "'>";
There is also have a variable inside the songSearch function called foundFlag that is later referenced as findFlag. That shouldn't be causing the issue though.