my custom jQuery code does not work, why??

[tlyczko]

I have this generated code in zencart which is emplaced by one of the shopping cart files into the shopping cart display (rows):

<span class="btn btn-primary">
Check Out
</span>

btn-primary class sets the button background color to blue

I want to use javascript/jQuery to give this button a different background color.
Please do not tell me change the css, I already know how to do that, it will not do what I need.

I have this jQuery code in /modules/pages/shopping_cart/jscript_buttons.js:

("span.btn.btn-primary:contains('Check Out')").css("background-color", "purple");

Nothing happens to the check out button, can anyone suggest why??
I've tried several variations on the span part...

span.btn.btn-primary corresponds to the styles, contains means it has the phrase 'Check Out', so it SHOULD work but it does not, why???

Thank you, Tom

[DrByte]

Don't jQuery statements need to start with $ or jQuery?

[tlyczko]

Don't jQuery statements need to start with $ or jQuery?

Yes, I accidentally dropped the $ when I copy/pasted the line, I cannot now fix it in my original post.

The statement actually reads as shown below, it is the only line in the js file, I've checked the syntax against jQuery docs.

$("span:contains('Check Out')").css("background-color", "purple");

Maybe I am declaring the javascript wrong?? I know the zen cart code itself creates the span...

Thank you, Tom

[gjh42]

You say the button text has a class tag, which looks like it should be specific enough to identify and control with CSS. Can we see the site? Maybe we can suggest a way to apply styling to it... there are lots of tricky methods that can be used.

[tlyczko]

You say the button text has a class tag, which looks like it should be specific enough to identify and control with CSS. Can we see the site? Maybe we can suggest a way to apply styling to it... there are lots of tricky methods that can be used.

It is not a live site.
The span class example given above is real html/css code created and applied by ZEN CART APPLICATION CODE, which as many of you know has quite a convoluted route to generating the html/css used by the browser.
I get no errors telling me why the jQuery code does not work.
Thank you, Tom

[gjh42]

The characteristics of the files that create the HTML output are irrelevant to this question. If the site is not live, then posting a good snippet of the HTML page source output for the element in question (showing the container elements for the text, out far enough to identify the location) could help us help you.

On the off chance that the jQuery you want to use really is needed, telling us more about how you implemented it (and set up jQuery) may be useful.

[tlyczko]

The characteristics of the files that create the HTML output are irrelevant to this question. If the site is not live, then posting a good snippet of the HTML page source output for the element in question (showing the container elements for the text, out far enough to identify the location) could help us help you.

On the off chance that the jQuery you want to use really is needed, telling us more about how you implemented it (and set up jQuery) may be useful.

The relevant page source IS posted. It is generated by the Zen Cart php file that creates the shopping cart display.
I'll make an additional post with more source code.

The jQuery implementation is explained here:

I have this jQuery code in /modules/pages/shopping_cart/jscript_buttons.js, 1 line only:
$("span.btn.btn-primary:contains('Check Out')").css("background-color", "purple");
This is the way any page-specific JS is called in ZC.

This is a standard jQuery method for modifying CSS based upon content of any span with classes .btn and .btn-primary.
It could also be done like this which also does not work...
$("span:contains('Check Out')").css("background-color", "purple");

Thank you, Tom

[gjh42]

I'll make an additional post with more source code.

That's what I was asking for. Knowing the context elements with their classes/ids could make it possible to isolate and control the specific item. Does CSS not affect that span now at all for you, or are you having difficulty containing the effect to just that?

Do you have jQuery loaded in your site? Properly inserting the jscript_ file for the specific behavior is not all you need to do, and you didn't confirm that you have jQuery loaded.

[tlyczko]

This is the generated HTML code:
<div class="buttonRow forward">
<a href="http://localhost/index.php?main_page=checkout_shipping">
<span class="btn btn-primary">
Check Out
</span>
</a>
</div>

I have already double-checked that jQuery is loaded -- improperly in the header for now, later I will move it into the footer.
Using various available methods, one can see that jQuery is indeed loaded.

$("span:contains('Check Out')").css("text-decoration","underline"); doesn't work at all, and this line is in
\includes\pages\modules\shopping_cart\jscript_buttons.js

JS files don't use the <script></script> nomenclature

Have double-checked the syntax...
http://api.jquery.com/contains-selector/

Any other suggestions, ideas??

Thank you, Tom

[tlyczko]

THIS code works properly within the above-mentioned js file:

if ($("span:contains('Check Out')"))
{
alert("alert");
}

THIS code does not work, no response, no alert

if ($("span:contains('Check Out')"))
{
alert(span.css("color"));
alert($(this).css("color"));
}

it's not a browser problem...

suggestions anyone???

thank you, tom