Delete button does not work

Update: found the bug. In templates > block-partials > modal.php delete the Tailwind text:

<script type="text/html" id="tmpl-wpadverts-modal">
    <!-- This example requires Tailwind CSS v2.0+ -->  <-- DELETE 
    <div class="wpadverts-blocks wpadverts-modal ...">
        ...
    </div>
</script>

Hi Greg, thanks for the plugin, it’s really cool. Unfortunately, I have a small bug: users can’t delete their ads themselves. The “Delete” button on the “Manage” page doesn’t work. The console in Chrome displays the following error:

jquery.min.js?ver=3.7.1:2 Uncaught Error: Syntax error, unrecognized expression: This example requires Tailwind CSS v2.0+ -->
<div class="wpadverts-blocks wpadverts-modal atw-fixed atw-z-10 atw-inset-0 atw-overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
  <div class="atw-flex atw-items-end atw-justify-center atw-min-h-screen atw-pt-4 atw-px-4 atw-pb-20 atw-text-center sm:atw-block sm:atw-p-0 atw-box-border">
    <!--
      Background overlay, show/hide based on modal state.

      Entering: "ease-out duration-300"
        From: "opacity-0"
        To: "opacity-100"
      Leaving: "ease-in duration-200"
        From: "opacity-100"
        To: "opacity-0"
    -->
    <div class="atw-fixed atw-inset-0 atw-bg-gray-500 atw-bg-opacity-75 atw-transition-opacity" aria-hidden="true"></div>

    <!-- This element is to trick the browser into centering the modal contents. -->
    <span class="atw-hidden sm:atw-inline-block sm:atw-align-middle sm:atw-h-screen" aria-hidden="true">​</span>

    <!--
      Modal panel, show/hide based on modal state.

      Entering: "ease-out duration-300"
        From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
        To: "opacity-100 translate-y-0 sm:scale-100"
      Leaving: "ease-in duration-200"
        From: "opacity-100 translate-y-0 sm:scale-100"
        To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
    -->
    <div class="atw-relative atw-inline-block atw-align-bottom atw-bg-white atw-rounded-lg atw-text-left atw-overflow-hidden atw-shadow-xl atw-transform atw-transition-all sm:atw-my-8 sm:atw-align-middle sm:atw-max-w-lg sm:atw-w-full">
      <div class="atw-bg-white atw-px-4 atw-pt-5 atw-pb-4 sm:atw-p-6 sm:atw-pb-4">
        <div class="sm:atw-flex sm:atw-items-start">
          <div class="wpa-icon-question atw-mx-auto atw-flex-shrink-0 atw-flex atw-items-center atw-justify-center atw-h-12 atw-w-12 atw-rounded-full sm:atw-mx-0 sm:atw-h-10 sm:atw-w-10">
            
                <svg class="atw-h-6 atw-w-6 atw-text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
            
          </div>
          <div class="atw-mt-3 atw-text-center sm:atw-mt-0 sm:atw-ml-4 sm:atw-text-left">
            <h3 class="js-wpa-modal-title atw-text-lg atw-leading-6 atw-font-medium atw-text-gray-900" id="modal-title">Delete this item?</h3>
            <div class="atw-mt-2">
              <p class="js-wpa-modal-text atw-text-sm atw-text-gray-500">Are you sure you want to delete 'Test'</p>
            </div>
          </div>
        </div>
      </div>
      <div class="atw-bg-gray-50 atw-px-4 atw-py-3 sm:atw-px-6 sm:atw-flex sm:atw-flex-row-reverse ">
      
        <div class="wpa-progress wpadverts-hidden atw-p-4 atw-text-center">
            <svg class=" atw-animate-spin atw-h-8 atw-w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="atw-opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="atw-opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
        </div>

        
        <div class="wpa-confirm atw-flex atw-flex-row atw-items-center atw-pt-2 sm:atw-ml-3">
                <button name="" value="" type="button"  class="wpa-btn-primary  atw-flex hover:atw-bg-none atw-bg-none atw-w-full atw-text-base atw-outline-none atw-border-solid atw-font-semibold atw-px-6 atw-py-2 atw-rounded atw-border atw-leading-loose">
        <div class="atw-flex-grow">
                <span class="atw-inline md:atw-inline atw-px-0.5"><span class="wpa-confirm-text">Löschen</span></span>
        </div>
        <span style="display:none" class="atw-flex-0 atw-pl-6 atw-border-l atw-border-gray-800/20 atw-border-solid"><i class="fas fa-angle-down atw-text-2xl -atw-leading-tight atw-align-middle"></i></span>
    </button>
            </div>        
        
        
        
        <div class="wpa-cancel atw-flex atw-flex-row atw-items-center atw-pt-2 sm:atw-ml-3">
                <button name="" value="" type="button"  class="wpa-btn-secondary  atw-flex hover:atw-bg-none atw-bg-none atw-w-full atw-text-base atw-outline-none atw-border-solid atw-font-semibold atw-px-6 atw-py-2 atw-rounded atw-border atw-leading-loose">
        <div class="atw-flex-grow">
                <span class="atw-inline md:atw-inline atw-px-0.5"><span class="wpa-cancel-text">Löschen</span></span>
        </div>
        <span style="display:none" class="atw-flex-0 atw-pl-6 atw-border-l atw-border-gray-800/20 atw-border-solid"><i class="fas fa-angle-down atw-text-2xl -atw-leading-tight atw-align-middle"></i></span>
    </button>
            </div>
        

      </div>
    </div>
  </div>
</div>
    at I.error (jquery.min.js?ver=3.7.1:2:11769)
    at Y (jquery.min.js?ver=3.7.1:2:17234)
    at re (jquery.min.js?ver=3.7.1:2:20008)
    at ce.I (jquery.min.js?ver=3.7.1:2:7520)
    at ce.<anonymous> (jquery-migrate.min.js?ver=3.4.1:2:2898)
    at e.<computed> [as find] (jquery-migrate.min.js?ver=3.4.1:2:1582)
    at ce.fn.init.find (jquery.min.js?ver=3.7.1:2:21991)
    at ce.fn.init (jquery.min.js?ver=3.7.1:2:22483)
    at e.<computed>.<anonymous> (jquery-migrate.min.js?ver=3.4.1:2:2438)
    at new e.<computed> (jquery-migrate.min.js?ver=3.4.1:2:1582)
I.error	@	jquery.min.js?ver=3.7.1:2
Y	@	jquery.min.js?ver=3.7.1:2
re	@	jquery.min.js?ver=3.7.1:2
I	@	jquery.min.js?ver=3.7.1:2
(anonymous)	@	jquery-migrate.min.js?ver=3.4.1:2
e.<computed>	@	jquery-migrate.min.js?ver=3.4.1:2
find	@	jquery.min.js?ver=3.7.1:2
ce.fn.init	@	jquery.min.js?ver=3.7.1:2
(anonymous)	@	jquery-migrate.min.js?ver=3.4.1:2
e.<computed>	@	jquery-migrate.min.js?ver=3.4.1:2
ce	@	jquery.min.js?ver=3.7.1:2
WPADVERTS.Modal	@	autoptimize_single_3…3de3.js?ver=2.0.0:1
WPADVERTS.ModalDelete	@	autoptimize_single_3…3de3.js?ver=2.0.0:1
(anonymous)	@	autoptimize_single_3…3de3.js?ver=2.0.0:9
dispatch	@	jquery.min.js?ver=3.7.1:2
v.handle	@	jquery.min.js?ver=3.7.1:2

Gemini recommends the following:

The problem is that the HTML code being used to create the modal dialog starts with a comment: <!-- This example requires Tailwind CSS v2.0+ -->.

The jQuery library is being passed this entire block of HTML. When jQuery sees a string that starts with something other than a tag (<), it tries to interpret it as a CSS selector (like div.my-class or #my-id). Since an HTML comment is not a valid selector, jQuery throws a “Syntax error, unrecognized expression”.

To fix this, you need to remove the leading HTML comment:

• Incorrect: <!-- This example requires... --><div>...</div>
• Correct: <div class="wpadverts-blocks ...">...</div>

The change needs to be made in the JavaScript file that is creating this modal, likely within the WPADVERTS.Modal or WPADVERTS.ModalDelete functions mentioned in the error log. The script is trying to create a new element on the fly from that HTML string, and the comment is breaking the process.

• This topic was modified 9 months, 4 weeks ago by badges3000.