jquery setup with Symfony

Question

I am trying to set up a simple jquery for my symfony platform. Just trying to implement this http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_p to see if everything works fine.

base.html.twig

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>{% block title %}TEST JQUERY{% endblock %}</title>
    {% block stylesheets %}{% endblock %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
    {% block body %}{% endblock %}
    {% block javascripts %}{% endblock %}
</body>
</html>

index.html.twig

{% extends '::base.html.twig' %}

{% block body %}

    <script type="text/javascript">
        $(document).ready(function(){
            $("button").click(function(){
                $("p").hide();
            });
        });
    </script>


<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>


{% endblock %}

when i do view source on the page, the structure seems fine but the jquery is not being executed.

Did you check the console of your browser web tools? Is the Jquery file included? Maybe some other errors are echoed? — Michal Trojanowski
– Michal Trojanowski, Commented Feb 5, 2013 at 10:36

RRikesh · Accepted Answer · 2013-02-05 10:37:51Z

2

Your jQuery you are including doesn't exist on google's CDN

Use <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> instead.

If you are wanting version 1.9.1, get if from jquery.com at this link

answered Feb 5, 2013 at 10:37

RRikesh

14.5k5 gold badges55 silver badges74 bronze badges

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

2 Comments

myTD Over a year ago

thank you for pointing out this.. i found the jquery link from the jquery.com/download page.. which displays as script src="ajax.googleapis.com/ajax/libs/jquery/1.9.1/…> .. i should have paid more attention.. Thanks again

RRikesh Over a year ago

Ah okay, I just noticed it too. Maybe Google will update their CDN soon.

seferov · Accepted Answer · 2013-02-05 10:39:23Z

1

Change the jquery function and try this:

<script type="text/javascript">
    $(document).ready(function(){
        $("button").live('click', function(){
            $("p").hide();
        });
    });
</script>

update

As rrikesh pointer out since live is deprecated after v1.7, you may want to use this:

<script type="text/javascript">
    $(document).on("click", "button", function (){
        $("p").hide();
    });
</script>

edited Feb 5, 2013 at 10:39

answered Feb 5, 2013 at 10:33

seferov

4,1613 gold badges42 silver badges76 bronze badges

3 Comments

RRikesh Over a year ago

As of jQuery 1.7, the .live() method is deprecated

David Fregoli Over a year ago

actually in 1.9 (which he's using) is removed, not just deprecated

RRikesh Over a year ago

Thanks for fixing, but I think the problem here is a bad link to jquery as I mentionned. I got a 404 trying to access it and I just checked: Google CDN stops at version 1.9.0

Manolo · Accepted Answer · 2013-10-21 23:23:09Z

0

This could be a better solution:

<script src="{{ asset('//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js') }}"></script>
<script><window.jQuery || document.write('<script src=\"\{\{ asset(\'../app/Resources/public/js/vendor/jquery-1.9.1.min.js\') \}\}\"><\/script>')</script>

And download the jquery-1.9.1.min.js file to your app/Resources/public/js/vendor/ directory.

In this way, the client always gets the source.

answered Oct 21, 2013 at 23:23

Manolo

27k21 gold badges91 silver badges134 bronze badges

Collectives™ on Stack Overflow

jquery setup with Symfony

3 Answers 3

2 Comments

update

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

update

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related