I've used sortable/portlet jquery ui plugin on my website. I load some boxes after the page is loaded via ajax. but they don't look like the boxes appears at the page load time. I know the problem loading via ajax and bind issue. But how can I solve it?
You're ajax call has a success method which you can use to bind to elements that have been dynamically added.
For example you could do
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
$(".column").sortable({ connectWith: ".column", cursor: 'crosshair' });
}
});
Related
I have this code below
window.addEventListener('popstate', function(){
newHref = window.location.href;
if(pushedState){
urlSplit = newHref.split('/');
pageURL = urlSplit[urlSplit.length - 1];
$('div').html('loading...');
$.ajax({
type : 'POST',
url : pageURL,
success : function(data){
$('div').html(data);
}
})
}
})
This code works fine but if I add the jQuery mobile library to my html file it causes the popstate event to run a ajax loading an entire page into my div.
I have tried doing this
$.mobile.ajaxEnable = false;
But it doesn't work. My jQuery mobile version is 1.4.5
From what you are showing us I presume you are not using full jQuery Mobile functionality as what you are describing is how jQuery Mobile is supposed to work.
I also presume you do not need all jQuery Mobile functions.
Why not rebuild jQuery Mobile library by cherry picking only functionalities you actually need: http://jquerymobile.com/download-builder/
For example, if you do not select init this will disable global initialization of the jQuery Mobile library. You will, of course, be able to manually trigger page markup enhancement.
I'm generating some list items with JQuery Mobile. These list items have an id on the anchor. All anchors needs to load the page event.html. I need to retrieve the id when event.html is loaded.
On my index page I have the following code, which should pass the id from my anchor and refer me to event.html.
$(document).on('pageinit', '#index', function() {
$(document).on('click', '#overview a', function(e) {
e.preventDefault();
$.mobile.changePage('event.html', {
transition: 'slide',
data: {
'id': 'this.id'
}
});
});
});
On the page event.html I want to retrieve the data id.
$(document).on('pageinit', '#event', function() {
//output data id
});
How do I do this?
I've seen some examples where people have tried to do this by using global variables and submitting through get request. I have not been able to successfully reproduce their solutions and I would prefer if the data could be passed directly from the pages. Is this possible?
i think get method is the best , however I sometimes use the method data() , but you have to create a dummy element that is common among pages to keep you data , you can check this page though :
http://api.jquery.com/data/
jQuery Code: I removed all my Sortable settings. If you feel they are pertinent I can put them back in.
$('#navsort').sortable({ ... });
$("#content").on('click', '#submit_menu', function (event){
event.preventDefault();
$.ajax({
type: "POST",
url: "menu-ajax.php",
data: { data:$('#form').serialize() }
}).done(function (response) {
$('#content').hide().html(response).fadeIn('slow');
});
});
HTML Code: This is a simplified version because the real code has lots of PHP and other stuff going on.
<div id="content">
<form method="post" id="form">
Save
<ol id="navsort">
...
</ol>
</form>
</div>
As you can see the entire form, including the elements attached to Sortable, are replaced (with an identical copy of itself) via AJAX when the form is submitted. This is when Sortable stops working.
I understand that the new form was not part of the DOM when Sortable was initialized and so its not attached despite being identical to the form it replaced. I also understand how .on() is used to delegate between elements that are present when the page first loads and those added afterwards. What I do no understand is how to apply this concept to the initialization of Sortable.
I got it to work with a dirty hack, but I want to understand the right way.
Dirty Hack:
function dirtyhack(){
$("selector").on('event', 'target', function (){ ... });
}
dirtyhack();
$("#content").on('click', '#submit_menu', function (event){
event.preventDefault();
$.ajax({
type: "POST",
url: "menu-ajax.php",
data: { data:$('#form').serialize() }
}).done(function (response) {
$('#content').hide().html(response).fadeIn('slow');
dirtyhack();
});
});
So Sortable is initialized when the page loads and reinitialized when AJAX is done replacing the elements Sortable is attached to. Maybe this is right, but it feels wrong.
Disclosure: I am actually using the nestedSortable plugin in place of Sortable, but the plugin author claims that "All jQuery Sortable options, events and methods are available" through his plugin. I also did switch to the standard Sortable Widget to test and had the same issue, so I do not think its the plugin.
Plugin URL: https://github.com/mjsarfatti/nestedSortable/tree/2.0alpha
I am using Jquery ui Autocomplete.But it show error autocomplete showing self.element.propAttr error.
this is my ajax code
$.ajax({
url: "persons.xml",
dataType: "xml",
success: function( xmlResponse ) {
var data = $( "person", xmlResponse ).map(function() {
return {
value: $( "name", this ).text()
};
}).get();
$( "#birds" ).autocomplete({
source: data,
minLength: 0
});
}
});
I am using xml for response but that doesnot seem to be the problem it seems some function in javascript is deprecated.
Can anyone give me any solutions for this?
Add this lines in front of your statement:
jQuery.fn.extend({
propAttr: $.fn.prop || $.fn.attr
});
I was facing this problem when refactoring my javascript and found that the problem was I removed jquery.ui.core.js, and instead was using only jquery-ui-1.9.1.custom.min.js.
I created this file using the Download Builder at the Jquery UI website with everything checked. Correct me If I am wrong but jquery-ui-1.9.1.custom.min.js should have contained all the javascript necessary to run all the jquery ui addins (in this case autocomplete was failing).
Adding the reference back to jquery.ui.core.js fixed the bug.
I am using JQuery UI plugin blockUI to block UI for every ajax request. It works like a charm, however, I don't want to block the UI (Or at least not show the "Please wait" message) when I am making ajax calls to fetch autocomplete suggest items. How do I do that? I am using jquery autocomplete plugin for autocomplete functionality.
Is there a way I can tell the block UI plug-in to not block UI for autocomplete?
$('#myWidget').autocomplete({
source: function(data, callback) {
$.ajax({
global: false, // <-- this is the key!
url: 'http:...',
dataType: 'json',
data: data,
success: callback
});
}
});
Hm, looks to be a missing feature in jquery :)
You could use a global flag to indicate if it is a autocomplete call and wrap it in a general autcompletefunction
var isAutoComplete = false;
function autoComplete(autocomplete){
isAutoComplete = true;
if($(autocomplete).isfunction())
autocomplete();
}
$(document).ajaxStart(function(){if(!isAutoComplete)$.blockUI();}).ajaxStop(function(){isAutoComplete = false;$.unblockUI();});
It's not a nice solution but it should work...
try using a decorator
$.blockUI = function() {
if (condition_you_dont_want_to_block) {
return;
}
return $.blockUI.apply(this, arguments);
}
or you can write your own block function that is smarter
function my_blockUI() {
if (condition_you_dont_want_to_block) {
return;
}
$.blockUI();
}
$(document).ajaxStart(my_blockUI).ajaxStop($.unblockUI);
You can set blockUI to work for all functions on the page by adding to a global jQuery event handler. To make sure it doesn't get called on autocomplete ajax calls we have to determine if the call is an autocomplete call or not. The problem is that these global functions don't have that much information available to them. However ajaxSend does get some information. It gets the settings object used to make the ajax call. the settings object has the data string being sent. Therefore what you can do is append to every data string in every ajax request on your page something like:
¬autocomplete=notautocomplete
For example:
$.ajax({data:"bar=1&foo=2¬autocomplete=notautocomplete"})
Then we can put this code in your document ready section before anything else:
$(document).ajaxSend(
function (event, xhr, ajaxOptions){
if(ajaxOptions.data.indexOf("notautocomplete") !== -1){
$.blockUI;
}
});
$(document).ajaxStop($.unblockUI);
Of course the other better idea would be to look for something unique in the auto complete requests, like the url, but that depends on which autocomplete plug-in you are using and how you are using it.
using a modal block (block UI) means blocking any inputs from user, I'd suggest plain old throbber to show 'Please wait..' and to block ( set attributes readonly="readonly" ) ur input controls till the ajax request is complete.
The above UI seems to be self conflicting!