We Keep Coding

ajax weird bahavior in url after deleting data in browsers cache

I have a C# Webservice which I'm contacting through URL to retrieve data. The Webservice is lying on a local server in our company network. For example: I have a specific function to get street names, the url to webservice is like this :
Request URL:http://10.1.1.32:8080/webportale_ger_webservice.asmx/SelectStreets
This URL is stored in localStorage.
After deleting browsers cache the request URL has changed, which makes absolutly no sense to me:
http://10.1.1.32:8081/nullSelectStreets
The port is wrong and what about that null?
After trying this request several times again, the url value changes to the correct value.
My jQuery ajax Request looks like this:
var UrlToWebservice = window.localStorage.getItem("url_to_webservice");
$(document).on("keyup", "#input_strasse", function () {
var inputStr = $('#input_strasse').val();
var charStr = inputStr.charAt(0).toUpperCase() + inputStr.substr(1);
console.log("buchstabensuppe: ", charStr)
$.ajax({
type: 'POST',
url: UrlToWebservice + 'SelectStreets',
data: { 'charStr': charStr },
crossDomain: true,
dataType: 'xml',
success: function (response) {
$("input_strasse_datalist").empty();
var strassen = new Array;
$(response).find('STRASSE').each(function () {
var strasse = $(this).find('NAME').text();
var plz = $(this).find('PLZ').find('plz').text();
var ort = $(this).find('PLZ').find('ORT').text();
var arstrasse = $(this).find('AR').first().text();
console.log("arstrasse ", arstrasse)
$("#input_strasse_datalist").append('<option data-ar = ' + arstrasse + ' value = "' + strasse + ' (' + plz + ', ' + ort + ')">' + strasse + ' (' + plz + ', ' + ort + ')</option>')
$("#input_plz").val(plz)
$("#input_ort").val(ort)
})
},
error: function () {
window.location.hash = "httperror";
}
})
})
The value in localStorage is: http://10.1.1.32:8080/webportale_ger_webservice.asmx/
What am I doing wrong?
Thanks a lot.

Kendo AutoComplete - keyboard navigation doesn't work anymore after custom rows

In order to display more data than just the product name alone I've changed the rendering of the AutoComplete control. The control renders exactly like intended, but when I use the arrow keys to navigate to a row it will not select a row by itself.
However, when hover over a row first and then start using the arrow keys it works just like it used to work and I can use enter so select. Only the highlighting is lacking.
I would like to achieve the following:
To get arrow down working straight after typing instead of having to hover over the rows first
To get the selected row to have a different style (like background color) so the user sees which row is selected
I have tried to intercept what AutoComplete does in terms of setting a class or style to the selected row but I wasn't successful in getting it to show what it does to the row as it will hide the moment I go into Firebug and other tools that achieve the same.
I also can't figure out why the first arrow down doesn't work. I assume the control can't find a row anymore now the layout got more complex by introducing the table with a head, but I'm not sure.
function CreateAutocompletes() {
$('[data-autocomplete]').each(function (index, element) {
var requestUrl = $(element).attr('data-action');
var elm = $(element).autocomplete({
minLength: 2,
source: function(request, response) {
var warehouseId = $('#WarehouseId').val();
$.ajax({
url: requestUrl,
dataType: 'json',
data: {
query: request.term,
warehouseId: warehouseId
},
success: function(data) {
response($.map(data, function(item) {
return {
value: item.Name,
realValue: item.ProductId,
label: item.Name,
ProductId: item.ProductId,
SKU: item.SKU,
Name: item.Name,
Stock: item.Stock,
Ordered: item.Ordered,
BulkOrdered: item.BulkOrdered,
Underway: item.Underway,
Surplus: item.Surplus
};
}));
}
});
},
select: function(event, ui) {
var hiddenFieldName = $(this).attr('data-value-name');
$('#' + hiddenFieldName).val(ui.item.ProductId);
$(this).parent().next().children().first().focus();
}
}).data("ui-autocomplete");
elm._renderItem = function (table, item) {
return $("<tr class='ui-menu-item'></tr>")
.append("<td><a>" + item.SKU + "</a></td><td><a>" + item.Name + "</a></td>" +
"<td><a>" + item.Stock + "</a></td><td><a>" + item.Ordered + "</a></td><td><a>" + item.BulkOrdered + "</a></td>" +
"<td><a>" + item.Underway + "</a></td>")
.appendTo(table);
};
elm._renderMenu = function(ul, items) {
var self = this;
ul.append("<table class='table table-striped'><thead><tr class='ui-menu-item'><th>" + Translations.SKU + "</th><th>" + Translations.Name + "</th>" +
"<th>" + Translations.Stock + "</th><th>" + Translations.Ordered + "</th><th>" + Translations.BulkOrdered + "</th><th>" + Translations.Underway + "</th>" +
"</tr></thead><tbody></tbody></table>");
$.each(items, function(index, item) {
self._renderItemData(ul.find("tbody"), item);
});
};
});
}
I only need to comment out elm._renderItem and elm._renderMenu to return to the previous behaviour and that works like intended.

After some more study I found out that it tries to set a class called ui-state-focus on the li-tag and the a-tag contained in it then gets a background and a border.
Since in the modified version above the a-tag was repeated a few times it might have choked on that. I have created an ugly hack that works by creating a faux table with spans with fixed widths, this even works with headers:
elm._renderItem = function (table, item) {
return $("<li role='option' class='option' style='width:920px'>")
.append("<a><div style='width:120px' >" +
item.SKU +
"</div><div style='width:500px; overflow:hidden'>" +
item.Name +
"</div><div style='width:70px'>" +
item.Stock +
"</div><div style='width:70px'>" +
item.Ordered +
"</div><div style='width:70px'>" +
item.BulkOrdered +
"</div><div style='width:70px'>" +
item.Underway +
"</div></a></li>")
.appendTo(table);
};
elm._renderMenu = function(ul, items) {
var self = this;
ul.append("<li class='autocomplete-header'><div style='width:120px'>" +
Translations.SKU +
"</div><div style='width:500px;overflow:hidden'>" +
Translations.Name +
"</div><div style='width:70px'>" +
Translations.Stock +
"</div><div style='width:70px'>" +
Translations.Ordered +
"</div><div style='width:70px'>" +
Translations.BulkOrdered +
"</div><div style='width:80px'>" +
Translations.Underway +
"</div></li>");
$.each(items, function(index, item) {
self._renderItemData(ul, item);
});
};
It's not pretty and probably you should do the column widths with a class instead of hard-coded values but this at least should get you on the way if you experience the same problem.
If there's a better solution I would like to hear it!

sometimes ajax works & sometime not & click on row function is also not working

can we write two ajax success function on same page because sometimes its work sometime not
doajaxpost function is to load data in 2nd dropdown list when 1st dropdown list onchange function call by using ajax
and searching function is to load data in table by using ajax
but it sometime get execute properly sometimes not showing any result
function doAjaxPost(instituteId) {
alert(instituteId);
// get the form values
/* var name = $('#name').val();
var education = $('#education').val(); */
$.ajax({
type : "POST",
url : "/paymentGateway/merchant",
dataType : "json",
data : "institutionId=" + instituteId,
success : function(data) {
// we have the response
alert(data + "hiee");
var $merchantId = $('#merchant');
$merchantId.find('option').remove();
$("#merchant").append("<option value='ALL'>ALL</option>");
$.each(data, function(key, value) {
$('<option>').val(value.merchantId).text(value.merchantId)
.appendTo($merchantId);
});
},
error : function(e) {
alert('Error: ' + e);
}
});
}
function searching() {
// get the form values
var institutionId = $('#instiuteId').val();
var merchantId = $('#merchant').val();
var userType = $('#userType').val();
var userStatus = $('#userStatus').val();
var userId = $('#userId').val();
alert("insti=" + institutionId + "mecrhant=" + merchantId + "usertyep="
+ userType + "users=" + userStatus + "userid=" + userId);
$.ajax({
type : "POST",
url : "/paymentGateway/searching",
dataType : "json",
data : {
institutionId : institutionId,
merchantId : merchantId,
userId : userId,
userStatus : userStatus,
userType : userType
},
success : function(data) {
// we have the response
alert(data);
/* var $merchantId = $('#dynamictable');
$merchantId.find('table').remove();
$('#dynamictable').append('<table></table>');
var table = $('#dynamictable').children(); */
$("#tablenew tbody tr:has(td)").remove();
$.each(data, function(key, value) {
/* alert(value.institutionId); */
$('#tablenew tbody:last').append(
"<tr><td>" + value.userId + "</td><td>"
+ value.firstName + "</td><td>"
+ value.userStatus + "</td><td>"
+ value.userType + "</td><td>"
+ value.userAddedBy + "</td><td>"
+ value.userRegisteredDateTime
+ "</td><td>" + value.recordLastUpdatedBy
+ "</td><td>" + value.recordLastUpdatedTime
+ "</td></tr>");
});
},
error : function(e) {
alert('Error: ' + e);
}
});
}

It could be a caching issue, try to setup
$.ajaxSetup({ cache: false });
See
How to prevent a jQuery Ajax request from caching in Internet Explorer?

I got the same problem. You'll have to use the class instead of ID to make it work. Use $(".merchant") to replace $("#merchant"), and update 'merchant' to be a class.

How can I pass xml to another function?

I need var order to give me xml and in the onclick function I want to pass this xml to matte_design_change(). Right now when I do, what outputs when I call console.log it gives me "[object Object]" with nothing else.
I have the following code:
function matte_design_change_design_type(element)
{
var selected_type = element.options[element.selectedIndex].value;
$(document).ready(function()
{
$.ajax({
type: "GET",
url: SITE_URL + "/system/components/xml/" + selected_type,
dataType: 'xml',
success: function(xml) {
var output = [];
$('component', xml).each(function(i, el) {
var thumb = $("thumb", this).text();
var cid = $("cid", this).text().replace("[DEFAULT_MATTE_CID]", "");
var order = $("Order", this); //I want this to be xml
output.push('<img id="cid_' + cid + '" src="' + SITE_URL + '/system/components/compimg/' + thumb + '/flashthumb" alt="' + cid + '" onclick="matte_design_change(\'' + cid + '\', \'' + thumb + '\', \'' + order + '\');" />'); // I want to pass order as xml to matte_design_change
$('#matte_designs_strip_wrapper').html(output.join(''));
});
}
});
});
}
function matte_design_change(cid, thumb, order)
{
$( "#frame_window" ).empty();
var imageObj = new Image();
imageObj.onload = (function()
{
document.getElementById("frame_window").appendChild(imageObj);
});
imageObj.id = "matte_" + cid;
imageObj.src = SITE_URL + '/system/components/compimg/' + thumb + '/full_thumb';
console.log(order);
}

You should be able to easily convert the XML to a string, and then pass it as a parameter. Many examples around; this one might serve:
http://jonahacquah.blogspot.it/2012/03/convert-xmldocument-to-xml-string-in.html

Can't Grab Query String in JavaScript

We were provided function getQueryStringVariableByItemID for our project and are using function getData to use a web service for a game's details from a games table. We believe the getData part is working fine since we use a similar POST on another page. Is getQueryStringVariableByItemID not properly grabbing the query string?
We call getData with the body tag of html as onload="getData()". Many thanks in advance!
Code:
<script type="text/javascript">
function getQueryStringVariableByItemID(ItemID) {
//use this function by passing it the name of the variable in the query
//string your are looking for. For example, if I had the query string
//"...?id=1" then I could pass the name "id" to this procedure to retrieve
//the value of the id variable from the querystring, in this case "1".
ItemID = ItemID.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + ItemID + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.search);
if (results == null)
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
function getData() {
var ItemID = getQueryStringVariableByItemID(ItemID)
$.ajax({
type: "POST",
url: "./WebServiceTry.asmx/GetGameDetails",
data: "{'ItemID': '" + escape(ItemID) + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var data = response.d;
$('#output').empty();
$.each(data, function (index, item) {
var Title = item.Title
var Price = "$" + item.Price
var Year = "Year: " + item.Year
var Developer = "Developer: " + item.Developer
var Platform = "Platform: " + item.Platform
$('#output').append('<li>' + Title + '</li>');
$('#output').append('<li>' + Price + '</li>');
$('#output').append('<li>' + Year + '</li>');
$('#output').append('<li>' + Developer + '</li>');
$('#output').append('<li>' + Platform + '</li>');
$('#output').listview('refresh');
});
},
failure: function (msg) {
$('#output').text(msg);
}
});
}
</script>

The ItemID you are passing in the getData(while calling inside the getData) should be undefined because the function doesnt have that variable.Pass a valid id and it will work fine