Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 2 of 2 FirstFirst 12
Results 16 to 30 of 30
  1. #16
    New Coder
    Join Date
    Mar 2012
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok, I found one (of many) problems, the onchange attribute should have been on the select tag not the option tags, but the ajax call is still not being made. I checked the error console and came up with no errors. I created a test site where you can see it:

    http://www.kxdesign.com/test/register.php

    Under additional information (profile) you should see a select dropdown called Test Field. And if you select either of the options, another profile field should show up beneath it but it doesn't.

    Edit: I now see what the problem is. Preid is not defined. How would I go about this? I have defined preid in my php code as zfield. But with the current code it would always put the next field after the primary field and my profile field id's are random.

    I'll explain it better how it works right now. First, the user adds some profile fields and each option has another profile field ID assigned to them (it can be any field). Then in a different option he selects which is the primary field, the one that gets displayed first. For this field I have a different template, but all subsequent fields are rendered through the subfield template (they are only a bit different). Do you think it would be better to user the same template?
    There are several problems with this approach which I can't solve:

    1. Like I said before, I don't know how to correctly create new profile fields after one another.
    2. If the user would change his selection in the first field, the subsequent fields would have to be removed, but I don't know how to pass the information to the function. (maybe add a div id++?)
    3. I want the user later to edit the fields on a different page, but I don't know how to correctly select the fields he has saved before in the form.

    Maybe someone can suggest a different approach for me to achieve this? This seems to have too many flaws and complications.
    Last edited by komplexbs; 03-21-2012 at 05:04 PM.

  2. #17
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by komplexbs View Post
    ...

    Edit: I now see what the problem is. Preid is not defined. How would I go about this? I have defined preid in my php code as zfield. But with the current code it would always put the next field after the primary field and my profile field id's are random.
    Seems to me the easiest way would be to pass the ID as part of the function call in the onclick event handler:

    Code:
    <select id="zfield_1" class="primary" onchange="ajaxReq(2, this.value,this.id);" tabindex="1" name="Test Field">
    and then make an adjustment in your function like so:
    Code:
    function ajaxReq(col, wval, preid) {
     // removeLists(col);     
    
      if(wval!='- - -' && wval!='') {
        var request =  new XMLHttpRequest();		      
        var php_file = 'ajax.php'; 
        var  getfields = 'yes';
        var  data_send = 'col='+col+'&wval='+encodeURIComponent(wval);
    
      request.open("POST", php_file, true)
        request.onreadystatechange = function() {
          if (request.readyState==4) {
            document.getElementById(preid+col).innerHTML = request.responseText;
          }
        }
        document.getElementById(preid+col).innerHTML = '<img src="./images/misc/progress.gif alt="Loading..." />';
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        request.send(data_send);
      }
    }
    But I will admit that I haven't taken much time to look at anything else in your code and I haven't tested this change. If the ID of the element calling the function is the preid you mean to pass then this admittedly SLOPPY patch should work.

    This is just a lazy shot in the dark for me.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  3. #18
    New Coder
    Join Date
    Mar 2012
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That's quite clever actually

    It helped a bit though. I added the variables of the mainfield, where col is the id of the current field and preid is the prefix (zfield_). Now I get an error that zfield_ is not defined ?

  4. #19
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I don't see the update reflected in your page. Have you made the change live?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  5. #20
    New Coder
    Join Date
    Mar 2012
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I updated it now.

    I had an idea for the remove fields function? Let's say it would save all the current fields in an array in javascript and then remove all fields that were added after the one that is currently being changed, would that work? How can I do this?

  6. #21
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    If you're going to put in the literal string "zfield_" then you will need to use quotes (single quotes in this particular case) around it like so:
    Code:
    <select id="zfield_1" class="primary" onchange="ajaxReq(1, this.value, 'zfield_');" tabindex="1" name="Test Field">
    <option...

    And then you still have to update your javascript function in your external .js file to use this newly added parameter or else it will still choke with "preid is not defined."

    As for the other questions...let's take this one step at a time.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  7. #22
    New Coder
    Join Date
    Mar 2012
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I actually used a php variable inside that function :-/

    Sorry, I forgot to add the parameter, but the same error still occurs.

  8. #23
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by komplexbs View Post
    I actually used a php variable inside that function :-/

    Sorry, I forgot to add the parameter, but the same error still occurs.
    I think in the rush to get this fixed you may not be paying full attention to what I am saying. Whether php-generated or not, your HTML source code needs to include single quotes around the value 'zfield_' in order to resolve the javascript error in the page. Once the javascript error is resolved we can work on getting the functionality to do what you actually want it to do.

    So if, for example, your php script generates the line like so:
    PHP Code:
    print "<select class=\"primary\" name=\"Test Field\" id=\"zfield_1\" tabindex=\"1\" onchange=\"ajaxReq(1, this.value, ".$peid.");\">\n"
    you would need to amend it to be like this instead:
    PHP Code:
    print "<select class=\"primary\" name=\"Test Field\" id=\"zfield_1\" tabindex=\"1\" onchange=\"ajaxReq(1, this.value, '".$peid."');\">\n"
    Or, if you generate the line like this:
    PHP Code:
    <select class="primary" name="Test Field" id="zfield_1" tabindex="1" onchange="ajaxReq(1, this.value, <?php print $peid?>);">
    then you would need to make it like this instead:
    PHP Code:
    <select class="primary" name="Test Field" id="zfield_1" tabindex="1" onchange="ajaxReq(1, this.value, '<?php print $peid?>');">
    In any case, no matter how you generate the <select> tag and its attributes you *need* to get single quotes around that parameter in the HTML output.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  9. Users who have thanked Rowsdower! for this post:

    komplexbs (03-21-2012)

  10. #24
    New Coder
    Join Date
    Mar 2012
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    I think in the rush to get this fixed you may not be paying full attention to what I am saying. Whether php-generated or not, your HTML source code needs to include single quotes around the value 'zfield_' in order to resolve the javascript error in the page. Once the javascript error is resolved we can work on getting the functionality to do what you actually want it to do.

    So if, for example, your php script generates the line like so:
    PHP Code:
    print "<select class=\"primary\" name=\"Test Field\" id=\"zfield_1\" tabindex=\"1\" onchange=\"ajaxReq(1, this.value, ".$peid.");\">\n"
    you would need to amend it to be like this instead:
    PHP Code:
    print "<select class=\"primary\" name=\"Test Field\" id=\"zfield_1\" tabindex=\"1\" onchange=\"ajaxReq(1, this.value, '".$peid."');\">\n"
    Or, if you generate the line like this:
    PHP Code:
    <select class="primary" name="Test Field" id="zfield_1" tabindex="1" onchange="ajaxReq(1, this.value, <?php print $peid?>);">
    then you would need to make it like this instead:
    PHP Code:
    <select class="primary" name="Test Field" id="zfield_1" tabindex="1" onchange="ajaxReq(1, this.value, '<?php print $peid?>');">
    In any case, no matter how you generate the <select> tag and its attributes you *need* to get single quotes around that parameter in the HTML output.
    Thank you, I misunderstood the ajax call is now being made!!! However, it's not returning what it should . Upon selection, the options change to those of the dropdown at the bottom where you can change the site's style :-/. The ajax.php file contains more ajax functions but all are wrapped in condition tags based on $_REQUEST or $_POST, perhaps I need a more specific condition for my ajax call?

  11. #25
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    OK, we have a pulse. Now you can see that the AJAX response is not what you expected it to be, so we look at what we're actually sending to the ajax.php file...


    Code:
    var  data_send = 'col='+col+'&wval='+encodeURIComponent(wval);
    Suppose we just changed the select box to use Option 1. What does that give us for the $_POST string that we are generating?

    Code:
    'col='+col
    col is passed as a parameter of the function call from the onchange event handler and it is known to be "1" for us.

    Code:
    '&wval='+encodeURIComponent(wval)
    wval is also passed as a parameter of the function call, and is equal to the value of the option that has been made selected. So if we are selecting "Option 1" from the dropdown, then the value we pass to the function is "1".

    So overall, our $_POST request (which you indicate uses a $_REQUEST in the PHP to get values for, meaning we can test with simple $_GET strings) is a simple "col=1&wval=1"

    Testing that via $_GET, we end up tagging this URL:

    http://www.kxdesign.com/test/ajax.php?col=1&wval=1

    And...we get a blank page. So when the AJAX response wipes out your select box contents this is why. You haven't given any contents to replace them with. Nevermind the fact (for now) that the response is being populated in the wrong spot. Lets first find out why we are getting a blank page for a result.

    Can you post your ajax.php script so I can see what you're actually testing for? Also, do you have error reporting enabled? If not, you should enable it right now so we can be sure of whether or not your PHP script is choking on an error of its own.

    EDIT: Actually, I'm seeing a status 500 internal server error message for ajax.php - it looks like the script is not even getting a chance to run. You may have issues with .htaccess or something. You need to resolve your 500 status problem before we can continue...
    Last edited by Rowsdower!; 03-21-2012 at 06:31 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  12. Users who have thanked Rowsdower! for this post:

    komplexbs (03-21-2012)

  13. #26
    New Coder
    Join Date
    Mar 2012
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    OK, we have a pulse. Now you can see that the AJAX response is not what you expected it to be, so we look at what we're actually sending to the ajax.php file...


    Code:
    var  data_send = 'col='+col+'&wval='+encodeURIComponent(wval);
    Suppose we just changed the select box to use Option 1. What does that give us for the $_POST string that we are generating?

    Code:
    'col='+col
    col is passed as a parameter of the function call from the onchange event handler and it is known to be "1" for us.

    Code:
    '&wval='+encodeURIComponent(wval)
    wval is also passed as a parameter of the function call, and is equal to the value of the option that has been made selected. So if we are selecting "Option 1" from the dropdown, then the value we pass to the function is "1".

    So overall, our $_POST request (which you indicate uses a $_REQUEST in the PHP to get values for, meaning we can test with simple $_GET strings) is a simple "col=1&wval=1"

    Testing that via $_GET, we end up tagging this URL:

    http://www.kxdesign.com/test/ajax.php?col=1&wval=1

    And...we get a blank page. So when the AJAX response wipes out your select box contents this is why. You haven't given any contents to replace them with. Nevermind the fact (for now) that the response is being populated in the wrong spot. Lets first find out why we are getting a blank page for a result.

    Can you post your ajax.php script so I can see what you're actually testing for? Also, do you have error reporting enabled? If not, you should enable it right now so we can be sure of whether or not your PHP script is choking on an error of its own.
    error reporting is set to error_reporting(E_ALL & ~E_NOTICE);

    The part of code in ajax.php (it is a large file, mostly consists of vBulletin functions) is this:

    Code:
    if (isset($_POST['col']) && isset($_POST['wval']))
    {
    $vbulletin->input->clean_array_gpc('p', array(
            'col'   => TYPE_STR,
            'wval'   => TYPE_STR
    	));
        $preid = 'zfield_';
        $col = trim(strip_tags($_POST['col']));
        $wval = "'" . trim(strip_tags($_POST['wval'])) . "'";
        
    $optionid = $vbulletin->db->query_first("SELECT assignfield
        FROM " . TABLE_PREFIX . "ziki_franco_option
        WHERE optionid = '". $wval ."'");
    
    if ($optionid['assignfield'] != '0' AND $optionid['assignfield'] != 'input')
        {
    $subfield = $vbulletin->db->query_first("SELECT *
        FROM " . TABLE_PREFIX . "ziki_franco_field
        WHERE id = '". $optionid['assignfield'] ."'");
    $suboptions = $vbulletin->db->query_read("SELECT *
        FROM " . TABLE_PREFIX . "ziki_franco_option
        WHERE fieldid = '". $optionid['assignfield'] ."'");
    while ($suboption = $vbulletin->db->fetch_array($suboptions))
    {
    $subfieldbits .= '<option value="' . $suboption['optionid'] . '">' . $suboption['value'] . '</option>';
    }
    
    $templater = vB_Template::create('ziki_franco_subfield');
    				$templater->register('subfield', $subfield);
    				$templater->register('subfieldbits', $subfieldbits);
                    $templater->render();
    }
    elseif ($optionid['assignfield'] == 'input')
    {
    	$categories = fetch_socialgroup_category_options();
    		$categoryoptions = '';
    
    		foreach ($categories as $categoryid => $category)
    		{
    			$optiontitle = $category['title'];
    			$optionvalue = $categoryid;
    			$optionselected = ($categoryid == $group['socialgroupcategoryid'] ? ' selected="selected"' : '');
    
    			$categoryoptions .= render_option_template($optiontitle, $optionvalue, $optionselected, $optionclass);
    		}
    		unset($categories);
    //not working yet
    $templater = vB_Template::create('ziki_franco_inputfield');
                                    $templater->register('categoryoptions', $categoryoptions);
                                    $templater->register('group', $group);
                    $templater->render();
    }
    Maybe I should use $_GET instead of $_POST?

    Edit: I was thinking, that I will rebuild this, to use a system or parent and subfields to make this easier. So that all select boxes will already be created but only the first one will have options, the subsequent won't, then upon the change of the parent field, they would populate the options. I think this is an easier approach than making them appear based on the option (like this http://www.dhtmlgoodies.com/scripts/...-select.html)? It's more logical
    Last edited by komplexbs; 03-21-2012 at 06:48 PM.

  14. #27
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by komplexbs View Post
    error reporting is set to error_reporting(E_ALL & ~E_NOTICE);

    The part of code in ajax.php (it is a large file, mostly consists of vBulletin functions) is this:
    ...
    Maybe I should use $_GET instead of $_POST?
    Ok, that's good that you have error reporting up for this step. And $_GET vs. $_POST is really not relevant in terms of making this script functional. If you want to adjust that later on you can, but it certainly isn't necessary.

    Also, you may have missed it but I updated my last post to say that your ajax.php file is generating a 500 Internal Server Error response code and thus the script is not running for us.

    Response status 500 errors (in my experience) usually are a result of invalid .htaccess changes. Have you been adjusting anything in your .htaccess files? Or are you not seeing the 500 error on your end? Because I sure as heck am seeing it here when I check my http headers...

    There won't be anything more I can do to help until the ajax.php page is running again and returning output other than error headers.

    I won't be available to post back here for about an hour anyway, so this is good timing for you to get that sorted out while I'm gone...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  15. #28
    New Coder
    Join Date
    Mar 2012
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    Ok, that's good that you have error reporting up for this step. And $_GET vs. $_POST is really not relevant in terms of making this script functional. If you want to adjust that later on you can, but it certainly isn't necessary.

    Also, you may have missed it but I updated my last post to say that your ajax.php file is generating a 500 Internal Server Error response code and thus the script is not running for us.

    Response status 500 errors (in my experience) usually are a result of invalid .htaccess changes. Have you been adjusting anything in your .htaccess files? Or are you not seeing the 500 error on your end? Because I sure as heck am seeing it here when I check my http headers...

    There won't be anything more I can do to help until the ajax.php page is running again and returning output other than error headers.

    I won't be available to post back here for about an hour anyway, so this is good timing for you to get that sorted out while I'm gone...
    Ok, I fixed the error, thanks! See my post above, I edited it.

  16. #29
    New Coder
    Join Date
    Mar 2012
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I'm going to try to remake the whole system and post the results in a few days Thanks to everyone for the help!

  17. #30
    New Coder
    Join Date
    Mar 2012
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you for the help guys, played around with it, learned some ajax and this is what worked for me in the end

    Code:
    function handleResponse(fieldid, stopper) {
        var ajax =  new XMLHttpRequest();
       
       if (stopper == 'x')
     {
        return;
     }
     
     if (ajax) {
     
        if (document.getElementById('zfield_'+fieldid)) {
            var fieldsetid = document.getElementById('zfield_'+fieldid).value;
     
            ajax.open('get', 'ajax.php?fieldsetid=' + encodeURIComponent(fieldsetid), true);
            ajax.send();
     
            ajax.onreadystatechange = function() {
    
              if (ajax.readyState == 4) {
    
          var nextfield = fieldid;
          nextfield++;
          var results = document.getElementById('zfield_'+nextfield);
          results.innerHTML = ajax.responseText;
     
                                        }
            }
        }
     
      }
    }


 
Page 2 of 2 FirstFirst 12

Posting Permissions

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