Error during the ajax request, make sure the data you send are in j

This thread is resolved. Here is a description of the problem and solution.

Problem:

The issue here is that the user had some repeated image fields and wanted to create a slider using these images.

Solution:

I managed to create a flexslider plugin that should be able to help your.

Download and install the plugin in the link below.
https://drive.google.com/file/d/1CFU2_oBqe9PJBks8cT1VqMND8-ytDdVE/view?usp=sharing

Then create a content template for your post and add the following.

<div class="flexslider">
  <ul class="slides">
   [wpv-for-each field="wpcf-image_1"]
  <li>[types field="image_1" size="medium" align="none" resize="pad" padding_color="#FFF"][/types]</li>
  [/wpv-for-each]
  </ul>
</div>

After doing this then you will need to add the script for it to work.

Add this to the js section of the content template.

jQuery(window).load(function() {
   jQuery('.flexslider').flexslider();
 });

This support ticket is created 6 years, 7 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	-
-	13:00 – 18:00	13:00 – 18:00	13:00 – 18:00	14:00 – 18:00	13:00 – 18:00	-

Supporter timezone: America/Jamaica (GMT-05:00)

Tagged: Backend editing, Front-end display, Layouts plugin

This topic contains 2 replies, has 2 voices.

Last updated by Nashaat 6 years, 7 months ago.

Assisted by: Shane.

Author

Posts

April 23, 2018 at 11:25 am #715173

Nashaat

I am trying to add custom html slider into a layouts cell. after i add the code into HTML/VISUAL editor and try to save it shows me an error "There was an error during the ajax request, make sure the data you send are in json format."


<div class="w3-content" style="max-width:1200px">
  <div class="mySlides"><img src="[types field='1-car-image' output='raw'][/types]" style="width:100%"></div>
  <div class="mySlides"><img src="[types field='2-car-image' output='raw'][/types]" style="width:100%"></div>
  <div class="mySlides"><img src="[types field='3-car-image' output='raw'][/types]" style="width:100%"></div>
  <div class="mySlides"><img src="[types field='4-car-image' output='raw'][/types]" style="width:100%"></div>




  <div class="w3-row-padding w3-section">
    <div class="thumb-img-slide">
      <img class="demo cursor" src="[types field='1-car-image' output='raw'][/types]" style="width:100%" onclick="currentDiv(1)">
    </div>
    <div class="thumb-img-slide">
      <img class="demo cursor" src="[types field='2-car-image' output='raw'][/types]" style="width:100%" onclick="currentDiv(2)">
    </div>
    <div class="thumb-img-slide">
      <img class="demo cursor" src="[types field='3-car-image' output='raw'][/types]" style="width:100%" onclick="currentDiv(3)">
    </div>
    <div class="thumb-img-slide">
      <img class="demo cursor" src="[types field='4-car-image' output='raw'][/types]" style="width:100%" onclick="currentDiv(4)">
    </div>
  </div>
</div>

So i tried to remove the "onclick="currentDiv" and the file could be saved and the thumbnails of the slider show up! but the onclick function now doesn't work anymore because i had to delete it. so how can i make this slider work now?

GOOD - Here is an example how this should work (content template + HTML editor of Visual composer) : hidden link

BAD - Here is how it looks like now with Layout only: hidden link
_____

How to make the Slider work with the Viusal/HTML cell of layout with my code above?
If there is a better way to add a slider to a single post type, what is it?

April 23, 2018 at 3:50 pm #718228

Shane

Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Nashaat,

Thank you for contacting our support forum.

It seems you're using multiple images for your slider. You can actually do this with the repeatable fields and the flexslider .

Take a look at the link below.
https://toolset.com/forums/topic/generate-slide-on-my-slider/

Please let me know if this helps.
Thanks,
Shane

April 23, 2018 at 6:34 pm #719908

Nashaat

Thank you very much Shane! this worked great.

I think it would be great if you guys add a built in option of a slider with multiple images without installing 3rd party plugins. I prefer to lean on you and your plugins more, since its a great feeling to know that you will always bring new stuff and solution and there to support your community

Thanks