jquery tabs not updating cookie - jquery-ui

I am using jquery UI 1.10 and I need to enable cookie in tabs. It used to work before.
But despite getting lokely lates jquery cookies 1.31 (https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js) my tabs do not record a correct cookie. It does not change when I switch tabs.
Tabs are initialized as:
$("#tabs").tabs({ cookie: { expires: 30, name: "userprivtabs"} });
Is there any way to make it work?
Thank you in advance!

This Worked for me
$("#tabs").tabs({
activate: function (e, ui) {
$.cookie('selected-tab', ui.newTab.index(), { path: '/' });
},
active: $.cookie('selected-tab')
});

Related

Redirect jQuery Mobile page on form submit in Trigger.io

I'm trying to build a simple prototype of an app and I cannot seem to get JQM to change to either an internal or external page with $.mobile.changePage($('#page2')) or $.mobile.changePage('page2.html').
I have successfully binded the form submit to the button, but when clicking (tapping), it changes the same page. After a second click/tap, it redirects.
$("#fd-login button#login-fd-submit").on('click', function(e) {
forge.logging.info('login-fd-submit clicked');
$.mobile.changePage('page2.html');
});
For a "local" page in your "src" directory:
$("#fd-login button#login-fd-submit").on('click', function(e) {
forge.logging.info('login-fd-submit clicked');
forge.file.getLocal('page2.html', function(file) {
$.mobile.changePage(file);
}, function(err) {
forge.logging.log("error");
});
});
If you are using a jQuery object instead, then its mostly likely not trigger.io and need to see more code.
It seems that $(element).on("click", function() {}); doesn't work for this. $(element).live("click", function() {}); works perfectly.
Try using:-
$("#fd-login button#login-fd-submit").on('tap', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
forge.logging.info('login-fd-submit clicked');
$.mobile.changePage('page2.html');
});
Update: Changed to use tap event.

autocomplete showing self.element.propAttr error

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.

jQuery UI Autocompleteselect

I am trying to get my form to submit when a user either clicks enter or mouse clicks. I have seen some examples as well as the example on the jQuery UI site. The example that I am following is jQuery UI autocomplete submit onclick result. Therefore my code looks like this.
<script type="text/javascript">
$(document).ready(function() {
$("#myInput").autocomplete({
source: "fh_autocomplete_search.php",
minLength: 2,
select: function(event, ui) {
if(ui.item){
$("#myInput").value(ui.item.value);
}
$("#myInput").submit();
}
});
$( "#myInput" ).bind( "autocompleteselect", function(event, ui) {
})
});
</script>
I'm not sure what should go under the .bind section of the code. Or really what it is even doing. And I have been here and read it but still just not clicking http://api.jquery.com/bind/ When I put an alert under it and select a ui.item from the #myInput box the alert does go off. But nothing fills or submits. If I put an alert under the if(ui.item) part it doesn't go off. If someone could explain to me what is going on and suggest some code to put under the .bind section I would greatly appreciate it.
If the id of the form is myForm:
$(document).ready(function() {
$("#myInput").autocomplete({
source: "fh_autocomplete_search.php",
minLength: 2,
select: function(event, ui) {
$("#myInput").val(ui.item.value);
$("#myForm").submit();
}
});
});
Also see this example.
I'm not entirely sure you need to write code for the "autocompleteselect" event. The default behavior of the event is to replace the text in the textbox with the users selection from the menu of items.

JQuery AJAX functions not working in iOS 5 Safari/iPad

Using the latest version of jQuery 1.6 on iOS 5 safari from an iPad, I'm noticing that all my ajax calls are failing. These same ajax calls work as expected on all other browsers I've tried, and I'm pretty sure they were also working on iOS 4's version of Safari (although I could be wrong). Has anyone else experienced this behavior as well? If so, is there a fix or workaround? Below is a quick example of a simple jQuery AJAX call that is returning an error in iOS 5's Safari. Thanks in advance for any insight!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
</head>
<body>
<a id="my-link" href="javascript:;">Click Me!</a>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#my-link").bind("click", function() {
jQuery.get("test.php", function(data) {
alert(data);
});
});
});
</script>
</body>
</html>
I had a similar issue just now. I had
$.ajax({
type: 'post',
url: 'http://IP../ws',
data: {1:1},
dataType: 'json',
success: function(response) {
if (lng.Core.toType(callback) === 'function') {
// setTimeout(callback, 100, response);
callback(response);
}
},
error: function(xhr, type) {
console.log('error')
if (error) {
setTimeout(error, 100, result);
}
}
});
changed url: 'http://IP../ws', to url: 'ws',
I'm not a jQuery user at all but have to use it for a project so not sure if this is help to you or not but worked for me.
Restart Safari - leave it and kill it from the running tasks.
From other things I have read it is related to security contexts and prevention of cross site scripting attacks, and Safari not getting things quite right when it was previously running on a different network and is now on an new network without it having been stopped between changing networks.
Ran into it myself today, w/ plain HTML/JavaScript/PHP XMLHttpRequest request.
I had face one issue that jQuery ajax call fail in IPad in Safari browser. Error is you have no permission to access the page / directory. I fix the issue by changing the Ajax async property to true.
$.ajax({
type: 'GET',
url: "".
async: true,
cache: true,
crossDomain: false,
contentType: "application/json; charset=utf-8",
dataType: 'json',
error: function (jqXHR, err) {
console.log(jqXHR.responseText);
alert("Error" + jqXHR.responseText);
},
success: function (data, status) {
});
There is a bug in Safari Mobile that suddenly and unexpectedly gives troubles with AJAX calls if there is any file serving going on. Safari can starts sending "OPTIONS" http messages rather than POST after it has been served a download with a Content-Disposition: attachment; header. You can look to see if this is happening by using Fiddler between Safari Mobile and the server to see what HTTP messages Safari is sending.
That "condition" in Safari Mobile is reset when restarted.
It is reviewed well here Stackoverflow: JQuery Ajax stopped working with IOS 5.0.1.
I've had to make it so that it re-try up to 20 times on error to make it work. Code example:
function my_original_function(form)
{
my_original_function_ajax(form, 1);
}
function my_original_function_ajax(form, attempts)
{
console.log('Attempts #'+(attempts));
jQuery.ajax({
type: 'POST',
url: form.action,
processData: false,
data: $(form).serialize(),
cache: false,
success: function(html){
console.log('success!!');
},
error: function (xhr, status, error) {
// make up to 20 attempts if error
if (attempts <= 20) {
my_original_function_ajax(form, attempts + 1);
}
}
});
}
I had the same issue but I ended up discovering something different totally.
I had something like:
function load_one(var1 = null, var2 = null) { ... }
function load_two() { ... }
And after that I had
$(window).load(function() {
load_one(var_x, var_y);
load_two();
});
Everything worked fine in Chrome, Firefox, Safari for OSX, Safari for iPhone, Chrome for iPhone, but on Edge and Safari for iPad nothing worked. So I opened it on Edge and inside the developer tools it was showing an error on the line where the load_one function was defined.
I wasn't sure what it was but the error said ) expected so I decided to remove the default values for the function parameters and everything worked all of a sudden. I am not sure if javascript has issues with default parameter values, but apparently some browsers have issues with that.

JQuery UI Autocomplete events and empty response

I'm using jQuery UI Autocomplete search and open events. But the open event is only called when the request is successful and there are elements. There does not seem to be an event when the response is successful but empty.
I display and hide a spinner logo when triggering the request, like this :
search: function() {
$('.spinner').show();
},
open: function() {
$('.spinner').hide();
}
This works well when there are elements in the server response but if the server response is empty the spinner stays forever...
Thanks for your answers.
PS : I'm not alone : remove spinner from jquery ui autocomplete if nothing found ;)
As of jQuery UI v1.9 you can do something like the following:
$('#field').autocomplete({
source: source_url,
search: function(event, ui) {
$('#spinner').show();
},
response: function(event, ui) {
$('#spinner').hide();
}
});
This is a known open enhancement for future versions of jQuery UI...
http://bugs.jqueryui.com/ticket/6777
Will have to wait and/or use a workaround (like sending a special response from the server and handle this case in the open event).
If you're stuck on an older version of jQuery ui, the right answer is to use the class ui-autocomplete-loading, which gets added and removed while the request/response is in flight.

Resources