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.
By maxsilva
#6347
Hi,

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

Thanks in advanced,

Maxwell
By amosbatto
#6361
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.
By maxsilva
#6364
Thanks.

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

Thanks in advanced,

Maxwell
By amosbatto
#6369
I've never tried to use JQuery in ProcessMaker. Do you want to display JQuery output inside of a DynaForm?
By amosbatto
#6405
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.
By syndrael
#7556
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.
By Lawrence
#14281
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
By ethanpresberg
#14294
(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
User avatar
By ethanpresberg
#14316
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.
By patlatyj2
#14446
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" );
By dy3g0s
#19682
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
By breale
#19709
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
By ethanpresberg
#19722
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.
By blankensa
#20240
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 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
By ethanpresberg
#20408
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
By blankensa
#20434
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
By ethanpresberg
#20521
hehe no worries..

I DID pull my hairs already... so its nice to save someone else from the misery :D
By websolprov
#781156
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 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.
By gazeprimary
#781309
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 :)

The ID in your @@supervisorId variable is probably[…]

What version of PM are you using? You should use a[…]

First of all, do you know PHP and JavaScript? If […]

Force Skin

When you set the User Experience to "Switchab[…]