Loading HTML data vs loading unformatted data - javascript

When loading data using AJAX, what is preferred:
Loading html data e.g.
<div class="message">
<span class="author">John Smith</span>
<span class="date">01/01/17</span>
<div class="message-content">
Example text
</div>
<div class="message-actions">
Upvote
Downvote
Leave a comment
</div>
</div>
(The above is entirely fictional, by the way)
Or loading JSON data e.g.
{
"author":"John Smith",
"date":"01/01/17",
"text":"Example Text"
}
I realise that loading JSON data would place less load on the server, but I'm primarily concerned about loading speed for the user. So basically, my question is, how does loading html data-for example using JQuery's .load() method, compare to loading JSON data and rendering it as html using Javascript, in terms of total time before a user can see the displayed result?
EDIT after #vol7ron's comment:
This is a messaging application, and so these messages will be displayed one after the other in a scrolling area of the screen. The number of messages is variable.

Related

Are there reasons that Javascript can only access some of the new DOM after Ajax?

I am just learning JS and while implementing AJAX I ran into some strange behavior.
In my code I have the following
<div id="saved_listing_form"></div>
an onchange in a select element runs a script where ajax fills the above div with a preview of the saved listing along with a form populated with fields that can be edited in order to edit the listing if desired.
There is a button in the form that is used to preview the changes to the listing before saving them.
Below is the code that will be populated by the "preview" script that does not respond to JS
<article class="listing" id="listing_preview" style="display:none;" title="">
<a href="" id="preview_url" target="_blank"><img id="preview_picture" src="" alt=""><h3 id="preview_name"></h3>
<span id="preview_phone"></span><address><span id="preview_address_1"></span><br><span id="preview_address_2"></span>
<span id="preview_city_state_zip"></span></address>
</a>
</article>
I tried manipulating the listing through the console in Firefox as a last resort. The console is able to find the article,
document.getElementById('listing_preview')
but cannot produce changes in the DOM
document.getElementById('listing_preview').style.display = 'block';
will not make it appear
I can even
make changes to the object in the console, but that will not show up on the page.
ie document.getElementById('preview_name').innerHTML = 'Hello';
This change will show up in the console, but not in the page.
Here is the strange part. The already-saved listing that is populated by ajax in the saved_listing_form works perfectly and can be manipulated via the console and scripts as expected.
<article class="listing" id="listing" title="Dr. Peter Griffin of Q'Hog, RI"><img id="saved_image" src="images/clients/Peter_Griffin20200827180833.jpg"><h3>Peter Griffin, D.C.</h3>+11234567890<br><address>123 Spooner St<br>Q'Hog, RI 12345</address></article>
Are there any reasons that part of the ajax-populated div works as expected while other DOM objects within the same div would not? I don't appear to have any broken html elements that would throw things off.
The reference to the JS that controls the preview is loaded in at the very end of the code that ajax populates.
Any help would be much appreciated.

Inject html after review widget loads for schema markup

My webstore uses Kudobuzz for product reviews, but our e-commerce platform (PDG) isn't supported for SEO markup data.
This widget does not support schema markup on it's own, so I want to somehow select the relevant pieces and inject the schema markup to the various divs/spans that make up the widget. One problem is figuring out how to inject code that google can parse, and another is figuring out how to make the actual selectors for this super bloated widget.
Here is a codepin of the widget and some markup data that is already on the site: http://codepen.io/anon/pen/GpddpO
Here is a link to a product page if you want to see how everything works: https://www.asseenontvhot10.com/product/2835/Professional-Leather--Vinyl-Repair-Kit
This is (roughly) the markup I'm trying to add if it helps:
<div itemscope itemtype="http://schema.org/Review">
<div itemprop="reviewBody">Blah Blah it works 5 star</div>
<div itemprop="author" itemscope itemtype="http://schema.org/Person">
Written by: <span itemprop="name">Author</span></div>
<div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Thing">
<span itemprop="name">Stop Snore</span></div>
<div><meta itemprop="datePublished" content="2015-10-07">Date published: 10/07/2015</div>
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content="1"><span itemprop="ratingValue">5</span> / <span itemprop="bestRating">5</span> stars</div>
</div>
Theoretically you could write a very small amount of microdata using css :before and :after - with content but it would need all spaces and symbols converted into ISO format, eg.
#name:before { "\003cspan\2002itemprop\0022name\2033"}
#name:after { content: "\2044\003cspan003e"
even spaces need to be substitued with \2002 or an equivalent whitespace
code
should wrap this microdata to your HTML to any element called name:
<span itemprop="name">...</span>
Clearly this can only work if the widget lets you have clear ids or class names for the elements added, and it may be useless you know the type of object reviewed first (eg Book, Movie, since this needs to go at the start in the example I gave - which is incomplete). The code would need to be nested correctly so if you want further help can you edit your question with example HTML for a completed review.
Writing your own JSON-LD script at the top of the page is another option - it would be a different question (if you get stuck) but isn't embedded within the data itself
Edit
it's a good idea to test the css in a separate environment first, eg setup a jsfiddle

HTML with draggable elements to PDF

I have a report builder that when served up has several div elements with charts and graphs. Now the user can dragged and sorted these elements how they wish. My issue now is how to capture the html page so the PDF will reflect this new layout.
Before I was capturing the html page in Coldfusions cfsavecontent and sending that to a process page to create the pdf. This does not work when elements have been dragged and sorted dynamically. Any ideas or suggestions would be helpful. Thanks.
<form name="fform" action="process.cfm" method="post" target="iprocess">
<cfsavecontent variable="strPDF">
<div id='graph1'>
<div style='position:absolute; top:500px; left:175px'>
<span>Report Data Here</span>
</div>
</div>
<div id='graph2'>
<div style='position:absolute; top:500px; left:175px'>
<span>Report Data Here</span>
</div>
</div>
<div id='graph3'>
<div style='position:absolute; top:575px; left:175px'>
<span>Report Data Here</span>
</div>
</div>
</cfsavecontent>
<input type="hidden" name="strPDF" value="#strPDF#">
<input type="submit" value="Create PDF">
<div>
<div>#strPDF#</div>
</div>
</form>
<iframe height="300" width="700" src="" name="iprocess"></iframe>
JQuery is used to make the elements draggable. Is it possible to recapture the page to pdf with the new element positions?
Answer = No (there... that was simple.)
TL;DR
Ok let me see if I understand this right. You have a page with charts and dynamic content that allows user experience customization.
You have report builder, you are serving up charts with what? with cfchart? and you were at one time doing a cfsavecontent to a variable but you are not doing that now. So what are you doing? Forget it...it doesn't matter.
Let me tell you what I have to do and I think you might want to consider something similar.
I have my page of charts that are .png generated serverside via cfchart. I do a cfsavecontent grabbing the variable and doing a cfdocument PDF generation. This will give your people or person something to print and look at. It meets whatever PDF print requirements you might have. The PDF styling no matter how you slice it is limited. you will no doubt have already experienced styling give and take when you look at your generated page of charts and divs, and your PDF output page side by side.
If you want client customizations (dragging things and what not). Then store those as user preferences in a table and when they return you can set things up a certain way and then have that variable handy you can generate a PDF based on that.
Understand that PDF does not follow 'all styling behaviors'. You will need to consider your give and take scenarios. If the user wants to print something like a chart, then my god man...keep it super simple and keep it all native in coldfusion: cfchart, cfsavecontent, cfdocument.
Good luck.

change text string on couple website at the same time using jquery

22I am preparing a website which will contain prices of products on couple pages. Sometimes the same products are on couple of pages (e.g. on the main page and the specific product page). What I'm trying to achieve is to have ability of using any sort of spreadsheet or any other type of document (another perhaps) to control prices of all items across the whole website. I believe every price must be indexed somehow so we know that in with id="product1" will be the correct price and different than in id="product2".
Currently I have the example code here:
<h3>Product 1</h3>
<div class="price">
<span id="product1">£55 per day</span>
</div>
<h3>Product 2</h3>
<div class="price">
<span id="product2">£20 per day</span>
</div>
etc...
Sorry for rather a 'question type' topic than the 'case type', but I was trying to find the solution already. I know it can be done in php, but I have no idea about php unfortunately. So anything in html / javascript will be handy. Thnx a lot for any help/advice.
use JSON, not XML It's not 2003. Your jquery would be:
var prices = $.get("prices.json")
var product;
$("h3").each.( function()
{
product = $(this).html();
$(this).next().children("span").html(prices[product]);
});
Assuming you have no other H3's on your pages, otherwise give each product ID 'h3' a class a la:
<h3 class="products">Product 1</h3>
and use $(".products") instead of $("h3").
You could also use a selector to pull the <div>'s by class, and fetch the child <span>'s id.
I would recommend storing the data in either a database or an xml file to be read by the website. That way it's a "change once" situation. However, the scope of what needs to be done is beyond what you'd find in a simple answer here.
Edit: Jquery is a client side language, which means that it will only change what's currently exposed to the client at that time. It does have the ability to read from an xml file, and use that data to populate the display. But that data does need to be stored externally for it to affect more than one page at the same time.

Should I use template or return full code in jquery AJAX?

I am currently working on a project that lets users post comments with jquery and ajax. So far it is using Json and retunring several items, username, comment text, user photo url, comment ID number and stuff like that, I then need to use some sort of template to make all this data go into the correct div's before adding it all to the screen.
I am new to using javascript so this is a hard task for me. I am now considering the easy route.
Just have my PHP backend script return the whole block of code, div's and everything in place but I am wondering is this a bad idea? More importantly is it a bad idea with json?
Here is an example of a block of code that needs to be added to the screen when a comment is posted
<li class="admin" id="comment-1371">
<div class="photocolumn">
<!-- START Photo block -->
<div class="imageSub" style="width: 100px;">
<img class="male" src="http://cache2.mycrib.net/images/image_group34/0/39/T_653807517aff2b1f5662d865b40d87d527c8eb.jpg" alt="Something" width="100"/>
<div class="blackbg"></div>
<div class="label">JasonDavis</div>
</div>
<!-- END Photo block -->
</div><!-- END photocolumn -->
<div class="commenttext">
<p>02/12/3009</p>
<p>sample text for comment area!</p>
</div>
<!-- END COMMENTTEXT -->
</li>
I would say it depends on the situation/application. For instance I would use json and templating for a flight/hotel etc result screen. Why return 50k's worth of the same markup when a 4k json object will do and will allow for rapid clientside sort/filter. If you dont need quick clientside filtering/sorting then responding with dom fragments is ok. Horses for courses.
I don't see a problem with returning HTML via AJAX. A bonus of this is that you can generate most of the HTML in a view in PHP and still keep things fairly clean.
Tokenizing your data into an object is nice for re-use but can be overkill for a one-off.
Go the easy route, I can see no reasons of going with JSON array.

Categories