Edit a document, by using documentID not the actual pushID of that item's node.

[bejisan]

How could we modify a documentId after clicking on one element of the list.

In my android app, I have documentChosen put EXTRA INTENTS to get to modify its value in another activity.

like ...

benevolat65

• |_ actions

          |_-MAQX0nkNBmsd1bKq5zg

                        ...
                        |_actionId: "-MAQX0nkNBmsd1bKq5zg"
                        ...
          |_49545470-b49d-11ea-89e6-958f74228115
                        ...
                        |_actionId: "49545470-b49d-11ea-89e6-958f74228115"
                        ...

• |_conseils

          |_-M9UxGrC0hJJBtNrw9Hu
                        ...
                        |_conseilId: "-M9UxGrC0hJJBtNrw9Hu"
                        ...

• |_recherches

          |_-M9Oy2VS36qLLKUD8_d8
                        ...
                        |_rechercheId: "-M9Oy2VS36qLLKUD8_d8"
                        ...

• |_users

          |_rFwo9I4mr0V7cdD3dGkWwaxeUly2
                        ...
                        |_userId: "rFwo9I4mr0V7cdD3dGkWwaxeUly2"
                        ...

• |_wpPages`

I would need a way to edit any actions, conseils, or recherches by entering "actionId" not the actual suit of characters of the documentID

[dalenguyen]

Hi @bejisan is the actionId / id is the same with the documentId - MAQX0nkNBmsd1bKq5zg?

[bejisan]

Yes I used documentID as a way to sum up the concept, but yeah I have created IDs which are parent nodes and inside them I have actionId again as a reference.

I need a way to tape into the Id by not entering the actual Id ('MAQX0nkNBmsd1bKq5zg') just a reference word... like ('actionId', 'rechercheId' or 'conseilId')

[dalenguyen]

I'm not entirely clear on this yet, but if you are good at JavaScript. There is a way to add custom / complex tasks on the top of the plugin to serve your needs.

Example of the custom script:

https://firebase-wordpress-docs.readthedocs.io/en/latest/database/retrieve-data-from-firestore.html#

[bejisan]

I have difficulties adapting your .js code.

You used a firestore exemple, where I only have realtime database.

especially at docRef.get().then(doc => {

and what do you mean by // You can get the collectionName and documentName from the shortcode attribute

I display all Recherches as blocks

[realtime_blocks ...

how can we edit the right one in the list ?

console.log('Custom Firebase');
console.log(firebase);

(function ($) {
    'use strict';
    $(document).ready(function () {
        const showRealtimeDatabase = () => {
            const db = firebase.database();
            const realtimeEl = jQuery('#custom-firebase');

            // You can get the collectionName and documentName from the shortcode attribute
            const collectionName = 'recherches';
            const documentName = 'document-1'

            if (collectionName && documentName) {
                const docRef = db.ref('recherches').child(documentName);

                docRef.get().then(doc => {
                    if (doc.exists) {
                        // console.log('Document data:', doc.data());
                        let html = '<table>';
                        jQuery.each(doc.data(), function (key, value) {
                            // You can put condition to filter your value
                            // and it won't show on the frontend
                            html += '<tr>';
                            html += '<td> ${String(key)} </td>';
                            html += '<td>' + value + '</td>';
                            html += '</tr>';
                        })
                        html += '</table>';
                        realtimeEl.append(html)
                    } else {
                        // doc.data() will be undefined in this case
                        console.error('Please check your collection and document name in the [realtime] shortcode!');
                    }
                }).catch(error => {
                    console.error('Please check your collection and document name in the [realtime] shortcode!', error);
                });
            } else {
                console.warn('Please check your collection and document name in the [realtime] shortcode!');
            }
        }

        showRealtimeDatabase()
    })
})(jQuery)

[dalenguyen]

Hi @bejisan, it's an example of how to add a custom script to achieve what you need. You don't have to look into the detail of the code because it may not be the one that can accomplish your tasks. I suggest for custom tasks, you can hire someone to add it on top of the plugin.

[bejisan]

Hi, I managed to display IDs through jQuery. and append to create a link. On click on that link it opens a wrodpress custom-page with the ID inside the url through $.ajax $_GET method. Then I retrieve the id in php.

Now my question: is it possible to escape the "string" inside the contact form 7 fields of your code, in order to input variables (ie the Id taken from the php file) or are we stuck with using "strings".

[dalenguyen]

Hi @bejisan, in order to understand the is it possible to escape the "string" inside the contact form 7 fields of your code, in order to input variables (ie the Id taken from the php file) or are we stuck with using "strings".. Can you give an example of form or fields that you are trying to do? Maybe a drawing/diagram?

[bejisan]

I'm trying to use the id string inside the form which writes into realtime database.

[radio rechercheId label_first default:1 $rechercheId]

but so far I can only put

[radio rechercheId label_first default:1 "SomeIDstring"]

does your code supports %%custom-parameters%% ? like in this plugin... https://fr.wordpress.org/plugins/shortcoder/

custom-firebase.js >>> create and display a href with the ID >>> onClick execute $.ajax that adds ?id=someIDstring to the url >>> phpfile which recieve the string... (THIS IS WHERE I AM AT, receive my ID correctly as a string which I echoed inside the html code) now in php I need to get the string and input it automatically in the contact form using your code to (re)write into the database (from wordpress).

Ideally [radio rechercheId label_first default:1 %%rechercheId%%] instead of 'someStringName'.

It would allow me to edit/modify items others than users with you getFirebaseUID special class...

custom-firebase.js

if (collectionName && documentName) {
  const docRef2 = db
    .ref(collectionName)
    .child(documentName)
    .child('rechercheId')
  docRef2.on('value', function (snapshot) {
    var childValue = snapshot.val()
    //console.log(childValue);
    var childKey = snapshot.key
    //console.log(childKey);
    let html = '<table>'
    html += '<tr>'
    html += '<td>' + childKey + '</td>'
    html +=
      '<td><a id=' +
      childValue +
      ' class="viewp" href="http://benevolat65.fr/modifier-une-recherche/?id=' +
      childValue +
      '">' +
      childValue +
      '</a></td>'
    html += '</tr>'
    html += '</table>'
    firestoreEl.append(html)
    $('a.viewp').click(function (e) {
      var id = $(this).attr('id')
      console.log(id)
      $.ajax({
        url:
          'http://benevolat65.fr/modifier-une-recherche/?id=' + childValue + '',
        dataType: 'text',
        method: 'GET',
        data: { id: id },
        beforeSend: function (response) {
          alert('Sending')
        },
        success: function (response) {
          alert('success')
        },
        error: function (response) {
          alert('failed')
        },
        complete: function (response) {
          alert('finished')
        },
      })
    })
  })
} else {
  console.warn(
    'Please check your collection and document name in the [firestore] shortcode!'
  )
}

phpRecievingFile.php

$rechercheId = $_GET['id']; echo $rechercheId ;

[dalenguyen]

Hi @bejisan, not sure if this is what you what. In order to prefill an input, It can be done through JavaScript only.

For example,

[radio rechercheId label_first default:1 getRechercheId]

Then after you get the rechercheId, you can prefill the input value of the form easily by jQuery.

$('#input-selector').val($('rechercheId value')

[bejisan]

Nice thank you.

[bejisan]

I managed to change the Name and the value of [radio rechercheId label_first default:1 getRechercheId]

executing the script 3 seconds after yours. (setTimeout). but even though the value is the right ID (and the name as well, but that's just cosmetics) When I submit the form, it creates another pushID, and doesn't overwrite the form I want it to overwrite.

<script type="text/javascript" >
                function $_GET(param) {
                    var vars = {};
                    window.location.href.replace( location.hash, '' ).replace( 
                        /[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
                        function( m, key, value ) { // callback
                            vars[key] = value !== undefined ? value : '';
                        }
                    );
                    if ( param ) {
                        return vars[param] ? vars[param] : null;    
                    }
                    return vars;
                }

                                setTimeout(jQuery(function getRechercheId($) {
                    var $rechercheId = $_GET('id');
                    //console.log($rechercheId);
                    $('input:radio[name="rechercheId"]').val($rechercheId);
                    $('span.wpcf7-form-control-wrap.rechercheId span.wpcf7-list-item-label').text($rechercheId);
 }), 3000);
 </script>

my html

<span class="wpcf7-list-item-label">
::before
"800cb2d0-c34f-11ea-b395-afadfc0adce9"
::after
</span>
<input type="radio" name="rechercheId" value="800cb2d0-c34f-11ea-b395-afadfc0adce9" checked="checked">

I updated your plugin to the latest version.

[dalenguyen]

I'm glad that it's getting somewhere. do you have a link for this?

The value is replaced by won't affect the Id that is saved to the database after submitting the form. The id is defined by a hidden field name documentId.

<input type="text" name="documentId" value="will-be-generated">

If you want to replace the rootId, you have to target the documentId.

If you have to save the data after submitting the form, it's another story.

[bejisan]

http://benevolat65.fr/recherches/

you have to scroll down to the bottom of the page and click on ... preferably ffece000-c59e-11ea-a4ef-47ca6a399233

I have a bug in my javascript, coz every item I create I get multiple duplicate sending/success/finished messages, so I commented those popup messages

(function ($) {
    'use strict';
    $(document).ready(function () {
        const showRealtimeDatabase = () => {
            const db = firebase.database();
                   // You can get the collectionName and documentName from the shortcode attribute
            const collectionName = 'recherches';
            console.log(collectionName);

            let rechercheId = {}
            const docRef = db.ref('recherches').on('value', (recherchesSnapshot) => {
            recherchesSnapshot.forEach((rechercheSnapshot) => {
                var rechercheSnapshotData = rechercheSnapshot.val();

                let rechercheKey = rechercheSnapshot.key
                let rechercheIdRef = rechercheSnapshot.child('rechercheId')
                if (rechercheIdRef.exists()){
                    rechercheId[rechercheKey] = rechercheIdRef.val()
                    //console.log(rechercheId[rechercheKey]);
                                        const firestoreEl = jQuery('#custom-firebase-recherches');
                    const documentName = rechercheId[rechercheKey];

                    if (collectionName && documentName) {
                        const docRef2 = db.ref(collectionName).child(documentName).child('rechercheId');

                        docRef2.on('value', function(snapshot) {                                
                            var childValue = snapshot.val();
                            console.log(childValue);
                            var childKey = snapshot.key;
                            //console.log(childKey);

                            let html = '<table>';
                            //jQuery.each(function (childKey, childValue) {
                            //console.log(childValue + ' ' + childKey);
                            //var childValue = childSnapshot.val();
                            //var childKey = childSnapshot.key;

                            // You can put condition to filter your value
                            // and it won't show on the frontend
                            html += '<tr>';
                            html += '<td>' + childKey + '</td>';
                            html += '<td><a id=' + childValue + ' class="viewp" href="http://benevolat65.fr/modifier-une-recherche/?id=' + childValue + '">' + childValue + '</a></td>';
                            html += '</tr>';
                            //})
                            html += '</table>';
                            firestoreEl.append(html)

                            $('a.viewp').click(function(e) {
                                //e.preventDefault();
                                var id = $(this).attr('id');  
                                console.log(id);
                                //do your ajax call here

                                $.ajax({
                                    url: 'http://benevolat65.fr/modifier-une-recherche/?id=' + childValue + '',
                                    dataType: 'text',
                                    method: 'GET',
                                    data: { 'id': id },
                                    //beforeSend: function(response){alert('Sending');},
                                    //success: function(response){ alert('success');},
                                    //error: function(response){alert('failed');},
                                    //complete: function(response){alert('finished');},
                                });
                            });
                        });
                    } else {
                        console.warn('Please check your collection and document name in the [firestore] shortcode!');
                    }
                }
            })
        })           
        }

    /*const getUserCustomClaims = () => {
            firebase.auth().onAuthStateChanged(function (user) {
                if (firebase.auth().currentUser) {
                    firebase.auth().currentUser.getIdTokenResult()
                    .then((idTokenResult) => {
                        // Confirm the user is an Admin.
                        if (!!idTokenResult.claims.admin) {
                            // We will call the function here*/
                            showRealtimeDatabase()
                       /* } else {
                            // Show something else
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
                }
            });
        }

        getUserCustomClaims()*/
    })
})(jQuery)

added $('input:text[name="documentId"]').val($rechercheId); to my receiving php custom page...

but how can I target it when it doesn't appear on my html page. There's no <input type="text" name="documentId" value="will-be-generated"> to target

however it creates a lot of different IDs

my console log

IF: Handle form submission for Firebase
firebase.js?ver=1.6.0:1 Form is valid, start saving data to Firebase
custom-firebase-recherches.js?ver=5.4.2:37 121063f0-bf7e-11ea-ba80-2f4673b2120d
custom-firebase-recherches.js?ver=5.4.2:37 6556b810-c5a1-11ea-b3fb-0516d3ccd85c
custom-firebase-recherches.js?ver=5.4.2:37 8df87800-bc53-11ea-81a2-49fa4d068a96
custom-firebase-recherches.js?ver=5.4.2:37 ffece000-c59e-11ea-a4ef-47ca6a399233
custom-firebase-recherches.js?ver=5.4.2:37 ffece000-c59e-11ea-a4ef-47ca6a399233
firebase.js?ver=1.6.0:1 Realtime data created with id: 90840880-c5a1-11ea-9bd5-c90d57ededde
custom-firebase-recherches.js?ver=5.4.2:37 121063f0-bf7e-11ea-ba80-2f4673b2120d
custom-firebase-recherches.js?ver=5.4.2:37 6556b810-c5a1-11ea-b3fb-0516d3ccd85c
custom-firebase-recherches.js?ver=5.4.2:37 8df87800-bc53-11ea-81a2-49fa4d068a96
custom-firebase-recherches.js?ver=5.4.2:37 90840880-c5a1-11ea-9bd5-c90d57ededde
custom-firebase-recherches.js?ver=5.4.2:37 ffece000-c59e-11ea-a4ef-47ca6a399233
custom-firebase-recherches.js?ver=5.4.2:37 121063f0-bf7e-11ea-ba80-2f4673b2120d
custom-firebase-recherches.js?ver=5.4.2:37 6556b810-c5a1-11ea-b3fb-0516d3ccd85c
custom-firebase-recherches.js?ver=5.4.2:37 8df87800-bc53-11ea-81a2-49fa4d068a96
custom-firebase-recherches.js?ver=5.4.2:37 90840880-c5a1-11ea-9bd5-c90d57ededde
custom-firebase-recherches.js?ver=5.4.2:37 ffece000-c59e-11ea-a4ef-47ca6a399233
custom-firebase-recherches.js?ver=5.4.2:37 121063f0-bf7e-11ea-ba80-2f4673b2120d
custom-firebase-recherches.js?ver=5.4.2:37 6556b810-c5a1-11ea-b3fb-0516d3ccd85c
custom-firebase-recherches.js?ver=5.4.2:37 8df87800-bc53-11ea-81a2-49fa4d068a96
custom-firebase-recherches.js?ver=5.4.2:37 90840880-c5a1-11ea-9bd5-c90d57ededde
custom-firebase-recherches.js?ver=5.4.2:37 ffece000-c59e-11ea-a4ef-47ca6a399233
custom-firebase-recherches.js?ver=5.4.2:37 121063f0-bf7e-11ea-ba80-2f4673b2120d
custom-firebase-recherches.js?ver=5.4.2:37 6556b810-c5a1-11ea-b3fb-0516d3ccd85c
custom-firebase-recherches.js?ver=5.4.2:37 8df87800-bc53-11ea-81a2-49fa4d068a96
custom-firebase-recherches.js?ver=5.4.2:37 90840880-c5a1-11ea-9bd5-c90d57ededde
custom-firebase-recherches.js?ver=5.4.2:37 ffece000-c59e-11ea-a4ef-47ca6a399233
custom-firebase-recherches.js?ver=5.4.2:37 121063f0-bf7e-11ea-ba80-2f4673b2120d
custom-firebase-recherches.js?ver=5.4.2:37 6556b810-c5a1-11ea-b3fb-0516d3ccd85c
custom-firebase-recherches.js?ver=5.4.2:37 8df87800-bc53-11ea-81a2-49fa4d068a96
custom-firebase-recherches.js?ver=5.4.2:37 90840880-c5a1-11ea-9bd5-c90d57ededde
custom-firebase-recherches.js?ver=5.4.2:37 ffece000-c59e-11ea-a4ef-47ca6a399233
custom-firebase-recherches.js?ver=5.4.2:37 121063f0-bf7e-11ea-ba80-2f4673b2120d
custom-firebase-recherches.js?ver=5.4.2:37 6556b810-c5a1-11ea-b3fb-0516d3ccd85c
custom-firebase-recherches.js?ver=5.4.2:37 8df87800-bc53-11ea-81a2-49fa4d068a96
custom-firebase-recherches.js?ver=5.4.2:37 90840880-c5a1-11ea-9bd5-c90d57ededde
custom-firebase-recherches.js?ver=5.4.2:37 ffece000-c59e-11ea-a4ef-47ca6a399233
custom-firebase-recherches.js?ver=5.4.2:37 121063f0-bf7e-11ea-ba80-2f4673b2120d
custom-firebase-recherches.js?ver=5.4.2:37 6556b810-c5a1-11ea-b3fb-0516d3ccd85c
custom-firebase-recherches.js?ver=5.4.2:37 8df87800-bc53-11ea-81a2-49fa4d068a96
custom-firebase-recherches.js?ver=5.4.2:37 90840880-c5a1-11ea-9bd5-c90d57ededde
custom-firebase-recherches.js?ver=5.4.2:37 ffece000-c59e-11ea-a4ef-47ca6a399233
custom-firebase-recherches.js?ver=5.4.2:37 121063f0-bf7e-11ea-ba80-2f4673b2120d
custom-firebase-recherches.js?ver=5.4.2:37 6556b810-c5a1-11ea-b3fb-0516d3ccd85c
custom-firebase-recherches.js?ver=5.4.2:37 8df87800-bc53-11ea-81a2-49fa4d068a96
custom-firebase-recherches.js?ver=5.4.2:37 90840880-c5a1-11ea-9bd5-c90d57ededde
custom-firebase-recherches.js?ver=5.4.2:37 ffece000-c59e-11ea-a4ef-47ca6a399233
custom-firebase-recherches.js?ver=5.4.2:37 121063f0-bf7e-11ea-ba80-2f4673b2120d
custom-firebase-recherches.js?ver=5.4.2:37 6556b810-c5a1-11ea-b3fb-0516d3ccd85c
custom-firebase-recherches.js?ver=5.4.2:37 8df87800-bc53-11ea-81a2-49fa4d068a96
custom-firebase-recherches.js?ver=5.4.2:37 90840880-c5a1-11ea-9bd5-c90d57ededde
custom-firebase-recherches.js?ver=5.4.2:37 ffece000-c59e-11ea-a4ef-47ca6a399233
custom-firebase-recherches.js?ver=5.4.2:37 121063f0-bf7e-11ea-ba80-2f4673b2120d
custom-firebase-recherches.js?ver=5.4.2:37 6556b810-c5a1-11ea-b3fb-0516d3ccd85c
custom-firebase-recherches.js?ver=5.4.2:37 8df87800-bc53-11ea-81a2-49fa4d068a96
custom-firebase-recherches.js?ver=5.4.2:37 90840880-c5a1-11ea-9bd5-c90d57ededde
custom-firebase-recherches.js?ver=5.4.2:37 ffece000-c59e-11ea-a4ef-47ca6a399233
custom-firebase-recherches.js?ver=5.4.2:37 121063f0-bf7e-11ea-ba80-2f4673b2120d
custom-firebase-recherches.js?ver=5.4.2:37 6556b810-c5a1-11ea-b3fb-0516d3ccd85c
custom-firebase-recherches.js?ver=5.4.2:37 8df87800-bc53-11ea-81a2-49fa4d068a96
custom-firebase-recherches.js?ver=5.4.2:37 90840880-c5a1-11ea-9bd5-c90d57ededde
custom-firebase-recherches.js?ver=5.4.2:37 ffece000-c59e-11ea-a4ef-47ca6a399233

I don't get why it gets fired so many times... maybe because of forEach.

[bejisan]

nevermind added [hidden documentId "will-be-generated"] to my form.

and changed my javascript to .. $('input[name="documentId"]').val($rechercheId);

and it works !! Thanks a lot for all the support.

[dalenguyen]

Awesome @bejisan, this should make a good tutorial on how to custom / extend the plugin 😍

[bejisan]

Go for it. If you need more of my code just ask.