SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 48
  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post not able to capture value in Chrome and Firefox.

    Dear All,
    I have form where I add dynamic html element as below. In the php code (getMasterList.php) via ajax I have built the full drop down list. So when I post the form in IE when I do like this $masterID=$_POST['masterID']; I am able to capture the form value. But in both firefox and chrome it shows me empty. Any solution please?

    PHP Code:
    function getMaster(entID,nextElement

    var 
    table document.getElementById('myTable'); 
    var 
    rowCount table.rows.length
    //alert("Row count : "+rowCount); 

    if(rowCount>2

    for(var 
    i=2i<rowCounti++) 

    var 
    row table.rows[i]; 

    table.deleteRow(i); 
    rowCount--; 
    i--; 



    differentiator=Math.floor(Math.random()*50000); 
    //if (str=="") 
    // { 
    // document.getElementById("cbTrailerList").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==&& xmlhttp.status==200

    //alert("Test : "+xmlhttp.responseText); 
    //document.getElementById("cbTrailerList").innerHTML=xmlhttp.responseText; 
    var x=document.getElementById('myTable').insertRow(2); 
    var 
    y=x.insertCell(0); 
    var 
    z=x.insertCell(1); 
    y.innerHTML="<label class=description for=element_1>Master <font color='red'>*</font></label> "
    z.innerHTML=xmlhttp.responseText
    var 
    a=document.getElementById('myTable').insertRow(3); 
    var 
    b=a.insertCell(0); 
    var 
    c=a.insertCell(1); 
    b.innerHTML=""
    c.innerHTML="<p class=error id='masterIDError'>"

    if(
    nextElement=="trailer"

    getTrailer(entID); 

    else 

    getSlaves(entID); 




    xmlhttp.open("GET","getMasterList.php?e="+entID+"&d="+differentiator,true); 
    xmlhttp.send(); 




  2. #2
    Twitter: @AnthonySterling silver trophy AnthonySterling's Avatar
    Join Date
    Apr 2008
    Location
    North-East, UK.
    Posts
    6,111
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    You're using GET, but it sounds like you need to use POST in your request to getMasterList.php.
    @AnthonySterling: I'm a PHP developer, a consultant for oopnorth.com and the organiser of @phpne, a PHP User Group covering the North-East of England.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    innerHTML has several limitations.

    Here's one possible solution
    DOMscripting: Fixing innerHTML
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Do you think below is right I have tried to adapt based on your example.

    var newdiv = document.createElement("div");
    newdiv.innerHTML = xmlhttp.responseText;
    //var container = document.getElementById("container");
    //container.appendChild(newdiv);

    y.innerHTML="<label class=description for=element_1>Master <font color='red'>*</font></label> ";
    //z.innerHTML=xmlhttp.responseText;

    z.appendChild(newdiv);

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Let's get rid of those commented-out lines and see if things make sense.

    Code:
    var newdiv = document.createElement("div");
    newdiv.innerHTML = xmlhttp.responseText;
    y.innerHTML="<label class=description for=element_1>Master <font color='red'>*</font></label> "; 
    z.appendChild(newdiv);
    Assuming that y and z are meaningful locations, it seems okay.

    If you don't want the div container though, you can instead append the first child of the div and keep on looping until no more child nodes remain.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Below is my full code excluding the comments. So first I will insert a row and represent as x then I add two columns. Is this fine? I am not clear about this "If you don't want the div container though, you can instead append the first child of the div and keep on looping until no more child nodes remain.". Currently actually I dont have a div in my codes so what should I put instead of the div. Just to inform you further xmlhttp.responseText is a drop down list completely built in the php codes and just insert here.

    var x=document.getElementById('myTable').insertRow(2);
    var y=x.insertCell(0);
    var z=x.insertCell(1);

    var newdiv = document.createElement("div");
    newdiv.innerHTML = xmlhttp.responseText;
    y.innerHTML="<label class=description for=element_1>Master <font color='red'>*</font></label> ";
    z.appendChild(newdiv);

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Below is my full code excluding the comments. So first I will insert a row and represent as x then I add two columns. Is this fine?
    Yes that's fine, apart from of course the horror of using tables for layout.

    Quote Originally Posted by newtomysql View Post
    I am not clear about this "If you don't want the div container though, you can instead append the first child of the div and keep on looping until no more child nodes remain.". Currently actually I dont have a div in my codes so what should I put instead of the div.
    The variable called newdiv is the div.

    The responseText is put inside of that div, and that div is then appended on the cell referred to by the z variable.

    Code html4strict:
    <td> <!-- from insertCell -->
        <div> <!-- from createElement('div') -->
            <!-- content from responseText -->
        </div>
    </td>

    If you don't want that div to be involved in things, you can instead just loop through the div and append to the DOM the contents of the div instead.

    Code javascript:
    while (newdiv.hasChildNodes()) {
        z.appendChild(newdiv.firstChild);
    }

    which results in the following type of HTML structure:


    Code html4strict:
    <td> <!-- from insertCell -->
        <!-- content from responseText -->
    </td>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    I do not what the div to be involved but first how to define the var newdiv = document.createElement("div"); what must I replace it with? Beside table what layout do you normally suggest or use?

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    I do not what the div to be involved but first how to define the var newdiv = document.createElement("div"); what must I replace it with? [/quote]

    Leave that part as it is. You need to set the innerHTML of something, so that newdiv variable just remains as a javascript variable, unattached to the DOM.

    Quote Originally Posted by newtomysql View Post
    Beside table what layout do you normally suggest or use?
    That's something for the CSS boys to go through with you about.
    Just as a taster though, have a look at these CSS Zen Garden designs

    Even though the presentation of the content looks very different for all of those designs, the HTML content remains exactly the same for each and every layout that you see there. It's a testimony to the power of the dark side CSS presentation.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    So meaning to say I just define like this a new var newdiv="";. Then I run the while loop is it?

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Dear Paul,
    So meaning to say I just define like this a new var newdiv="";. Then I run the while loop is it?
    The innerHTML property must be set on an element, otherwise it won't work.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    If that is the case then what must I replace this var newdiv = document.createElement("div"); with? Because if I define just blank like this var newdiv=""; is wrong too right?

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by newtomysql View Post
    If that is the case then what must I replace this var newdiv = document.createElement("div"); with?
    That's the thing. You don't change that part at all.

    Quote Originally Posted by newtomysql View Post
    Because if I define just blank like this var newdiv=""; is wrong too right?
    That's right.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    So in mycase I will get those extra divs right? I think that is fine right is that going to cause any harm? No right only extra codes?

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Dear Paul,
    So in mycase I will get those extra divs right? I think that is fine right is that going to cause any harm? No right only extra codes?
    No you will not, because the newdiv variable is not attached to the page. By holding it separate from the page you can loop through it and pluck bits from inside of the div and put those bits on the page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    But earlier your state that this is what will happen with the extra div right.

    <td> <!-- from insertCell -->
    <div> <!-- from createElement('div') --> <!-- content from responseText --> </div>
    </td>

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Dear Paul,
    But earlier your state that this is what will happen with the extra div right.
    That was showing you how your existing solution affects the HTML contents of the page.

    You will see after that a different version without the div part, where a while loop is used to move parts out of the div variable, and on to the page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Ok I got it just use the while loop will solve the div problem.

  19. #19
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    I have tried something like this, it is able to build the drop down list with all the values but when I sumbit on Firefox the same problem is empty but IE is again ok.

    var x=document.getElementById('myTable').insertRow(2);
    var y=x.insertCell(0);
    var z=x.insertCell(1);

    var newdiv = document.createElement("div");
    newdiv.innerHTML = xmlhttp.responseText;
    y.innerHTML="<label class=description for=element_1>Master <font color='red'>*</font></label> ";
    while (newdiv.hasChildNodes())
    {
    z.appendChild(newdiv.firstChild);
    }

  20. #20
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    On Firefox, can you confirm that xmlhttp.responseText contains anything?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  21. #21
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    I can confirm that because if it is null then my drop down list wont be built with all the values from ajax.

  22. #22
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Dear Paul,
    I can confirm that because if it is null then my drop down list wont be built with all the values from ajax.
    Well that's odd, because taking the ajax part out of the equation by substituting a suitable replacement for the responseText, the code you posted seems to do the job well.

    Code html4strict:
    <table id="myTable">
        <tr id="row0"></tr>
        <tr id="row1"></tr>
        <!-- script adds row two here -->
    </table>
    <script>
    var xmlhttp = {
        responseText: 'responseText content for the second cell'
    };
     
    var x=document.getElementById('myTable').insertRow(2); 
    var y=x.insertCell(0); 
    var z=x.insertCell(1); 
     
    var newdiv = document.createElement("div");
    newdiv.innerHTML = xmlhttp.responseText;
    y.innerHTML="<label class=description for=element_1>Master <font color='red'>*</font></label> "; 
    while (newdiv.hasChildNodes()) 
    { 
    z.appendChild(newdiv.firstChild); 
    }
    </script>

    I do see though that you're adding a row with insertRow(2) which requires that the table already has rows 0 and 1 existing within it.
    That's about the only other reason why your script won't work, if the table doesn't have enough rows already inside of it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #23
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    No the row 0 and 1 is fixed and wont be altered at all. Is there forever. Only I call dynamically to add and remove will be row 2 and the rest. My odd problem here why in IE it works fine but not in Firefox and Chrome. I am also lost.

  24. #24
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Dear Paul,
    No the row 0 and 1 is fixed and wont be altered at all. Is there forever. Only I call dynamically to add and remove will be row 2 and the rest. My odd problem here why in IE it works fine but not in Firefox and Chrome. I am also lost.
    Does the sample test code from my previous post work for you in Firefox? If it does work, compare it with your own scripting code and you will find that the two are virtually identical.

    That then means that the scripting code may not be the problem.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  25. #25
    SitePoint Zealot LinuxFreelancer's Avatar
    Join Date
    Jun 2011
    Location
    Boston, Ma, Usa
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use something like this, it works.

    PHP Code:
    function parseMe(FormNameHere){
        var 
    XMLHttp;
        try {
            
    XMLHttp = new ActiveXObject("Msxml2.XMLHttp");
        }
        catch(
    e) {
            try {
                
    XMLHttp = new ActiveXObject("Microsoft.XMLHttp");
            }
            catch(
    i) {
                
    XMLHttp = (typeof(XMLHttpRequest) != undefined) ? new XMLHttpRequest() : false;
            }
        }
        if (
    XMLHttp==null){
            
    alert("Browser does not support HTTP Request! Try using Firefox!");
            return 
    false;
        }
        var 
    VariableOne encodeURIComponent(document.forms["FormNameHere"].elements["VariableOne"].value);
        var 
    VariableTwo encodeURIComponent(document.forms["FormNameHere"].elements["VariableTwo"].value);
        var 
    url="getMasterList.php";
        var 
    params="v1="+VariableTwo+"&v2="+VariableOne;
        
    XMLHttp.open("POST",url,true);
        
    XMLHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        
    XMLHttp.setRequestHeader("Content-length"params.length);
        
    XMLHttp.setRequestHeader("Connection""close");
        
    XMLHttp.onreadystatechange = function () { 
            if (
    XMLHttp.readyState == 4) {
                
    document.getElementById("myTable").innerHTML XMLHttp.responseText;
            }
        };
        
    XMLHttp.send(params);
        return 
    false;

    HTML Code:
    <form action="#" method="POST" id="FormNameHere" name="FormNameHere" onSubmit="return parseMe(this);">
          	<div class="col2InnerRow">
          		<input class="text-input" name="VariableOne" id="VariableOne" type="hidden">
          		<input class="text-input" name="VariableTwo" id="VariableTwo" type="hidden">
    		<p><input type="submit" class="submit" value="Submit"></p>
          	</div>
    </form>


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
  •