[Resolved] Modal display of post form parent selection not working

[Author]

Posts

[tony]

I am trying to: Display a post form to create a post, in a modal

Link to a page where the issue can be seen:

I expected to see: a dropdown select for a parent post that let me select to appropriate post

Instead, I got: the dropdown select was limited to 10 entries and the search facility does not function

I have a post form that creates an organisation-venue. Within that form there is a field to enable selection of a parent Place. There are lots of places to select from but the selection choice is restricted to 10 places (I think the latest 10 set up).

If I use the form on a page, it works fine.

However, if I put the form in a modal, the dropdown only allows a choice from the 10 places.

[Luo Yang]

Hello,

Please elaborate the question with more details:
How do you setup the modal? with custom codes or other plugins?

[tony]

Thanks for getting back so quickly, Luo.

The modal is set up in a Template using standard Bootstrap 3 code.

Kind regards
Tony

<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#ADD-ORGANISATION-VENUE">Add Organisation-Venue</button>

<!-- Add Organisation-Venue Modal ----------------------------------------------------------- -->
<div id="ADD-ORGANISATION-VENUE" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">
        Add Organisation-Venue
        </h4>        
      </div>
      <div class="modal-body">
        [cred_form form="add-organisation-venue"]
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
  <!-- Add Organisation-Venue Modal END ------------------------------------------------------ -->

[Luo Yang]

I have tried the same HTML codes you mentioned above:
With select2 feature enabled, the parent selector works fine, I can search parent post, see screenshot select2.JPG

So the problem you mentioned above is abnormal, please check these:
1) Make sure you are using the latest version of Toolset plugins, you can download them here:
https://toolset.com/account/downloads/

2) In case it is a compatibility problem, please deactivate all other plugins, and switch to wordpress default theme 2020, deactivate all custom PHP/JS code snippets, and test again

3) Also check if there is any PHP/JS error in your website:
https://toolset.com/documentation/programmer-reference/debugging-sites-built-with-toolset/

4) If the problem still persists, please provide database dump file(ZIP file) of your website, also point out the problem page URL and form URL, I need to test and debug it in my localhost, thanks
https://toolset.com/faq/provide-supporters-copy-site/

[tony]

Hi Luo

I have another website where form modals are working fine. I compared the two sites and the one that is working uses old Toolset plugins (CRED 2.3.6 etc) and the failing site has all of the up to date ones. I did steps 1 and 2 above.

I have uploaded what I see. It looks like the code is not completing because the "not set" is at the bottom and I cannot move the curser into the enter box to search.

I will do some more investigation when I get chance.

Thanks
Tony

[Luo Yang]

Please check the step 3) mentioned above, there might be some php/js errors in your website

[tony]

My issue is resolved now. Thank you!

[tony]

Hi Luo

I have run some tests and discovered that the problem only exists when the modal cannot be displayed without scrolling.

I set up a test form with only a title and the parent select field and it worked. I then added fields one by one until the form stopped working (coincided with modal size growing so you could not see it all atonce on the screen).

I removed a field and the form worked.

I added a field and the form stopped working.

Maybe you could rerun your test and add fields until the modal needed to be scrolled to see if it was failing in your set-up?

Regards
Tony

[Luo Yang]

Hi Tony,

I have tested it in my localhost, it works fine when modal is scrolled, see screenshot modal2.JPG.

I suggest you check if there is any PHP/JS errors in your website:
https://toolset.com/documentation/programmer-reference/debugging-sites-built-with-toolset/

If you still need assistance for it, please provide a copy of your website, also point out the problem page URL and form URL, thanks

[tony]

Thank you for doing that Luo.

I have done as suggested. The error_log file is recording the following:

[23-Dec-2019 12:24:38 UTC] PHP Notice:  ob_end_flush(): failed to send buffer of zlib output compression (0) in /home/milfordassociate/teesdalelocal.co.uk/wp-includes/functions.php on line 4552

[23-Dec-2019 12:24:40 UTC] PHP Warning:  ob_start(): output handler 'ob_gzhandler' conflicts with 'zlib output compression' in /home/milfordassociate/teesdalelocal.co.uk/wp-content/themes/toolset-starter/css/theme-customizer-css.php on line 301

[23-Dec-2019 12:24:40 UTC] PHP Notice:  ob_start(): failed to create buffer in /home/milfordassociate/teesdalelocal.co.uk/wp-content/themes/toolset-starter/css/theme-customizer-css.php on line 301

I had a look at the functions.php file and the code around line 4552 is as follows:

/**
 * Flush all output buffers for PHP 5.2.
 *
 * Make sure all output buffers are flushed before our singletons are destroyed.
 *
 * @since 2.2.0
 */
function wp_ob_end_flush_all() {
	$levels = ob_get_level();
	for ( $i = 0; $i < $levels; $i++ ) {
		ob_end_flush();
	}
}

Lines 300/301 in theme customiser are:

// Enable GZip encoding.
ob_start("ob_gzhandler");

This is all way beyond me as I am not a php programmer. But you may recognise where the problem is likely to be.

Kind regards
Tony

[tony]

Hi Luo

I think I have found the problem.

I am using Firefox browser and the modal is not working as expected.

However, if I use Microsoft Edge or Google Chrome it works fine.

Not sure where I go from here.

Kind regards
Tony

[Luo Yang]

I have tried Firefox browser in my localhost, it works fine, see screenshot.
Please try these:
1) Clear your firefox browser cache and test again
2) If the problem still persists, please provide a copy of your website in below private message box, also point out the problem page URL and form URL, I need to test and debug it in my localhost, thanks

https://toolset.com/faq/provide-supporters-copy-site/

[tony]

Hi Luo

I just want to make sure that we are looking at the same thing.

When you click toselect a parent, where there are more choices than can be displayed in the dropdown, you should be able to type in the select field so a search is done for "hits" and those hits are then displayed in the dropdown.

The problem is that you cannot enter anything in the select box.

This seems to have been a problem with Firefox in the past:
https://stackoverflow.com/questions/35138690/select-in-bootstrap-modal-window-doesnt-work-in-firefox
https://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal/19574076#19574076
hidden link

Thanks
Tony

[Luo Yang]

Thanks for the details, I am downloading the files, will update here if there is anything found

[Luo Yang]

There isn't the same problem in my localhost with the duplicator package + the latest version of Firefox browser, see my video capture:
hidden link

The this problem might be a server problem, if you need more assistance for it, please provide a test site with the same problem. thanks