[Resolved] Clean up Views Markup Garbage

[Author]

Posts

[Adrian]

Hi,

I was using the code mentioned in this solution to clean up all the wrappers and extra garbage that WP-Views used to wrap around my content. making it impossible to target using jQuery for some of my applications.

Now, despite the code being in my functions.php I am still getting a very annoying wrapper around my code.

Here is the code:

add_filter( 'wpv_filter_wpv_view_shortcode_output', 'prefix_clean_view_output', 5 );

function prefix_clean_view_output( $out ) {

` $start = strpos( $out, '<!-- wpv-loop-start -->' );
if (
$start !== false
&& strrpos( $out, '<!-- wpv-loop-end -->', $start ) !== false
) {
$start = $start + strlen( '<!-- wpv-loop-start -->' );
$out = substr( $out , $start );
$end = strrpos( $out, '<!-- wpv-loop-end -->' );
$out = substr( $out, 0, $end );
}

return $out;
}`

I got it from here: https://toolset.com/forums/topic/need-to-remove-unwanted-markup-from-wpv-view/

[Shane]

Hi Adrian,

Thank you for contacting our support forum.

Is the code this exact one below ?

add_filter( 'wpv_filter_wpv_view_shortcode_output', 'prefix_clean_view_output', 5, 2 );
 
function prefix_clean_view_output( $out, $id ) {
    if ( $id == '375' ) {
        $start = strpos( $out, '<!-- wpv-loop-start -->' );
        if ( 
            $start !== false
            && strrpos( $out, '<!-- wpv-loop-end -->', $start ) !== false
        ) {
            $start = $start + strlen( '<!-- wpv-loop-start -->' );
            $out = substr( $out , $start );
            $end = strrpos( $out, '<!-- wpv-loop-end -->' );
            $out = substr( $out, 0, $end );
        }
    }
    return $out;
}

If so then you will need to change the 375 to the id of your view for this to work.

Thanks,
Shane

[Adrian]

Hi Shane, Thank you for the quick reply

My code is this:

add_filter( 'wpv_filter_wpv_view_shortcode_output', 'prefix_clean_view_output', 5 );
 
function prefix_clean_view_output( $out ) {
    
    $start = strpos( $out, '<!-- wpv-loop-start -->' );
    if ( 
        $start !== false
        && strrpos( $out, '<!-- wpv-loop-end -->', $start ) !== false
    ) {
        $start = $start + strlen( '<!-- wpv-loop-start -->' );
        $out = substr( $out , $start );
        $end = strrpos( $out, '<!-- wpv-loop-end -->' );
        $out = substr( $out, 0, $end );
      }

    return $out;
}

I want to do this for all views. Was working fine until a little while ago when it just stopped working. My guess is something happened with the latest toolset update.

[Adrian]

Furthermore, it adds two closing divs after the view. So I have the following markup added around my view:

<div id="wpv-view-layout-94893-TCPID97492" class="js-wpv-view-layout js-wpv-layout-responsive js-wpv-view-layout-94893-TCPID97492" data-viewnumber="94893-TCPID97492" data-pagination="{"id":"94893","base_permalink":"/drybulk-test/?wpv_aux_current_post_id=97492&wpv_view_count=94893-TCPID97492&wpv_paged=WPV_PAGE_NUM","query":"normal","type":"disabled","effect":"fade","duration":"500","speed":5,"pause_on_hover":"disabled","stop_rollover":"false","cache_pages":"enabled","preload_images":"enabled","preload_pages":"enabled","preload_reach":"1","spinner":"builtin","spinner_image":"<em><u>hidden link</u></em>","callback_next":"","manage_history":"enabled","has_controls_in_form":"disabled","infinite_tolerance":"","max_pages":0,"page":1,"loop":{"type":"","name":"","data":[],"id":0}}" data-permalink="/drybulk-test/?wpv_aux_current_post_id=97492&wpv_view_count=94893-TCPID97492">

<!-- My view output, since that one is not the issue I will skip it to save some space here -->

</div> <!-- Where the hell is this one coming from??? I did not add it to my view output code. -->
</div><!-- ok... I guess this one is for the #wpv-view-layout-94893-TCPID97492 div -->

[Adrian]

Update2 : I am using a filtered view. For the unfiltered view the above code seems to work... I guess I understand the need for the insane code, since it is using ajax and it has to target it. but I am not understanding the closing div.

Here is what my view looks like:

Filter Editor:

<!-- wpv-loop-start -->
<div class="fleet-filter">
[wpv-filter-start hide="false"]
[wpv-filter-controls]
<label>Filter by Vessel Type</label>
<div class="form-group vesselfilter">
	[wpv-control-postmeta field="wpcf-type-of-vessel" type="radios" default_label="All" url_param="wpv-wpcf-type-of-vessel"]	
</div>
[/wpv-filter-controls]
  
[wpv-filter-end]
</div>
<!-- wpv-loop-end -->

Loop Output Editor:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<!-- V2 -->
	<table id="shiplist" class="shiplist">
      <thead>
          <tr class="table-head trow"><!-- Table Row -->
            <th scope="col" class="col shipname_title">Ship Name <i class="fa sorticon"></i></th>
            <th scope="col" class="col deadweight_title">Deadweight <i class="fa sorticon"></i></th>
            <th scope="col" class="col vessel-type_title">Vessel Type <i class="fa sorticon"></i></th>
            <th scope="col" class="col year_title">Year Built <i class="fa sorticon"></i></th>
            <th scope="col" class="col shipyard_title">Shipyard <i class="fa sorticon"></i></th>
            <th scope="col" class="col flag_title">Flag <i class="fa sorticon"></i></th>
            <th scope="col" class="col download">&nbsp;</th>
          </tr><!-- Table Row -->
      </thead>
	<tbody>	
      	<wpv-loop>
          <tr class="vessel trow"><!-- Table Row -->
          	<td class="col shipname">[wpv-post-title output='sanitize']</td>
            <td class="col deadweight">[format_money price=[types field='deadweight' output='raw'][/types]][/format_money]</td>
            <td class="col vessel-type">[types field='type-of-vessel' output='raw'][/types]</td>
            <td class="col year">[types field='year-built' output='raw'][/types]</td>
            <td class="col shipyard">[types field='shipyard' output='raw'][/types]</td>
            <td class="col flag">[types field='flag' output='raw'][/types]</td>
            <td class="col download"><a href="[types field='vessel-data-card' link='true' output='raw'][/types]" target="_blank" title="Download Vessel Information Sheet" style="color:#863032;"><i class="fa fa-file-pdf-o" aria-hidden="true"></i></a></td>
          </tr><!-- Table Row -->
		</wpv-loop>
      </tbody>
	</table>
	<script type="text/javascript" src="<em><u>hidden link</u></em>"></script>
	<script type="text/javascript">
      jQuery(document).ready(function() 
        { 
            jQuery("#shiplist").tablesorter(); 
        } 
    );
    </script>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

Filter and Loop Output Integration Editor:

[wpv-filter-meta-html]
[wpv-layout-meta-html]

I added another open div at the end of the code for now since this view was wreaking havoc on my website.

[Shane]

Hi Adrian,

Yes this additional divs are needed for the filtered views and views with pagination.

Also the closing div could be coming from the [wpv-items-found] shortcode.

Thanks,
Shane

[Adrian]

It should not... I would assume the plugin uses valid HTML markup. This closes an extra div it shouldn't causing errors on the page.

I get the initial div, but the extra </div> tag should not be there. How can I get rid of that?

[Shane]

Hi Adrian,

Would you mind providing me with access to this site so that I can perform a thorough investigation on this ?

The private fields will be enabled for your next response.

Also please let me know which view you are experiencing this issue with.

Thanks,
Shane