Using Ajax to change part of a different javascript

[davidannis]

I have created a flashcard program to teach Japanese vocabulary. I want to add sound files from native speakers so I have created a page with a recorder that

1. displays a word (on load)

2. allows the native speaker to record the word (on press of a button)

3. uploads the recording to the server (on press of another button)

 

I wrote the word display as a separate php script so that I could use Ajax to just change the word being recorded, so that I would not need to reload the entire page every time the speaker switched to a new word.

 

The js that gets the word to be recorded is:

function ajaxRequest(){
            //declare the variable at the top, even though it will be null at first
            var req = null;
                //modern browsers
                req = new XMLHttpRequest();
            //setup the readystatechange listener
            req.onreadystatechange = function(){
                //right now we only care about a successful and complete response
                if (req.readyState === 4 && req.status === 200){
                    //inject the returned HTML into the DOM
                    document.getElementById('cardData').innerHTML  = req.responseText;
                };
            };
            //open the XMLHttpRequest connection
            req.open("GET","nextcard.php",true);
            //send the XMLHttpRequest request (nothing has actually been sent until this very line)
            req.send();
        };

The section that uploads the file is:

                   $('#send').click(function(){
                      
                     $.jRecorder.sendData();
                    
                  }

and it gets the filename from another script:

   $.jRecorder(
     { 
        host : 'http://localhost:10088/NewFolder/japanese/jrecorder/acceptfile.php?filename=hello.wav'

The problem that I have is that when I get each word I want to change the name of the file being uploaded. It all works and if I reloaded the page each time I could do this:

   $.jRecorder(
     { 
        host : 'http://localhost:10088/NewFolder/japanese/jrecorder/acceptfile.php?filename=<?php echo $word.'_'.$reader_id;?>.wav'

but I want to stay on the Ajax path. So, I think that I need to convert the newcard program to return json with something like:

$response=array(filename=>$word.$reader_id, card_data=>$card_stuff);
echo json_encode($response);

but once I get the json back I don't see how I get the filename into the script that sets the upload url and make that script re-execute. Is there a reasonable way to do that?