My first post
Im trying to call a rest webservice to populate my lov's dynamically using AJAX. It works fine for me in IE8 but not in chrome. I couldn't reach a particular line while executing that I mentioned in the below code. Am i missing anything. Please help.
07-24-2012 - I found the root cause for this issue. Its because of the application cache code specified in the html code. once i remove that the ajax call works fine. But my need is to make this page available in offline mode. Any suggestion on this to make the page available offline and also the ajax webservice calls works fine?. Thanks,
<script type="text/javascript">
var eleCount;
var xmlDoc;
function init() {
eleCount =0;
}
function populate()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
alert("Window for chrome");
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
alert("Else Window for IE");
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
}
var url = "http://localhost:7101/Mobile-MobileModel-context- root/jersey/Search/searchLov";
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var det = xmlhttp.responseText ;
if (window.DOMParser)
{
//I cannot reach this line while executing.
alert("This alert is not appearing");
var parser=new DOMParser();
xmlDoc=parser.parseFromString(det,"text/xml");
var x=xmlDoc.getElementsByTagName("fieldValue");
var txta =new Array();
....some code
}
}
else // Internet Explorer
{
alert("else window DOM parser for IE");
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(det);
...... some code
} // end for
} //end else for Other Browser (window.DOMParser)
} //end if Readystate 4 and Status 200
else{
}//else
}//close OnReadyStatechange Function
xmlhttp.open('GET',url,true);
xmlhttp.send(null);
eleCount = eleCount + 1;
}//end Function Populate()
</script>
I made it working -- The problem arises whenever i added this line
<HTML manifest=../../demo.appcache> This code will download the files mentioned in the manifest file to the browser's application cache. When I remove this line the rest calls are working fine.
Related
<script type="text/javascript">
function fun1(){
var xmlHttp;
try {// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
var respText = xmlHttp.responseText.split('<body>');
elem.innerHTML = respText[1].split('</body>')[0];
$("#st-content").show();
}
}
var ur='Tips.action';
xmlHttp.open("GET", ur, true);
xmlHttp.send(null);
}
</script>
Actually i have 2 jsps.one for inserting and another for viewing the inserted records.
The inserting jsp page appears in popup.after submitting the form the inserted record should be viewed in another jsp without page refresh.
How can i achieve this?please anyone guide me to complete this task
ajax success response you can replace response text to the popup current html code or a div code
$('.sizeSelect').change(function(size) {
sizeId = $(this).attr('id');
size = $('#' + sizeId).val();
lastChar = sizeId.substr(5);
addBtn = "#btn_" + lastChar;
shipId = "shipping_" + lastChar;
if (size=="")
{
document.getElementById(shipId).innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(shipId).innerHTML=xmlhttp.responseText;
var response = xmlhttp.responseText;
if (response == 0.00) {
$(addBtn).addClass('invisible');
}
else if (response > 0.00) {
$(addBtn).removeClass('invisible');
}
}
}
xmlhttp.open("POST","cart.php?size="+size+"&shipId="+lastChar, true);
xmlhttp.send();
});
Can anyone tell me why this works in Chrome, Firefox and safari and not in IE. I read somewhere that it had to do with forcing ie not to cache and that changing the the request from a get to a post would help... it didnt :(
Any ideas?
Have you tried using jQuery? Have you checked how IE is handling the response - perhaps it sees "0.00" as text you have to parseFloat?
the trick is use separate code XML for IE browsers or that are version of less than 10 .
so every time Ajax is call a method parseXml is called with input parameter XML Dom or text, depending on browser .... and if current browser is IE, it upload XML doc, process it according to Microsoft standards and return XML and rest of processes in Ajax carries on as expected!!
note : browser.msie is not supported in jQuery 1.9 but you can add jquery-migrate-1.2.1.min.js in order to make it compatible or use userAgent and find which is current browser
$.ajax({
type: 'GET',
url: 'XML_file.xml',
dataType: ($.browser.msie) ? "text" : "xml",
success: function (xml) {
var processedXML = parseXml(xml);
$(processedXML).find('my record').each(function () { //code }
});
function parseXml(xml) {
if ($.browser.msie) {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "XML_file.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
xml = xmlDoc;
}
return xml;
}
I have put together some code from various sources but javascript is somewhat unknown to me and I only seem to fail with the code I have so far..
What I want to do is convert every normal link on the page to ajax links and load the pages through ajax.
So far I only succeeded to transform the links from the initial page and load the content in a div. The problem is I don't have access to the content is loading in the div and the new content still has normal links instead of ajax.
Is there a way I can convert the new links within the content loaded in the div, every time the div changes?
Also what I don't know is, if the user clicks on the home button in the menu, it will load the content of index along with this script, and everything will become a loop. How can I prevent the code from loading in index if it loads inside the div?
If you suspect any other problems it may occur from this code can you please advice me what to change?
This is the code I have so far..
Thank you very much for any advice!
Inserted in the head tag:
<script type="text/javascript">
var xmlhttp;
if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }
else if(window.ActiveXObject){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
else{ }
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4)
{ document.getElementById("contentarea").innerHTML = xmlhttp.responseText; }
else{ document.getElementById("contentarea").innerHTML = ""; }
}
function loadPage(url){
document.getElementById("contentarea").innerHTML = "";
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
</script>
Inserted somewhere in the body:
<div id="contentarea"></div>
Inserted right before the body ends:
<script>
var oP = document.getElementsByTagName("a");
var ctr=0;
while(ctr < oP.length){
var oldHref = document.getElementsByTagName("a")[ctr].href;
document.getElementsByTagName("a")[ctr].href="javascript:loadPage('"+oldHref+"');";
ctr++;
}
</script>
here ja go.. whipped this up for you.. you can use document.links to get all anchor tags. I'm doing this on 'contentArea' only. Everything inside (function () { will only be called when the document is ready. Then, in the onreadystatechange event I call the function again to set the click event on any anchors that are returned in the resposne.
<script type="text/javascript">
var xmlhttp;
function loadPage(url){
document.getElementById("contentarea").innerHTML = "";
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
var parseAnchors = function(){
var anchors = document.getElementById("contentarea").links; // your anchor collection
var i = anchors.length;
while (i--) {
var anchor = anchors[i];
anchor.onclick = (function(url) {
return function() {
loadPage(url);
return false;
};
})(anchors[i].href);
anchor.href = "#";
}
};
(function () {
if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }
else if(window.ActiveXObject){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
else{ }
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4)
{ document.getElementById("contentarea").innerHTML = xmlhttp.responseText; }
else{ document.getElementById("contentarea").innerHTML = ""; }
parseAnchors();
}
window.onload = function () {
parseAnchors();
}
</script>
I am having problems with using Ajax and Fancybox.js photo viewer together.
I have a website set up first as web 1.0 with the standard navigation with hyperlinks.
but for html5 browsers I'm am using javascript that creates a web 2.0 experience.
The javascript first highjacks the links onclick event which makes a XMLHttpRequest that calls a php script that parses the html and sends back just the part of the html that I want to replace. I am using pushState and popState to get the back and forward buttons to function.
It is working great, it creates the Ajax effect, while persevering all the advantages of web 1.0 including SEO, because the links as far as the search engine spiders are concerned the links are just standard links to standard html pages.
The problem is that one of the pages uses Fancybox.js to show photos, it works fine when the page is accessed via the standard url, but when the html is accessed via the Ajax scripts if breaks it.
Here is code for the Ajax,
if (history.pushState) {
function changeContent(url) {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
document.getElementById('content').innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "getContents.php?url=" + url, true);
xmlhttp.send();
}
$(document).ready(function() {
var elems = null,
links = null,
link = null,
i;
elems = document.getElementById('nav');
links = elems.getElementsByTagName('a');
if (links) {
for (i = 0; i < links.length; i++) {
links[i].addEventListener("click", function(e) {
url = $(this).attr("href");
var pathArray = window.location.pathname.split( '/' );
var n = pathArray.length;
changeContent(url);
history.pushState(null, null, url);
e.preventDefault();
var urlstr = window.location,
index = /index/g,
program = /program/g,
photos = /photos/g,
testimonials = /testimonials/g,
about = /about/g,
contact = /contact/g;
if (program.test(urlstr)){
changeCurrentPage('#program');
document.title = "Our Programs Kolibri Daycare";
}else if (photos.test(urlstr)){
changeCurrentPage('#photos');
document.title = "Photos Kolibri Daycare";
slideShow();
}else if (testimonials.test(urlstr)){
changeCurrentPage('#testimonials');
document.title = "Tesimonials Kolibri Daycare";
}else if (about.test(urlstr)){
changeCurrentPage('#about');
document.title = "About Kolibri Daycare";
}else if (contact.test(urlstr)){
changeCurrentPage('#contact');
document.title = "Contact Kolibri Daycare";
}else {
changeCurrentPage('#home');
document.title = "Kolibri Daycare";
}
}, false);
}
}
window.setTimeout(function() {
window.addEventListener("popstate", function(e) {
var pathArray = window.location.pathname.split( '/' );
var n = pathArray.length;
if (pathArray[n-1]){
changeContent(pathArray[n-1]);
}else {
changeContent('index.html');
}
}, false);
}, 1);
});
}
and her is the script that calls Fancybox.js,
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$("a[rel=example_group]").fancybox({
'overlayShow' : false,
'cyclic' : true,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
//]]>
</script>
It is in the head section of the page.
When the html that has the photo links is brought in via Ajax the script that calls fancybox.js is not included. I have tried calling it in different places but nothing seems to work. Does anyone have any ideas?
You need to re-initialize fancybox on the new elements added from ajax. I'm not sure why you don't just upgrade the entire page to HTML5 and use some of the ajax functions provided by jQuery, but I think the re-initialization should be inserted after this line (not tested!):
document.getElementById('content').innerHTML = xmlhttp.responseText;
$('#content').find("a[rel=example_group]").fancybox();
I have a bit of code which alerts the $response from a php code in IE, but for some reason it doesn't work in FF..
Here's the code:
function contactfunction() {
var url = "scripts/php/cbb.php?pname=";
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = updatecontact1;
xmlHttp.send(null);
}
function updatecontact1() {
if (xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
alert(response);
}
}
And here's the PHP file (cbb.php)
<?php
$fp=fopen("ip.txt","a+");
fwrite($fp, "cib\r\n");
fclose($fp);
$response = "something";
return $response;
?>
Can anyone help me out here? I'm not sure how to get it to work in FF, it just gives a blank popup..
Do yourself a favour, and use one of the many ajax capable Javascript libraries out there, like jQuery, which frees the user from hacking up code to deal with browser discrepancies (for the most part, at least):
//using jQuery's $.get method
function update(name) {
$.get('cbb.php?name=' + name, function(response) {
alert(response);
$('#someDiv').html(response);
});
}
or:
//using jQuery's $.load method
function update(name) {
//directly inject div id="someDiv" with output of url
$('#someDiv').load('cbb.php?name=' + name);
}
Putting it together:
//when the DOM is ready
$(document).ready(function() {
//bind to click event of all anchors with class="contact"
$('a.contact').click(function(e) {
//stop the link from being followed
e.preventDefault();
//get the name from the link text
var name = $(this).text();
update(name);
});
});
Timmy
McLovin
<div id="someDiv">This is where the output will be injected</div>
See http://docs.jquery.com/Ajax for more information.
I managed to get the code working by using:
function getFile(fileToOpen) {
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else if (window.ActiveXObject) {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Your browser does not support XMLHTTP!");
}
xmlhttp.open("GET",fileToOpen,false);
xmlhttp.send(null);
alert( xmlhttp.responseText );
}
function contactfunction() {
getFile('scripts/php/cbb.php?pname=');
}
If anyone else has the same problem :)