[Résolu] View not working correctly with custom javascript

[Auteur]

Publications

[markd-8]

I am trying to: get an established working View to display star ratings based on field content in CPT. I am using jquery.raty-fa and have been successful meshing it with Views, except it only displays properly on the first instance of a data loop. On all subsequent loops, the jquery plugin does not work.

Not sure whether this is a Views issue or jquery.raty-fa. I suspect that the plugin needs to re-initialize for each loop pass, but not sure how/where to begin.

Any thoughts on how other javascript solutions are able to be re-initialized for each pass?

In attached screenshot you can see how 1st pass works fine, and then second (and balance of passes) does not populate properly.

[Waqas Supporter Languages: Anglais (English ) Timezone: Asia/Karachi (GMT+05:00)]

You need to re-initialize (or call) the same jQuery code (for your star rating) after the view is refreshed (i.e. loading next results). You can do this using following jQuery event:

$( document ).ajaxComplete(function() {
    ... Call your start rating plugin here too ...
});

I hope this can help solving the issue.

[markd-8]

Waqas - I appreciate your response, but unfortunately changing:

$( document ).ready(function() {

to

$( document ).ajaxComplete(function() {

caused the entire plugin to fail completely. No ratings are displayed.

I am not JS or jquery expert, so if I did something incorrectly, please let me know.

Also, to clarify:

1) JS code is embedded into a View which displays Testimonial records.
2) Each Testimonial record includes multiple rating fields
3) Each rating field stores a numeric value from 1 to 5
4) When View is outputted, the initial record on each page (set to 4 records per page) displays properly per original screenshot.
5) All other records do not have stars displayed (i.e. - JS is not operating)
6) When paging to new (next) page of record results, only the 1st record displays properly.

[Waqas Supporter Languages: Anglais (English ) Timezone: Asia/Karachi (GMT+05:00)]

Actually, you don't need to replace $(document).ready() with this - pardon me for not explaining it well.

You should add $( document ).ajaxComplete(function() {}); as an other even on the document. And "copy" the same logic of your jQuery plugin, which you are using in the $(document).ready() to initialize the star rating.

$(document).ready() works when first time the page is loaded and ready. While $(document).ajaxComplete() works when an AJAX request has finished it's working completely (i.e. loading next records).

So, invoking your start rating plugin in both places, will solve the issue. It will work on the page load as currently doing, while, it will be re-invoked when AJAX results are loaded.

[markd-8]

OK - so I duplicated the existing jv code with the exception of 'ready' vs 'ajaxComplete', and now the results are the same as my initial ones. The 1st testimonial record displays correctly on each page, but the others do not.

Here is the code I am using:

jQuery( document ).ready(function($) {
  $('#recommend').raty({ 
    readOnly: true,  
    score: function() { 
      return $(this).attr('recommend-score');
    }
  });
  $('#knowledge').raty({ 
    readOnly: true, 
    score: function() { 
      return $(this).attr('knowledge-score');
    }
  });
  $('#process').raty({ 
    readOnly: true, 
    score: function() { 
      return $(this).attr('process-score');
    }
  });
  $('#response').raty({ 
    readOnly: true, 
    score: function() { 
      return $(this).attr('response-score');
    }
  });
  $('#negotiation').raty({ 
    readOnly: true, 
    score: function() { 
      return $(this).attr('negotiation-score');
    }
  });
});

jQuery( document ).ajaxComplete(function($) {
  $('#recommend').raty({ 
    readOnly: true,  
    score: function() { 
      return $(this).attr('recommend-score');
    }
  });
  $('#knowledge').raty({ 
    readOnly: true, 
    score: function() { 
      return $(this).attr('knowledge-score');
    }
  });
  $('#process').raty({ 
    readOnly: true, 
    score: function() { 
      return $(this).attr('process-score');
    }
  });
  $('#response').raty({ 
    readOnly: true, 
    score: function() { 
      return $(this).attr('response-score');
    }
  });
  $('#negotiation').raty({ 
    readOnly: true, 
    score: function() { 
      return $(this).attr('negotiation-score');
    }
  });
});

The code simply reads the ID of <div> tags and generates a number of stars equal to the rating count for each field in question (e.g. - 'recommend-score', knowledge-score', etc.). Also here is the url for the jquery plugin in question. Fairly simple in its useage:

hidden link

This describes the plugin options in more detail:

hidden link

I am using only two options:

1) readOnly option - set the displayed stars to readOnly
2) score callback option - to read the Types field content (i.e. - rating count) and set the score (# of stars) to this count.

I also tried the 'set' function in the ajaxComplete section to see if I could reset the rating to the new configuration, but that also did not work.

Thoughts?

[markd-8]

Also, for clarification, I am using Pagination with manual transition where Pagination updates the entire page, so I am not updating the view using Ajax. Would that option impact the use of 'AjaxComplete' in the jQuery code?

[markd-8]

OK - good news and bad news... I was able to identify the problem, but due to lack of JS experience, I do not know how to solve it, so am still looking for guidance.

1) the issue deals with both Views and the jQuery plugin.

2) the View loop is setup to output multiple Testimonial records per page (currently - 4), each having five (5) unique ratings fields, each of which create a unique HTML ID attribute, which jQuery.raty-fa needs to work properly.

3) the problem is that the loop is spitting out multiple records per page, whose fields generate the same ID attribute, which, of course, will not work. I tested this theory as follows:
a) I appended the [wpv-post-id] to each ID as follows: id="unique_name-[wpv-post-id]"

<div class="testimonial-rating"><span class="star-rating" id="recommend-[wpv-post-id]" recommend-score="[wpv-post-field name="wpcf-testimonial-likely-to-recommend"]"></span>  <strong>[types field="testimonial-likely-to-recommend"][/types] to Recommend!</strong></div>

This now generated a unique ID attribute for each ratings field <span> generated in the loop.
b) I then hardcoded the JS with the unique ID's for all 4 records outputted on that page.
c) voila - stars now appear properly!

4) this now brings me to the next problem. I can see 2 possible solutions to move forward -- how would I:
a) append a simple item count to each ID? Is this possible? If so, how would I programmatically code the JS to now loop through each record using the new unique ID's generated in 4a) above?
b) append the [wpv-post-slug] to each field ID (as in the test), and pass that unique ID onto the JS?

I feel like I am close, but without more JS experience, I cannot solve the problem.

Your assistance would be greatly appreciated!

[Waqas Supporter Languages: Anglais (English ) Timezone: Asia/Karachi (GMT+05:00)]

You can use jQuery Selectors to apply JS to a group of matching elements. For example, as you have used [wpv-post-id] with your elements, to make these unique. You can use following JS selector to apply the JS plugin at-once:

$('[id^=recommend]').raty({
... your code here ...
})

This will apply your code on "all" elements, whose ID is starting with "recommend". And the same way you can apply your code on other elements too. Please see http://stackoverflow.com/a/5376445 for a reference.

Please see hidden link for a list of all available jQuery selectors.

Please let me know if it solves the issue, or if I can help you with anything related.

[markd-8]

Waqas - You are the Man! That last bit of code seemed to do the trick. I will report back if I find something later in testing, but all seems good now.

Thanks again for your perseverance!

Mark