[maxsilva]

Hi,

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

Thanks in advanced,

Maxwell

[amosbatto]

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.

[maxsilva]

Thanks.

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

Thanks in advanced,

Maxwell

[amosbatto]

I've never tried to use JQuery in ProcessMaker. Do you want to display JQuery output inside of a DynaForm?

[maxsilva]

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]

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.

[syndrael]

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]

Has anyone had any luck with this?

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

Very frustrating

[ethanpresberg]

sorry

[ethanpresberg]

sorry

[ethanpresberg]

(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

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

[amosbatto]

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

I wonder what happens if you just include the JQuery library dynamically?

[ethanpresberg]

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.

[patlatyj2]

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" );

[ethanpresberg]

yup i did that too

[dy3g0s]

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]

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.

[ethanpresberg]

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.

[blankensa]

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.

[ethanpresberg]

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

[blankensa]

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.

[ethanpresberg]

hehe no worries..

I DID pull my hairs already... so its nice to save someone else from the misery

[websolprov]

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?

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.

[dragonfly]

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]

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

[jemiris]

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

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

Ref: http://processmakerblog.com/processmake ... css-files/

[noname003]

I've never tried to use JQuery in ProcessMaker.

เรื่องเล่าในมหาวิทยาลัยชื่อดัง

วิธีลดความอ้วนโดยไม่เสียเงิน