मैं एक संक्षिप्त बटन जोड़ने के लिए दो सप्ताह से कोशिश कर रहा हूं जो संपादन-फॉर्म को प्रकट करना चाहिए। मुझे कुछ मिला, लेकिन वह जावा कोड मेरे PHP कोड में ठीक से काम नहीं कर रहा था। उदाहरण के लिए, यह दो-दो करके काम करता है और यह बहुत कष्टप्रद है।

मैंने एक और चर जोड़ने की कोशिश की जो उस मुद्दे को बदल सकता था, लेकिन काम नहीं किया। उसके बाद तीन बटा तीन काम किया।

<?php 
if(isset($_SESSION['id'])) {
  if($_SESSION['id'] == $row2['id']){

echo "<button type='submit' class='edit-comment'>Edit</button>
  <div class='content'><form class='content edit-form' method='POST' action='".editComments($conn)."'>
  <input type='hidden' name='comment_id' value='".$row['comment_id']."'>
    <input type='hidden' name='user_id' value='".$row['user_id']."'>
    <input type='hidden' name='date' value='".date('d-m-Y H:i:s')."'>
    <textarea class='comment' name='comment'>".$row['comment']."</textarea><br>
    <button id='edit' name='submite' type='submit'>Edit</button>
    </form></div>
    <script>
    var coll = document.getElementsByClassName('edit-comment');
    var i;

    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener('click', function() {
        this.classList.toggle('active');
        var content = this.nextElementSibling;
        if (content.style.maxHeight){
          content.style.maxHeight = null;
        } else {
          content.style.maxHeight = content.scrollHeight + 'px';
        }
      });
    }
    </script>"; ?>

मैं सभी टिप्पणियों को प्रकट करने की उम्मीद करता हूं, लेकिन केवल दो-दो करके काम करता है। मैंने जो कहा उसे बेहतर ढंग से समझने के लिए यहां एक तस्वीर है:

0
Raul Raţiu 19 मई 2019, 09:20

1 उत्तर

सबसे बढ़िया उत्तर

मुझे नहीं पता कि निम्नलिखित में रुचि होगी या नहीं क्योंकि यह संभावना है कि मैंने शायद इस समस्या को गलत समझा है कि इस बिंदु पर सभी कोड देखने में सक्षम नहीं हैं। निम्नलिखित इन कम से कम/छिपे हुए रूपों में से कई बनाएगा (निर्माण का अनुकरण) करेगा और उन सभी के लिए एक जावास्क्रिप्ट श्रोता पंजीकृत है

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>expanding forms</title>
        <style>
            html *{
                box-sizing:border-box;
                -webkit-transition: all 350ms ease-in-out;
                -moz-transition:    all 350ms ease-in-out;
                -ms-transition:     all 350ms ease-in-out;
                -o-transition:      all 350ms ease-in-out;
                transition:         all 350ms ease-in-out;          
            }
            .content{
                display:none;
                margin:1rem 0;
            }
            .expanded{
                min-height:10rem;
                max-height:10rem;
                height:10rem;
                display:block;
                border:1px solid black;
                padding:0.25rem;
            }
            .minimised{
                height:0rem;
            }
            button.edit-comment{display:block;}
            textarea{
                width:80%;
                height:9.25rem;
                margin:auto;
                resize:none;
            }
            form > button[type='submit']{
                float:right;
                width:10%;
                padding:1rem;
                background:gray;
                color:white;
            }
        </style>
        <script>
            document.addEventListener('DOMContentLoaded', e=>{
                Array.prototype.slice.call( document.querySelectorAll('button.edit-comment') ).forEach( function( bttn ){
                    bttn.addEventListener( 'click', function(e){
                        let div=this.nextElementSibling;
                            div.classList.toggle( 'expanded' )
                    });
                });
            });
        </script>
    </head>
    <body>
        <?php
            for( $i=1; $i <=10; $i++ ){
                printf("
                    <button type='submit' class='edit-comment'>Edit</button>
                    <div class='content'>
                        <form class='hidden-content edit-form' method='POST' action='%s'>
                            <input type='hidden' name='comment_id' value='%d'>
                            <input type='hidden' name='user_id' value='%d'>
                            <input type='hidden' name='date' value='%s'>
                            <textarea class='comment' name='comment'>%s</textarea>
                            <button name='sub' type='submit'>Edit</button>
                        </form>
                    </div>",

                    '',
                    $i,
                    $i,
                    date('d-m-Y H:i:s'),
                    'This is a comment #'.$i
                );
            }
        ?>
    </body>
</html>
1
Professor Abronsius 19 मई 2019, 07:35