I'm doing an ASP.NET MVC website. Which needs a feature let admin set if the membership of each clubs member joined are valid still.
After a bit survey, I figure jQuery UI Checkboxradio quite fit my demand.
When I check the checkbox it seems fine, ticked and the background becomes blue.
However, when I move the mouse out the tick disappears while the background remains blue.
Then if I move the mouse over it, the tick will show up again but only when the cursor remains on the widget.
I check the post value of viewmodel which is correct and if I comment
//$("input[type=checkbox]").checkboxradio();
The original checkboxes work as expected.(tick won't disapear)
So I think it should be a frontend problem.
Here is the part of my View
<div class="form-group">
#Html.LabelFor(model => model.ClubMultiChosen.Clubs, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#for (int i = 0; i < Model.ClubMultiChosen.SelectedClubs.Count; i++)
{
var memberships = Model.ClubMultiChosen.SelectedClubs;
#Html.Label(#memberships[i].Club.Abbr, new { #for = $"cbxClub{i}" })
#Html.CheckBox($"ClubMultiChosen.SelectedClubs[{i}].IsActive",
#memberships[i].IsActive, new { id = $"cbxClub{i}" });
}
</div>
</div>
At the same page I have included
bootstrap 3.3.7
bootstrap-chosen 1.0.0
jQuery 3.1.1
jQuery UI 1.12.1
And My mvc version is 5.2.3.0
Not sure if I provided enough info. Any suggestion or question will be appreciated!
I figured it out myself.
For some reason when it is checked(class=ui-state-active). It uses ui-icons_ffffff_256x240.png as background which is white yet the background of checkbox(span) is white as well, so it looks like the tick was disappeared.
After I override it with
#form1 .ui-state-active .ui-icon,
#form1 .ui-button:active .ui-icon {
background-image: url("/Content/themes/base/images/ui-icons_555555_256x240.png");
}
It works as I expected.
Related
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
How can I use jquery to change the id of a div acting as a jquery mobile popup as well as the href of the anchor pointing to the popup?
In my webapp I have an anchor that, when clicked, brings up a jquery mobile popup div all of which I'm inserting dynamically. In any instance of the webapp, I don't know how many times this code will be inserted. Therefore, my understanding is that I need to be able to dynamically create a unique id for the jquery mobile popup div and set the href of my popup icon.
I am not currently succeeding at dynamically changing the id and href. I've created the following test (JSFiddle Test).
Here is my sample html:
<div class="phone1">
<p class="textLeft"> <strong>Number: </strong><span>(555)555-5555</span>
Learn more
</p>
<div id="myPopup" data-role="popup" class="ui-content" data-theme="a" style="max-width:350px;">
<p class="flagText">This number has been flagged as incorrect</p>
</div>
</div>
Change href property
Here is my sample javascript / jquery:
$('#changeButton').click(function () {
alert("Handler for .click() called.");
$('.phone1 > a').prop('href', 'myNewPopup');
$('#myPopup').attr('id', 'myNewPopup');
});
Thank you for your help in advance!
As your anchor is not a direct child of .phone1 but rather a grandchild, the > selector does not work. Also the href needs the # symbol:
$('.phone1 a').prop('href', '#myNewPopup');
Technically you should also use prop to update the id as well:
$('#myPopup').prop('id', 'myNewPopup');
Updated FIDDLE
Are you sure you need to do this. After dynamically inserting the popup the first time, you could just update it each successive time by testing if it exists in the DOM first:
if ($("#myPopup").length > 0){
//update
} else {
//create
}
In a Razor View I have a simple textarea
#Html.TextAreaFor(model => model.Text, new { htmlAttributes = new { #class = "form-control ckHolder" } })
to give to the back-end users a nice html support I am using cKEditor, to bind the plug in to the text area I am doing this:
CKEDITOR.replace("#Html.IdFor(m => m.Text)", {});
All works fine, but today I am started to try to implement a tag system.
<div class="tag-editor">
<span class="tag-editor-tags"></span>
<div class="tag-editor-editable" contenteditable="true"></div>
</div>
The rendering is following:
<div class="tag-editor-editable ui-autocomplete-input cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" contenteditable="true" autocomplete="off" tabindex="0" spellcheck="false" style="position: relative;" role="textbox" aria-label="Rich Text Editor, editor1" title="Rich Text Editor, editor1" aria-describedby="cke_107"><p><br></p></div>
But I wouldn't have the editor to the content editable div of tags, why I use the explicity CKEDITOR.replace with id of my textarea and I have this behaviour? It's strange, If I don't use .replace the editor doesn't work at all...
Ok, solved, I found the solution on official documentation
Inline Editing is a new technology introduced in CKEditor 4 that
allows you to select any editable element on the page and edit it
in-place. As a result, the editor can be used to edit content that
looks just like the final page.
...
Note that in this case you need to turn off automatic editor creation
first by setting the CKEDITOR.disableAutoInline option to true.
So I have just to add this line under .replace
CKEDITOR.disableAutoInline = true;
I'm developing a web app with MVC 3 / Razor and jquery-mobile. In jquery-mobile, normally you can add data_inline = "true" to an object's attributes and it will prevent the element from stretching all the way across the screen, like so:
#Html.DropDownListFor(m => m.value, options, new { data_inline = "true" })
#Html.ActionLink("Text", "Action", null, new {data_role="button", data_inline="true"})
Both of those work fine. But on a checkbox...
#Html.CheckBoxFor(m => m.value, new { data_inline = "true" })
... it doesn't seem to do anything, and I still get a nasty stretched checkbox. Adding data_role="button" doesn't help (not that I expected it to).
Is there any reason why this is so? Any good way I can get my checkbox to not be stretched without resorting to manual CSS modifications?
The jQM Checkbox does not support data-inline. All you need to do is change the label CSS property display to inline-block.
<label class="inline">
<input type="checkbox" name="chk0" class="ui-btn-inline" />Check me
</label>
.inline {
display: inline-block !important;
}
I am using the new v3 of the Google Maps API. Basically the issue I have is that I have a Google Map within jQuery UI Tabs. The map is not in the first tab, so you have to click the tab to view the map, but it does not always render correctly. I.e. sometimes the map images are not correctly placed.
I had this problem when I was using v2 of the API, but I managed to resolve the problem by initializing my Map like this:
map = new GMap2(document.getElementById("map"),{size:new GSize(500,340)});
Unfortunately that doesn't work in v3. I had a look at the suggestions in this thread: Problems with Google Maps API v3 + jQuery UI Tabs
Nothing really worked for me, but I used one of the workarounds in that I initialize the map function on tab load:
$(function()
{
$("#tabs-container").tabs({show: function(event, ui)
{
if(ui.panel.id == "viewmap")
{
mapiInitialize();
}
}});
});
This is all good but I much rather prefer for the map to be "there" when the user clicks on the tab. It sometimes takes a few seconds for the map to load up and all the user see's in that time is a plain gray background - some sort of loading indicator might have helped.
So does anybody have any suggestions? My markup and CSS is as follows:
<div id="tabs-container">
<ul>
<li><span>Details</span></li>
<li><span>Location Map</span></li>
<li><span>Reviews (<?php echo $numrows; ?>)</span></li>
</ul>
<div id="details"><?php echo $details; ?></div>
<div id="viewmap" style="padding: 10px; border: 1px solid #A9A9A9;">
<div id="map" style="height: 340px;"></div>
</div>
<div id="reviews"><?php echo $reviews; ?></div>
</div><!-- end tab-container -->
Try this when you are initializing your jQuery UI tabs:
$("#tabs-container").tabs({
show: function(event, ui) {
google.maps.event.trigger(map, 'resize');
}
});
Note: You will have to initialize the map before you initialize the tabs.
Once you switch to the tab that has the map call google.maps.events.trigger(map, 'resize'); that should then make it display correctly.
just use
map.setZoom( map.getZoom() );