I've seen a lot of people with this issue, but for some reason I am unable to find a solution that works.
I'm getting this error:
Uncaught Error: cannot call methods on listview prior to initialization; attempted to call method 'refresh'
Here's the breakdown of what is happening.
I'm binding this event:
$('#person').bind('pagebeforeshow', function(e, data){
Person.getPersonData();
});
In the getPersonData() method, I'm using the underscore _.after function to render a template and refresh three listviews after all my ajax calls have been made. I'm using Knockout.js to apply some data bindings.
var tmplMarkup = $('#tmpl-person').html();
var compiledTmpl = _.template( tmplMarkup, {data: Person.data} );
$('#person-wrapper').html(compiledTmpl);
$('#person-info-wrapper').listview('refresh');
$('#person-related-wrapper').listview('refresh');
$('#person-groups-wrapper').listview('refresh');
$('#person-notes-wrapper').listview('refresh');
ko.applyBindings(Person.data, document.getElementById('person-notes-form'));
I'm not sure what I'm doing wrong here. I've tried binding to different page loading events, and no luck. I've even tried using setTimeOut to refresh the list views several seconds after the ajax calls are made, but that did not help either.
Thanks in advance.
This problem can be easily solved.
Use this:
$('#listview-id').listview().listview('refresh');
Where #listview-id is your listview id (or any other reference), first listview() will initialize it and a second one will refresh it.
If you want to find more about this problem you can find it in this ARTICLE, to be honest it is my personal blog article. Or find it HERE. Look for the chapter called: Markup enhancement problems
try as below
$('#person-info-wrapper ul').listview();
$('#person-related-wrapper ul').listview();
$('#person-groups-wrapper ul').listview();
$('#person-notes-wrapper ul').listview();
Related
I have a wicegrid that I update via AJAX(based on the value selected by a drop down). Problem is that after the update, the filters and pagination stops working on left-mouse click(works on right click!). Does anyone have any idea why this is happening?
I have used wicegrid on a number of pages in the same project(without AJAX update), and this issue does not appear.
Try this (assuming you use jquery):
$( document ).ajaxComplete(function() {
put code you want to run;
});
probably your script is not working because it's in document.ready scope.
I had the same issue and found a straightforward workaround for this issue - call the initWiceGrid() function after you refresh the grid.
So I'm trying to use swipe.js in congunction with jQuery mobile.
I have it setup so that the swipe.js slider thingy will start automatically on the jqm 'pageshow' event.
I'm now running into the problem that the code in the swipe function will execute one additional time when I leave the page and comeback.
This issue seems a fairly common one with jqm, and I've read many possible solutions here on SO, and elsewhere on the internets.
However, all of these solutions that seem to work wonderfully for others involve a secondary 'click' event within the 'pageshow' event.
These solutions for example: http://www.gajotres.net/prevent-jquery-multiple-event-triggering/ seem great, but where is my 'click' function, sadly I don't have one.
I'm a little lost because I do not have a click event.
I believe the function is bound to the 'pageshow' event... and have tried many different ways to get around this.
$(document).off('pageshow', '#home').on('pageshow', '#home', function() {
var home = document.getElementById('mySwipe');
window.mySwipe = Swipe(home, {
auto: 5000,
speed: 500,
disableScroll: true,
callback: function(index) {
console.log(index);
}
});
});
The code above tries to implement solution #2 from the above link by unbinding from 'pageshow' with '.off' before binding it again with '.on'.
but I'm doing it wrong, and I don't understand.
I should mention that the swipe.js appears to run perfectly, but when trying to retrieve the index value in the callback into the console the above code repeats the console.log one additional time per return to the #home page.
Also, the .js code is in the header, and I am working with one index page with multiple page ID's.
Can anyone see the dot I'm failing to connect here ??
I have a dynamic MVC4, jQuery Mobile application that works for the most part quite well. I have an auto posting dropdown list that selects a list from the database via the following code.
<script type="text/javascript">
$(function () {
$("#TownID").live('change', function () {
//$("#TownID").change(function () {
var actionUrl = $('#TheForm1').attr('action') + '/' + $('#TownID').val();
$('#TheForm1').attr('action', actionUrl);
$('#TheForm1').submit();
});
});
</script>
<p>
#using (Html.BeginForm("SearchTown", "Home", FormMethod.Post, new { id = "TheForm1" }))
{
#Html.DropDownList("TownID", (SelectList)ViewBag.TownId, "Select a Town")
}
</p>
The problem is it only works properly the first time a search is performed unless I click refresh. I don’t think this has anything to do with MVC, I think the problem is with AJAX and jQuery Mobile.
Edit:
The first time I search www.mysite.com/Home/Search/2 yields a result and woks fine, but the second time something seems to be left behind in the DOM??? and it looks for:
www.mysite.com/Home/Search/2/2 also
I get 404 errors in my log and “Error Loading Page” but it still finds the results and displays the page correctly!
Then with a third search I get the error 404’s in my log and “Error Loading Page” but it has grown and now looks for:
www.mysite.com/Home/Search/2/2
www.mysite.com/Home/Search/2/2/2 also
This then continues to grow after every search until at some seemingly random point on each test, it seems to give up and I get error 505
Additional Edit:
The code works perfectly if I take jQuery Mobile out of the question
Can anyone tell me what might be going on here?
Get rid of: $(function () {
And replace it with: $(document).delegate('[data-role="page"]', 'pageinit', function () {
Please read the big yellow sections at the top of this page: http://jquerymobile.com/demos/1.1.0/docs/api/events.html
You can't rely on document.ready or any other event that only fires once per page. Instead you have to get used to using jQuery Mobile's custom page events like pageinit so your code will work no-matter when the page is added to the DOM (which you don't know when this will happen in a jQuery Mobile website). There are a ton of events, so again, please read the documentation I linked-to above.
Firstly, dynamically generated html using a server side templating engine blows. I really don't understand what value people see in it.
My guess is that it used to make sense 10 years ago before AJAX became popular, and has just hung in there ever since because people have this feeling that it is "the right way to do it". It isn't. ESPECIALLY for mobile web apps.
Secondly, it looks like you are trying to do pretty simple search. All this MVC4 garbage makes it difficult for you to see what is really happening though. You don't need to append parameters to your URL for a simple form submission like this. In fact your TownId should already be part of the POST data when you submit, so you can just remove the URL modification bit.
Alternatively, don't use a form submission, but just a GET and AJAX. I don't know what your app is doing here, but I imagine you want to display the results on the page dynamically somehow, so a GET is more than enough.
Use your developer browser tools (F12) to see what exactly is getting submitted when you do the submit - it really helps. And for your next project, abandon MVC4! "Well established design patterns" my foot.
I have been bothered by this problem for a long time
There are same select element in the DOM I think so...
and I used $('.SelectCSS:last').val()
It seen work well.
I come from China , English is poor...
I guess this is one for the future, MVC and jQuery Mobile don't seem to blend completely right now. Maybe MS's response to the issue is Single Page Applications!
SPA may satisfy Danial also?
I have a JQuery Mobile (1.0rc1) application that has a list view with a search filter implemented. It's similar to this sample.
Under certain conditions, I am dynamically loading additional items into the list with an ajax call. When this happens I want to clear anything entered in the search filter, otherwise I end up with a partially filtered list.
I've tried firing the clear button like this:
$('.ui-button-clear', $.mobile.activePage).click();
and clearing the form like this:
$("form > input", $.mobile.activePage).val('');
but neither worked. Can someone enlighten me to the proper way to accomplish this?
You should be able to clear clear the searchfilter with
$('input[data-type="search"]').val("");
Edit: To update the list you will also have to trigger the "change"-event on the searchfilter:
$('input[data-type="search"]').trigger("keyup");
JSFiddle
if you talking about Jquery mobile listview, then you need this
$('#autocomplete li').click(function () {
$('.ui-input-clear').trigger("click");
});
I use the following code:
$("form")[0].reset();
The [0] points to the DOM element method.
Also see How to reset (clear) form through JavaScript?
I'm using Gmap4Rails in the body of a form that is loaded via Ajax. There are custom fields in the form and some of them may be location pickers that I have working on a non-Ajax version of the form.
With the Ajax version of the form, I'm getting "Gmaps.my_map_id" undefined errors.
In the non-Ajax version of the form, I call Gmaps.loadMaps via JavaScript in the HTML page head for "window.onload" as is the normal practice with Gmaps4Rails.
However, this won't work in the context of Ajax, as the map(s) haven't been defined at window.onload time.
In my form, I also define a callback per Gmaps map object. This is what seems to be failing with the "undefined" error, even when I do a "Gmaps.loadMaps();" script directly before the first callback is defined in the code that is loaded by Ajax.
Basically it goes like this in code order:
in a loop, gmaps4rails partial is called to output each map custom field
after that loop finishes, Gmaps.loadMaps() is called once
in another loop, each Gmaps map object has the JS for its callback added
Any suggestions on how to get this working?
UPDATE: possibly only partly correct (i.e. I did have the problem that was outlined here, but calling Gmaps.loadMaps() still doesn't work).
2nd Update: I have had to alter the definition of the load_... to be on the Gmaps object and then alter Gmaps.loadMaps function accordingly. I've put in a pull request to the project at https://github.com/apneadiving/Google-Maps-for-Rails/pull/94.
The Gmaps.loadMaps() call wasn't the issue. So an alternative isn't necessary. The thing that was tripping me up is that in the partial enable_js was being called as false and the JavaScript that declares the new instance of the Gmaps4RailsGoogle and the function for loading it was not being called.
I have a custom version of the partial and in my case, even when enable_js (I interpret as "don't load javascript library files" for my app) is false, I still do the JavaScript that declares the new Gmaps4RailsGoogle instance and defines the load_... function.
That being said, the load_... function appears to be not working for me. It comes back with the following in my case:
TypeError: 'undefined' is not a function (evaluating 'window"load_" + key')
When I call the load_... function directly from the console (rather than the Gmaps.loadMaps call), I get a similar error:
"'undefined' is not a function (evaluating 'this.load_...()')"
Perhaps having to do with not having any markers declared? Any hints on that problem appreciated.
If I step through the steps in the load... function, the first bit that throws an error is .initialize(). Still investigating.