I have an autogenerated select box (based on the user decisions in other fields). I am useing "onclick" event inside "onlick" event.
The plan:
If the user click on this I have to disable some other fields and the select(dropdown menu) opens. The ideal would be if after the user's previous decision this select opens automaticly but looks like I can't open a select by JS, to make is work in every type of browser, so I have to make the user do it.
At the secound click I would like to get the value what the user choose and do something with it. But the user may not choose it or missclick out from the select and may close it (It may mess up the enable/disable other fields). So I would like to force the user to click on a value if the select is already opened by the user.
Here is the code:
document.getElementById("infodropdown").onclick = (function() //the select opens + I disable other fields
{
document.getElementById("infodropdown").onclick = (function() //the user should choose a value
{
//do something with the input, and enables other fields
});
});
If there any other more advanced way to make the user select if he/she opens the dropdown very welcome. Thanks you very much for any suggestion!
I think that the best option would be to replace the dropdown list by a custom made one. Then you would have full control over it.
Using some overlays may even prevent the user from doing anything else than select an item in your list.
Related
I am building a form for users to submit a list of their items that they want to move.
I use Wordpress with FormCraft Premium plugin which has the option to include a choice matrix (checkbox) in the form.
I want users to tell me how many beds do they have, how many night stands, how many mirrors, TVs, etc.
But the problem is that by default users can't uncheck a choice that they make.
So if a user selects accidentally that he has 4 TVs, he can't later uncheck that by clicking on that radio button again.
He is only able to select another radio button (1, 2, 3 or 5+) which is bad in cases when user doesn't have any TVs.
Could you please tell me how is it possible to fix this?
Here is the URL to my form: https://www.tajnezdravlja.com/form-view/4
I guess this can be solved only by using javascript.
I don't have any experience with javascript, I know only HTML and CSS.
I don't know where can I see any relevant code, as I don't have experience with .js
When I inspect the site and open console I don't see anything relevant.
However, the FormCraft plugin has an option to add custom javascript code to the form.
It says in admin panel:
Custom JavaScript
Add any JavaScript code in here, and it will be executed on page load. You don't have to use tags. Make sure this is valid JavaScript!
When I click once on a choice, I expect it to be checked and that happens, that is ok.
But when I click again on the same choice, I expect it to become unchecked, but it remains checked. That is the problem.
Try adding this to Custom JavaScript. It allows users to toggle the radio input type in the matrix fields.
jQuery('.fc-form .matrix-cover :radio').mousedown(function(e){
var jQueryself = jQuery(this);
if( jQueryself.is(':checked') ){
var uncheck = function(){
setTimeout(function(){jQueryself.removeAttr('checked');},0);
};
var unbind = function(){
jQueryself.unbind('mouseup',up);
};
var up = function(){
uncheck();
unbind();
};
jQueryself.bind('mouseup',up);
jQueryself.one('mouseout', unbind);
}
});
We are using the Taxonomy module for Sitecore: https://marketplace.sitecore.net/Modules/T/Taxonomy.aspx?sc_lang=en
The module works fine 90% of the time. The only catch is that when in a taxonomy field you select a value from the auto-complete options, the field doesn't seem to be marked as changed. This creates the occasional confusion with editors as when they publish the "Do you want to save?" prompt doesn't show and the content is published without tags.
If instead of selecting from the auto-complete we use the dialog box, everything works fine.
I looked at the markup, JavaScript and C# code and couldn't find a solution.
I even tried to set Sitecore.Context.ClientPage.Modified = true but it doesn't seem to do anything.
How can I force the save prompt to show?
I had a similar issue, I was updating a field using js and the experience editor wasnt detecting the change.
I got this working by doing the following using js:-
There is a save button state object saved in a view state field. You can grab by doing window.parent.document.getElementById("__SAVEBUTTONSTATE"). I then did the following:-
var saveButtonState = window.parent.document.getElementById("__SAVEBUTTONSTATE");
saveButtonState.value = 1;
saveButtonState.onchange();
This will make the save button enabled
In the experience editor, Sitecore wraps your sitecore item fields in an span element, which contain a unique id. (These are the fields you interact with in the experience editor). However, its not these values which Sitecore receives when you hit Save button. Sitecore actually stores values of your item fields in hidden inputs, so when you interact with the span element, in the background, these hidden inputs are being updated. So in order for Sitecore to receive your changes, you must update the corresponding hidden input. If you open Inspect element in the experience editor and search "scFieldValues", you will see these hidden inputs. I updated the field by using jquery:-
$('#scFieldValues').children('input').each(function () {
if (id.indexOf($(this).attr('id')) >= 0) {
$(this).val(value);
}
});
The id object is the id of the span element. The contents of that id is used in the id of the hidden input. This is why I use "id.IndexOf" to find correct input element. So when I update the span element value, I grab that value and update the corresponding input.
Hope this helps
I'm building simple web gallery and I want to leave on user whether to open image in Lightbox or to open full image (in new tab).
This should be done by simple button "Use Lightbox (yes/no)".
I presume this could be done with jQuery, but not sure how....
Thanks for help!
You should know if the user has changed the checkbox...like if he turn it on or not. For example (jquery):
$('#checkbox1').change(function() {...});
So, every time he changes the state of the checkbox input the function is run. In this function, check whether the checkbox is selected by getting a boolean from:
$('#checkbox1').prop("checked").
Now you can change all the things in the links, that the lightbox want. You can do it by using the attr function = $('#link1').attr("attr-name","val).
If the checkbox is not selected, remove the attributes of the lightbox (input.removeAttr( "title")) and add the target="_blank" attribute.
I have a select box which changes the form below via ajax. If someone changes the form, clicks the back button then clicks the forward button the form changes are reset but the select box still shows the same value.
How do I either do a hard page refresh or make the select box retain its default selected value?
You probably have an onchange event handler on your select element. Trigger that same event handler onload (or on document ready) of the document.
Reset the select box based on the value in the address bar.
Just reset the state of the check box every time the desired address is in the address bar.
After detecting a change in the browser's address, you can use some simple jQuery for example:
if (address === 'foobar.com/whatever') {
$('input[name=foo]').attr('checked', false);
}
The above code will simply uncheck the checkbox if it's checked. Do this check as soon as you detect that you are back at the address you are referring to.
I have been working on the last bit of my php + ajax based datagrid project.Everything works as I designed except one thing : I cannot stop user opening multiple selection boxes...
Go my research page and use username "ChenxiMao" and password "accedo" to login(without double quotes).
Note that perhaps the images used in this datagrid would not be displayed when page is loaded for the first time(weird, I am trying to fix this, browser incompatibilities, perhaps).
If you double click on one cell in the "CONSULTANT" column, a html select box would be displayed, you can select one consultant to assign him to this task or unassign the consultant from this task. No problem for this.
The problem is : when user leaves this selection box OPEN, he/she can still open another selection box... My jquery code cannot stop people from opening multiple selection boxes.
You can ctrl-U to see the source code on this page, and check the content inside the "gridview-helper.js" for what I have been done.
I want to let user only open a single selection box. When he/she leaves the cell, the selection box should be closed, without changing the html inside...
Puzzled, screwed up for this afternoon...
Thanks for any suggestons in advance!
JavaScript is single-threaded, so you can add a mutex variable and check its value before opening a new select box.
At the top of gridview-helper.js:
var is_choice_visible = false;
In your double-click handler:
$(this).dblclick(function()
{
if (is_choice_visible)
return;
is_choice_visible = true;
...
For your select box, add an onblur handler which sets is_choice_visible back to false and deletes itself.
Unrelated tip: Growing a string in a loop is slow on older versions of Internet Explorer. It's more efficient to append to an array and join the array, e.g.:
var html = ["<select>..."];
for (var i in consultantnames)
{
html.push("<option>...</option>");
}
html.push("</select>");
return html.join("");
Have you tried using the onmouseout event on the cell, and removing the child dropdown box element if mouse out is triggered? Seems that should work.