how to call a jQuery function in a webscreen

how to call a jQuery function in a webscreen

  
Hi All,

I have imported a jQuery file into resources path.After that I was trying to call a function of jQuery in my webscreen as shown below.Also I have added the AddJavascriptTag function of HttpRequestHandler extension in preparation method.When I browse the page I am getting an error "jQuery is Undefined".Please help me on this issue

osjs(document).ready(function(){ 
      osjs('.childcont').corner();    
   }); 
Hi Prashanth,

Instead of using it as resources+HttpRequestHandler just copy paste it to the javascript property of a WebBlock. Then use the webblock in your screen.

(Also as a side note, In 8.0+ "osjs" is a compatibility alias. You can use $ or jQuery directly)


$(document).ready(function($){ 
      $('.childcont').corner();    
   });

Regards,
João Rosado

João Rosado wrote:
Hi Prashanth,

Instead of using it as resources+HttpRequestHandler just copy paste it to the javascript property of a WebBlock. Then use the webblock in your screen.

(Also as a side note, In 8.0+ "osjs" is a compatibility alias. You can use $ or jQuery directly)


$(document).ready(function($){ 
      $('.childcont').corner();    
   });

Regards,
João Rosado
 HI Rosado,

Thanks for reply.As you suggested ,I will use it as a webblock and use it in my webscreen .Here I am trying to call a jquery function coner() to apply corners to a div container.So how to call this jquery function on a div container which exists on my webscreen so that I can apply corners to my container.I have used below jquery syntax on my webscreen javascript property("childcont" is the name of the  div container).Is it the correct way of calling a jquery function on div?

$(document).ready(function($){ 
      $('.childcont').corner();    
   });

Thanks,
Prashanth

 
Hi prashanth,

The issue you have is with the jQuery selector. $('.childcont') is actually selecting all the elements with CSS class 'childcont'. Now to solve your problem, I'm assuming you have gave a name to the container inside Service Studio and that name is actually childcont. You now have two ways of working this out.

  1. You assing a class to the div, 'chilcont' using the style property. This way your code will work and it will work for all the containers you give that class to. Just for reference, rest assured that you can add more than one class on the style property, so if you need to apply it to the container you'd set 'myclass childcont' as the value on the style property for instance.
  2. If you only want this particular container to be selected and don't want to use a class name you have to use a selector based on id, something like $('#myIdGoesHere'). The '#' is necessary to indicate you're looking for the id of the element. Now the tricky part. When you set the name of the container in Service Studio this is actually not the real id that is going to be assign to the HTML element. The OutSystems Platform generates this id for you. Fortunately you can use a runtime property to refer to this value. What you're looking for in your unescaped expression is:

    "<script>
    $(document).ready(function() {
        $('#" + childcont.Id + "').corner();
    });
    </script>"
    
 
I hope this helps you out.

Cheers