Skip to Content (Press Enter)
UserImage.jpg
prashanth charl
4Views
3Comments
how to call a jQuery function in a webscreen
Question
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();    
   });
0
0
21 Nov 2013
Copy Link
2012-03-16 12-21-09
João Rosado
Staff
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
0
0
21 Nov 2013
Copy Link
UserImage.jpg
prashanth charl
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

 
0
0
21 Nov 2013
Copy Link
2020-03-05 15-52-45
André Vieira
Staff
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
0
0
22 Nov 2013
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.