Jquery in PM

Questions and discussion about using ProcessMaker 2: user interface, running cases and functionality

Moderator: amosbatto

Forum rules
Please search to see if a question has already been asked before posting. Please don't ask the same question in multiple forums.
maxsilva
Posts: 3
Joined: Wed Feb 10, 2010 1:11 pm

Jquery in PM

Unread postby maxsilva » Wed Feb 10, 2010 1:14 pm

Hi,

Please, Is there a tutorial or sample showing how to use jquery or jquery plugins
in ProcessMaker?!

Thanks in advanced,

Maxwell

amosbatto
Posts: 5018
Joined: Mon Jun 22, 2009 10:28 am
Country: Bolivia
Location: La Paz

Re: Jquery in PM

Unread postby amosbatto » Thu Feb 11, 2010 12:25 pm

Nobody has created a tutorial for JQuery in ProcessMaker. Feel free to create one and post it on the wiki if you have the time and the inclination.
Amos B. Batto ♦ ProcessMaker Technical Documentation Writer & Forum Manager ♦ Cofounder of ILLA-A

maxsilva
Posts: 3
Joined: Wed Feb 10, 2010 1:11 pm

Re: Jquery in PM

Unread postby maxsilva » Thu Feb 11, 2010 12:34 pm

Thanks.

I would do this, but Is possible to use jquery in PM without change source?

Thanks in advanced,

Maxwell

amosbatto
Posts: 5018
Joined: Mon Jun 22, 2009 10:28 am
Country: Bolivia
Location: La Paz

Re: Jquery in PM

Unread postby amosbatto » Thu Feb 11, 2010 1:10 pm

I've never tried to use JQuery in ProcessMaker. Do you want to display JQuery output inside of a DynaForm?
Amos B. Batto ♦ ProcessMaker Technical Documentation Writer & Forum Manager ♦ Cofounder of ILLA-A

maxsilva
Posts: 3
Joined: Wed Feb 10, 2010 1:11 pm

Re: Jquery in PM

Unread postby maxsilva » Fri Feb 12, 2010 1:11 pm

Yes, I would like display a week calendar, to put events and use PM to save, get data and send alerts.

I would like to use this http://www.packtpub.com/article/calenda ... r-plugin-1

Please, can you help?

Thanks in advanced,

Maxwell

amosbatto
Posts: 5018
Joined: Mon Jun 22, 2009 10:28 am
Country: Bolivia
Location: La Paz

Re: Jquery in PM

Unread postby amosbatto » Sat Feb 13, 2010 10:59 am

After glancing at the code for 30 seconds, I don't see any reason why you can't get it to work, but you will just have to experiment and figure it out on your own. Stick the javascript source files in the /workflow/public_html directory. See: http://wiki.processmaker.com/index.php? ... k_property
Then Edit the HTML in your DynaForm to add the JavaScript source files to your form. Stick the JQuery PHP code in a trigger. Good luck.
Amos B. Batto ♦ ProcessMaker Technical Documentation Writer & Forum Manager ♦ Cofounder of ILLA-A

syndrael
Posts: 46
Joined: Tue Dec 01, 2009 9:25 am

Re: Jquery in PM

Unread postby syndrael » Fri May 07, 2010 7:55 am

In my side, i've tried to understand PM internal mechanism and i'm pessimistic to easily integrate JQuery in PM source..
The in-place Ajax Framework .. named Maborak does not permit many things.. so the most intelligent way to integrate JQuery would be first of all to replace each maborak function by Jquery equivalent function..
So to modify the source.. almost everywhere..
But that only my opinion..
S.

Lawrence
Posts: 35
Joined: Tue Nov 02, 2010 4:52 pm

Re: Jquery in PM

Unread postby Lawrence » Wed Aug 10, 2011 2:30 am

Has anyone had any luck with this?

I am currently trying to use JQuery in a dynaform but without much success.

Very frustrating :(

User avatar
ethanpresberg
Posts: 481
Joined: Wed Aug 10, 2011 2:32 am
Country: United States of America
Location: Raleigh, North Carolina
Contact:

Re: Jquery in PM

Unread postby ethanpresberg » Wed Aug 10, 2011 4:15 am

sorry
Last edited by ethanpresberg on Wed Aug 10, 2011 10:42 am, edited 1 time in total.
-----------------------------------------
Ethan Presberg
ProcessMaker Senior Sales Engineer
ProcessMaker Inc
@ethnp

User avatar
ethanpresberg
Posts: 481
Joined: Wed Aug 10, 2011 2:32 am
Country: United States of America
Location: Raleigh, North Carolina
Contact:

Re: Jquery in PM

Unread postby ethanpresberg » Wed Aug 10, 2011 4:15 am

sorry
Last edited by ethanpresberg on Wed Aug 10, 2011 10:43 am, edited 1 time in total.
-----------------------------------------
Ethan Presberg
ProcessMaker Senior Sales Engineer
ProcessMaker Inc
@ethnp

User avatar
ethanpresberg
Posts: 481
Joined: Wed Aug 10, 2011 2:32 am
Country: United States of America
Location: Raleigh, North Carolina
Contact:

Re: Jquery in PM

Unread postby ethanpresberg » Wed Aug 10, 2011 10:09 am

(sorry about the 2 spams above, my post wasnt approved for some reason and i didnt understand what was going on so i tried submitting again, then i needed to edit it but it wasnt there yet so i posted the third one.. sorry guys :s)

Hi guys

I believe I have found a solution to this issue. Boy, I pulled out quite a few hairs getting this to work, and in the end, quite an elegant solution i'd say :-)

Basically there are three things needed to be done.
1. Get the most updated JQuery included, processmaker has a jquery library, but its very outdated, and also not sure if it gets included for the whole app or just in certain points, so I just went and included most recent updated version.
2. Turn on "enable HTML". But then we have another issue. Get around the smarty class filters. You do this by adding the {literal}{/literal} tags before and after ur script like so:

Code: Select all

{literal}
<script type='text/javascript'>
   jQuery(document).ready(function(){
      jQuery(".test_btn").click(function(){
         alert("test hello");
      });
   });
</script>
{/literal}

3. But then we get another error. The maborak class is interfering. This is becuase of the $ which tells ur html that its jquery. And this is where I spent countless hours racking google and forums and youtube and smarty forums etc etc etc. I finally found this link http://api.jquery.com/jQuery/ Which basically says that there is an alternative to the $ sign. As seen in example above, instead of using $(document).ready etc or $("class/id").click etc I use jQuery (case-sensitve) and, vwala! it works!! :-)

Hope my hair loss will help others to keep theirs :D

p.s.
I have been testing around... problem with embeding direcly is some things dont work properly.. for example, for some reason the + operator just dispaears when u direcltly embed it... i therefore searched an alternative and found that it also works if u just use it in a regular js element of the processmaker dynaform. Although slightly diff syntax.. following:

Code: Select all

 function initialize(){
 jQuery(document).ready(function(){
                jQuery(".phones").focusout(function(){
                    var p_numbers = getField("UF_Workflow_Check_txtbx_NumofTel").value;
                    var x=0;
                    jQuery(".phones > input").each(function(){
                        if(jQuery(this).val().length == 10)
                        {
                            x++;
                        }
                    });
                    getField("UF_Workflow_Check_txtbx_NumofTel").value = x;
                });
            });
}
jQuery(initialize);


Code is just an example. So basically that would be the code inside the js window. Works quite well now. Because u can use the processmaker functions inside ur jquery. You'll note i used getField which is processmaker inside my jquery. I think thats quite kewl. Also noticed, I think the word 'blur' might be a reserved word in processmaker.. so the .blur event in jquery doesnt work. Instead as u see above, I use focusout. Which is the same exact thing. In the jquery library it checks for either names for the same effect. Saves lots of time now :-)


Zedd
-----------------------------------------
Ethan Presberg
ProcessMaker Senior Sales Engineer
ProcessMaker Inc
@ethnp

amosbatto
Posts: 5018
Joined: Mon Jun 22, 2009 10:28 am
Country: Bolivia
Location: La Paz

Re: Jquery in PM

Unread postby amosbatto » Wed Aug 10, 2011 11:47 am

Zedd, nice solution. The problem with "+" might be related to this bug.

I wonder what happens if you just include the JQuery library dynamically?
Amos B. Batto ♦ ProcessMaker Technical Documentation Writer & Forum Manager ♦ Cofounder of ILLA-A

User avatar
ethanpresberg
Posts: 481
Joined: Wed Aug 10, 2011 2:32 am
Country: United States of America
Location: Raleigh, North Carolina
Contact:

Re: Jquery in PM

Unread postby ethanpresberg » Wed Aug 10, 2011 3:39 pm

I did.

I solved the plus issue by just including the jquery script i wrote externally as well.

So I now included both Jquery lib and my jquery script in the html editor.
-----------------------------------------
Ethan Presberg
ProcessMaker Senior Sales Engineer
ProcessMaker Inc
@ethnp

patlatyj2
Posts: 6
Joined: Tue Aug 16, 2011 8:23 am

Re: Jquery in PM

Unread postby patlatyj2 » Wed Aug 17, 2011 10:44 am

My method of jQuery implementation:
1. place latest version of jQuery into "/workflow/public_html" folder (Now it is jquery-1.6.2.min.js)
2. Go to /gulliver/system/class.headPublisher.php (line #198)
Insert code:

Code: Select all

    $this->addScriptFile ( "/jquery-1.6.2.min.js" );

before this code:

Code: Select all

    $this->addScriptFile ( "/js/widgets/js-calendar/unicode-letter.js" );
    $this->addScriptFile ( "/js/widgets/js-calendar/lang/".$sysLang.".js" );
    $this->addScriptFile ( "/js/widgets/js-calendar/lang/en.js" );

User avatar
ethanpresberg
Posts: 481
Joined: Wed Aug 10, 2011 2:32 am
Country: United States of America
Location: Raleigh, North Carolina
Contact:

Re: Jquery in PM

Unread postby ethanpresberg » Sat Aug 20, 2011 2:39 pm

yup i did that too :)
-----------------------------------------
Ethan Presberg
ProcessMaker Senior Sales Engineer
ProcessMaker Inc
@ethnp

dy3g0s
Posts: 14
Joined: Thu Dec 01, 2011 6:03 pm
Country: United States of America
Location: Loja, Ecuador
Contact:

Re: Jquery in PM

Unread postby dy3g0s » Sat Feb 25, 2012 8:52 pm

Hi, patlatyj2 and zeddicus :

Did you test jQuery sentences in IE8 maybe? for example:

Code: Select all

jQuery("#xyz").hide();

or

Code: Select all

$("#xyz").hide();


I have tested and it does not work.

Regards,
Diego

breale
Posts: 110
Joined: Wed Apr 23, 2008 12:08 am

Re: Jquery in PM

Unread postby breale » Sun Feb 26, 2012 8:12 pm

ProcessMaker uses JQuery for the new mobile user inbox experience that was released in v2.0.37. You might want to have a look at how Jquery was used for that part of the interface. Over the course of this year, you will see JQuery being used to replace the mborak code and other interface code.

User avatar
ethanpresberg
Posts: 481
Joined: Wed Aug 10, 2011 2:32 am
Country: United States of America
Location: Raleigh, North Carolina
Contact:

Re: Jquery in PM

Unread postby ethanpresberg » Mon Feb 27, 2012 6:48 am

i tried it and it worked fine by me.
perhaps trying making sure ur jquery is the first javascript included.
and never use $("") in jquery in pm. because in the maborak library window["$"] is used for making a similar function to simply return the element id.
-----------------------------------------
Ethan Presberg
ProcessMaker Senior Sales Engineer
ProcessMaker Inc
@ethnp

blankensa
Posts: 27
Joined: Thu Apr 07, 2011 11:51 am

Re: Jquery in PM

Unread postby blankensa » Fri Mar 09, 2012 2:36 pm

Bah - I suppose this was probably the better thread to post in about the ajax problem.

I've been able to include jQuery and call some functions easily ( alert(jQuery.now()); ). But there seems to be a hang up with using the ajax functions in jquery. I've tried dynamic loading, the modification of the head file to auto include jquery. I've even tried multiple versions.

The problem is that any and all ajax-based functions in jquery result in an error of "v[u] in not a function". Firebug points this to being an error in the actual jquery file yet I'm completely able to use the same file from a custom script not accessed through PM.

So in my JS object in the Dynaform I have the following code:

Code: Select all

jQuery.get("http://domain/test.php");

Both the editor preview and starting a new case will result in the same error. But if I change that line to be

Code: Select all

alert(jQuery.now());

I get my alert box as expected and everything continues as it should.

Is there something I'm missing to allow ajax to work within PM? Not all values in our env. are easily obtained through a simple SQL query.

User avatar
ethanpresberg
Posts: 481
Joined: Wed Aug 10, 2011 2:32 am
Country: United States of America
Location: Raleigh, North Carolina
Contact:

Re: Jquery in PM

Unread postby ethanpresberg » Tue Mar 13, 2012 4:35 am

Hi,

Unfortunately it is not possible. As I have said in previous posts, the prototype object of javascript is the problem.

I have spent MANY hours going through maborak.js and common.js and grid.js and all the other processmaker javascript files that are all within the single framework of maborak.js.
The thing is, maborak.js does something, imho, very very horrible that should not be done. It uses prototypes to make its library.
For example, isArray & isObject are prototyped in maborak, which is why lots of things crash in jquery, since it has a prototype called isArray also and they clash.
With all the posts above, we have reached the point where using jquery is possible up until the ajax part. That I have yet to find a solution for, it just doesnt work. And from my perspective its simply not cost effective to try to continue to hack the system to make it work.
Therefore there are two options:
1) just wait for colosa to get rid of maborak and use ext js & jquery.
2) use the maborak library, which with all its faults, is actually not bad at all. I actually find that the ajax calls in maborak make it real easy. One line of code.

However, a word of caution:
Before using the following function, I do strongly recommend going through the processmaker javascript files located in gulliver/js and just getting a feel for the functions:

Simple post ajax call with maborak.js:

Code: Select all

var response = ajax_post("http://ajax.example.com/page.php", PostVar,"POST");


There is I think another param u can set to make is asynchronous, which by default is synchronous.
Again, look thru the functions to get a better understand.

Sometimes its better not to reinvent the wheel, especially when trying to be cost effective.

Hope this helps.

Zedd
-----------------------------------------
Ethan Presberg
ProcessMaker Senior Sales Engineer
ProcessMaker Inc
@ethnp

blankensa
Posts: 27
Joined: Thu Apr 07, 2011 11:51 am

Re: Jquery in PM

Unread postby blankensa » Tue Mar 13, 2012 12:58 pm

I kind of figured that maborak was doing something weird when I started seeing error about isObject and what not but thought I had just missed a step on getting the environment to play nice. I suppose I'll embrace the built in functionality for now - would have been nice to have a single library to handle all of the transformations though :)

Thanks for your help, probably saved me from ripping out my hair over an elegant solution for using custom scripts.

User avatar
ethanpresberg
Posts: 481
Joined: Wed Aug 10, 2011 2:32 am
Country: United States of America
Location: Raleigh, North Carolina
Contact:

Re: Jquery in PM

Unread postby ethanpresberg » Thu Mar 15, 2012 5:59 am

hehe no worries..

I DID pull my hairs already... so its nice to save someone else from the misery :D
-----------------------------------------
Ethan Presberg
ProcessMaker Senior Sales Engineer
ProcessMaker Inc
@ethnp

websolprov
Posts: 260
Joined: Thu Aug 18, 2011 11:43 am
Country: United States of America

Re: Jquery in PM

Unread postby websolprov » Wed Nov 19, 2014 7:08 am

I found exactly the same, trying to implement Ajax autocomplete but despite loading jquery and the jquery UI in the header using AddScript I get "autocomplete is not a function" when trying to load as JS in a dynaform. Does anyone have any suggestions please?

blankensa wrote:Bah - I suppose this was probably the better thread to post in about the ajax problem.

I've been able to include jQuery and call some functions easily ( alert(jQuery.now()); ). But there seems to be a hang up with using the ajax functions in jquery. I've tried dynamic loading, the modification of the head file to auto include jquery. I've even tried multiple versions.

The problem is that any and all ajax-based functions in jquery result in an error of "v[u] in not a function". Firebug points this to being an error in the actual jquery file yet I'm completely able to use the same file from a custom script not accessed through PM.

So in my JS object in the Dynaform I have the following code:

Code: Select all

jQuery.get("http://domain/test.php");

Both the editor preview and starting a new case will result in the same error. But if I change that line to be

Code: Select all

alert(jQuery.now());

I get my alert box as expected and everything continues as it should.

Is there something I'm missing to allow ajax to work within PM? Not all values in our env. are easily obtained through a simple SQL query.

dragonfly
Posts: 10
Joined: Thu Nov 13, 2014 2:29 pm

Re: Jquery in PM

Unread postby dragonfly » Tue Nov 25, 2014 6:47 am

I'm reading through this thread before I start experimenting with jQuery integration.
I've only just started learning ProcessMaker.

I understand now to watch out for conflicts with maborak.

I'm surprised that there is no reference to jQuery no-conflict mode which I've just read here.

http://learn.jquery.com/using-jquery-co ... libraries/

gazeprimary
Posts: 2
Joined: Wed Dec 03, 2014 8:53 am

Re: Jquery in PM

Unread postby gazeprimary » Wed Dec 03, 2014 8:56 am

maxsilva wrote:Hi,

Please, Is there a tutorial or sample showing how to use jquery or jquery plugins
in ProcessMaker?!

Thanks in advanced,

Maxwell

I know its late but im sure many users will still want to know how to do this.. I may make a short tut later :)

User avatar
jemiris
Posts: 34
Joined: Wed May 10, 2017 12:44 am
Country: India

Re: Jquery in PM

Unread postby jemiris » Sat Jul 15, 2017 6:07 am

There is a trick to adding a Javascript/CSS file to ProcessMaker from within a plugin. :lol:

In order to correctly include the Javascript file, you will need to use the following path structure:

Ref: http://processmakerblog.com/processmaker/plugin-tips-tricks-including-javascripts-and-css-files/


Return to “Using ProcessMaker 2”

Who is online

Users browsing this forum: No registered users and 1 guest