Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Jquery add after

Posted on 2013-06-06
13
Medium Priority
?
630 Views
Last Modified: 2013-06-06
I would like to use JQuery to add a dollar sign in front of the price field on the product pages of this site, here is an example:
http://harbisondevelopment.info/ume-blossom

The html in front of the actual price is:
<div class="field-label">Price:&nbsp;</div><div class="field-items"><div class="field-item even">
but the price is different for each sword, so I can't use the before function. I can't seem to get the code to work. I tried:
$('.field field-name-field-price field-type-text field-label-above').after($('$'));
You can see there are other divs after that one and they are repeated several times on the page. Is there a way to stack the divs (which as nested) so the $ is added to the right place?
Maybe I should just be using javascript?
0
Comment
Question by:nanharbison
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 3
  • +1
13 Comments
 
LVL 13

Expert Comment

by:Aaron Feledy
ID: 39225496
It might be easier to try doing it with a module...
This one should do the trick:
https://drupal.org/project/simple_field_formatter
0
 
LVL 17

Author Comment

by:nanharbison
ID: 39225544
Arrow_1 - I installed this module, but can't figure out how to get at it. I need it on a content type that I have created so the company can add swords for sale without using me. This module is not on the configure page and it isn't available when creating new content on a basic page. There is no link to configure it on the modules page.
0
 
LVL 13

Expert Comment

by:Aaron Feledy
ID: 39225552
I believe you use it by going to the display settings page for your content type. You should then be able to configure the format settings for the specific field to display a dollar sign prefix.
0
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39225624
Try this...

$(document).ready(function() {
       $(".field-label").sibling(".field-items").children(".field-item.even").append("&#36;");
});

Open in new window


or

$(document).ready(function() {
       $(".field-items").children(".field-item.even").append("&#36;");
});

Open in new window

0
 
LVL 17

Author Comment

by:nanharbison
ID: 39225807
@Arrow_1:
I found it, added the $ and it doesn't show, it's not even in the html when I look at the code.

shaanRawat:
The first one doesn't work, the second one adds several $'s to every field-items div, which is many. Somehow the JQuery has to include the classes:
field field-name-field-price field-type-text field-label-above
so that it is only put in front of the price field item
0
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 39225810
As a matter of interest why are you adding the dollar sign with JQuery and not in the page itself?
0
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39225823
try this...
$(document).ready(function() {
       $(".field-items > .field-item.even").append("&#36;");
});

Open in new window

0
 
LVL 17

Author Comment

by:nanharbison
ID: 39225835
@ julianH: I need the price to be a number so it can get kicked over to be bought through Paypal, and this site is done in Drupal using a custom content type, so I can't just add it to the page.

@IshaanRawat - that doesn't work. As I said, just the div with the price has to have this, all of the fields are called field-items and half of them are field-item-even.
0
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39225842
OK... As your wish...

$(document).ready(function() {
       $(".field.field-name-field-price.field-type-text.field-label-above").find(".field-item.even").append("&#36;");
});

Open in new window

0
 
LVL 17

Author Comment

by:nanharbison
ID: 39225848
I thought I could add the dollar sign in front of the price on the manage display, there is usually a place to add some content before or after the content of the field, but it isn't there. I might be thinking about the web form.
0
 
LVL 13

Expert Comment

by:Aaron Feledy
ID: 39225851
Not sure about that module. I've never actually used it. For the jQuery solution, I've modified IshaanRawat's code for your specific case.

As a prefix:
$(document).ready(function() {
       $(".field-name-field-price .field-items").children(".field-item").prepend("&#36;");
});

Open in new window


As a suffix:
$(document).ready(function() {
       $(".field-name-field-price .field-items").children(".field-item").append("&#36;");
});

Open in new window


Tested it myself and it worked.
0
 
LVL 10

Accepted Solution

by:
Ishaan Rawat earned 2000 total points
ID: 39225863
Or you can do that by css also...

.field.field-name-field-price.field-type-text.field-label-above .field-item.even:before {
content: "$ ";
}

Open in new window


I Checked It...


and IT WORKED/..
0
 
LVL 17

Author Closing Comment

by:nanharbison
ID: 39225887
Thanks this works, when I tried the ascii characters in the CSS I got the ascii characters. Thanks for suggesting this, as much as I know about CSS, I didn't know I could do this in CSS.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question