Solved

Jquery add after

Posted on 2013-06-06
13
613 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
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:Arrow_1
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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
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 55

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:Arrow_1
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 500 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

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…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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)

820 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