[Resolved] Views Custom search – Set CSS style after ajax refresh

[Author]

Posts

[volodiaB]

Hello,

I set up a view displaying the results using a custom search. Loop items are styled in a view_template. The results of the view are updated with AJAX when the visitor changes a filter value.

I want to add some CSS styling to the loop items after AJAX refresh. Using the Javascript .ajaxComplete() function in the JS file of my theme doesn't work:

  $(document).ajaxComplete(function() {
    $('#biens-immobiliers .bien a').each(function() {
      var widthBox = $(this).width();
      console.log(widthBox);
      $(this).find('.photo img').css({
        'height' : widthBox,
        'width' : 'auto'
      });
      var widthImg = $(this).find('.photo img').width();
      var marginLeft = -widthImg/2
      $(this).find('.photo img').css({
        'margin-left' : marginLeft
      });
    });
  });

With the console.log() output we learn that the ajaxComplete() function is called before the new results are actually loaded/displayed. See print screens: page-load then ajax-refresh (+ console).

Is there another trigger of view refresh I could use to add the CSS styling ?

Regards,
Volodia

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Hello. Thank you for contacting the Toolset support.

Views offer front-end callback events which you can use here.
To create AJAX callbacks, you need to open the JS editor under the Filter section main editor and click the Frontend events button:
=> hidden link

For example:

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.layout (object) The jQuery object for the View layout wrapper
	*/
	
});

[volodiaB]

Thanks Minesh.

The image resize is visible though (small delay). Any idea to avoid this?

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
  /**
  * data.view_unique_id (string) The View unique ID hash
  * data.layout (object) The jQuery object for the View layout wrapper
  */
  jQuery('#biens-immobiliers .bien a').each(function() {
    var widthBox = jQuery(this).width();
    jQuery(this).find('.photo img').css({
      'height' : widthBox,
      'width' : 'auto'
    });
  });
});

Regards,
Volodia

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Well - I need a problem URL to check if I can do anything here but this issue does not look like related to Toolset as load time also depends on your server response time, memory etc..etc..

Though, I would like to take a look at your issue and lets see if I can do anything here.

1)
Please share problem URL

2)
*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).

I have set the next reply to private which means only you and I have access to it.

[volodiaB]

Hi Minesh,

The website is currently developed in local, so not accessible online.
I'll check if the same issue happens also when it goes live on the production servers.

Thanks for the support,
Volodia