I have seen many people asking this question and have tried it all (such as: Why is jqueryUI datepicker throwing an error?).
Well i have an asp.net app; i am referring jquery-ui-1.8.16.custom.min.js which has all the jquery UI plugins with its css and jquery-1.6.2.min.js
Now when i say
$(document).ready(function () {
$('._txtReviewDate').datePicker();
});
I get an error : $("._txtReviewDate").datePicker is not a function; on firebug. i checked whether the js files have loaded etc.
Please suggest how i can get it working.
There was an old jquery library added deep down somewhere long back which was just ignored over a period. Removing that resolved the issue.
Related
I am facing a weird behavior in the wicket pages of the below hierarchy.
RootPage with few Abstract tabs added and In few Abstract tabs, based on the use case we have TabbedPanel of wicket UI Jquery. like this http://www.7thweb.net/wicket-jquery-ui/tabs/TabbedPanelPage?2. To navigate between tabs, I use AjaxTabbedPanel.
Issue1: Even the Default Jquery file is getting added to the page. But the UI components are not rendered with respect to Jquery
<script type="text/javascript" src="./wicket/resource/org.apache.wicket.resource.JQueryResourceReference/jquery/jquery-2.2.4-ver-F9EE266EF993962AD59E804AD9DEBE66.js"></script>
<script type="text/javascript" src="./wicket/resource/com.googlecode.wicket.jquery.ui.resource.JQueryUIResourceReference/jquery-ui-ver-0A819924D70A18322660DEE759225D2B.js"></script>
To overcome the above issue I have added the Jquery file by overriding renderHead method in RootPage. which only works on manual page refresh.
RootPage.renderHead:
#Override
public void renderHead(IHeaderResponse response){
super.render(response);
response.render(JavaScriptHeaderItem.forReference(new PackageResourceReference(RootPage.class, "jquery.min.js")));
response.render(JavaScriptHeaderItem.forReference(new PackageResourceReference(RootPage.class, "jquery-ui.min.js")));
}
Issue2: But since I made Ajax to navigate between tabs, refreshing page usingsetResponsePage() seems to be an unexpected way.
To solve the Issue1, I explicitly added jquery which lead to another problem of an explicit refresh.
Am I missing anything in the Issue1 which can solve the issue?
or Is there any way to refresh only my panels? to fix Issue2
Why do you contribute jquery.js yourself?
I'm not sure whether this is the cause of your problem but since Wicket also adds jQuery to the DOM I think you might have Javascript errors. Check the browser's DevTools console.
I am calling a AJAX web service, In the success callback function, I am adding options to a Dropdownlist dynamically. We are using JQuery Mobile in this application.
$("#mylist").append(
$('<option id="myoption' + index + '"></option>').val(myobject.id).html(myobject.description)
);
});
$('#mylist').trigger('change');
But, these options are not getting displayed immediately. Only when i click on any of other static options, Dynamic Options are getting visible.
I saw in few threads, suggesting to use trigger() or refreshmenu. But none of them are working. Is it due to callback function I am using?
Thank you ezanker,
.selectmenu('refresh',true) is working. In my case, I was referring JQuery JS file twice. Once in higher version and second in lower version. It took lower version. In the lower version, selectmenu is not supported.
As soon as I remove the second incorrect JS reference, it worked.
first of all I try to use proper "language" but I am not a programmer. That said...
I don't seem to be able to get jquery mobile to work properly.
When I try to change document.ready(function() { ... })
to
document.on('pagecreate', function(){ ... })
I do not get the same result; in fact I cannot even alert a simple message.
Furthermore I would like to use mousedown and mousedown events. The documentation of jquery mobile tells me that I could use vmousedown and vmouseup. Does not work either. Can someone enlighten me please. the jquery mobile.js is added lastly in my script structure of the dom.
Maybe relevant for others with a similar problem.
Linking to the jquery CDN instead of hosting the files myself solved my problem.
I am using the DateBox ( http://dev.jtsage.com/jQM-DateBox/ ) plugin for a page with the latest build of JqueryMobile but am finding an odd bug.
When I open my app on index.html and navigate through the pages to the page with the date picker is I get this - http://cl.ly/19022K40472e3k0D0D2H
However if I go direct to the page via the address bar it works fine and shows up as it should.
So just wondering is anyone else having problems with this? Or any idea how to fix it?
Also I might add does anyone know how I can have the current date show in the text field?
Thanks.
1) Looks like it is a problem with the css of datebox not being loaded properly.Are you loading the CSS of datebox in index.html?.In that case,when you directly go to the page with the datepicker,CSS might not be loaded.You can check if datebox css is loaded by using firebug for firefox or the in built developer tool in Chrome/Safari.(Check the resources tab to see all the loaded resources)
2)Check this example - http://jsfiddle.net/BNsPB/. In this example I wrote the code in document ready,in your case you might have to write it in pageinit or pagecreate event handlers
After checking your actual code I think you have to add the above code snippet in the pageshow event handler like this:(Assuming bookingPage is the id of the page)
$("#bookingPage").live( 'pageshow',function(event, ui){
var today = new Date();
var todayStr = today.getFullYear()+"-"+(today.getMonth()+1)+"-"+today.getDate();
$('#mydate').trigger('datebox', {'method':'set', 'value':todayStr});
});
});
You need to load the files in the actual file that your site navigates to in the first instance (index.html presumably). It sounds like you have only referenced the CSS and plugin code in your date picker page, but in default mode jQM uses an ajax hash-based navigation system, so you need to reference assets in such a way that they are available right from the get-go.
I want to do something every time a page loads. It's something that fixes the way the mobile site looks on different devices so it needs to happen on AJAX loads too.
At the moment, I've tried the traditional $(function(){ /*...*/ }); approach but that only works on the first load, and not subsequent AJAX loads.
I've been looking for the right event to bind to but I'm failing pretty hard.
You can use JQuery to bind to each "page" (div's set with the data-role=page attribute) and use the pageshow event (there are some others as well: pagebeforeshow, pagehide, pagebeforehide).
$(document).delegate('.ui-page', 'pageshow', function () {
//Your code for each page load here
});
http://api.jquerymobile.com/pageshow/
Note: this answer was written for jQuery Mobile 1.0.1, see the documentation link above for more information.
You can listen to the pageshow or pagecreate event and do your work there.
http://jquerymobile.com/test/docs/api/events.html