-1

IMPORTANT NOTE: I have totally rephrased/edited my original question, so please do not consider the first answer as irrelevant.

Here is the situation: There is this web page of publications database, where the user selects different filters in order to search for certain articles, which meet specific criteria. In some cases, like when selecting Group of people or a particular person, the filtering is achieved from drop lists. When the user selects a group (from the 'Group' filter), then the corresponding list of people's names appear at the 'Person' selection drop list filter. Also when the value in the 'Group' drop list changes, the page is reloaded with the new drop list for the 'Person' filter. My aim is to retrieve and save the content of the 'Person' filter for each value in the 'Group' filter. And I would like to do so by using Javascript code in the Console window. However, I don't want to manually change the value of the 'Group' filter and then retrieve the 'Person' contents, but, in other words, to build an automated process within the Console window (this is the only way I know) to pick up the data I require.

Here is my problem: Considering that my approach is not completely crazy, that's what I try to do at the Safari's Console (please let me know if there is another way):

// Since the jQuery is not loaded in the resources I call it by this:

    var script = document.createElement('script');
    script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);

// I locate the 'Group' Select List and I store the values of its options by this:

    $(document).ready(function(){
       //Cycle through all the groups
        var abtOptValues = new Array();
        $("[name='abt']>option.[value!='-1']").each(function(l){
            abtOptValues[l] = $(this).attr("value");
        });

// Now, with the values from the 'Group' Select List in an array I want to cycle through
// each one of them and get the respected values of the 'People' Select List. So I try this:

    for (var abtOptValue in abtOptValues)
    {
        $("[name='abt']").val(abtOptValues[abtOptValue]); //set the option in
                                                              // the 'Group' List
            var persOptValue = new Array();
            $("[name='pers']>option.[value!='-1']").each(function(i){ 
                    persOptValue[i] = $(this).attr("value");
            });

        console.log(persOptValue);
    }
});

However, as Mike accurately comments below, this is not a proper approach, while the javascript in the console runs, the javascript, which controls the contents of Select Lists, will not run. Only after the Console's script has completed the script for the controls will pick the current value selected for the 'Group' List and will print the corresponding to this option content of the 'people' list that many times as the number of options in the 'Group' List.

If hopefully the above makes sense, my question would be what is the strategy to follow in order to achieve such an automation, as a viewer of the page in my browser, without having access to the page resources?

If I would try to diagrammatically describe the order of the actions I would need to take place that would be:

page is loaded -> jQuery library is loaded -> options of 'Group' List collected -> set the first option in 'Group' List -> page is reloaded -> jQuery library is loaded -> options of 'People' List (corresponding to the 1st 'Group' option) collected -> set the second option in 'Group List -> jQuery library is loaded ->
options of 'People' List (corresponding to the 2nd 'Group' option) collected -> set the third option in 'Group' List and so on...

Thank you in advance.

PS: Please mention (although you have already speculated) that I'm pretty much novice in this area of html and jQuery.

EDIT: After discussing with a friend on this topic, he explained me a few things, which I will try to reassemble here, as far as I could understand, but please state the way you would do it, if you wish.

So firstly, one important parameter is the fact that I don't have access to the server and to the page source, so what I'm asking for is to 'hack' the content that has already arrived in my browser, in order to retrieve the data I need. Which is possible, as long as I don't need to refresh the page. And a refresh takes place when, for example a new value in a Select List is selected and the page automatically refreshes to update the content of the children drop Lists. Secondly, I need to automate the process and be able to have typed the code in the console, to press enter once and let the process I described above to continue until to its completion.

The friend suggests that is nearly impossible, unless an external application would take the management role of starting and stoping the javascript in the console, takes notice of when the page has refreshed and controlling the communication among each other, as well. He underlined that the normal way in general would be to have access to the server, where I could ask to have returned in my browser only the data I desire. I am looking forward to your answers.

user2954390
  • 1
  • 1
  • What do you mean by the page refreshes - do you make an ajax call, which dynamically loads data, or a hard refresh (like pressing F5 on the page)? You should also use `console.log(LLValues)` instead of `alert()`, because the latter halts the script from running at every single instance it is called. – Terry Nov 05 '13 at 00:12
  • The root of your problem is that as long as your for loop is running _no other javascript on the page can run_. Since Javascript is single-threaded and it's javascript that updates the other dropdown that dropdown will not be updated until you return and release control. – Mike Edwards Nov 05 '13 at 00:37
  • Many thanks for the interest! I am sorry, I am not even familiar with ajax. However, what I mean here is that the page automatically refreshes, when the user changes (by clicking) an option in the drop list. I probably miss some basics here, but doesn't the above mean that my code should wait for this kind of refresh before it prints the Lower in the Hierarchy List? – user2954390 Nov 05 '13 at 00:40
  • I'd need to see more code before I could really help with the page refresh issues etc. – Tim S Nov 05 '13 at 00:54
  • Should I post the exact code? It is not that long. – user2954390 Nov 05 '13 at 00:59
  • I think you'll find what you're trying to do is easier to write as a page than completely in the console. Also, you say you want to save the content of the 'Person' filter for each value in the 'Group' filter, but where do you plan to save it to? Are you writing any server-side code? Or are you writing it in a console because you're trying to scrape these values off someone else's page? – Tim S Nov 05 '13 at 13:45
  • Thanks Tim! I'm honestly surprised that you took the time to re-read all this long nightmare. Especially since you've realized, I guess, that my programming experience lacks of common programming sense. I appreciate it! Well, the ideal thing would be to have gone and asked to provide me with this database already... Anyway, I am not going to dynamically process the data. I will only lay them in a -cookie probably- file, only organized the way I want, so I can get easier what I need. So, it's not going to be server related program, but I scrape these values in order to use them outside the www. – user2954390 Nov 06 '13 at 19:30
  • By the way,Tim, if I'm not putting you into trouble, would you guide me a little about what do you mean with "is easier to write as a page than completely in the console"? It seems as a useful advice. – user2954390 Nov 06 '13 at 19:34

1 Answers1

-1

If you want an alert to show only once, change your for loop from

for (HLValue in HLValues)
{
   alert(LLValues);
   // **Here is my problem**
}

to

var vals = []; // Create a new empty array

for (HLValue in HLValues)
{
    vals.push(HLValue); // Add the item value to your array
}

var joinedVals = vals.join("\n"); // Join the item values with a newline between them

alert(joinedVals); // Alert just once with the joined item values

To include JQuery on each page refresh, add the following line in your <head>:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

This loads JQuery straight from their site without you having to download it and reference it on your machine.

Tim S
  • 2,309
  • 16
  • 23
  • Thank you Tim and Mike! I'm pretty sure I have confused you with my description, so I will edit my question, trying to be more straightforward. Mike, I understand what you say, could you please suggest a work around? – user2954390 Nov 05 '13 at 00:48
  • I'm not sure what you're asking. – Tim S Nov 05 '13 at 01:35
  • I've never really tried to do what you're doing in the console like that. Perhaps http://JSFiddle.net to be a better place to play around and learn stuff. Give it a try there. – Tim S Nov 05 '13 at 01:43
  • Thanks Tim. I guess it's lack of my experience that I request weird stuff. I'll check your recommendation. – user2954390 Nov 05 '13 at 01:46
  • So it appears to me that you want to change a second `SELECT` based on the first `SELECT` being changed. If so, then I adapted something I've used before to your scenario: http://jsfiddle.net/eW2ww/ – Tim S Nov 05 '13 at 01:47
  • Hi Tim! I had to sleep earlier (european time). I really appreciate that you took the time to write this example for me. Though I still think I have failed to explain my inquiry well, most probably because I am approaching the whole issue problematically. I'd like to try one more time though to describe what my main goal is. Please check the description of the question above. – user2954390 Nov 05 '13 at 12:29