www.webdeveloper.com
Results 1 to 9 of 9

Thread: differences beetween browsers

  1. #1
    Join Date
    Apr 2010
    Location
    Athens, Greece
    Posts
    32

    differences beetween browsers

    Hello everybody. I'm new here and I would really need some help.
    I have a form which sends SMS to mobiles. Inside this form there is a button that makes a hidden div visible with data coming with ajax (contacts of the user). This data is inside a form which is inside a table all made with javascript. So we choose the contacts that we want to send the sms (with checkboxes) and then click on another button which will put the data of the choosen contacts inside my first form and hide the div. So when this button is clicked, it's going to a function. The first thing I want is to get the length of the form of the hidden/visible div and I'm doing this with an alert(document.contact_form.length) to see if it is there. In mozilla this alert does not work.An alert with a string works fine so it goes to the function.
    In chrome and safari works but the problem here is that it completes the first form!!! that sends the SMS and stores the data in the database.?.

    Could anybody help me or if you know where I could search for these kind of differences?

  2. #2
    Join Date
    Aug 2007
    Posts
    3,767
    Quirksmode is the place for all your compatibility problems.

    If you show us code, we might be able to help however.
    Great wit and madness are near allied, and fine a line their bounds divide.

  3. #3
    Join Date
    Apr 2010
    Location
    Athens, Greece
    Posts
    32
    Thanks for reply.

    I'm sending the code.
    HTML Code:
    <div id="content_sms">
    			<div id="sms_create">
    				<?php if (!empty($message)) { echo "<p class=\"message\">$message</p>"; }?>
    				<form action="create_sms.php" method="post" name="sms_form">
    					<label><input class="small" type="hidden" id="user_mobile" name="user_mobile" value="<?php echo $user_mobile; ?>"/></label>
    					<label><input class="small" type="hidden" id="mycosmos_psw" name="mycosmos_psw" value="<?php echo $mycosmos_psw; ?>"/></label>
    					<label><button name="theButton" type="button" onclick="clicked()">Επιλογή επαφής:</button> <input id="contact" class="top" type="text" name="contact" onfocus="hideDiv()"/></label>
    					<label><span>Τηλ.αποστολής: </span><input id="mobile" class="small" type="text" name="mobile" maxlength="10" onkeyup="return ismaxlength(this)"/></label>
    					<label><span>Θέμα: </span><input class="small" type="text" name="subject" maxlength="30" onkeyup="return ismaxlength(this)" /></label>
    					<label><span>Κείμενο αποστολής: </span><textarea name="sms_text" id="sms_text" maxlength="140" rows="5" cols="30" onkeyup="return ismaxlength(this)"></textarea></label>
    					<label><input class="send_button" type="submit" name="submit" value="Αποστολή" onclick="sendClicked()" />
    				</form>
    				<div id="ajax_results"> &nbsp;&nbsp;&nbsp;&nbsp; </div>
    			</div>
    		</div>
    javascript
    Code:
    function clicked() {
    	if (display) {
    		var hiddenDiv = document.getElementById("ajax_results");
    		hiddenDiv.style.display = "block";
    		
    		var selNum = "";
    		var result = "";
    		result = result + "<form name=\"contact_form\">";
    		result = result + "<table id=\"the_table\"><caption>Επιλογή Επαφής</caption>";
    		
    		var x = xmlDoc.getElementsByTagName("contact");
    		for (var i=0;i<x.length;i++) {
    			selNum = i;
    			result = result + "<tr><td><input type=\"checkbox\" name=\"select\" value=\"" + selNum + "\" </td><td>" 
    			+ x[i].getElementsByTagName("nickname")[0].childNodes[0].nodeValue + "</td><td>" 
    			+ x[i].getElementsByTagName("mobile")[0].childNodes[0].nodeValue + "</td></tr>";
    			}
    		result = result + "<tr><td colspan=\"3\"><input type=\"button\" name=\"insert\" value=\"Επιλογή\" onclick=\"insert_mobile()\"/></td>";
    		result = result + "<tr><td colspan=\"3\" onclick=\"hideDiv()\">Κλείσιμο Παραθύρου</td></tr>"
    		result = result + "</table></form>";
    		
    		document.getElementById("ajax_results").innerHTML = result;
    		display = false;
    	}
    	else {
    		hideDiv();
    	}
    }
    
    function hideDiv() {
    	var hiddenDiv = document.getElementById("ajax_results");
    	hiddenDiv.style.display = "none";
    	display = true;
    }
    
    function insert_mobile() {
    	alert(document.contact_form.elements.length);
    }
    I'll also look at the link you told me to see what I can find.

  4. #4
    Join Date
    Apr 2010
    Location
    Athens, Greece
    Posts
    32
    Think I found what is going on. I asked the alert to bring me the elements of the sms_form, the one that contains the button which calls the clicked() function.
    In chrome and safari shows me the number 8 meaning the exact elements I have in my HTML in sms_form.
    In mozilla it gives me number 13 meaning the elements in sms_form plus the elements in contact_form.
    So I think I will have to make different script for each one of them. Right?

    Thanks a lot anyway and I will need you again pretty soon I think.

  5. #5
    Join Date
    Aug 2007
    Posts
    3,767
    I don't see you calling that function anywhere. The button (as far as I can see anyway) calls sendClicked, while the function you've shown us is clicked.
    Great wit and madness are near allied, and fine a line their bounds divide.

  6. #6
    Join Date
    Apr 2010
    Location
    Athens, Greece
    Posts
    32

    Thumbs up

    It is called in the third line of labels
    <label><button name="theButton" type="button" onclick="clicked()">
    After all the code is working fine with safari and chrome but not with mozilla.

    Mozilla does not see this form. It adds the elements of this form in the sms_form. Strange?

    If you could stay with me for a little while because I'm dealing with other problems with the same code. I'll go home in the afternoon and write them.

    Thank you.

  7. #7
    Join Date
    Aug 2007
    Posts
    3,767
    Personally, I would use <input type="button"> instead of <button> and form.getElementsByTagName("input"). But I don't know exactly why yours is going wrong.
    Great wit and madness are near allied, and fine a line their bounds divide.

  8. #8
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by fouskalex View Post

    Mozilla does not see this form. It adds the elements of this form in the sms_form. Strange?
    Not quite very strange. innerHTML is not a standard DOM method. It is unpredictable: it will not always add the new elements into the DOM tree. You should probably switch to DOM methods, instead of innerHTML.

  9. #9
    Join Date
    Apr 2010
    Location
    Athens, Greece
    Posts
    32
    The <input type="button"> creates a text input. I read somewhere that browsers that don't understand script will do that. I don't really understand what it means. As for the DOM method I think I'm going to try it.

    The other problem I have is with safari and chrome.
    I'm attaching the hole script if you can find anything.

    javascript
    Code:
    var xmlhttp;
    var xmlDoc;
    var display = true;
    var BrowserName;
    window.onload = init;
    
    function init() {
    	var IsBrowser = navigator.userAgent;
    	if (IsBrowser.indexOf("Firefox") >= 0) {
    		BrowserName = "Firefox";
    	}
    	else if (IsBrowser.indexOf("Safari") >= 0){
    		BrowserName = "Safari";
    	}
    	//alert(BrowserName);
    	xmlhttp = new XMLHttpRequest();
    	xmlhttp.onreadystatechange = stateChanged;
    	url = "select_contact_ajax.php";
    	xmlhttp.open("GET",url,true);
    	xmlhttp.send(null);
    }
    	
    function stateChanged() {
    	if (xmlhttp.readyState==4) {
    	  xmlDoc = xmlhttp.responseXML;
    	  }
    }
    	
    
    function clicked() {
    	if (display) {
    		var hiddenDiv = document.getElementById("ajax_results");
    		hiddenDiv.style.display = "block";
    		
    		var selNum = "";
    		var result = "";
    		result = result + "<form name=\"contact_form\">";
    		result = result + "<table id=\"the_table\"><caption>Επιλογή Επαφής</caption>";
    		
    		var x = xmlDoc.getElementsByTagName("contact");
    		for (var i=0;i<x.length;i++) {
    			selNum = i;
    			result = result + "<tr><td><input type=\"checkbox\" name=\"select\" value=\"" + selNum + "\" </td><td>" 
    			+ x[i].getElementsByTagName("nickname")[0].childNodes[0].nodeValue + "</td><td>" 
    			+ x[i].getElementsByTagName("mobile")[0].childNodes[0].nodeValue + "</td></tr>";
    			}
    		result = result + "<tr><td colspan=\"3\"><input type=\"button\" name=\"insert\" value=\"Επιλογή\" onclick=\"insert_mobile()\"/></td>";
    		result = result + "<tr><td colspan=\"3\" onclick=\"hideDiv()\">Κλείσιμο Παραθύρου</td></tr>"
    		result = result + "</table></form>";
    		
    		document.getElementById("ajax_results").innerHTML = result;
    		display = false;
    	}
    	else {
    		hideDiv();
    	}
    }
    
    function hideDiv() {
    	var hiddenDiv = document.getElementById("ajax_results");
    	hiddenDiv.style.display = "none";
    	display = true;
    }
    
    function insert_mobile() {
    
    	var selectedContacts = new Array();
    	var selectedMobiles = new Array();
    	
    	if (BrowserName == "Firefox") {
    		var formLength = document.sms_form.elements.length;
    		var element = document.sms_form.elements;
    	}
    	else if (BrowserName == "Safari") {
    		var formLength = document.contact_form.elements.length;
    		var element = document.contact_form.elements;
    	}
    	
    	var j = 0;
    	
    	for (var i = 0; i < formLength; i++) {
    		if (element[i].type == "checkbox") {		
    			if (element[i].checked == true) {
    				selectedContacts[j] = document.getElementsByTagName("tr")[i].childNodes[1].innerHTML;
    				selectedMobiles[j] = document.getElementsByTagName("tr")[i].childNodes[2].innerHTML;
    				j++;
    			}
    		}
    	}	
    	
    	alert(selectedContacts.length);	
    	alert(selectedContacts[1]);	 
    	//document.getElementById("contact").value = selectedContacts[1];
    	//document.getElementById("mobile").value = selectedMobiles[1];
    	
    	//hideDiv();
    
    }
    In Saf, Chr when I click the button name="select" which is created inside clicked(), it executes the insert_mobile() function, then it executes the hole script from the begging (the init() function), and then it goes to PHP as if I clicked the submit button in sms_form and tries to store the non existing data into my database.

    In mozilla it executes the insert_mobile() function only if I don't choose any of the contacts, it does't exexute the hole script again but if I choose contacts it does nothing.

    I think I'm going very deep for a begginer.
    Thanks anyway for your time.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles