Jump to content

Using Ajax to change part of a different javascript


davidannis

Recommended Posts

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?

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.