jQuery Forum

In a Dialog box, I want to enter email and password and with a button click,  access some data via a PHP manager and bring an HTML message back to the Dialog.  In a simple start without data interchange, the code below accesses the PHP manager and it returns a simple HTML message, which appears inside the Dialog. OK, so far. But when I send email and password to the PHP, several problems occur. First, I get PHP error messages that email and password data is not received, specifically - Undefined index: email and Undefined index: password. The PHP to receive the data is like $contactEmailAddress1 = $_POST['email']; which works in another PHP manager for a form submit using the ajaxForm plug-in. Second, a filter function to filter out user garbage does not execute. This  PHP is function looks like:  check4Nasties( $testString ) { // many filters;  return $errorMessages;}. $errorMessages is an array containing some HTML.  It works fine in the same form submit using the ajaxForm plug-in. Third, when the PHP receives data via $contactEmailAddress1 = mysql_real_escape_string($_POST['email']);  I get wild error messages about access denied, etc.

The jQuery for buttons inside Dialog is below. It seems that an ajax POST does not work anything like a form submit POST. In simple terms (please) what's the difference, and more important,  can I change the ajax below to make it work?  I'm a bit anxious about having 2 form submits on the same page because I understand that can be complex.  What should I do?

        buttons: {
                'Show my inactive postings': function () {               
                 //alert( $("#contactEmailAddress").val() + $("#contactPassword").val() ); //all OK
                    $.ajax({
                        url: "some.php",
                        type: "POST",
                        data: { email: $("#contactEmailAddress").val(),
                                password: $("#contactPassword").val()
                                },
                        success: function() {
                        $("#dialogResponse").load("some.php");
                        }
                    })();
                    },               
                'Close this box': function () {              
                        $(this).dialog('close');
                    }
                }

Since I'm not allowed into the UI Bugtracker  (what happened there?),  here's a bug report.

The JSON example in the Autocomplete documentation is not JSON, it is an object literal.

An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

You should also advise developers to copy supposed JSON returned from their server and test for valid format at a site like jsonlint.com, or others.  It is a common mistake.  You could test the documentation example there,  for example.

In Autocomplete, I have changed item.autocomplete to ui-autocomplete-item in all instances. That is the only Autocomplete change stated in the Upgrade Guide.  I use the _renderItem() method.  I also use logic inside the ajax response to populate the dropdown list.

Everything works in UI 1.9,  but the page will not load using UI 1.10.  In the Console, I get the error

Error: Permission denied to access property 'uiMenu'

It seems something else has changed in Autocomplete for UI 1.10. Can anyone explain
the uiMenu error, and point me towards something to change to be consistent with 
UI 1.10

I can provide code, if necessary, but it is too big to post.

I'm building a function that gets a JSON array from a database to set the variable equal to that array. The variable can contain an array of several cities, but a simple example at the desired completion of the function is shown below.  Firebug tells me this JSON passes, but I can't get $.map() to complete the function. It should be simple, but I don't understand $.map() to make it work in ajax. Also, maybe there is another way to do this.

So desired result is:

citiesWithBoroughs=[{"city":"New York, New York, United States"}]

The code is:
    citiesWithBoroughs = function (request, response){
        $.ajax({
            url: "getCitiesWithBoroughs.php",
            data: //it works
            type: "POST",
            dataType: "json",
            success: function (data){
                response($.map( data, function (item){
                                        console.log(item.city);
                                        return {city: item.city};
                                }));
                        }
                  });
    }
    citiesWithBoroughs(function(city){
        $each(city, function(){
            alert(item.city  + "|cWB2");
        });
    });


                 






In an Autocomplete select: option function, I define a variable as a function.  The variable does not execute this function. It completely skips it.  I get no error in the Console, but when I follow execution line by line. I get the following at that line, which I don't understand.

1. citiesWithBoroughs: function (request, response){
1. get arguments: function ThrowTypeError() { [native code] }
2. get caller: function ThrowTypeError() { [native code] }
3. length: 2
4. name: ""
5. prototype: Object
6. set arguments: function ThrowTypeError() { [native code] }
7. set caller: function ThrowTypeError() { [native code] }
8. __proto__: function Empty() {}
9. <function scope>

In my Autocomplete for city and address input, I want completed input for each input box to update a Google Map. This is executed via a .change() for city and again a .change() for the streetAddress input boxes. This works in FF15, FF16, and IE8. The Autocompleted city input does not update the map in Chrome22, but the plain input for streetAddress does fire the map update in Chrome.

When I follow the code execution in Chrome Developer Tools, it goes through the expected lines of code, goes into jQueryUI and jQuery functions and seems to cycle between jQueryUI and jQuery, and finally stops.  I am not able to follow it more closely than that. I have tried .blur() instead, but it works only one time in all these browsers, so if a user changes to a second city the map does not change at all.

I see there was a bug about 6 months ago in .change() in Chrome.  I'm wondering if this is another bug, and if so, is it in jQuery, Autocomplete, or Chrome?

My (simplified) relevant code is as follows.

      function getCityFromGeonames(countryPick){
            $("#city").autocomplete({
                  source: function (request, response){
                        //gets data from geonames.org
                  },
                 select: function (event, ui){
                        //sets some variables
                        $("#neighborhood").focus(); //moves cursor focus to neighborhood
                  }         
            }).data("autocomplete")._renderItem = function (ul, item){
                  //changes color of typed characters vs autcompleted characters
            }
      }

      $( "#city" ).change( function() {
            //executes code from Google to change the map
      }).change().trigger('blur'); // Does not work in Chrome with or without .change().trigger('blur')

      $("#streetAddress").change(function() {
            //executes code from Google to change the map
            $("#zipCode").focus(); //moves cursor to zipCode when user clicks on page
      });


Any help would be appreciated.  I've worked a couple days testing variations of this code in several browsers.

I have an Autocomplete and I change some of the choices in  the dropdown list via the renderItem function. That much works.  If the user selects a changed choice, I want to make a different select: than if they select an unchanged choice in the list. So far, a click on a changed choice causes the select: option to do its normal thing.  It seems I need to change a variable from 0 to 1 when changed choices appear, and then use an if statement in the select: option to determine which select action to take.  I can do this with a global variable.  I don't see how to do this without a global variable. The renderItem function is a "dot addition" at the end of the Autocomplete function - its not inside the Autocomplete function. Is it possible to pass variable values between widget options or across the dot separator - if so, how?  Here's the structure of the code using the global  var override.

$("#city").autocomplete({
      source:  //do stuff via ajax
      select: function (event, ui){
            if (override == 1){
            //set selected value one way
            }
            //set selected value another way
      }
}).data("autocomplete")._renderItem = function (ul, item){
      var listItem = $("<li></li>")
      .data("item.autocomplete", item)
      if ( item.label == "trigger" ){
            override = 1;
            listItem.html( //change list item );
      } else {
            override = 0;
            listItem.html( // list item does not change );
      }
      return listItem.appendTo(ul);
}

I have an Autocomplete and I change some of the choices in  the dropdown list via the renderItem function. That much works.  If the user selects a changed choice, I want to make a different select: than if they select an unchanged choice in the list. So far, a click on a changed choice causes the select: option to do its normal thing.  It seems I need to change a variable from 0 to 1 when changed choices appear, and then use an if statement in the select: option to determine which select action to take.  I can do this with a global variable.  I don't see how to do this without a global variable. The renderItem function is a "dot addition" at the end of the Autocomplete function - its not inside the Autocomplete function. Is it possible to pass variable values between widget options or across the dot separator - if so, how?  Here's the structure of the code using the global  var override.

$("#city").autocomplete({
      source:  //do stuff via ajax
      select: function (event, ui){
            if (override == 1){
            //set selected value one way
            }
            //set selected value another way
      }
}).data("autocomplete")._renderItem = function (ul, item){
      var listItem = $("<li></li>")
      .data("item.autocomplete", item)
      if ( item.label == "trigger" ){
            override = 1;
            listItem.html( //change list item );
      } else {
            override = 0;
            listItem.html( // list item does not change );
      }
      return listItem.appendTo(ul);
}

I transferred my localhost development from a WindowsXP PC to a Windows7 PC and everything is now working except for Validation plug-in strangeness.  In the old WindowsXP computer on Firefox 15, Validation works.  In the new Windows7 computer on Firefox 15, the page will not load and I get the Firebug Console message

jQuery.validator.addMethod(

On this same Windows7 computer, the page loads and Validation works in Chrome and in IE8, but not in FF15.

I load Validation from a CDN, as follows
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

Has anyone else seen this?  Anyone know where the problem is?  Is it in Validation or FF15?

I have a Dialog box were a user can make choices. With each change in choice, I fire a function to initialize several variables. Most work, but I can't set the radio button via the initialize function.  What do I need to change? Edit - I also tried .prop('checked', true); with no result.
Simplified, the code is:

var countrySelected = "US";  // a global variable that changes

function initialize() {
      $('input[type=radio][name=country][id=countrySelected]').attr('checked', true); //did not work
      //$('#countrySelected').attr('checked', true); // did not work
      alert("|" + $("input[type=radio][name=country]").val() + "|initialize"); //problem - does not change

      //do other stuff - they change with the user's choice
      }

The HTML for the radio buttons looks like

<label><input type="radio" id="US"  name="country" value="US">United States</label>

I have a JSON object full of text strings. I also have a function to change the HTML text depending upon the user's selected country, which they can change around at will. Most of the function works, but the expression with .text()(function(){  })  does not change the HTML text.  What do I need to change? Is the problem in the function or in the object? Here is relevant code.

    var countryText = {
       "eng":[
          {
             "US":[
                {
                   "stateMessage2" :"2. * STATE: Type a state or US territory; click it in the dropdown",
                   "neighborhood3Message2":"Examples: Greenwich Village,New York; Hollywood, Los Angeles",
                   "monthlyRentalMessage1":"*Monthly Rental Price - $",
                   "rentalSquareFootageMessage":"Floor Space Area - feet²"
                }
             ],
             "GB":[
                {
                   "stateMessage2":"2. * COUNTRY: Type a country or home nation of the United Kingdom; click it in the dropdown",
                   "neighborhood3Message2":"Examples: Knightsbridge,London; West End,Edinburgh; City Centre,Birmingham",
                   "monthlyRentalMessage1":"1. * Monthly rental price - £",
                   "rentalSquareFootageMessage":" Floor Space Area - meters²"
                }
             ],
          }
       ]
    }


    var changeCountry = function( countryChangeCounter, countryText ){
        countrySelected = $('input[name=country]:checked').val();  //gets country abbreviation
        // change user instructions to be country specific.
        $('#twoSelects').hide();
        $('#threeSelects').show();
        initialize3Step(countryChangeCounter);
        $('#stateMessage2').text( function(){
            return countryText.eng.countrySelected.stateMessage2;
            })
        getCityFromGeonames3Step(countrySelected);
        return countrySelected;
    }

I have some code that initializes text when the user changes country and when the page load determines the country from W3C geocoding.  It works in Firefox and Chrome, but not IE, and Firebug says changeCountry is not a function.

    $('input[name=country]').change(function changeCountry(countryChangeCounter){
        countrySelected = $('input[name=country]:checked').val();  //sets country abbreviation
      //do stuff
    }).filter(':checked').trigger('change');  //at ready, fire a change on the selected country to update show,hide, etc.

After reading, it seems that one way to fix this is as follows, though I've not implemented the code:

      var changeCountry = function(countryChangeCounter){
      countrySelected = $('input[name=country]:checked').val();  //sets country abbreviation
      //do stuff
      };

      $('input[name=country]').change.click(changeCountry).filter(':checked').trigger('change');

Though I can't find anything like this, I'm wondering if a second way exists to create a custom method and end up with something that looks sort of like this:

      $('input[name=country]').change.changeCountry.filter(':checked').trigger('change');

In other words, can custom methods be used in jQuery, if so how, and how would such a method be triggered by user clicks?  Or maybe its possible, but not worth the effort and I should use the first approach.  I'm just getting started with this object stuff and need to understand better how it works.

I have an HTML5 page with a data input inside a Dialog box.  I sweep this data into the form processing with the <input> attribute form=dataInput  It works fine in Firefox and Chrome, but not in IE because IE does not support this attribute.  Is there a way to get IE to sweep data out of a Dialog and into $_POST ?

Here's an example of the HTML that's inside the Dialog.

<label><input type="radio" id="unitedStates"  name="country" form="dataInput" value="US">United States</label>

The Form plugin is working and displays error messages to the user as generated by my PHP server validation. If the user input fails the server validation, I want clearForm to be false. If server validation is OK, I want clearForm to be true. I don't know what to call the PHP echo that jQuery Form picks up and displays at the div with id=errorMessages. An example in the Form documentation made me think it might be called responseText, but I can't get it, or anything else to work.  My if function is always Boolean false and clearForm thus is always true.  What should change?

    var errorMessages = $( '#errorMessages' );   
    var submitOptions = {
            target:        '#errorMessages',   // target DOM element for server response message
            beforeSend: function () {          // pre-submit callback
                errorMessages.empty();
                var percentVal = '0%';
                bar.width( percentVal )
                percent.html( percentVal );
            }, 
            uploadProgress: function( event, position, total, percentComplete ) {
                var percentVal = percentComplete + '%';
                bar.width( percentVal )
                percent.html( percentVal );
                //console.log( percentVal, position, total );
            },

            clearForm:  function( responseText, xhr ) {
                if( errorMessages.responseText.length > 0 ){ false }else{ true } 
                  //if an error has triggered in PHP, don't clear the form
            }
        };
    $('#rentDataInput').ajaxForm( submitOptions );

I have some Google Maps V3 working. I want to change one of them to a Google static map. The documentation says to just put an image <img> with their 'special sauce' on the page. As a test, I copy and paste a Google example (that starts as shown below) into an jQuery html function:

$("#map_canvas").html( <img src="http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn . . . etc >);

I want to put this into a div as follows and replace the text:

        <div id="map_canvas" ><h1>Some text</h1> </div>

When I use the html() expression above, the page will not load and I get a Firebug error:  unexpected identifier   at the html() line.

I can't figure it out. What's wrong?

I posted this recently on the Getting Started forum. If anyone here has suggestions, I'd like to hear them. But I'm also wondering if this should be viewed as an Autocomplete bug, or is this "normal" behavior for UI widgets to be a lot slower than core jQuery functions. Let me know if it is a bug and I'll report it.

The change() function seems to act more quickly than the Autocomplete function, so the term fragment in the input box was being used to create a map, instead of the full selection from the Autocomplete dropdown. I have "solved" the problem with a setTimeout to delay the processing 500 msec until Autocomplete populates the input value with the full city text, but this feels like a cludge. At one point I used blur() instead of change(), but it executes only once and the user can't change cities several times. Also, I use the same map creation code for a street address input box that does not have Autocomplete. It uses blur() instead of change(), but is otherwise the same and there is no timing problem. Whatever the issue, it is associated with Autocomplete.

What is the underlying issue here, and how should this be written? Here's relevant code.

    //change the Google Map after a user enters a new city
    $( "#city" ).change(function() {
        //setTimeout is here to let Autocomplete finish before gCity is set. W/o delay, gCity is a term fragment and Google tries to map it.
        setTimeout(function() { 
            //if state and city are present
            if ( $("#city").val().length > 0 && $("#state").val().length > 0 ) {
                var gCity = $("#city").val() + ", " + $("#state").val();
 
            // code to display a map centered on gCity

        }, 500);
    });

The change() function seems to act more quickly than the Autocomplete function, so the term fragment in the input box was being used to create a map, instead of the full selection from the Autocomplete dropdown. I have "solved" the problem with a setTimeout to delay the processing 500 msec until Autocomplete populates the input value with the full city text, but this feels like a cludge. At one point I used blur() instead of change(), but it executes only once and the user can't change cities several times. Also, I use the same map creation code for a street address input box that does not have Autocomplete. It uses blur() instead of change(), but is otherwise the same and there is no timing problem. Whatever the issue, it is associated with Autocomplete.

What is the underlying issue here, and how should this be written? Here's relevant code.

    //change the Google Map after a user enters a new city
    $( "#city" ).change(function() {
        //setTimeout is here to let Autocomplete finish before gCity is set. W/o delay, gCity is a term fragment and Google tries to map it.
        setTimeout(function() { 
            //if state and city are present
            if ( $("#city").val().length > 0 && $("#state").val().length > 0 ) {
                var gCity = $("#city").val() + ", " + $("#state").val();
 
            // code to display a map centered on gCity

        }, 500);
    });

I have a Google Map running and get the country displayed to set a radio button for that country. The code retrieves the countryCode (variable is below) from Google, but I can't get the radio button to set. I am either not selecting properly or not setting properly. I've tried several things. Here's the relevant code.

function initializeMap() {
      //do stuff to create a map and retrieve the country code for that location
      for (var j = 0; j < results[0].address_components[i].types.length; j++ ) {
            var countryCode = results[0].address_components[i].short_name; //countryCode from Google
            $('input[name=country]').val(countryCode).prop('checked', true); // does not set radio button
            return;
            }
            else {countryCode = "US"; } //default to US, if Google Geocode fails
      //do other stuff dealing with error conditions
}
window.onload = initializeMap;

//current statement, outside initializeMap(), that does set a default radio button - to be replaced by the above.
$('input[name=country]:first').attr('checked', true);

The HTML is like this sample:
<label><input type="radio" id="unitedStates"  name="country" value="US">United States</label>

I have a custom method in Validation to check for unwanted characters. It works, however if the field is left empty, Validation behaves strangely. No error message appears next to the input box (which is correct),  but Validation records an "invalid" in its numberOfInvalids() method, which I show elsewhere in the form.  Anybody seen this before?  The custom method code is below. See any reason it should trigger an invalid, but not an error message?

        // add method to valid() to check for unwanted characters
        //when an input box is empty, Validation shows no error on the box, but records it in numberOfInvalids().
        $.validator.addMethod('validCharsCheck', function (value)
        {
            var result = true;
            // unwanted characters
            var iChars = "@#$%^`&*=[]\\\;/{}|\":<>?";
            for (var i = 0; i < value.length; i++)
                {
                if (iChars.indexOf(value.charAt(i)) != -1)
                    {
                    return false;
                    }
                }
            return result;
        },
        'Use numbers and alphabetic characters');

I'm using the class=  style of setting up Validation. I have everything working except: 1. the equalTo method for email and repeat email, and 2. the rangelength method of the length of the password.  It turns out the documentation example of equalTo in the housing web page demo is incorrect.(  http://jquery.bassistance.de/validate/demo/multipart/ ) You can put 2 different email addresses in and Validation will not identify the difference and does not create an error message.

I've tried several things, but can't get the class style to validate equalTo or rangelength.  The 2 current expressions I'm using are:

class="required email equalTo:'#contactEmailAddress1' "
class="required rangelength[6, 12]"

For the email, required and email format properly validate, but equalTo does not. What should I change?

This may look like a Validation plug-in problem, but I don't think so. It seems the problem is in handling JS arrays or in jQuery selectors, or in using JS methods.

I have Validation working across a form (I fire it several times before Submit to check sections of the form), and a tinyMCE editor working in 1 textarea. I want to move the contents of the tinyMCE iframe into the textarea before (that's the key here - before) the Submit button is pressed so that the contents can be validated in the section before Submit. I've used tinyMCE.triggerSave(); in several ways to move contents and then fire Validation before Submit. None work.  I am beginning to believe that tinyMCE contents cannot be moved by any Javascript other than Submit, but I don't see that stated anywhere.  In tinyMCE, I've tried onchange_callback: and handle_node_change_callback: to fire functions with triggerSave and other saving commands. I can get the contents of tinyMCE to validate when I press Submit twice (others have noted this peculiarity), but not in any other way. Also, when errors are corrected in tinyMCE, Validation does not revalidate until Submit is pressed.

2 questions -
Anyone know how to move tinyMCE contents into the textarea without hitting Submit?
Does CKEditor allow updates other than via Submit, and if so, where's a tutorial or example?

Here's an example of code that is supposed to be triggered by tinyMCE's onchange_callback, but only triggers upon the second click on Submit.

        function tinyMCESetValue(inst)
            {
            var content = tinyMCE.activeEditor.getContent();
            if (tinyMCE.activeEditor.isDirty()) {tinyMCE.triggerSave(true, true);}
            // other save expressions that have been tried
            //$("#selector").val(content);
            //$("textarea.tinymce").val(content);
            //tinyMCE.triggerSave();
            //ed.save();
            alert("some change"); //does not fire
            }

I have a long form broken up into Accordion sections. In moving from section to section, the page ends up in random places - often with the top of the section not visible, so the user has to scroll down to get started. I tried to use an HTML destination anchor that fires on the Accordion change event. It works with any section, but only once. Then the Accordion freezes and will not move to any other section. The code is below. What needs to change?  Or is there some other way to get Accordion sections to open at a predictable spot on the screen?

    $(function() {
        $( "#sections" ).accordion({
            autoHeight: false,
            change: function(event, ui)
                { $("#topSpot").html(<a href="http://webpage.php#topSpot"></a>).change().trigger('click');
                $( "#sections" ).accordion({ event: 'click' });  //try to re-initialize. Does not work.
                },
        }).show(); 
    });


BTW, The .change().trigger('click') has no impact. The code behaves as described with or without .change().trigger('click')

I have a lengthy form that I present in sections via Accordion. I validate each section before moving to the next section, and in the last section, I validate the entire form (there is a reason for this double validation). When I include the errorLabelContainer option to list all errors after the Submit button in the last Accordion section, then the error messages do not appear next to each element while validating each section. I've looked at numerous examples and done testing on my own page, and it seems that when errorLabelContainer is present, the individual element messages do not appear. I tried using the errorPlacement option to 'over-ride' errorLabelContainer, but still, no error messages appear next to the elements. I can get one, or the other, but not both sets of error messages.

I want error messages to appear next to each element, and in a summary via errorLabelContainer.  Has anyone found a way to do that?