SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript does not work in Chrome browser

    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. #2
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,898
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    The problem is this line:

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

    it should be:

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

    HTH

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.




    Quote Originally Posted by Pullo View Post
    Hi,

    The problem is this line:

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

    it should be:

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

    HTH

  4. #4
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,898
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Works for me in Chrome.

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

  5. #5
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.






    Quote Originally Posted by Pullo View Post
    Works for me in Chrome.

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

  6. #6
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As you asked I am posting the javascript function. Please ignore unnecessary codes

    Code:
    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. #7
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,898
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Thanks for posting the code, but I'm afraid you're missing the point

    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. #8
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am too finding it hard to make reproduceable static HTML code .

    because ...there are ajax calls.


    Quote Originally Posted by Pullo View Post
    Hi,

    Thanks for posting the code, but I'm afraid you're missing the point

    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.

  9. #9
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,898
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Ok, well can you post a link to the page you are working on?

  10. #10
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Ok, well can you post a link to the page you are working on?
    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. #11
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #12
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,898
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    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. #13
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    13
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #14
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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?
    No. That does not involve AJAX.

  15. #15
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,898
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Good morning,

    Quote Originally Posted by windowsxp View Post
    I am too finding it hard to make reproduceable static HTML code . because ...there are ajax calls.
    Quote Originally Posted by Pullo
    You have a hidden element ... blah, blah ... Does any of that involve AJAX?
    Quote Originally Posted by windowsxp View Post
    No. That does not involve AJAX.
    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 ...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •