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

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.

Related

How to get all the subfolders name within a ROOT Folder and create HTML Content?

I am working on a school project and I have to do a static digital menu website for a bar. Because it's static, I used JavaScript where necessary. Anyways, I divided everything into groups, each group is represented by a card with an image and a button. Here is an example:
This is the source code for a card:
<body>
<div id="cards">
<div class="card">
<img src="/Resources/Food.png" class="card_image">
<a href="javascript:showMenu()" class="button">
<p>FOOD</p>
</a>
</div>
</div>
</body>
As you can see, in order to add a single card, I had to manually write the whole structure of a card in the second div, with the class="card".
BUT, I must create it dynamically based on the structure of the subfolders inside the Root folder witch is called Resources, here's a scheme:
In order to achieve this I started using JavaScript since it's the only possible way I think:
<script type="text/javascript">
function showMenu()
{
var content = `
<div class="card">
<img src="/Resources/Food.png" class="card_image">
<a href="javascript:showMenu()" class="button">
<p>FOOD</p>
</a>
</div>`;
document.querySelector("#cards").innerHTML = content;
}
</script>
So, now that I've expressed what I need to do is this: in the JavaScript code you can see that the card was generated manually anyways but I need the content to generate based on the folder structure I have stored locally. In other words, the whole script should take in input the name/path of the ROOT folder which is called "Resources" and from there it should generate the groups based on it's content. For example, if I click the button on the FOOD Card, then it should delete the FOOD and DRINKS Cards and only add the Vegetables Card in this case...I know it sounds complicated but at the end of the day the problem lies in getting the subfolder names, and since the image has the same name of the subfolder, apply it on the <img> tag and also on the button. All this, using JavaScript. If you know that some other language would work much better I'm open to suggestions, but I built the entire website until now only using JavaScript.
Anyways, I tried to express the problem the best I could so if something is unclear, I can easily modify the post if needed. Thanks in advance!
You could put the image data into a JSON object, then bind related processing functions according to the requirement.

Loading HTML data vs loading unformatted data

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.

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

Why are edit in place forms rendered together with the display version instead of being rendered on the fly?

Is there a specific reason that most everyone implements edit-in-place as a shown 'display' div and a hidden 'edit' div that are toggled on and off when somebody clicks on the associated 'edit' button like so?
<div id="title">
<div class="display">
<h1>
My Title
</h1>
</div>
<div class="edit">
<input type="text" value="My Title" />
<span class="save_edit_button"></span>
Cancel
</div>
</div>
Everywhere I look, I see edit-in-place basically handled like this. This approach certainly makes sense when you are rendering all views on the server side and delivering them to the client. However, with pure AJAX apps and frameworks like backbone.js, it seems that we could make our code much more DRY by rendering edit-in-place form elements on the fly as necessary, possibly even making a factory method that determines which form element to render. e.g.
an H1 element with class "title" is replaced by <input type="text" />
a span with class "year_founded" is replaced by <input type="number" min="1900" max="2050" />
a span with class "price" is replaced by an input with the appropriate mask to only allow prices to be input.
Is this practice of rendering all edit-in-place form elements a historical legacy leftover from when pages were rendered on the server-side?
Given the flexibility and power we have with client-side MVC frameworks like Backbone.js, is there a reason for not creating and inserting the form elements on the fly when necessary using a factory method? Something like this:
HTML
<div id="description">
Lorem ipsum dolar set amit...
</div>
<span class="edit_button"></span>
Backbone.js View
events: {
"click .edit_button": "renderEditInPlaceForm",
},
renderEditInPlaceForm: function:(e) {
var el = $(e.currentTarget).previous();
var id = el.attr('id');
var value = el.text();
var tagName = el.tagName();
var view = new editInPlaceForm({
id: id,
type: tagName,
value: value
});
$("#id").html(view.render().el)
},
Where editInPlaceForm is a factory that returns the appropriate edit-in-place form element type based on tagName. This factory view also controls all its own logic for saving an edit, canceling an edit, making requests to the server and rerendering the appropriate original element that was replaced with the .html() function?
It seems to me that if we use this approach then we could also render the <span class="edit_button"></span> buttons on the fly based on a user's editing rights like so:
<h1 id="title">
<%= document.get("title") %>
</h1>
<% if (user.allowedToEdit( document, title )) { %>
<span class="edit_glyph"></span>
<% } %>
where the allowedToEdit function on the user model accepts a model and attribute as its arguments.
It's an interesting idea. The devil is in the detail.
While your simple example is easily rendered as an editable form on the fly, things quickly get trickier when dealing with other data types.
For example - suppose my edit form requires the user to choose a value from a select list. On the display form I can simply display the user's choice, but for the edit form I am going to need those other available choices. Where do I hide them on the display? Similar issues exist for checkboxes, radio lists...
So, perhaps we should consider rendering the edit form, and then deriving our display-view from that?
After 5 Backbone apps I came to same thoughts.
When things are complicated you have forms to show relations between user data,
but in simple cases you just need input, select, checkbox over h1, div or span
Now I am searching for jQuery plugin to make simple in place editing without ajax.
jQuery but not Backbone becuase I don't want to be tight coupled with Backbone for such small thing.
Likely to wright my own jQuery + Synapse plugin http://bruth.github.com/synapse/docs/.
Synapse for binding with model and jQuery for input placing

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