I am beginner in Orchard CMS and i need add voting functionality to content. I have installed Contib.Vote and Contrib.Review modules. After that i have added Review part to page content type. Also, i have executed recipe. At the first look everything is fine, but link for review refer to the same page with # symbol and nothing is happenning by clicking on it. It seems like module does not work or work incorrectly. Please help with my problem.
UPD.
Hi devqon and thanx for your help. Your answer was really useful for me. According to your advice i was looking around javascript inside Review Part view file (Parts_Reviews.cshtml). Just for a test i changed its source code a little bit.
#using (Script.Foot())
{
<script type="text/javascript">
//<![CDATA[
(function () {
var numberOfReviewsToShowByDefault = 5;
var $showAllReviewsLink = $('#showAllReviewsLink');
var $deleteReviewConfirmationDialogDiv = $('#deleteReviewConfirmationDialogDiv');
$deleteReviewConfirmationDialogDiv.dialog({ autoOpen: false, modal: true, resizable: false });
$('#deleteReviewLink').click(function () {
$('#reviewId').val($(this).attr("data-review-id"));
ShowDeleteReviewDialog();
return false;
});
$('#showReviewFormLink').click(function () {
$('#createReviewLinkDiv').slideToggle('fast', function () { $('#reviewFormDiv').slideToggle('fast'); });
return false;
});
$('#cancelCreateReviewLink').click(function () {
$('#reviewFormDiv').slideToggle('fast', function() { $('#createReviewLinkDiv').slideToggle('fast'); });
return false;
});
$('#deleteReviewForm').submit(function () {
$('input[type=submit]', this).attr('disabled', 'disabled');
});
$('#cancelDeleteReviewButton').click(function () {
CloseConfirmationDialogDiv();
return false;
});
var rowCount = $('#reviewsList li').length;
if (rowCount > numberOfReviewsToShowByDefault) {
SetupToggle();
}
if (document.location.hash === '#Reviews') {
var topPx = $('#reviews-heading').position().top;
$('body,html').animate({ scrollTop: topPx }, 'slow');
}
if ($("#comment").length) {
var characterCountUpdater = new CharacterCountUpdater($("#comment"), $("#commentCharactersLeft"));
setInterval(function() { characterCountUpdater.UpdateCharacterCount(); }, 100);
$("#comment").keypress(function() { characterCountUpdater.UpdateCharacterCount(); });
if ($("#comment").val().length) {
$("#showReviewFormLink").trigger("click");
}
}
function CharacterCountUpdater(commentBox, charactersLeftBox)
{
this.commentBox = commentBox;
this.charactersLeftBox = charactersLeftBox;
this.maxLength = commentBox.attr("maxlength");
commentBox.removeAttr("maxlength");
return this;
}
Now form for review is displayed. The form looks good, submit button works, character counter works too. But i still can't apply my rating. Stars not react on clicking. That is why submit operation ends with error 'In order to submit a review, you must also submit a rating.'. Look like something inside Parts.Stars.NoAverage.cshtml does not work. Please, help me.
According to the project's site it is a known issue: broken from version 1.7.2.
When looking at the code of the Parts_Reviews.cshtml it says the following on lines 20-24:
string showReviewUri = "#";
if (!Request.IsAuthenticated)
{
showReviewUri = Url.Action("LogOn", "Account", new { area = "Orchard.Users", ReturnUrl = Context.Request.RawUrl });
}
and on line 29:
<div id="createReviewLinkDiv"><span id="createReviewLinkSpan">#noReviewsYetText<a id="showReviewFormLink" href="#showReviewUri">#reviewLinkText</a></span></div>
Therefore, it was intended to let the anchor be # when the request is authenticated (you are logged on). This means it probably will be handled in JavaScript, which can be seen on lines 105-112:
$('#showReviewFormLink').click(function () {
$('#createReviewLinkDiv').slideToggle('fast', function () { $('#reviewFormDiv').slideToggle('fast'); });
return false;
});
$('#cancelCreateReviewLink').click(function () {
$('#reviewFormDiv').slideToggle('fast', function() { $('#createReviewLinkDiv').slideToggle('fast'); });
return false;
});
This piece of code should let you see the form to write a review, so something is going wrong there presumably. When there's something wrong in this jQuery code it probably gives an error in the console, so check out the browser's console when you click the 'Be the first to write a review' link.
This should get you further, if you don't know what to do please provide the error and I will try to dig more. I haven't downloaded the module so I don't have live feed.
Console of Firefox tells: $(...).live is not a function. It refers to Contrib.Stars.js source code file. This function is not supported in jquery now and i replaced it by .on() function in all places api.jquery.com/on. Now module works fine.
Check out my comment at the site below to see how I was was able to get it working again on Orchard 1.8.1:
Orchard Reviews Project Site
You basically just need to change 3 different lines in the Contrib.Stars.js file but I would recommend copying the .js file along with the Review module's different views to a custom theme directory, in order to override everything and force the Reviews module to use your edited .js file:
On line 12 & 13:
Change this:
$(".stars-clear").live(
"click",
To this:
$("body").on(
"click", ".stars-clear",
On line 44 & 45:
Change this:
.live(
"mouseenter",
To this:
.mouseenter(
On line 48 & 49:
Change this:
.live(
"mouseleave",
To this:
.mouseleave(
Related
I am running a cypress test on a remote web app and the cy.get method fails to capture elements based on their data-testid .
This is a sample of the tests that I want to run :
describe('test: deny', () => {
it('I can deny', () => {
cy.visit('https://www.deepskydata.com/');
cy.wait(1000)
cy.get("[data-testid='uc-accept-all-button']").click();
});
});
Here the button with data-testid='uc-accept-all-button' is not found by cy.get.
Also cy.get('button') doesn't work despite that there are multiple button elements in the DOM.
Has anyone ever encountered a similar issue ?
The button you want to click is for privacy settings.
The problem is this section of the page isn't consistently displayed, once you click the "Accept All" button it may not display on the next run.
To avoid the problem, you should poll for the button inside the shadow root container element before attempting to click.
function clickPrivacySettingsButton(attempt = 0) {
// Poll for 4 seconds
if (attempt === 40) {
cy.log('No Accept All button to click')
return
}
cy.get('#usercentrics-root', {log:false}).then($privacySettings => {
const prvivacyShadow = $privacySettings.shadowRoot // get shadow root
const $acceptAllButton = Cypress.$(prvivacyShadow)
.find('[data-testid="uc-accept-all-button"]') // look for button
if ($acceptAllButton.length === 0) {
cy.wait(100, {log:false})
clickPrivacySettingsButton(++attempt)
} else {
cy.get('#usercentrics-root')
.shadow()
.find('[data-testid="uc-accept-all-button"]')
.click()
cy.log('Dismissed Accept All button')
return
}
})
}
cy.visit('https://www.deepskydata.com/')
clickPrivacySettingsButton()
Notes
You cannot just use Cypress includeShadowDom setting, because the shadow root may or may not exist.
You will have to apply cy.wait() in small increments to effectively poll for the Privacy Settings section.
I could see that there is a Shadow DOM in your app. TO make sure cypress traverses through the shadow DOM, in your cypress config file write:
includeShadowDom: true
Your cypress.config.js should look like this:
const { defineConfig } = require("cypress");
module.exports = defineConfig({
e2e: {
...
},
...
includeShadowDom: true
})
Then in your test, you can directly write:
describe('test: deny', () => {
it('I can deny', () => {
cy.visit('https://www.deepskydata.com/')
cy.get("[data-testid='uc-accept-all-button']").should('be.visible').click()
})
})
Avoid using cy.wait() as these can make the tests flaky. Instead use a visible assertion to first check that the element is visible and then click on it.
You may want to have a test to check the banner exists for a user meeting certain conditions.
Otherwise, you can bypass this modal, with correct permissions of course, by making a making a graphQL mutation saveConsents, so you will not need to making any checks at the UI level.
Note: you should choose your method of recursing and allow failOnStatusCode.
cy.request({
method: 'POST',
url: 'url-endpoint',
auth: 'any-authorization',
body: {
operationName: 'saveConsents',
query: 'graphQL mutation query'
}
variables: 'variables-if-needed',
failOnStatusCode: false, // to allow recurse
})
New to react... Really banging my head against it with this one... I'm trying to figure out how to get a dynamically inserted component to update when the props are changed. I've assigned it to a parent state object but it doesn't seem to re-render. I've read that this is what's supposed to happen.
I was using ReactDOM.unmountComponentAtNode to re-render the specific elements I needed to, but it kept yelling at me with red text.
I need to hide "chat.message" unless the user has the authority to see it (server just sends empty string), but I still need to render the fact that it exists, and reveal it should the user get authentication. I'm using a css transition to reveal it, but I really need a good way to update the chat.message prop easily.
renderChats(uuid){
let userState = this.state.userStates.find(user => {
return user.uuid === uuid;
});
const children = userState.chats.map((chat) => {
let ChatReactElement = this.getChatMarkup(chat.cuid, chat.message, chat.status);
return ChatReactElement;
});
ReactDOM.render(children, document.getElementById(`chats-${this.state.guid}-${uuid}`));
}
getChatMarkup() just returns JSX and inserts Props... I feel like state should be getting passed along here. Even when I use a for-loop and insert the state explicitly, it doesn't seem to re-render on changes.
getChatMarkup(cuid, message, status){
return(
<BasicChatComponent
key={cuid}
cuid={cuid}
message={message}
status={status}
/>
);
}
I attempted to insert some code line this:
renderChats(uuid){
let userState = this.state.userStates.find(user => {
return user.uuid === uuid;
});
const children = userState.chats.map((chat) => {
let ChatReactElement = this.getChatMarkup(chat.cuid, chat.message, chat.status);
if(chat.status.hidden)
this.setState({ hiddenChatRE: [ ...this.state.hiddenChatRE, ChatReactElement ] }); // <== save elements
return ChatReactElement;
});
ReactDOM.render(children, document.getElementById(`chats-${this.state.guid}-${uuid}`));
}
and later in my code:
this.state.hiddenChatRE.every(ReactElement => {
if(ReactElement.key == basicChats[chatIndex].cuid){
ReactElement.props = {
... //completely invalid code
}
}
});
The only response I see here is my ReactDOM.unmountComponentAtNode(); approach...
Can anyone point me in the right direction here?
Although perhaps I should be kicking myself, I read up on how React deals with keys on their components. So there's actually a fairly trivial answer here if anyone comes looking... Just call your render function again after you update the state.
In my case, something like:
this.setState(state =>({
...state,
userStates : state.userStates.map((userstate) => {
if(userstate.uuid == basicChats[chatIndex].uuid) return {
...userstate,
chats: userstate.chats.map((chat) => {
if(chat.cuid == basicChats[chatIndex].cuid){
//
return {
cuid: basicChats[chatIndex].cuid,
message: basicChats[chatIndex].message,
status: basicChats[chatIndex].status
}
}
else return chat;
})
}
else return userstate;
})
}));
and then, elsewhere in my example:
this.state.userStates.map((userstate) => {
this.renderChats(userstate.uuid);
});
Other than the fact that I'd recommend using indexed arrays for this example to cut complexity, this is the solution, and works. This is because even though it feels like you'd end up with duplicates (that was my intuition), the uid on the BasicChatComponent itself makes all the difference, letting react know to only re-render those specific elements.
I'm loading several Selectize select inputs in one page, like this:
var selectizeInput = [];
$('.select-photo-id').each(function (i) {
var selectedValue = $(this).val();
selectizeInput[i + 1] = $(this).selectize({
'maxOptions': 100,
'items': [selectedValue],
'onType': function (input) {
$.post("admin/ajax/search_photos_for_postcards",
{input: input},
function (data) {
$(this).addOption(data);
$(this).refreshOptions();
}, 'json');
}
});
});
The event onType makes a function call that returns a list of new options which I want to make available right away in the Selectize input. Is there any way to call the Selectize instance from there? As you can see from the code, I tried accessing it with $(this), but it fails. I also tried with $(this).selectize, but it's the same. Which is the correct way to do it?
I managed to fix it:
'onType': function (input) {
var $this = $(this);
$.post("admin/ajax/search_photos_for_postcards",
{input: input},
function (data) {
$this[0].addOption(data);
$this[0].refreshOptions();
}, 'json');
}
You probably want to use the load event provided by the Selectize.js API as seen in the demos. Scroll until you find "Remote Source — Github" and then click "Show Code" underneath it.
I'm attempting to create a simple example that would just alert the first 5 bookmark titles.
I took Google's example code and stripped out the search query to see if I could create a basic way to cycle through all Nodes. The following test code fails my alert test and I do not know why.
function dumpBookmarks() {
var bookmarkTreeNodes = chrome.bookmarks.getTree(
function(bookmarkTreeNodes) {
(dumpTreeNodes(bookmarkTreeNodes));
});
}
function dumpTreeNodes(bookmarkNodes) {
var i;
for (i = 0; i < 5; i++) {
(dumpNode(bookmarkNodes[i]));
}
}
function dumpNode(bookmarkNode) {
alert(bookmarkNode.title);
};
Just dump your bookmarkTreeNodes into the console and you will see right away what is the problem:
var bookmarkTreeNodes = chrome.bookmarks.getTree(
function(bookmarkTreeNodes) {
console.log(bookmarkTreeNodes);
});
}
(to access the console go to chrome://extensions/ and click on background.html link)
As you would see a returned tree contains one root element with empty title. You would need to traverse its children to get to the actual bookmarks.
Simple bookmark traversal (just goes through all nodes):
function traverseBookmarks(bookmarkTreeNodes) {
for(var i=0;i<bookmarkTreeNodes.length;i++) {
console.log(bookmarkTreeNodes[i].title, bookmarkTreeNodes[i].url ? bookmarkTreeNodes[i].url : "[Folder]");
if(bookmarkTreeNodes[i].children) {
traverseBookmarks(bookmarkTreeNodes[i].children);
}
}
}
Before posting comments a message is shown:
Login or register to post comments
I want to modify the output of the 2 links "login" and "register", mainly I want to add some classes to the links to format it nicely with some img. buttons of different colors
I really need to "tell" the output to put and , and by default doesn't have no class....
I know it can be done with some hook or something but I can't find no info about that ...
The piece responsible for that line is locate in theme_comment_post_forbidden in drupal_root/modules/comment/comment.module
it looks like this
function theme_comment_post_forbidden($node) {
global $user;
static $authenticated_post_comments;
if (!$user->uid) {
if (!isset($authenticated_post_comments)) {
// We only output any link if we are certain, that users get permission
// to post comments by logging in. We also locally cache this information.
$authenticated_post_comments = array_key_exists(DRUPAL_AUTHENTICATED_RID, user_roles(TRUE, 'post comments') + user_roles(TRUE, 'post comments without approval'));
}
if ($authenticated_post_comments) {
// We cannot use drupal_get_destination() because these links
// sometimes appear on /node and taxonomy listing pages.
if (variable_get('comment_form_location_'. $node->type, COMMENT_FORM_SEPARATE_PAGE) == COMMENT_FORM_SEPARATE_PAGE) {
$destination = 'destination='. rawurlencode("comment/reply/$node->nid#comment-form");
}
else {
$destination = 'destination='. rawurlencode("node/$node->nid#comment-form");
}
if (variable_get('user_register', 1)) {
// Users can register themselves.
return t('Login or register to post comments', array('#login' => url('user/login', array('query' => $destination)), '#register' => url('user/register', array('query' => $destination))));
}
else {
// Only admins can add new users, no public registration.
return t('Login to post comments', array('#login' => url('user/login', array('query' => $destination))));
}
}
}
}
I suggest modifying your theme's template.php and adding a new function phptemplate_comment_post_forbidden($node) where you'll copy the contents of theme_comment_post_comments and do the necessary modifications.