Javascript does not work in Chrome browser

JavaScript
1

I have a DIV whoose ID is div_background. . I am doing a show/hide of this DIV using javascript.

Here is the relevant code outlined…

HTML:

<div id=“div_background” class=“ModalBackground”>
<div style=“margin-left:50% ; margin-top:25% ;”><img src=“images/status.gif” width=“100” height=“100”/></div>
</div>

STYLE:

<style>
.ModalBackground {
background-color: #6D7B8D; /* Blue Slate Gray */
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
min-height: 100%;
min-width: 100%;
filter: alpha(opacity = 50);
opacity: 0.5;
-moz-opacity: 0.5;
z-index: 500;
display: none;
}
</style>

JAVASCRIPT

function getUserInfo(){
divDisplay(‘div_background’);

…
…
}

function divDisplay(divId) {
alert(‘divId=’+divId);
document.getElementById(divId).style=“display.block”;
}

issue: Whenever getUserInfo is invoked DIV is displayed in FIREFOX but the same does not work in CHROME.

What is the issue here with CHROME ? How to fix it ?

2

Hi,

The problem is this line:

document.getElementById(divId).style="display.block";

it should be:

document.getElementById(divId).style.display="block";

HTH

3

No…still it does not work.

Could you please test this out at your end in Chrome ?

I tested both way…it does not work.

4

Works for me in Chrome.

Could you post enough code for us to reproduce your issue.
You can use this template.

5

if I put alert here in javascript …then only background visible in Chrome …but I don’t need such alert in Firefox to get visible.

function getUserInfo(){
divDisplay(‘div_background’);
alert(‘test’) // this pauses excution …and background becomes visible now in Chrome …but in Firefox it works without alert.
…
…

Do you find any reason here ? I could post the code but that will confuse you more…because of unnecessary codes.

I have narrowed down the problem area …this is where it differentiates between firefox and chrome…see if I put a alert as shown Chrome will show you background …but firefox does not require any alert to show background.

6

As you asked I am posting the javascript function. Please ignore unnecessary codes


function getUserInfo(){
    	divDisplay('div_background');
    	//alert('test');
    	$('#msg_basic_reservation_id').empty();
		var usernic=$('#usernic_id').val();

		if (usernic == "" || usernic.trim() == "") {
			$('#msg_basic_reservation_id').html("<s:text name='page.reservation.makeReservation.blankNIC'/>");
			divHide('div_background');
			return;
		}
		
    	var locksessionid=$('#lockSessionID_hid').val();
    	var startDateStr =$('#startDateStr_hid').val();
    	var endDateStr=$('#endDateStr_hid').val();
    	
		$('#name_id').val("");
	    $('#address_id').val("");
	    $('#telephonenumber_id').val("");
	    $('#mobilenumber_id').val("");
	    $('#email_id').val("");
	    
	    
		$.ajax({
			url :"<%= request.getContextPath()%>/AjaxServlet?method=getPersonDetail&endDateStr="+endDateStr+"&startDateStr="+startDateStr+"&locksessionid="+locksessionid+"&usernic="+usernic,
			async: false,
			cache : false,
			type: 'GET',
			success:function(xml)
		 	{
			    
				var NICAvailable=$(xml).find('NICAvailable').text();
				var validNIC=$(xml).find('validNIC').text();
				
				if(NICAvailable=="true" && validNIC=="true"){
					var name=$(xml).find('name').text();
				    var address=$(xml).find('address').text();
				    var telephone=$(xml).find('telephone').text();
				    var mobileNo=$(xml).find('mobileNo').text();
				    var email=$(xml).find('email').text();
				    
				    $('#name_id').val(name);
				    $('#address_id').val(address);
				    $('#telephonenumber_id').val(telephone);
				    $('#mobilenumber_id').val(mobileNo);
				    $('#email_id').val(email);
				}
				
				if(NICAvailable=="true" && validNIC=="false"){
					$('#msg_basic_reservation_id').html("<s:text name='page.reservation.makeReservation.invalidNIC'/>");
				}
				
				if(NICAvailable=="false" && validNIC=="false"){
					$('#msg_basic_reservation_id').html("<s:text name='page.reservation.makeReservation.infoNotAvailable'/>");
				}
				
			}

		});
		divHide('div_background');
	}

This works in Firefox i.e div is shown…but div is not shown in Chrome

7

Hi,

Thanks for posting the code, but I’m afraid you’re missing the point :frowning:

What I need is some code that I can copy into a file on my computer and run, so as to reproduce your problem.

You should strip out the unnecessary JavaScript, content and styles.

You can use this template.

Doing it this way helps us to pinpoint the problem.

8

I am too finding it hard to make reproduceable static HTML code .

because …there are ajax calls.

9

Ok, well can you post a link to the page you are working on?

10

Its on local system …not hosted. …so you may not be able to access.

I can attach JSP page if you want though. Does it help ?

11

alternatively , by looking at the code if you suggest me diagnostics , I may come up with results …which could possibly be helpful to resolve this issue.

12

Well, to summarize the situation:
You have a hidden element: <div id="div_background" class="ModalBackground">
You want to call the function getUserInfo(), which in turn should call the function divDisplay(), passing it the id of the element to display.
divDisplay() should then display the element, but this isn’t working in Chrome.

Does any of that involve AJAX?

13

You call this at the end of getUserInfo: divHide(‘div_background’)

Could that be the problem? It seems to be hiding it as soon as it displays. The reason it works with the alert is because it pauses the code so it can’t call divHide() yet.

You seem to be using jQuery, so why not just use $(‘#div_background’).show() ?

14

No. That does not involve AJAX.

15

Good morning,

Ok then, please try to isolate the code which illustrates your problem, but is not working for you and post an example of that.
It doesn’t matter if you post a bit too much JS, but it would help to see when the function is getting called, what exists on the page when it is called, that sort of thing …