Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Jquery add after

Posted on 2013-06-06
13
Medium Priority
?
641 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: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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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 60

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

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
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 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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

879 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