I am writing a web shop with Jquery Mobile where I want to use a select menu to browse the categories available. When the user selects a category I want to navigate to the same page but with a couple of parameters added to the url. This is my markup for the select:
<asp:Repeater id="productCatSelect" runat="server">
<HeaderTemplate>
<select id="productCatSelectMenu" data-native-menu="false" onchange="categoryClick();" class="button" data-theme="a">
<option data-placeholder="true">All Categories</option>
</HeaderTemplate>
<ItemTemplate>
<option value="<%# Eval("NodeID") %>" ><%# Eval("Description")%></option>
</ItemTemplate>
<FooterTemplate>
</select>
</FooterTemplate>
</asp:Repeater>
And here is the javascript:
function categoryClick() {
var mySelect = $("#productCatSelectMenu");
if (mySelect.val() != '') {
if (mySelect.val() == 0) {
$.mobile.changePage("shop.aspx", {reloadPage: true, transition:"slide"});
} else {
$.mobile.changePage("shop.aspx?c=" + $("#productCatSelectMenu").val() + "&n=" + $('#productCatSelectMenu :selected').text(), {reloadPage: true, transition:"slide"});
}
}
}
My problem occurs when I have navigated once and try to choose another option from the select, my javascript still retreives the previous value; the select does not seem to reset! However, when I press F5 and reload the page manually the menu works again, until I have used it once of course.
Anyone have any ideas on how I can fix this? As you can see in the javascript the "reloadPage: true" attribute does not fix the problem.
If you're using jQuery Mobile's custom select field, try
$("#select_id").selectmenu('refresh', true)
This will successfully reset the select options rendered by jQuery mobile.
You're going to need to reset this yourself, maybe try:
$('select#productCatSelectMenu option').attr('selected', false);
or
$('select#productCatSelectMenu option').removeAttr('selected');
or
$('select#productCatSelectMenu').children('option').removeAttr('selected').filter(':nth-child(1)').attr('selected', true);
or
$('select#productCatSelectMenu').attr('selectedIndex', -1);
I had a similar problem the other day
Reset/Un-select Select Option
I have no clue why Jquery mobile select is working the way it is. None of the above worked for me except for what is mentioned here. I am using the current versions
jquery-1.10.2.min.js
jquery.mobile-1.4.2.min.js
https://forum.jquery.com/topic/resetting-select-menu
var myselect = $("select#useOfColor");
myselect[0].selectedIndex = 0;
myselect.selectmenu("refresh");
Have you tried $('#productCatSelectMenu').selectmenu('refresh');?
You can check information about the refresh method in the documentation
Related
Using Laravel livewire, bootstrap 5 modal and select 2.
Select2 (s2) without multiple works fine. It's populated, selections save to the component, clearing is also fine.
When an s2 has multiple attribute, removing a selected option clears all the options and nothing is displayed in the results drop down. When adding a selection, this doesn't happen.
If I do a dispatchBrowserEvent and re-init the s2 it does work again.
My question is why does removing an s2 option require a re-init but an add doesn't.
Seems to be something to do with the rendering in render().
Some code...
Blade:
<div wire:ignore>
<select id="selectedTrades" wire:model.defer="selectedTrades" class="select-2" multiple="multiple" data-field="selectedTrades" data-allow-clear="false">
#foreach ($contractor_trades as $trade)
<option value="{{ $trade['id'] }}">{{ $trade['name'] }}</option>
#endforeach
</div>
Standard stuff. wire.ignore around the s2. The modal has wire:ignore.self.
JS:
$('.select-2').on('change', function (e)
{
var $this = $(this);
livewire.emit('setSelect2Property', $this.attr('data-field'), $this.val());
});
Component:
public function setSelect2Property($property, $value)
{
$this->$property = $value;
}
Just sets $this->selectedTrades to the array sent.
Adding:
The drop down has the options as expected.
Removing:
The thin light line under it is the container for the results that's now empty. The original select element does still have its options.
If I remove the livewire.emit from the js to test, the s2 behaves correctly.
I think it has to do with the components render method. I can't figure out what is happening different when I add versus remove.
I got this to work. The problem was the dropdownParent element I was using. I had it set to the modal. Setting it to the immediate parent element and it worked as expected.
I have a long page organized by state. I have a Select2 element at the top of the page that I would like to use to let visitors select a state and jump to that state further down the page via an anchor.
I’ll post my code in a bit, but let me first describe the issue. My solution works in most browsers, but I’ve discovered that it fails in IE11 and Edge. In those browsers, I see the desired content location flicker briefly into view before the page gets pulled back to having the Select2 element at the top of the page. It’s like Select2 really wants to be in view.
Here is my (simplified) code:
HTML
<select class="jumpmenu">
<option value="">Jump to a State</option>
<option value="#alabama">Alabama</option>
<option value="#alaska">Alaska</option>
[ ... ]
</select>
<a name="alabama" id="alabama"> </a>
<h2>Alabama</h2>
<a name="alaska" id="alaska"> </a>
<h2>Alaska</h2>
[ ... ]
JQUERY
$(".jumpmenu").select2();
$('.jumpmenu').on('select2:select', function (e) {
window.location.hash = this.options[this.selectedIndex].value;
});
Is there a better way for me to construct this jump menu so that it will jump properly in IE and Edge?
I got a few suggestions from John30013 on the Select2 forums, and one of them worked well for me. I ended up setting a short setTimeout, which allowed the select to close before jumping to the anchor. Here's the code that worked for me:
$('.jumpmenu').on('select2:select', function (e) {
newHash = this.options[this.selectedIndex].value;
setTimeout(function(){ window.location.hash = newHash;},100);
});
I have a jquery-mobile selectmenu that has previously worked fine in both Safari and Chrome, but just recently the selectmenu won't select the option choice. It still works fine in Safari. When using development tools either from an emulator or chrome on my desktop, I get no errors. I do have an issue with glyphicons-halflings-regular.woff2 not loading and I have tried all of the suggestions found here on stack, but none of those seem to work and most all research I've done comes up with answers that are >4 yrs old.
I'm using jquery mobile 1.4.5 and bootstrap 3.3.6 and the application resides on Azure.
Here's what I've got right now...
<div class="ui-field-contain" id="regionDiv">
<label for="region">Region:</label>
<select class="text-left" name="select-region" id="region" data-native-menu="false" data-mini="true" onchange="changeRegion();"></select>
</div>
<div class="ui-field-contain">
<label for="projectmob">Project:</label>
<select class="text-left" name="select-proj" id="projectmob" data-native-menu="false" data-mini="true" onchange="dwmChange();"></select>
</div>
Both the region and the project selectmenus do not select the item, they just leave a blank box or won't let you select the item.
The .js that runs when selected (I think it is fine)...
function changeRegion()
{
var regid = Number($("#region").val());
var projsel = $("#projectmob");
projsel.empty();
projsel.append("<option id='selproj' value='placeholder' data-placeholder='true'>Select Project...</option>");
var projNumber = 0;
var projValue = -1;
for (var i = 0; i < proj.length; i++) {
if (proj[i].region == regid) {
projNumber++;
projsel.append("<option id='oc1-" + proj[i].id + "' value='" + proj[i].id + "'>" + proj[i].wono + ': ' + proj[i].name + "</option>");
projValue = proj[i].id;
};
};
$("#projectmob").selectmenu('refresh', true);
if (projNumber == 1) {
$("#projectmob").val(projValue).selectmenu('refresh');
};
getFilteredEvents();
}
function dwmChange()
{
var projid = Number($("#projectmob").val());
if (projid > 0) {
getFilteredEvents();
var regValue = findRegion(projid);
$("#region").val(regValue).selectmenu('refresh');
};
}
getFilteredEvents(); hits the azure sql database and sets up the screen with the data retrieved.
This all ran fine up until about a week ago as far as I know. I have made changes and updates, but none that I think should affect the selectmenus from working.
Any thoughts or ideas would be appreciated.
Thanks
It seems a problem with Chrome 50.0.2661.89.
Looking further into this...
I have to question the logic behind JQuery Mobile hiding the toolbars on select >element focus by default. The native browser select elements overlay the page in >their various special ways, and even the non-native select popup (which you get >when specify the data attribute data-native-menu="false" in html or nativeMenu: >false in the selectmenu options) is absolutely positioned as a dialog. This >means that the toolbars really do not intrude on the real-estate given to the >selectmenu options as they'll always overlay everything including the toolbars. >To me, this makes the code from line 12664 - 12692 commented as: this hides the >toolbars on a keyboard pop to give more screen room rather unnecessary for >select elements.
Workaround/solution: thankfully jQuery-Mobile does nicely allow you to override >this setting in your header/footer with the data-attribute data-hide-during->focus - simply set this to:
data-hide-during-focus="input, textarea"
and it won't try to hide the toolbars anymore when a select element gets focus."
From https://github.com/jquery/jquery-mobile/issues/8429
I'm building a select list with an Ajax call that is triggered when another select list is changed.
The page loads correctly with the jQuery styling, but when I replace my ajax container with the new div I can't get jQuery mobile to format it. This means that it reverts to the native select list format.
I have tried what is suggested in the JQM documentation:
var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");
but that does not work. My page initially loads with this:
<div id="ajax-destination">
<select id="destinationAirport" data-native-menu="false">
<option value="-- Please Select --" data-placeholder="true">-- Please Select --</option>
</select>
and this is my jQuery code wrapped in the change function of the other select list.
$('#ajax-destination').empty();
$.post(url, { departureAirport : departureAirport }, function(data) {
$('#ajax-destination').append(data);
var myselect = $("#destinationAirport");
myselect[0].selectedIndex = 1;
myselect.selectmenu("refresh");
});
The only other way I can think to do this is to return a JSON array via Ajax and use that to add the options to the select list, but I would prefer to just send formatted HTML because it's simpler to follow.
If myselect.selectmenu("refresh"); or myselect.selectmenu("refresh",true); doesn't work you can always refresh the page using
you could try myselect.trigger('create');
#Andy :
myselect.selectmenu("refresh"); will refresh the select box and where as
myselect.selectmenu('refresh', true); will rebuild the select menu.It may helps you out. Check this link once http://forum.jquery.com/topic/how-to-add-items-and-refresh-the-select-menu-in-jquery-mobile
You know how when you have your mouse over a link, in most browsers, it shows the link in the lower left corner (aka chrome) or in the status bar? How can I disable this?
The only way to do this is to remove the data in 'href', and change it to a javascript onclick where you set the window.location to the url you want.
Go To SO
becomes
<a style="cursor: pointer" onclick="javascript: window.location = 'http://www.stackoverflow.com/';">Go To SO</a>
another idea: use a redirector.
Set the link to your own page (aspx) and in that page you do a Response.Transfer. When using aspx, you can use attributes (in the querystring) if you like, to use it for multiple links. This way the user still knows it is a link, but can't see the actual URL when hovering.
I got the same issue today .. and here is a out of the box way to solve it:
Just replace the <a> with a <span> and hide the address in a hidden component,
Then use Jquery to create the page redirect / Ajax.
HTML:
<span class="fake-link" >
<span class="url" style="display:none;">www.my-url.com</span>
Go to My-URL page
</span>
Jquery:
$(function(){
$('.fake-link').on('click', function(e){
var url = $(this).find('.url:first').html();
window.location = url;
});
});
Change the onclick event:
Link
<script type="text/javascript">
function changeOnClick() {
document.getElementById("linkid").onclick=function(e) {
location.href="http://www.your-site.com";
return false;
}
}
window.onload=changeOnClick;
</script>
You can change the "#" to whatever you want the status bar to show.