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.
Related
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'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();
I'm trying to get jqueryui drag and drop to work with emberjs. I have a fiddle set up here: http://jsfiddle.net/XMgwV/13/ but I cant seem to get the drop event to fire.
The mixin is from this demo: http://www.lukemelia.com/blog/archives/2012/03/10/using-ember-js-with-jquery-ui/
Edit:
If I change the jQueryUI draggable helper function to 'original' it works as expected. It seems to be a problem with jquery ui .clone() and ember, as pointed out in #7 here. The safeClone method in the codebrief blog post does not seem to solve the problem fully..
Anyone knows how to get this to work as expected?
I've had to fix the jQuery UI wrapper to make it work. But all I could come up with was a dirty hack.
I had to turn
var ui = jQuery.ui[this.get('uiType')](options, this.get('element'));
into
var ui = $(this.get('element'))[this.get('uiType')]();
http://jsfiddle.net/MSch/LrHTB/1/
It looks like your example will work if you add:
clone.removeClass('ember-view');
to the safeClone helper.
Here's a jsfiddle that should solve the problem: http://jsfiddle.net/Wu2cu/
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 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