jQuery Add CSS to elements before ajax call complete?

Question

I'm using jquery to send a shopping cart printed by javascript to PHP script which will create a PDF.

My problem is that the cart is sent without any styles attached, so it will look like this: http://u31830.shellit.eu/kauppa/kuitit/kuitti63.pdf

I want to simply do a display:none on some elements and float some elements on left so it will look good. I know that this could be done with Attr(), but I don't know how to use it.

Here's my ajax call:

$(document).ready(function() {
$(function() {
    $(".submit").click(function() {
      var data = $('#yhteystiedot').serializeArray();
      //styling here?
      data.push( { name: 'cartContent', value: $('#emailedcart').html()}); // Read the cart, and send it to script
      //alert (data);return false;
     $.ajax({
    type: "POST",
    data: data,
    url: "order.php",
    dataType: "html",
    error: function(){ alert("Jotakin meni pahasti pieleen! Yritä uudelleen?");
 },
    success: function() {
 alert("Onnistui");
        }


  });
  return false;

    });
  });        
});

And the cart will look like this on the browser console:

<div class="simpleCart_items" id="emailedcart">
    <div>
        <div class="headerRow">
            <div class="item-name">Tuote</div>
            <div class="item-quantity">Määrä</div>
            <div class="item-price">Hinta</div>
            <div class="item-total">Yhteensä</div>
            <div class="item-remove"></div>
        </div>
        <div class="itemRow row-0 odd" id="cartItem_SCI-1">
            <div class="item-name">Teipit (Valkoinen hiilikuitu)</div>
            <div class="item-quantity">
                <input type="text" value="1" class="simpleCart_input">
            </div>
            <div class="item-price">48.00€</div>
            <div class="item-total">48.00€</div>
            <div class="item-remove"><a href="javascript:;" class="simpleCart_remove">Remove</a>
            </div>
        </div>
    </div>
</div>

I want to add the following css to the elements before it's sent to PHP script

.item-remove{display:none;}
.headerRow div{float:left;}
.itemRow div{float:left;}

But how?

Why don't you try to add the style attributes to it instead of adding classes to the elements.. Check if that approach works.. — Sushanth --
– Sushanth --, Commented Sep 7, 2012 at 16:27
The shopping cart is printed by a script that I've tried understanding, but I'm unable to understand it and so this approach isn't possible. — user1537415
– user1537415, Commented Sep 7, 2012 at 16:38

Kristian · Accepted Answer · 2012-09-07 16:25:08Z

1

$(document).ready(function() {
  $(function() {
    $(".submit").click(function() {

      //do the CSS here.
      $('.item-remove').css({'display':'none'});
      $('.headerRow div').css({'float':'left'});
      $('.itemRow div').css({'float':'left'});

      var data = $('#yhteystiedot').serializeArray();
      //styling here?
      data.push( { name: 'cartContent', value: $('#emailedcart').html()}); // Read the cart, and send it to script
      //alert (data);return false;
     $.ajax({
    type: "POST",
    data: data,
    url: "order.php",
    dataType: "html",
    error: function(){ alert("Jotakin meni pahasti pieleen! Yritä uudelleen?");
 },
    success: function() {
 alert("Onnistui");
        }


  });
  return false;

    });
  });        
});

I've assumed that you want to update those CSS styles after click but before AJAX. right? otherwise, just throw those CSS jquery lines above $(".submit").click(function() {

answered Sep 7, 2012 at 16:25

Kristian

22k19 gold badges108 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kristian Over a year ago

unless i'm misunderstanding your question, it shouldn't be any harder than that.

Giorgi · Accepted Answer · 2012-09-07 16:26:59Z

0

You can use beforeSend of ajax to do that: here is how i would do it

            $.ajax({
            type: '...',
            url: '...',
            data: {
                ...
            },
            dataType: '...',
            beforeSend: function() {
                $('.item-remove').css('display','none');
                $('.headerRow div').css('float','left');
                $('.itemRow div').css('float','left');
            },
            success: function(result) {
                             ....

answered Sep 7, 2012 at 16:26

Giorgi

6092 gold badges15 silver badges29 bronze badges

Collectives™ on Stack Overflow

jQuery Add CSS to elements before ajax call complete?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related