CODEWITHSUNDEEP
javascriptnode.jsexpresspug
Hugo Dias
Hugo Dias

Reputation: 153

Override Jade script. block

I'm trying override a Jade script. tag,but all what I do don't work.

I have the following code:

Layout.jade

    block foot
    footer.container#footer
        .row
            .twelve.columns Todos os direitos reservados. © 2015 Pet Feeder

block scripts
    script(src="/javascripts/js/jquery.min.js")
    script(src="/javascripts/lib/jQueryUI/jquery-ui-1.8.18.custom.min.js")
    script(src="/javascripts/js/s_scripts.js")
    script(src="/javascripts/js/jquery.ui.extend.js")
    script(src="/javascripts/lib/qtip2/jquery.qtip.min.js")
    script(src="/javascripts/lib/fullcalendar/fullcalendar.min.js")
    script(src="/javascripts/js/jquery.list.min.js")
    script(src="/javascripts/js/pertho.js")

script.
    $(document).ready(function(){
        prth_common.init();         
    });

Until here,everything is fine,and the script runs like a charm. But when I need put another script,from other views,the script. added from the view doesn't work. They simply doesn't get added.

anyView.jade

block content
//my content here    
script.
function sendForm(){
$.ajax({
    url:'/some/controller',
    data:$("#form_save").serialize(),
    type:'POST',
    dataType:'JSON',
    beforeSend:function(){
      //some stuff here
    },
    success:function(data){
      console.log(data);
    }
  });
}
$("#submit_form").click(function(){
  sendForm();
});

How can I do that?

EDIT - the full files:

https://gist.github.com/sp4rtablood/e59075d52d594cbaa4bf

https://gist.github.com/sp4rtablood/f0d6d83aa93be9773b85

Upvotes: 1

Views: 946

Answers (1)

Jonathan Lonowski
Jonathan Lonowski

Reputation: 123513

When a view extends another, it no longer allows for loose content. The script. in anyView.jade is being discarded as invalid.

It's expected to be placed under a block, such as scripts. You can use append to insert it after script(src="/javascripts/js/pertho.js"):

extends layout

block content
    # ...

block append scripts
    script.
        function sendForm(){
            // ...
        }
        $("#submit_form").click(function(){
          sendForm();
        });

That should generate:

<!-- ... -->
<script src="/javascripts/js/pertho.js"></script>
<script>
        function sendForm(){
            // ...
        }
        $("#submit_form").click(function(){
          sendForm();
        });
</script>
<!-- ... -->

Upvotes: 1

Related Questions