I have a strange error occurring with the dialog box, I'm loading the dialog box fine, but whenever I assign a button to it, although it'll display the button, it won't display the name of the button. Here is my code that launches the dialog successfully...
jQuery('#'+message_div_id).dialog({
modal: ui_popup_modal
, width: ui_popup_width
, height: ui_popup_height
, resizable: false
, draggable: false
, buttons: {
"Ok": function() {
jQuery( this ).dialog( "close" );
}
}
});
This is the resulting html from bugzilla after the popup has loaded...
< button type="button" text="Ok" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">< span class="ui-button-text">< /span>< /button>
The span class is the area that should contain the text, but as you can see, it is not. Any ideas?
This inspired me a lot, but it didn't work exactly for me, I made the following modifications. I think this works better.
$('div.ui-dialog-buttonset button.ui-button span.ui-button-text').each(function() {
$(this).html($(this).parent().attr('text'));
});
This works for me with jQuery UI v1.8.22 CDN (tested):
$('div.ui-dialog button.ui-button').each(function() {
$(this).children('.ui-button-text').html($(this).attr('text'));
});
I think there is something missing. It would be nice to see it working. I tried creating a test and I get no text, but the css is missing. If I do this it works:
<button type="button" text="Ok" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Text Here</span></button>
Sorry, new to SO.
Anyhow, as this piece of code was just part of a bigger piece of functionality and as I couldn't resolve the issue via the example code on the jQueryUI site, I ended up resolving with this :
var button1_text = '';
(ui_popup_but1 != '') ? button1_text = ui_popup_but1 : button1_text = 'OK';
jQuery('button[text="button1"] span').html(button1_text);
I had a similar problem. Finally solved it by upgrading the version of jQuery used from 1.3.2 up to current (1.7.1) at the time. I just noticed that the version of jQuery UI I used is not current (1.8.11 vs current of 1.8.18). I will try downgrading jQuery back and upgrading jQuery UI to current and see what happens.
EDIT: jQuery UI 1.8.18 fixed the issue for me in using both jQuery 1.3.2 and 1.7.1, so it looks like 1.8.11 had a defect that caused it to be not compatible with 1.3.2 (I'm assuming it was supposed to be since .18 is, I would think they wouldn't have changed compatibility between such a small version change).
Had the same issue and ended up patching jquery-ui.js
--- jquery-ui-1.8.23.js 2012-09-14 11:18:34.000000000 +-1000
+++ jquery-ui-1.8.23.js 2012-09-14 11:31:07.000000000 +-1000
## -9088,13 +9088,16 ##
.appendTo(uiButtonSet);
// can't use .attr( props, true ) with jQuery 1.3.2.
$.each( props, function( key, value ) {
if ( key === "click" ) {
return;
}
- if ( key in button ) {
+ if ( key == "text" ) {
+ button.html( value );
+ }
+ else if ( key in button ) {
button[ key ]( value );
} else {
button.attr( key, value );
}
});
if ($.fn.button) {
I had the same problem, but the reason why it was without text was that i had dependency issues. To put it short, i had 2 jquery ui js included in my final html file. When i left only 1 version of jquery ui everything seem to work as 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
I have a web page requires both jQuery and Mootools to function. The conflict between these 2 libraries were solved when adding jQuery.noConflict(); to the script.
But I also want to popup a jQuery dialog window when the jQuery user input validation fails.
jQuery.noConflict();
function OnButton1()
{
var noOfChecked = jQuery("input:checked").length;
if(noOfChecked > 0)
{
jQuery( "#dialog" ).dialog({
modal: true,
buttons: {
"OK": function() {
jQuery( this ).dialog( "close" );
}
}
});
return false;} }
The problem is that the jQuery dialog window did not popup. It seems that the noConflict() doesn't solve the problem. But the strange thing is that the jQuery is actually working because the validation using jQuery is actually functioning. So I just don't understand why jQuery is working but jQuery UI is not.
So can anyone please help me to get my jQuery UI working with Mootools? Thanks in advance!
It should be working with jQuery.noConflict() but sometimes you need to change jquery name completely.
var $j = jQuery.noConflict();
After that use $j instead of $.
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
I have the listview refresh functioning appropriately with a dynamically built list after load except for one issue. The last <li> tag in the list does not get any styling applied to it.
The refresh actually adds the the ui-btn ui-btn-icon-right ui-li ui-corner-bottom ui-btn-up-c class to the second to last <li> tag.
Any ideas why this would be happening?
Attached is the function that is dynamically generating the list:
function createSidebarEntry(marker, name, phone, address, distance) {
var saddr = document.getElementById('addressInput').value;
var li = document.createElement('li');
var html = '' + name + ' (' + distance.toFixed(1) + ' miles)' + address + phone +'<a href="http://maps.google.com/maps?saddr='+ saddr +'&daddr=' + address +'" /></a>';
li.innerHTML = html;
$('#locationList').listview('refresh');
return li;
}
From your code, it looks like you are adding the li to your listview outside of that function, BUT you are calling .listview('refresh'); inside the function.
So It just happens to work for all your LIs because except for the last one, because its always the following LI that causes the list to be refereshed with the correct look&feel.
Solution: just call .listview('refresh'); AFTER you have added the last LI outside of this function. It will also have the effect of improving performance becuse you will only be refreshing the listview once you have finished dynamically adding all your new LI elements.
Calling .listview("refresh") did not work for me. It created a basic list, without styling.
This is what worked for me:
function updateData()
{
$.ajax({
url: '#Html.Raw(ajaxUrl)',
async: false,
beforeSend: function () { $.mobile.showPageLoadingMsg(); },
complete: function ()
{
$.mobile.hidePageLoadingMsg();
$("ul:jqmData(role='listview')").listview();
},
success: function (data, textStatus, jqXHR)
{
$('#myDiv').html(data);
$('#myDiv').trigger("create"); // *** THIS IS THE KEY ***
}
});
}
Sometimes you need to instantiate listview view before calling the refresh.
Chrome should be giving you an error saying that you cant apply a refresh to a listview that isnt instantiated.
You can try this out, it might solve your problem (it solved this exact same issue for me).
$('#locationList').listview().listview('refresh');
I also had some problem with listview refresh function( jqm 1.0 beta1 ).
On IE8, it's even worse.
So my solution is simply inspect what jqm has done to <li> tag.
And directly insert the after-refresh-html-code.
Not an elegant solution, but it works.
I am developing the sample apps using the jquerymobile alpha 4.1. In my design, I have to get the value from textbox while enduser change the value of control.
So I am using the following code.
HTML :
<input type="text" id="username" > </input>
JS :
$("#username").live("change" , function() {
alert("hai"+ $("username").val());
});
It is working fine in the iphone-safari browser, Android , blackberrry native browsers.
But It does not work in the Operamobile- 11 and Operamobile 10. ( It could not detect the this events.)
Please share your suggestion. Shall I use any other event for avoiding this error ?
Thanks.
Live Example
Try this:
$("#username").live("change" , function() {
alert("hai "+ $("#username").val());
});
instead of this:
$("username").live("change" , function() {
alert("hai"+ $("username").val());
});
Alternative: ( Without the live() ): Example
$("#username").change(function() {
alert("hai "+ $("#username").val());
});
So I have some jQuery UI tabs. The source code is as follows:
HTML:
<div class="tabs">
<ul>
<li>Ranges</li>
<li>Collections</li>
<li>Designs</li>
</ul>
<div id="ranges"></div>
<div id="collections"></div>
<div id="designs"></div>
</div>
jQuery:
$(document).ready(function() {
$(".tabs").tabs();
});
My problem is that I am trying to make each tab load a page into the content panel on click of the relevant link. To start with I am just trying to set the html of all the panels on clicking a link. From the code below, if I use method 1, it works for all links. However if I use method 2 it doesn't - but only for the links in the tabs (i.e. the labels you click to select a tab).
Method 1 (works for all links all the time, but would not be applied to links which are added after this is called):
$("a").click(function () {
$("#ranges, #collections, #designs").html("clicked");
});
Method 2 (works for all links which are not "tabified"):
$("a").live("click", function () {
$("#ranges, #collections, #designs").html("clicked");
});
Does anyone know why it is behaving like this? I would really like to get method 2 working properly as there may well be links which I need to add click events to which are added after the page is originally loaded.
Thanks in advance,
Richard
PS yes the function calls for .live and .click are both in the $(document).ready() function, before anyone says that that may be the problem - otherwise it wouldn't work at all..
Edit:
The solution I came up with involves an extra attribute in the anchors (data-url) and the following code (which outputs a 404 not found error if the page cannot be loaded). I aim to expand this over the next few weeks / months to be a lot more powerful.
$(".tabs").tabs({
select: function (event, ui) {
$(ui.panel).load($(ui.tab).attr("data-url"), function (responseText, textStatus, XMLHttpRequest) {
switch (XMLHttpRequest.status) {
case 200: break;
case 404:
$(ui.panel).html("<p>The requested page (" + $(ui.tab).attr("data-url") + ") could not be found.</p>");
break;
default:
$(ui.panel).html("<p title='Status: " + XMLHttpRequest.status + "; " + XMLHttpRequest.statusText + "'>An unknown error has occurred.</p>");
break;
};
});
}
});
I don't know if I understand what you are going for but basically you want to do something once a tab is clicked?
Here's the docs for setting up a callback function for selecting a tab.
EDIT: Don't know if that link is working correctly, you want to look at select under Events. But basically it is:
$("#tabs").tabs({
select: function(event, ui) { ... }
});
Where ui has information on the tab that was clicked.
jQuery UI tabs has an outstanding issue where return false; is used instead of event.preventDefault();. This effectively prevents event bubbling which live depends on. This is scheduled to be fixed with jQuery UI 1.9 but in the meantime the best approach is use the built in select event as suggested by #rolfwaffle.
Maybe the tabs() plugin that you are using is calling event.preventDefault(); (Reference) once it has created it's tabs.
Then it captures the click event and the bubbling stops, so it doesn't invoke your click-function. In jQuery this is done with
$(element).click(function(){
// Do stuff, then
return false; // Cancels the event
});
You'd have to alter the tabs() plugin code and remove this return false; statement, OR if you are lucky, the plugin might have an option to disable that behavior.
EDIT: Now I see you're using jQuery UI. Then you should check the documentation there, since it is an awesome plugin, it will do anything you want if you do the html right and pass it the right options.