• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

Ajax with fabrik 3.0.x

toots

Member
Hi everybody,

I work on the upgrade of my fabrik apps.

Since i upgrade fabrik i have lot of problems and waste lot of time to re create that i created before :/

Now my problem is on the ajax function that change an image element when i select a data in a cascading dropdown. May be that some will remember this problem on fabrik 2.0 :)

At one time, Felixkat sent me a pm to me his post about this feature and upgrade of fabrik:
http://fabrikar.com/forums/index.ph...-a-image-folder-path.23061/page-2#post-126135


Unfortunately after several hours of research, I still can not operate a tiny script. For a long time I have not touched Javascript and PHP so please excuse my ignorance as my knowledge is slightly faded :)
In my user_ajax, i have:


Code:
    function imgclasse() {
        $db =& JFactory::getDBO();
        $IdClasse = JRequest::getVar('classeid','');
        $query = "SELECT icone_classe FROM fw_classes WHERE id='$IdClasse' LIMIT 1";
        $db->setQuery($query);
       
        $result = $db->loadResult();
        echo $result;
        }

In the javascript of my cascading element :

Code:
var url='index.php?option=com_fabrik&format=raw&controller=plugin&c=plugin&task=userAjax&method=imgclasse';
var classeid= $('fw_persos___classe').get('value');
var update = $('fw_persos___icone').firstChild;
new Request({
    url: url,
    data: {
        method:'imgclasse',
        'classeid':classeid
    },
    onComplete:function(r){
    update.src = 'http://www.forsaken-world.fr/images/stories/fabrik/fw/classes' + r;
    document.getElementsByName('fw_persos___icone')[0].value = r;
    }
}).send();

I placed
Code:
alert(classeid);
after
Code:
onComplete:function(r){
to see if the correct data was sent well to the php script. ==> It's ok

But when i replace
Code:
alert(classeid);
by
Code:
alert(r);
i haven't the name of the image but this:
2014-04-12_08h15_11.png

Somebody can say me what is wrong?
 
First thank you for your reply.

Sorry for my english but i don't understand:
BTW: AFAIK JRequest is deprecated, use
$app = JFactory::getApplication();
$xxx= $app->input->getString('yyy');

You talk about php code? Can you write me a example with my script beacause i don't know how use that you writed?

=================Edit===============

Oh sorry i didn't see this link: http://fabrikar.com/forums/index.php?wiki/user-ajax/

I will test it.
 
Ok, i updated my phpcode to:
Code:
    function imgclasse() {
        $db = FabrikWorker::getDbo();
        $query = $db->getQuery(true);
        $retStr = '';
        $app = JFactory::getApplication();
        $input = $app->input;
        $IdClasse = $input->getString('classeid', '');
        $query->select('icone_classe')->from('fw_classes')->where('id = ' . $db->quote($IdClasse));
        $db->setQuery($query);
        $result = $db->loadResult();
        echo $result;     
        }

i updated my var url in the javascript:
Code:
var url = 'index.php?option=com_fabrik&format=raw&task=plugin.userAjax&method=imgclasse';
var classeid= $('fw_persos___classe').get('value');
var update = $('fw_persos___icone').firstChild;
new Request({
    url: url,
    data: {
        method:'imgclasse',
        'classeid':classeid
    },
    onComplete:function(r){
    update.src = 'http://www.forsaken-world.fr/images/stories/fabrik/fw/classes' + r;
    document.getElementsByName('fw_persos___icone')[0].value = r;
    }
}).send();

When i put
Code:
alert(r);
i see the good result and when i try
Code:
alert(update.src);
i have the good url of image but the image element didn't change :( I'm near of the solution.

================== Edit ================
the image element didn't change when i select a data in cascading dropdown but the good image are save. When i save my form the good image appears on the list.
 
Some help please :S what is false in this code :

Code:
update.src = 'http://www.forsaken-world.fr/images/stories/fabrik/fw/classes' + r;

There is new way to refresh the image element wwith good image?

I had a js error about "r" i replaced it by "response", the error disappear but it didn't solve my problem.

ps:I feel there is less help than before?
 
ok, i talk alone ^^ but perhaps it will can help smeone :)

I tested with the innerHTML method:

Code:
function afficher_icone_classe() {
var url = 'index.php?option=com_fabrik&format=raw&task=plugin.userAjax&method=imgclasse';
var classeid= $('fw_persos___classe').get('value');
var update = $('fw_persos___icone').firstChild;
new Request({
    url: url,
    data: {
        method:'imgclasse',
        'classeid':classeid
    },
    onComplete:function(response){
    var address = "http://www.forsaken-world.fr/images/stories/fabrik/fw/classes" + response;
    document.getElementById('fw_persos___icone').innerHTML = '<img class=\'imagedisplayor\' style=\'float:none;\' alt=\'\'  src='+ address +'>';
    document.getElementsByName('fw_persos___icone')[0].value = response;
    }}).send();
}

The image is refresh with good image when i select a data in cascadingdropdown. But now the image is not save in the table :/ it's a Chinese puzzle :)
 
Apparently things have changed on Fabrik :( I remember a time when we had a problem, we were talking and we found solution together while sharing our work.
Returning, application development via Fabrik, I realize that the upgrade is a little wobbly and there is almost no support. Now there is a plan to have a response within x days. I understand that things change and we can pass this kind of system but provided the respect :/

2014-04-18_13h37_02.png

I'm really disappointed :(

Where are you Rob, Felixkat, Hugh , ... ?
 
Can you fill in you My Sites, so I can see the page, and give me the info I need to debug this? Like which list / form, front end link to the form, logins (including ftp so I can see you user_ajax.php), etc.

-- hugh
 
Hi, Hugh ;) didn't solve my problem but i bypassed. I added another image element and i have this codes now:

user_ajax.php:
Code:
    function imgclasse() {
        $db = FabrikWorker::getDbo();
        $query = $db->getQuery(true);
        $retStr = '';
        $app = JFactory::getApplication();
        $input = $app->input;
        $IdClasse = $input->getString('classeid', '');
        $query->select('icone_classe')->from('fw_classes')->where('id = ' . $db->quote($IdClasse));
        $db->setQuery($query);
        $result = $db->loadResult();
        echo $result;     
        }

When i change data in the cascading dropdown i launch this JS:
Code:
function afficher_icone_classe_changement() {
var url = 'index.php?option=com_fabrik&format=raw&task=plugin.userAjax&method=imgclasse';
var classeid= $('fw_persos___classe').get('value');
var update = $('fw_persos___icone').firstChild;
new Request({
    url: url,
    data: {
        method:'imgclasse',
        'classeid':classeid
    },
    onComplete:function(response){
    //document.getElementsByName('fw_persos___icone')[0].value = response;
    var address = "http://www.forsaken-world.fr/images/stories/fabrik/fw/classes" + response;
    document.getElementById('fw_persos___iconedelaclasse').innerHTML = "<img src="+ address +"></img>";
    document.getElementsByName('fw_persos___icone')[0].value = response;
    //document.getElementById('fw_persos___icone').innerHTML = "<img src="+ address +"></img>"; 
    }}).send();
}

when i load the details view or form, i hide the element that store image address and launch this JS to load the other image element:
Code:
function afficher_icone_classe_chargement() {
var update = $('fw_persos___icone').get('value');
var address = "http://www.forsaken-world.fr/images/stories/fabrik/fw/classes" + update;
document.getElementById('fw_persos___iconedelaclasse').innerHTML = "<img src="+ address +"></img>";
}

However, if you can ensure that I only use one image field, it would settle me a lot because I'm working on an application that manipulates images with php to create signatures.

i'll send you all informations by skype or pm.
 
Please don't send stuff by Skype or PM. Everything needs to be either in this thread, or your My Sites, so I'm not the only one who can see it.

I'm now confused by what you want me to do. Do you want to fix the stuff in the first post? If so, as per my last response, make sure everything I need to know (that you don't want to put in this thread) is in your My Sites, and I'll take a look at that original code. It should work.

-- hugh
 
When i want display image and register this image like this:
Code:
    document.getElementById('fw_persos___icone').innerHTML = "<img src="+ address +"></img>";
    document.getElementsByName('fw_persos___icone')[0].value = response;

It doesn't work.

When i sleect data in cascading dropdown, It diplays the good image but when i click on save button and return on the list, i see that image didn't saved. If i comment the first line, image saved.
 
I tried to take a look at your site, but the login you provided in your My Sites doesn't work.

I suspect it's because when you use innerHTML, you are blowing away the hidden DOM structure inside that element, which is used when we grab the values for submitting. But without seeing your form (front and backend), I can't really tell, as how you need to do this depends on how you have the image element configured.

-- hugh
 
OK ... I'm in the process of adding an update() method to the 3.0 image.js. We added one in 3.1, which simplifies the process of scripting a change of image.

You currently have the new method in your uncompressed image.js, so it's enabled if you add the &fabrikdebug=1 switch, or set "Debug JS" in your main Fabrik options.

You should then be able to use that in your AJAX response handler, like this:

Code:
form_13.formElements.get('fw_persos___icone').update('images/stories/fabrik/fw/classes' + response);

... which should set both the image tag, and the hidden input field which is what actually submits the value. I just tested it by hand on your site, and that works.

I'll go ahead and build the compressed JS, and commit the change to github. And upload the compressed JS to your site, so you don't have to worry about updating.

-- hugh
 
Waouh !!! It 's amazing!!! A very Big Thanks Hugh ;)

No problem Felix ;)


===================Edit ================

i think i talked too fast ^^
- Image change when i select a data in cascading ==> It's ok
- Image doesn't appear in the list but its address.

www.screencast.com/t/vH6JN3A6az0
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top