Solved

Jquery add after

Posted on 2013-06-06
13
607 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
  • 5
  • 4
  • 3
  • +1
13 Comments
 
LVL 13

Expert Comment

by:Arrow_1
Comment Utility
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
Comment Utility
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:Arrow_1
Comment Utility
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
 
LVL 9

Expert Comment

by:Ishaan Rawat
Comment Utility
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
Comment Utility
@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 51

Expert Comment

by:Julian Hansen
Comment Utility
As a matter of interest why are you adding the dollar sign with JQuery and not in the page itself?
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 9

Expert Comment

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

Open in new window

0
 
LVL 17

Author Comment

by:nanharbison
Comment Utility
@ 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 9

Expert Comment

by:Ishaan Rawat
Comment Utility
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
Comment Utility
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:Arrow_1
Comment Utility
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 9

Accepted Solution

by:
Ishaan Rawat earned 500 total points
Comment Utility
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
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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)

771 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now