मैं गतिशील रूप से <div> पंक्तियों को 5 आइटम प्रति पंक्ति के साथ सरल PHP जबकि लूप का उपयोग करके उत्पन्न कर रहा हूं। अब उसके बाद मेरा लक्ष्य चयनित आइटम को हटाने के लिए डायनामिक रूप से बनाए गए option के विकल्प के रूप में एक चुनिंदा फॉर्म बनाना था।

अब मुझे लगता है कि मुद्दा यह है कि मेरे जेनरेट किए गए विकल्प PHP फ़ाइल को हटाने के साथ बातचीत नहीं करते हैं। मैं GET का उपयोग करके मैन्युअल रूप से फ़ाइल को हटा सकता हूं और आवश्यक स्ट्रिंग को url में टाइप कर सकता हूं, लेकिन यह POST का उपयोग करके बटन दबाने के बाद काम नहीं करता है।

पंक्तियाँ बनाने के लिए लूप:

<?php   $count = 1; 
        while($data = mysqli_fetch_array($result)) {
            if($count === 1) {
                echo "<div class='img_container'>";
            }
                echo "<div  class='img_div' id='".$data['title']."'>"; 
                    echo "<img src='uploads/" . $data['filename']."'>";
                    echo "<p delete_id='".$data['id']."'  class='img_title' >" .$data['title']. "</p>";
                    echo "<p class='img_desc'>" .$data['photo_description']. "</p>";
                    echo "<p>" .$data['price']. "</p>";
                echo "</div>";
            if($count % 5 === 0) {
                echo "</div>";
                $count = 1;
                continue;
            }
            $count++;
        }
?>

चयन प्रपत्र:

<form class='flex-container' id='remove-form'>
                <p>Select and Remove Item</p>
                <select id='selectOpt' name='title'>
                    <option value="" selected disabled hidden>Choose Title</option>
                </select>
                <button id='rmvBtn' name='remove' <?php include_once 'delete.php' ?>>Delete</button>
            </form>

फ़ाइल नष्ट करें:

if(isset($_POST['remove'])) {
            $title = $_POST['title'];
            $pdo = new PDO('mysql:host=localhost;dbname=project', 'root', '');
            $query = 'DELETE FROM photos WHERE title = :title';
            $stmt = $pdo->prepare($query);
            $stmt->bindPARAM(':title', $title);
            $stmt->execute();
        }

JQuery विकल्प और अजाक्स उत्पन्न करने के लिए:

(".img_title").parent().each((i,e)=> $("#selectOpt").append("<option value='" + e.id + "'>" + e.id + "</option>"));


//Delete selected item
$(document).on('click', '#rmvBtn', function() {

    del_title = $("#"+ $("#selectOpt").val()).val();
       $.ajax({
            type: 'POST',
            url: 'delete.php',
            data: {title:del_title},
            success: function() {
                    del_title.remove();
                    $("#selectOpt option:selected").remove();
            }

        });
    })
1
Auri-stack 16 अगस्त 2021, 11:29

2 जवाब

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

ठीक है, यह वास्तव में अजीब है, मुझे नहीं पता कि मैंने इस मुद्दे को कैसे ठीक किया या क्या गलत था, लेकिन मैंने इसे काम करने के लिए मूल रूप से यही किया:

$(document).on('click', '#rmvBtn', function() {
    var del_title = $("#selectOpt").val();
    $.ajax({
         type: 'POST',
         url: 'delete.php',
         cache: false,
         data: {title:del_title},
         success: function(data) {
                alert(data) /*used it to see what's the response from delete.php file*/
                $("#"+ $("#selectOpt").val()).remove();
                $("#selectOpt option:selected").remove();
         },
         error: function() {
             alert('Failed');
         }
     });
 })

पहले तो मुझे PHP फ़ाइल से बिल्कुल भी प्रतिक्रिया नहीं मिल रही थी (अलर्ट खाली था), इसलिए मैंने isset($_POST['remove']) को पूरी तरह से हटा दिया और सब कुछ टिप्पणी की और फ़ाइल को echo 'success' पर बना दिया। उसके बाद मुझे alert:success मिल रहा था, फिर echo 'success' को $title = $_POST['title'] में बदल दिया और मुझे वह प्रतिक्रिया मिल रही थी जिसकी मुझे आवश्यकता थी। उसके बाद बस सब कुछ काम करना शुरू कर दिया। मुझे सच में यकीन नहीं है कि समस्या क्या थी, लेकिन यह अभी ठीक काम करता है।

हटाएं.php

<?php    
       $title = $_POST['title'];
       $pdo = new PDO('mysql:host=localhost;dbname=second_project', 'root', '');
       $query = 'DELETE FROM photos WHERE title = :title';
       $stmt = $pdo->prepare($query);
       $stmt->bindPARAM(':title', $title);
       $stmt->execute();
0
Auri-stack 17 अगस्त 2021, 08:57

आपको गिनती की जरूरत नहीं है। बस img_container को जबकि लूप के बाहर रखें।

<?php 
   $html = "";  
   $html .= "<div class='img_container'>";
   while($data = mysqli_fetch_array($result)) {
       $html .= "<div  class='img_div' id='".$data['title']."'>"; 
       $html .= "<img src='uploads/" . $data['filename']."'>";
       $html .= "<p delete_id='".$data['id']."'  class='img_title' >" .$data['title']. "</p>";
       $html .= "<p class='img_desc'>" .$data['photo_description']. "</p>";
       $html .= "<p>" .$data['price']. "</p>";
       $html .= "</div>";   
   }
   $html .= "</div>";
   echo $html;
   ?>

मैंने एक उदाहरण किया
एचटीएमएल:

<label for="cars">Choose a car:</label>

<select name="cars" id="selectOpt">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button id='rmvBtn'>Delete</button>

JQuery:

$(document).on('click', '#rmvBtn', function() {
  var del_title = $("#selectOpt").val();
  console.log(del_title);
  var json = del_title;
  jQuery.ajax({
    url: '/echo/json/', // Replace with your Url
    dataType: 'json',
    type: 'POST',
    data: {
      del_title: del_title
    },
    success: function(data) {
      console.log('del_title', del_title);
      $('#selectOpt option[value=' + del_title + ']').remove();
    }
  });
});

मैंने एक उदाहरण jsfiddle किया जहां आप कोड के साथ खेल सकते हैं: https://jsfiddle.net/bogatyr77/qdeL4tcp/3/

इसे बदलें:

<button id='rmvBtn' name='remove' <?php include_once 'delete.php' ?>>Delete</button>

प्रति

<button id='rmvBtn' name='remove'>Delete</button>

यहां आपको अपने यूआरएल को डिलीट करने के लिए डालना होगा

url: 'delete.php', // Replace with your Url
0
Bernhard Beatus 16 अगस्त 2021, 12:53