When user select an item from Select2 V4 component, the component shows it and user could not change this value. If user wants to modify active item and enter modified text, the Select2 assumes that it is a new value and adds it to the list. It is bad. How to change current active value and put it into selected item?
I believe what you want to do is listen for the select2:selecting event:
$('#mySelect').on('select2:selecting', function(e) {
// Do stuff here
});
In your event handler you'll be able to remove the added item (or prevent it from being added...I haven't tried this myself) and change the user's selection. See https://select2.github.io/examples.html#events
A word of caution: what you want to do is not standard behavior for a select box. A standard HTML select jumps to the next option beginning with the letter the user typed. If you were to change that behavior you may find yourself with many unhappy users (see the principle of least surprise/astonishment).
Related
I am working on a project that has a form with a Select dropdown and an Input field with a disabled Submit button. I need the submit button to be disabled until both of these fields are filled and the the second input is a number. I am thinking of using event listener for both filed but do not know how to handle two changes in one function.
let select = document.querySelector("select#slect_items");
select.addEventListener('change', checkSelection);
let input = document.querySelector("input#number");
input.addEventListener("input", checkInput)
Next I am going to define both checkInput and Check selection.
I can get individual function working to dsiable the submit button but do not know how can I combine both eventlisteners together and enable submit button in a single function.
I saw one similar question asked using Jquery. However, I am a beginner and this project has to be coded in JavaScript.
Thanks for your time
I'd like to add clickable links to a Kentico Report. The report editor allows you to add all kinds of HTML mark-up in the layout, but it doesn't allow you to add HTML INSIDE of a table that you've inserted into the layout. (Or if it does, it is not obvious from the UI, or from the Kentico documentation.) I want a link to appear in each row, and the link should include a value from that row.
Clicking any of the links would open another page that shows more data about a particular record. In my case, my first column is an ID column and I want its value (in each row) to behave like a hyperlink to another page whose URL includes the clicked ID value as a parameter.
We can use jquery within our Kentico report to allow each value in a particular field to cause a link to be opened when clicked. In my case, I have a URL into which I want to embed an ID value from the report. I want to open one of the admin pages whose URL looks like the following (where 9999 is replaced with a record ID from my report):
/CMSModules/AdminControls/Pages/UIPage.aspx?elementguid=00000000-0000-abcd-0123-000000000000&objectid=9999&displaytitle=false
So let's assume the first field in the report is an ID column and we want to make the displayed ID behave like a link to some other page.
First we need jquery. Edit the report's layout in '<>Source' mode and add a script reference for jquery, such as one you can get from code.jquery.com, or just reference it locally if you have it:
<script src="/jquery-3.4.0.min.js"></script>
Next, we must find each ID field and then make it behave like a hyperlink. To do so, we find the <th> with the ID column's title, walk up to the <table>, and then find all <tr>s immediately under the <tbody>. Once we have each <tr>, we iterate through them to:
underline the ID value like a hyperlink
set the cursor to a hand like a hyperlink
add an onclick event to do open a URL (in a new tab) with my ID field's value
So here is the script. Add it just like you added the jquery script tag. (but add it after the jquery script tag)
<script>
$('th:contains("MyIDColumnTitle")').parents('table').first().children('tbody').children('tr').each(function() {
$(this).children('td').first()
.css('text-decoration','underline')
.css('cursor','pointer')
.click(function(){
var thisId = $(this).text();
var u = "/CMSModules/AdminControls/Pages/UIPage.aspx?elementguid=00000000-0000-abcd-0123-000000000000&objectid=" + thisId + "&displaytitle=false"
window.open(u,'_blank');
});
});
</script>
Keep in mind that if MyIDColumnTitle is not very unique, this script may find the wrong th and table. Modify the jquery selector to suit your needs. You may want to add a wrapping element around your report that has an element ID so you can be specific with your selector.
It wouldn't be difficult to take the same concept and use it to launch a page in a modal dialog instead.
In My MVC 4 application, I have a Multi Select List Box, where I can select multiple values, I also has an Item New Role as one of the list items, which also refers to a model property NewRole.
So using Jquery whenever the user selections contain New Role, I will provide a text box to the user, which is bind to NewRole from model as given,
#Html.TextBoxFor(m => m.NewRole)
Which also has the following evaluation field.
#Html.ValidationMessageFor(m => m.NewRole)
And I will hide this text-box if the user selected options does not has the Item New Role.
Now the problem is even if I hide the div which contain the Text Box, it will try evaluating the required field validation.
What I require is When User Selects New Role and the User did not enter anything in the provided text Box then validate the required field property.
I know I can write a JQuery to show an alert when the div visible and does't has any value. But I want this default validation should happen on that condition.
is it possible?
One of the trick to avid certain client side validation conditionally ... you can use the IGNORE attribute of the validation ...
jQuery Validate Ignore elements with style
$("#myform").validate({
ignore: ":hidden"
});
If this is not what you are looking ... I will provide more specific information
Yes it is possible with RemoteAttribute. Take a look at this article:
http://msdn.microsoft.com/en-us/library/gg508808(v=vs.98).aspx
Keep in mind that this is NOT client side validation meaning there is an actual server post happening.
Try using the rules add and remove, when new role is selected add new rule which validates the textbox on other selection remove the rule from text box and hide it like you are doing:
http://validation.bassistance.de/rules/
I am implementing a “have not yet viewed” list where the user sees a list of items in a ul and those the user has not viewed have a data theme applied to highlight them. When the user clicks on the item it is displayed, and I need to remove the data theme so the item is no longer highlighted.
I have the logic correct to actually remove the attribute as I can see in the Elements section of Chrome’s Developer Tools the attribute is no longer in the li. But the highlight is still visible in the rendered page.
I’ve searched and have seen a number of suggestions involving refreshing the page, list, etc., all to no avail. You can see some of the attempts as follows (in the function "this" is the li):
$(this).removeAttr("data-theme");
//$(this).closest("ul").listview("refresh");
//$(this).closest("ul").listview();
//$('#mylist').listview();
//$("#content-notifications").page();
//$("#content-notifications").page("destroy").page();
//if ( $("#content-notifications").data("page") ) {
// $(this).closest("ul").listview("refresh");
//};
Anyone have the correct solution, because I can’t find it!
Thanks-
Matt
You have to manually remove the class for the old theme in li and add the class for new theme.
$(document).on("click","li",function(){
$(this).attr("data-theme","b").removeClass("ui-btn-up-a").addClass("ui-btn-up-b")
});
Demo here - http://jsfiddle.net/ENYxw/
Questions on Rails 3.0.7, and JQuery 1.5.1
Overview
I'm trying to do the following thing. I have a web page with a form on one side that lets me create a category, and a list of items on the other side, with a checkbox for each item. I would like to be able to check the check box, for each item, so that when I submit the form to create the category, the newly created category also creates a has_many through association with each item.
So the association part works almost, I can submit a list of checked checkboxes, and Rails creates the association on the backend if I send the list of checked items.
Problem:
Here's what doesn't work:
I am trying to submit the form via Ajax, so I wanted to bind an event handle to the rails.js 'ajax:beforeSend' event, so that it would scan through my list of checked checkboxes and at the checked ids to a hidden form field.
The problem is: I try to get a list of all the checked boxes, and add them to the hidden field when the user clicks the Submit button. Therefore, I figured I'd place the code to do so in the ajax:beforeSend event handler. What I "THINK" I'm noticing however, is that rails.js has somehow already processed the form fields, and constructed the HTTP query before this handler fires. I notice this through the following behavior:
Observed Behavior
1) I can reload a fresh page, click the button to submit the form, the alert boxes from my handler pop up saying that no boxes are checked, and the created category in my db has no associated items (CORRECT BEHAVIOR)
2) I then click 1 checkbox, the alert boxes pop up showing which boxes are checked (CORRECT). But then when I submit thee form, the category in the DB still has no associate items. And I can see through firebug and the server logs that and HTTP query was sent containing the old parameter list, not the newer one. (WRONG)
3) I then submit the same form again, changing nothing, and it shows me the correct number of items.
So I get the impression that the parameter construction is lagging. I hope this wasn't too long, an someone can help me figure out what is going on.
My Question:
What event do I need to bind to, so that the form gets submitted with the correct parameters? Or is there another way to go about it completely?
Thanks
Here's my code below.
Thanks,
$('#my_form')
/* Now we need to configure the checkboxes to create an association between
* the items, and the interaction that is being created. First we will bind a
* function to the click event, and if the box is then checked, we will add
* the item id to the list of interaction items. If it is unchecked, we will
* remove the item from the list of interaction items.
*/
.live('ajax:beforeSend', function(event){
// First get a list of all the checked Items
var checked_items = new Array();
$('#items input[type="checkbox"]:checked').each(function(){
checked_items.push(this.getAttribute('data-item-id'));
});
// Then add this list of items to the new_interaction form to be submitted
$('#interaction_new_items').val(checked_items);
alert(checked_items);
alert($('#interaction_new_items').val());
})
Bind to the click event on the submit button itself. The click event will be processed before your ajax beforeSend event.
$('#my_form .submit').click(function() {
// rest of your code here
});
A more flexible solution (say, in case you wanted to submit the form with something other than a click) would be to bind to the form's submit event.
$('#my_form').submit(function() {
// Tweak your form data here
})