I think about the solution of situation, when after typing a few letters you will get a words from database and after click on a loaded word will be send the form?
In the basic shape about autocomplete, so after click on a loaded word will this word set to input.
Thank you
The question is not very clear - but I'm guessing that after autocomplete you want to automatically submit the form. You can do this by calling submit in the select callback
I don't know what implementation of autocomplete you are using but if you are using the jQuery-UI autocomplete widget there is a callback you can put right in the autocomplete configuration hash:
$( ".selector" ).autocomplete({
select: function(event, ui) { ... }
});
If you aren't using this widget then my answer isn't as terribly useful of course and I apologize. There isn't a lot of detail in your question.
On a side note, if you're using a home grown autocomplete implementation I'd strongly suggest you investigate the jQuery-UI option
Related
Select boxes converted to Select2, do not automatically integrate with unobtrusive validation mechanism in ASP.NET MVC framework.
For example, on a form which contains a regular select box (marked as required in model definition), submitting the form while no options have been selected in the select box, will cause the border and background of the select box to take a reddish color, and by using #Html.ValidationMessageFor, error messages, if any, can be displayed beside the box. However if the select box is converted to a Select2 component, then none of the mentioned features work any more. Even the validation error message will not show up.
It seems that the reason for even the validation error message not showing, is because Select2 changes the display CSS property of the original select box to none (display:none), and I guess the unobtrusive validation script does not bother generating error messages for invisible fields.
Any ideas / solutions?
This issue isn't really specific to Select2, but rather to the jQuery unobtrusive validator.
You can turn on validation for hidden fields as highlighted in this answer.
$.validator.setDefaults({
ignore: ''
});
As the comments noted, it didn't work inside an anonymous callback function within $(document).ready(). I had to put it at the top level.
I've run into similar issues with the select2 plugin. I don't know exactly which features you're using specifically, but in my experience, when you set an element as a select2 in the document.ready event, the plugin will change some of the element's attributes on the fly (inspect one of the elements after your page has finished loading - oftentimes you'll see the id and class properties are different than what you're seeing when you view source).
It's difficult to offer more without actually seeing the code, but here's a few ideas to get you started:
First off, obviously make sure you have the a link to your select2.css stylesheet in the header.
Then, since you're talking about form submissions, I'd recommend you examine whether or not you're getting a full postback or submitting via AJAX (if you're using jQueryMobile, you're using AJAX unless you override it in the jquerymobile.js file or set a data-ajax="false" in your form attributes). You can just look at the value returned by Request.IsAjaxRequest() for this. Obviously if you're submitting via ajax, you won't hit the document.ready event and the select2 won't initialize properly and you'd need to figure out a way around that. Try refreshing the page after the submit and see if it renders the select2 component.
Then I'd suggest examining the elements and see if they're not behaving like you'd expect because you're actually trying to work with classes that the plugin has reassigned at runtime. You can either just adjust your logic, or you can dig into the select2 code itself and change the behavior - it's actually fairly well-documented what the code is doing, and if you hop on the Google group for select2, Igor is usually pretty quick to follow up with questions.
like this
$('select').on('select2:select', function (evt){
$(this).blur();
});
$('body').on('change', 'select.m-select2', function () {
$(this).blur();
})
I am using Struts jQuery plugin. Problem is with <sj:tabbedpanel>.
I want to preselect the tab depending on the input while loading the page.
I know there is property selectedTab="1".
But I want it to change it while loading the page using jQuery.
In jQuery-UI plugin, there is function $("#tab").tabs('selected',2) which does that.
What is the similar function which does the same thing here.
Try this:
<sj:tabbedpanel id="tabbed" selectedTab="%{selected}"></sj:tabbedpanel>
selected should be a parameter, which decides the opened tab.
If you still wanna use jQuery, please check the api: jQuery Tabs API
here is the important part:
A series of events fire when interacting with a tabs interface:
tabsselect, tabsload, tabsshow (in that order)
tabsadd, tabsremove
tabsenable, tabsdisable
If you want to do this from javascript then use option to set selected tab.
$("#tab").tabs( "option", "selected", 2);
I am using Django and the django-dynamic-formset plugin to generate a JQuery Mobile (JQM) site. I have nested forms that allow the user to click a "Add" link to another line to the form. This works great without JQM, but when JQM is used to style the form widgets the radio button labels do not trigger the correct radio button.
I have put up a static example of the behaviour, based on the generated HTML. Click the "Add" link, then try choosing a severity for the added item. The "for" attributes of the labels appear to update correctly, so I do not know what I'm doing wrong.
The django-dynamic-formset guide provides me with a way to call a JavaScript function after the user clicks the "Add" button, but I do not know if there's a JQM method I should be calling that will fix the issue. When I use JQM's enhanceWithin function it triggers a page load, which submits my form to Django, which I don't want at that point because the form won't validate yet.
Edit: I uploaded a much better example to the same URL.
After enough caffeine and peanut M&M's I have figured it out.
Reason for Failure: The django-dynamic-formset (DDF) plugin duplicates the form you give it. But the form is cloned as-is, which already includes all the JQuery Mobile (JQM) processing. This causes JQM to ignore it and makes the radio buttons misbehave.
The Solution: The DDF plugin allows you to specify what form to clone by its formTemplate parameter. JQM allows you to disable automatic mobile-enhancement of certain elements. Create an un-enhanced version of your form, and pass that to DDF as your formTemplate.
More Details:
I put this coded into my HTML head, before the reference to JQM:
<script>
$(document).bind('mobileinit',function(){
$.mobile.ignoreContentEnabled = true; // required for using the natural forms
});
</script>
And included this style to hide my "natural" form:
<style>
.natural-form { visibility: hidden; display: none; }
</style>
In the Django code I added a <div class='natural-form> and put a dummy version of my form in it (being sure to surround it another <div> with a unique ID for reference later). In my initialization of DDF I give it the unique ID as the parameter to formTemplate.
I was told on another forum I would have to hack DDF and JQM to get this to work. I am impressed at the design of both of these libraries - flexible enough that a newbie to JQuery can stick all the pieces in the right places and get something out of it.
I'm actually working with jQuery mobile 1.0 and the auto complete widget from jQuery UI.
Everything works perfectly except one little thing :
When the user has been redirected (location.href) using the autocomplete feature, there is no back button on the page where he has been redirected.
I've set the $.mobile.page.prototype.options.addBackBtn to true in the mobileinit and the script is loaded before jQuery Mobile.
I didn't find any answer anywhere so this is why i'm asking to you guys
Thanks in advance
By the way sorry for the bad english it's not my first laguage
How do you redirect the user to other page? With location.href? Then that's your problem, setting location.href causes a page refresh and then jQuery Mobile loses it's history (so it won't show the back button)
Please use $.mobile.changePage( url ) to switch to another page
Something like:
$("#yourAutocompleteID").autocomplete({
select: function(event, ui) {
$.mobile.changePage("nextpage.html?id="+ui.item.id);
}
});
For simplicity I pass here the data in the querystring
I'm trying to have the users click on the links in an article, but have the results open in the same article (so the article reloads and open the target page in itself, like it would if it was in an iframe, right now it reloads the whole page), I do not want to use the main menu, and would also like to avoid using iframes, normally if this was HTML I'd use ajax or something similar, but in joomla i'm not sure, any suggestions?
If you have HTML ids you are better of using AJAX, Joomla has jquery and mootols to make your life easier.
There are couple of things you should know
Look into JUMI, it will allow you to use PHP within your articles. Can be very helpful. You can use it to add javascript framework from article for your ajax like so <?php JHTML::_('behavior.mootools'); ?>
You want to be careful while editing the article, if you use editor it will strip out your JavaScript from the article. You are better of just using "No-Editor" or if you are using JCE switch to text by pressing "Show/Hide" just above the editor in the left corner.
Add events to your IDs in domready instead of inline js. Something like this
/* MooTools Example */
window.addEvent('domready', function(){
$('link-1').addEvent('click', function(){ new Ajax(...).request(); });
$('link-2').addEvent('click', function(){ new Ajax(...).request(); });
$('link-3').addEvent('click', function(){ new Ajax(...).request(); });
});