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?

Answer 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() {