Pairs key=value are splitting by each symbol code when Ajax call

Question

Can't understand why my key=value pairs transform into symbols and in my ajax GET call I have:

GET /admin_schedule/get_schedule_db/?0=%5B&1=o&2=b&3=j&4=e&5=c&6=t&7=+&8=O&9=b&10=j&11=e&12=c&13=t&14=%5D&15=%22&16=%26&17=t&18=e&19=a&20=c

Instead of:

GET /admin_schedule/get_schedule_db/?teacherArray[]=128&teacherArray[]=134...

My code:

var eventss = ''; 
$("input[type='checkbox'][name='teacher']").each( function() { 
    if(this.checked) {
        eventss += "&teacherArray[]=" + $(this).attr("value");
    }
});
events1.data += eventss;

ajax for fullcalendar eventSources:

var events1 = {
    url: '/admin_schedule/get_schedule_db/',
    type: 'GET',
    data: {sch_teacher_id: (sch_teacher_id) ? sch_teacher_id : $('.teacher').val() },
    success: function (response) {
        return response;
    }
};

And then fetch fullcalendar with events

eventSources: [ 
            events1,
            events2,
            events3 
        ],

See http://stackoverflow.com/questions/9966053/what-does-5b-and-5d-in-post-requests-stand-for — jfriend00, Dec 05 '12 at 05:00
Do you know what happens when you try to append a string to an object? — John Dvorak, Dec 05 '12 at 05:06
jfriend00, thank you I see that I have strings containing percent-escaped characters like %5B and %5D, but how can I transform them to normal "[", "]" objects? — almix, Dec 05 '12 at 05:13
Jan Dvorak, what happens when i try to append a string to an object? — almix, Dec 05 '12 at 05:15

John Dvorak · Answer 1 · 2012-12-05T05:21:35.980

3

Concatenating a string with an object is almost never a good idea as Object#toString always returns "[object Object]". Unless you override toString in your object, the object is cast to string as this string (meaning its content is lost) before it's concatenated. Moreover, the resulting string is not a valid query string.

Instead of

eventss += "&teacherArray[]=" + $(this).attr("value");
...
events1.data += eventss;

try creating an empty teacherArray in data and

events1.data.teacherArray.push($(this).attr("value"));

Also consider using $("#my-form").serialize()

edited Dec 05 '12 at 05:21

answered Dec 05 '12 at 05:16

John Dvorak

26,799
13
69
83

Jan Dvorak, I change to: var sch_teacher_id = new Array(); $("input[type='checkbox'][name='teacher']").each( function() { if(this.checked) { events1.data.sch_teacher_id.push($(this).attr("value")); events2.data.sch_teacher_id.push($(this).attr("value")); events3.data.sch_teacher_id.push($(this).attr("value")); } }); But array sch_teacher_id still empty at all. – almix Dec 05 '12 at 06:54
@almix is there any checkbox with the name `teacher` that happens to be checked? – John Dvorak Dec 05 '12 at 07:12
it works when I move var sch_teacher_id = new Array(""); to the top of document. But now due to .push, i cant replace the first element sch_teacher_id[0]. I need set it firstly, but need to replace it when checkboxes are checking. – almix Dec 05 '12 at 07:33
@almix you could hold a flag if you need to do the replace or store the single-element array somewhere else, then use it if `sch_teacher_id` is empty (replace it just before sending) – John Dvorak Dec 05 '12 at 07:37
and other problem appears: when unchecking some checkbox, its value doesn't delete from array and I have multiple same params in array in firebug: sch_teacher_id[] 128 sch_teacher_id[] 128 sch_teacher_id[] 428 sch_teacher_id[] 428 – almix Dec 05 '12 at 07:46
1

You have to reset the array each time you run the loop. Normally you'd create a new empty array scoped to the function that sends the ajax (such as `var sch_teacher_id=[]` or `var data={ ... sch_teacher_id:[], ...}`). – John Dvorak Dec 05 '12 at 07:52
Please explain where clear an array? Insert into var events3 = { url: '/admin_schedule/get_schedule_db_recurring_events_on_daysweek/', type: 'GET', data: { sch_teacher_id:[], sch_teacher_id: (sch_teacher_id) ? sch_teacher_id : $('.teacher').val() }, borderColor: 'red', }; but it doesn't work. – almix Dec 05 '12 at 09:05
`sch_teacher id` is not a valid property name. If you meant `sch_teacher_id`, then it's twice in `data`, which is also invalid. Perhaps rename the array? – John Dvorak Dec 05 '12 at 09:30
actually, `sch_teacher id` _is_ a valid property name, but it cannot be accessed as `data.sch_teacher id` => don't use property names that are not valid identifiers. – John Dvorak Dec 05 '12 at 09:44

score 0 · Answer 2 · edited Mar 02 '16 at 23:43

I solved this problem! (thx Jan Dvorak for your comments!).

1. variable now is an array:

var sch_teacher_id = new Array("<?php echo $sch_teacher_id; ?>");

2. empty the array each time before loop:

$('.teacher').change(function (event) {
    events1.data.sch_teacher_id = [];
    events2.data.sch_teacher_id = [];
    events3.data.sch_teacher_id = [];

    if($(this).val()) { 

        $("input[type='checkbox'][name='teacher']").each( function() {  
            if(this.checked) {                          
                events1.data.sch_teacher_id.push($(this).attr("value"));     
                events2.data.sch_teacher_id.push($(this).attr("value"));          
                events3.data.sch_teacher_id.push($(this).attr("value"));
            }   
        });  

    }
    $calendar.fullCalendar('refetchEvents');
});

Pairs key=value are splitting by each symbol code when Ajax call

2 Answers2