I'm using select2 to generate my selectboxes. It works fine, until I go to another page and return to the page with the selectboxes. The selectboxes with the 'select2' classes are generated twice. The first (probably new) box works fine, but the second box, directly below the first one, is still filled with the value it had before, if any, and is disabled. It keeps the normal colors, though.
I've tried checking this:
if ($('.selectField').hasClass('select2-hidden-accessible')) {
// don't
};
But to no avail.
Related
I have the following problem to which I can't find a solution. I am using select2 with an ajax data source and templateSelection so I can populate more fields. This works fine.
I want to add a button which programmatically adds and selects a value, unfortunately this does not work. Only if I deactivate templateSelection, it works. Also the other values (firstname, lastname, email) are filled in after the second click of the button.
Here is my code: https://plnkr.co/edit/eVGTJwAr4FcYCw6a
For better display I removed the select2-hidden-accessible class so you can see the options menu.
I really appreciate your help
Update:
Somewhere on the internet I read that with templateSelection option.text must be returned, I changed that and now it works.
To the second problem: I had the idea to add a setTimeout, it works now, but I don't find it optimal. See second button. Code is updated.
I am using displaytag with struts 2 in my project, The problem is that displaytag pagination doesn't seem to work. The link generated are like
javascript:displaytagform('userListForm',[{f:'page',v:'2'}]) but when I click it the page parameter is not passed along with the request. It is not creating the hidden field page to store the page value, but if I add ?page=pagenum to the URL once, then the hidden field is created and afterwards it works fine. My question is why it is not creating the field for the first time itself.
I have a form that contains a row of inputs. One of those inputs is a jQueryUI autocomplete and each row has a button next to it that clones the row so that additional records can be created. I have the autocomplete set to recognize and bind to the newly created input:
$( '.input .my-field' ).on( 'focus', function() {
var $this = $( this );
$this.autocomplete({ ... });
});
What I'm finding is this:
The autocomplete field in the first row works fine.
The autocomplete field in the second row works fine if I didn't enter a value for that field in the first row.
The autocomplete field in the second row doesn't work at all if I did enter a value in the first row.
The bottom line is that, if I create all of the rows first, everything works as expected, but this isn't the expected use case. Most folks will enter the first record, click to add another, enter those values, click to add another, rinse, repeat.
I'm still running it down, but I'm burning hours so I'm hoping someone will know what's going on and be able to jump in with a solution that doesn't require hours for me to work out on my own.
There are two additional steps you must perform after cloning an autocomplete input before re-creating it:
Remove the aria-haspopup attribute;
Remove the autocomplete data.
Just calling autocomplete("destroy") won't do, for some reason it destroys the original input instead of the clone. Working example at jsFiddle. Relevant code below:
var clone = $(...)
.clone(true)
.removeAttr("aria-haspopup")
.data("autocomplete",null);
basically, im calling Html.TextAreaFor to display a form, which is great/not a problem...
people enter text in it, and it gets submitted, and if it is successful, i want to return an empty Html.TextAreaFor... but after it's submitted, in the action method i am clear to set the Comment that people are making in the TextArea to an empty string "", however, when it's loaded, it always has the text from the previous load.
i am loading everything in ajax by just updating a Div... and to make sure everything is normal, i have (as a text) a normal Html.TextArea where i specify the name and value. the Html.TextArea is right under the Html.TextAreaFor and acts exactly as it should, but the Html.TextAreaFor for some reason is not!
this is strange because i am reloading the entire DIV which the form is contained in, from a PartialView, at evey submission!!
im also making sure the div is loading with a typical system.datetime.now string returned with everything, and the mentioned Html.TextArea working as it should, it's driving me insane... am i missing something guys? are there any perculiar properties about ...For's that i should be aware of?
Try clearing the ModelState object, which is the HTML helpers read the value from.
Also see What am I misunderstanding about how Html.TextBoxFor works?.
I added the following code to change the hash to the tab name:
$("#tabs > ul").tabs({
select: function(event, ui){
window.location.hash = ui.tab.hash;
}
} );
This works fine in FF3 but in IE7 it moves down the page (depending on the tab selected anywhere from somewhere near the top of the page all the way down to the very end of the page).
I tried changing it to:
$("#tabs > ul").tabs();
$("#tabs > ul").bind("tabsshow", function(event, ui) {
window.location = ui.tab.hash;
})
This leads to identical behavior in both IE7 and FF3, which moves the page down to the top of the selected tab.
I would like the tab to be changed, the hash to be updated, but the page not moved at all, which is how it works in FF3 in my first example, but not in IE7.
Thanks.
Notes: JQuery 1.3.1 / JQuery-UI 1.6rc6
If there's an element on the page that has the same id as what you're setting the hash to, for instance you're trying to set the browser hash to #cars and there's already a div#cars on the page, the browser will scroll you down to where that div is.
To my knowledge, there are 3 possible workarounds
1) Change the browser hash to something else such as #thecars.
2) Change your existing markup in some similar manner.
3) On some event, changing the id of your similarly named markup, then changing the browser hash, then rechanging the name of markup back to it's original value should also theoretically work. This is obviously a bad and slow workaround, just thought I'd mention it.
You could try having a "return false;" after you set the window location but I can't be sure.
Unfortunately, your problems won't end there. There are other issues with navigating back and forth across multiple browsers--nothing may change, page may reload, page state might be mangled, javascript may get reinitialized etc.
You may want to have a look at Tabs v2 which uses the History/Remote plugin though it has not been updated for jQuery 1.3+.
This demo is easier to understand. If you look at the javascript source, you'll notice the use of iframes to handle states.
There is also the History Event plugin and the jHistory plugin to achieve what you want.
Would like to hear back how things turns out and what solution you went with.
What Chris suggested worked for me, had no clue even a div could link via the #. So my solution is quite simple, in the show: event handler, I do the following, it's not perfect in that back button won't be in history, but that's another job for BBQ history plugin. All my divs simply have id="tab-cars", id="tab-trucks"... strip out the 'tab-' part and put it into the url hash.
var name = ui.panel.id.substr(4);
location.hash = '#'+name;