When the page loads initially the placeholder cannot be seen and there is a strange circle (I think it's related to the search feature in Select2) in the bottom right hand corner which is overlaying the placeholder.
Then, as an option is selected from the Select2 dropdown, the option shows up, but the entire area is pushed down due to that circle overlay.
If I clear the selections, the place holder shows up, but the circle is still there.
My application uses Backbone and Marionette
Here is the code I'm using in my .js file (I've played with the minimumResultsForSearch option but haven't had any luck).
this.$el.find("#categorySelect").select2({
multiple: true,
allowClear: true,
minimumResultsForSearch: -1,
placeholder: "Categories"
})
Here is the code I'm using in my .tpl file
<select id="categorySelect" name="Categories" multiple="multiple" class="form-control" style="width: 100%;">
<% for(category in categories){ %>
<option value="<%=categories[category].title%>"
<% if (categories[category].active == true) { %>
selected
<%}%>
>
<%=categories[category].title%></option>
<% }; %>
</select>
Your order of scripts is incorrect, you need to load jQuery before you use it.
Also you're trying to initialize select2 on elements that does not exist yet, i.e before actually rendering the view.
And there are somethings that doesn't make any sense like
this.$el.html(_.extend(this.template(modelJSON)));
Why would you try to extend an HTML string?
or
$(function(select2) {
App.start(select2);
});
What is passing select2 as first argument to jQuery ready event handler?
Please try to understand the code you are writing, and why you're writing it.
Fixing all such issues gives something like this http://jsfiddle.net/az5dksyz/2/.
Also it's a good idea to not use id in template strings because they could be rendered multiple times, and to not use inline style rules in them.
Related
In my scenario, I'm preloading a select with several options and I was wondering if there's any way to add a class to the li that get generated by the control so that I can change its styles. Here's the code I'm using on the server side to generate the select (ASP.NET MVC):
<select id="areas" name="areas" class="form-control" multiple="multiple">
#foreach (var area in Model.AreasAssociadas) {
<option value="#area.IdArea" selected="selected" #Html.Raw(area.Active ? "" : "class='disabled'")>#area.Nome</option>
}
</select>
Now, I'd like to change the default UI, but only for those items that are disabled (ie, for all the items where the Active property returns false). Btw, I want to add a style so that I can get something like this:
Can this be done?
Since it seems like there's not a property or event to handle this, I've ended up adding codes for changing the dom on the fly. not the best option, but gets the work done...
I am developing an ASP.NET MVC web project. I am currently using select2 for several dropdowns in my project, due to its clean and appealing features. I am also having some problems with select2. I am wanting to create a dropdown on a create page that 'changes' state when another dropdown value is changed. Select2 has a drop-down that offers both the ability to select from the dropdown results OR type your own entry in and save. (see the tagging section on https://select2.github.io/examples.html). I need to be able to turn tags on/off dynamically through javascript AFTER page load. It seems that select2 will only initialize the dropdown and after that, it won't allow dynamic changes.
View Html and Javascript code used to initialize select2 on page load:
<div class="col-md-8">
#Html.ListBoxFor(model => model.modelNum, Model.modelNumList, new { #class= "js-tags" })
</div>
<script type="text/javascript">
$(".js-tags").select2({
placeholder: "Enter Model",
tags: true,
maximumSelectionLength: 1
})
</script>
The above part works great. Select2 is initialized, and follows my settings. After this, my plan is to change the settings of the select2 my destroying and reinitializing the instance, therefore editing the dropdown and turning tags back off. The below javascript method is called when another dropdown is changed.
CODE:
<script type="text/javascript" language="javascript">
function ChangeModelNum(_classID)
{
if(_classID == 1)
{
$(".js-tags").select2("destroy").select2({
placeholder: "Select Model",
tags: false,
maximumSelectionLength: 1
})
}
else
{
$(".js-tags").select2({
placeholder: "Enter Model",
tags: true,
maximumSelectionLength: 1
})
}
}
As you can see, if the user selects the classID as 1, I want to disable tagging for the dropdown. But it simply doesn't work. I also get this error in developer tools:
JavaScript runtime error: Object doesn't support property or method 'select2'
I have made sure there are no double jquery references also. It makes no sense why it has an error with Select2 right after using it perfectly.
ADDITION:
Here is the code that triggers ChangeModelNum:
<div class="col-md-2">
#Html.DropDownListFor(model => model.classnum, Model.classL, "Select Class", new { #onchange = "javascript:ChangeModelNum(this.value);", #class = "form-control" })
</div>
Thanks for any help!
I am not sure, but I think that this particular error could be caused by method chaining
$(".js-tags").select2("destroy").select2...
Try to split it to two separate calls:
$(".js-tags").select2("destroy");
$(".js-tags").select2({
placeholder: "Select Model",
tags: false,
maximumSelectionLength: 1
})
I am a predominantly PHP developer. I realize in this day and age specialization in one scripting language doesn't cut it, but the fact remains that my skills at JavaScript and jQuery are pretty green. I am a novice at best. I can create my own code but Cross Browser compatibility remains a huge issue with my work in JavaScript.
Anyway, I have a script that filters products according to categories/subcategories. This is how it works: you select a category and the javascript in the background does its thing to filter the subcategories so that the options displayed are the ones pertaining to the parent category- a combination of these two filters the product line.
Here is my code:
function scategories(){
//get the category option value from the category drop down bar
var cat = (document.getElementById('categories').value);
//get all the options from the subcategory drop down bar
var subcat = document.getElementsByClassName('subcategories');
var n=0;
//if the category bar option is set to 0 display everything
if(Number(cat)==0){
Show();
}
//filter the subcategories
while(subcat.item(n)){
//if there is no match b/w the subcategories option and the categories id FILTER
if(Number((subcat.item(n).value).split('|')[1]) != Number(cat) && Number(subcat.item(n).value) != 0){
document.getElementsByClassName('subcategories')
.item(n)
.style
.display="none";
}else{
//else display the subcategory
document.getElementsByClassName('subcategories')
.item(n)
.style
.display="list-item";
}
n++;
}
}
This code is pretty self explanatory I would say. I also have a shiftfocus function that shifts the focus from the current option selected in the subcategory to the default one which is 'none' whenever a new category is picked. This basically resets the subcategory.. here's the code:
function shiftfocus(){
document.getElementsByClassName('subcategories')
.item(0)
.removeAttribute("selected");
document.getElementsByClassName('subcategories')
.item(0)
.setAttribute("selected","selected");
}
Shiftfocus is called onChange and scategories is called onClick.
Problem 1:
1) Firefox: Shiftfocus doesn't shift the focus to the default option even though I can see it adds the 'selected' attribute.
2) Safari: Does not work at all.
EDIT: Problem 2 was the product of a careless mistake. I left open an anchor tag which was
creating havoc in IE. Should have double checked before bothering you
guys. Sorry. Problem 1 still persists.
Problem 2:
I understand none of us developers particularly like internet explorer. But I am willing to believe I have made a mistake here. I have some jQuery that fetches data from a script in another file via the native POST function and appends it to a table with the id "content". This works fine on every browser, except IE. If I try going back to IE 7,8 compatibility mode the results are a little better (the data shows up broken in pieces though) and in IE9 compatibility mode nothing is appended at all! Here's the code:
$.post("bagcontents.php", {
"Bid": $(this).attr('bid')
},
function(data){
$("#content").empty().append(data);
roundNumber();
$('#processorder_hidden').attr('value',currentBid);
});
//append here
<div id="contents" style="overflow:auto;height:345px;padding-right:5px;">
<form name="bag_contents" id="bag_contents" method="post" action="<?php _page ;?>">
<table id="content">
</table>
<input type="hidden" id="bag_contents_hidden" name="bag_contents_hidden" value="1" />
</form>
</div>
Any help will be appreciated. I tried outputting the fetched results with alert, alert(data), and the script is fetching everything just fine. Its the just the append part that fails :|
Here are some suggestions and hope you find them somewhat useful.
Problem: 1
Instead of having the shiftfocus() set the to a specific value, have you tried using .val('') just to clear it out. I can imagine that this will default to the first option.
Problem: 2
This will be hard to debug without knowing what data is coming back from the server. Might be bad formatting or some syntax error on the rendered output.
im relatively new to ROR, and would like some help with the following code.
I would like to show a div (it's called demographics) when a specific selection ("Customers") is made form a dropdown. If an option other than "Customers" is selected from the dropdown, I would like that the demographicsv div remain hidden.
At present, my code is partially working. It shows and hides the div; however, when I save the page and come back to it, the div is hidden, even if "Customers" is selected in the dropdown. This might be because the default setting is: display:none.
Is there a way to make sure that the field is displayed on page load when the proper selection has been made?? And I suppose a way to make the opposite true too--> a div with display:block; remains hidden if the field from the dropdown does not match the required field.
Any help would be extremely appreciated. Thank you and I sincerely appreciate your time:
my code (HAML):
= f.select :who, WHO, {}, :onChange => "showDemographics(this)", :prompt => true
#demographics{:style => "display:none;"}
%p.information
please fill out the following demographics.
%div{:class => "label_leftalign field"}
= f.label :age, "Age"
= f.select :age, AGES, :prompt => true
%div{:class => "label_leftalign field"}
= f.label :race,
= f.select :race, RACES, :prompt => true
Javascript
function showDemographics(obj)
{
if(obj[obj.selectedIndex].value == 'Customer')
{
document.getElementById('demographics').style.display = 'block';
}
else
{
document.getElementById('demographics').style.display = 'none';
}
}
EDIT::
OK, So the key issue is that on page reload a div remains hidden even if the correct value is in the dropdown box. I suppose that this can be solved by one of two ways 1. running some sort of validation on everytime the page is loaded or 2. cookies.
Unfortunately, I'm not very well versed in Javascript or jQuery... and I've never implemented cookies on a site, and would prefer to avoid using them if possible.
Could anyone help me write a script that validates the presence of Customer in the dropdown and shows/hides a div accordingly? Thank you, and thanks to Carlos Pardilla and M. Cypher for their help thus far.
You have tagged the question with jQuery although you're not using it in the code, but I'll just assume it's fine if I give you some jQuery code:
$(function() {
$('#who').change(function() {
if ($(this).val() == 'Customer') {
$('demographics').show();
} else {
$('demographics').hide();
}
}).change();
}
Note that you need to give the select an id (in this case who) for it to work.
I guess you could use a conditional statement to be checked during page load. You could establish the visibility (or lack thereof) of the div depending on the value ("Customers") of the option:selected element within your select object (the dropdown). Maybe via a script on the head of the document (provided it is a short script). Also, by doing this you wouldn't need to set the display property from the start. It would fire depending on the selected condition during page load.
This could be done to get the opposite result as well, as you said.
Hope it'll help!
The answers above where correct in their own way... the link below shows the actual code that is required for the conditional statement on page load:
show hidden divs on refresh
I am building a site and I have a list of status updates and I want to allow the users to write comments for each of of the items in the list
However I am trying to implement a UI similar to the way stack overflow works
specifically the collapsible comment form / list where a user clicks on add comment on the specific status update in the list, and below that item in the list the comment entry form shows up along with the specific comments already posted.
How do I accomplish this using Jquery?
Note: looking also for the markup example another words a working sample. Thanks
And yes if you could show Async postback that would be nice too
To load the content you can just hook up a click event to populate a div using the load method.
For example in the view you could have something like:-
<%= Html.ActionLink("Comments", "CommentList", "Questions", new { Id = this.ViewData.Model.Id }, new { id = "commentLink" })%>
<div id="commentContainer" style="display:none;">
Loading...
</div>
while the javascript to hook everything up would be:-
$(function() {
$("#commentLink").click(function() {
$("#commentContainer").toggle();
if ($("#commentContainer").is(":visible")) {
$("#commentContainer").load($(this).attr("href"));
} else {
$("#commentContainer").html("Loading..."); //Or just leave it as is...
}
return false; //Prevent default action
});
});
The quick approach (for just showing / hiding the comment area) would resemble something like this:
$(function(){
$('#id_of_element_to_use_for_click').click(function(){
$('#id_of_comment_area').slideToggle();
});
});
The jQuery site will provide you with doco on different approaches such as fades, slides or other combined animations.
Your "Comment Area" I've used in the example here would likely be a <div> tag that contains your existing comments, plus whatever textarea or text input box you wanted users to type their answers into.
Do you need to do an asynchronous postback?