jQuery question: sibling element selector

[WolfShade]

Hello, all,

I'm working on a project that will test the links on every page to make sure they all work.  I won't go into detail on what it's doing, but I need help on displaying the statusCode that is returned as a result.

I'm dynamically building something like the following:

<div class="linebyline">
     <div class="leftDiv" id="status_0">?</div>
     <div class="rightDiv" id="url_0">https://www.google.com</div>
</div>
<div class="linebyline">
     <div class="leftDiv" id="status_1">?</div>
     <div class="rightDiv" id="url_1">https://www.yahoo.com</div>
</div>
<div class="linebyline">
     <div class="leftDiv" id="status_2">?</div>
     <div class="rightDiv" id="url_2">https://www.sddc.com</div>
</div>

Now, after this is built, I'm grabbing the URL in the rightDiv div, using $.ajax() to get the page, and I'm getting the xhr.status.  I can alert it, no problem.  But what I'm trying to do is get the leftDiv that is within the same wrapper linebyline div to set the html() value.

The following is _not_ working:

).done(function(data,statusText,xhr){
     $.prev('.leftDiv').html(xhr.status);
     });

What is the best way to get the proper leftDiv element???

V/r,

^ _ ^

PS.. I also tried $(this).prev('.leftDiv'), but that didn't work, either.

[osgood_]

Does this work for your  - note this line in particular: $('.rightDiv').prev('div').html(url);

Example jquery:

$('.clickMe').css('cursor' , 'pointer').click(function(){

var url = $('.rightDiv').text();

alert(url);

$('.rightDiv').prev('div').html(url);

});

<a href="#" class="clickMe">Click Me</a>

<div class="linebyline"> 

<div class="leftDiv" id="status_1">?</div> 

<div class="rightDiv" id="url_1">https://www.yahoo.com</div> 

</div>

[WolfShade]

Hi, osgood_,

I copied your example into a blank document and tested it, and yes it worked.

But that is with just one linebyline div.  This could potentially generate hundreds or thousands of linebyline divs (our restricted site is quite huge.)

I'll provide some more code:

function submitForm(){
     $.post(
          "components/hcs.cfc?method=startLinkCheck",
          {'thisPath':$sitesApps.val()} //This is the value of a drop down select
          ).done(
               function(data){
                    $mcDiv.html(''); // Links appear in a div named mcDiv
                    var data = data.split("|"); // Links are a pipe-delimited list, converting to an array so I can use .map()
                    data.map(function(v,index){
                         $mcDiv.html($mcDiv.html() + '<div class="linebyline"><div class="leftDiv" id="status_' + index + '">?</div><div class="rightDiv" id="url_' + index + '">' + v + '</div>');
                         });
                    $('.rightDiv').on('click',function(){
                         $.ajax({url: "" + $(this).html() + ""}).done(function(data,statusText,xhr){
                              $.siblings().text(xhr.status + " " + statusText);//  <--- not working.
                              });
                         }).click().prop('onclick',null).off('click');
                    });}

So, when the results come back (testing with five - three good ones, two bad), each FQDN is paired with a question mark that is supposed to change to the statusCode and statusText when the site returns.  Bad URLs will keep the question mark.  Then I remove the click event so no one can click on a URL and resend the request.

V/r,

^ _ ^

[osgood_]

WolfShade  wrote

So, when the results come back (testing with five - three good ones, two bad), each FQDN is paired with a question mark that is supposed to change to the statusCode and statusText when the site returns.  Bad URLs will keep the question mark.  Then I remove the click event so no one can click on a URL and resend the request.

So someone clicks on the 'rightDiv' to find out the staus of the url as an example.

Some how you are checking the status of each url  when the 'rightDiv' is clicked? If the status is 'true' you want to add some text to the 'leftDiv' but if the staus is 'false' you just want to leave ? in the 'leftDiv':

$('.rightDiv').css('cursor' , 'pointer').click(function(){

$(this).each(function(){

var statusText = true;

var url = $(this).text();

if(statusText == true) {

$(this).prev('div').html(url);

}

});

Not sure if this gets you any further forward as its difficult to know exactly what you are doing.

[WolfShade]

osgood_  wrote

Some how you are checking the status of each url  when the 'rightDiv' is clicked? If the status is 'true' you want to add some text to the 'leftDiv' but if the staus is 'false' you just want to leave ? in the 'leftDiv':

I know this might seem convoluted, but I didn't want to rely upon 'onload' for the trigger, so I'm setting an 'onclick' to trigger, making the function, then triggering the click via .click(), THEN I'm removing the event handler so no one can click a URL and re-trigger the check.

Everything except the displaying of statusCode + statusText is working.  I cannot, for whatever reason, get the associated 'leftDiv' to display the result of the get.  I've tried .siblings(), .prev() in various forms (with and without selectors) and just cannot seem to get the display to actually happen.  If I use an alert() for each, I get the correct response, so I know I'm getting the response back.  I just can't seem to get it to change the .text() or .html() of the element.

V/r,

^ _ ^

[WolfShade]

I just learned (the difficult way) that inside the $.ajax() there is no concept of $(this) from the data.map().  But, even then, .prev() should work since all I'm asking it to do is find the div that is generated before it.  Even dynamically generated divs.  (shrug)

This project is just a POC from a request by my boss.  When I started, I was pretty sure it wasn't going to work because it would only be able to run as a part of any website, not remotely as intended.  Primarily because there's no way for CF to enumerate every page in a site from afar (CFFTP doesn't have directory listing, and CFDIRECTORY can't access remote servers.)

So, this is pretty much just a practice run, anyway.

Thank you for your input, osgood_.

V/r,

^ _ ^

[osgood_]

WolfShade  wrote

I just learned (the difficult way) that inside the $.ajax() there is no concept of $(this) from the data.map().  But, even then, .prev() should work since all I'm asking it to do is find the div that is generated before it.  Even dynamically generated divs.  (shrug)

I was begining to think that may be where the issue possibly orginated from, something to do with being inside $.ajax()

Oh well put it down to experience. I always think its not time wasted but time where something has been learned.

[WolfShade · Accepted solution]

Here is the code that wound up working (added line 13 and changed line 15):

function submitForm(){  
    $.post(  
          "components/hcs.cfc?method=startLinkCheck",  
          {'thisPath':$sitesApps.val()} //This is the value of a drop down select  
          ).done(  
              function(data){  
                    $mcDiv.html(''); // Links appear in a div named mcDiv  
                    var data = data.split("|"); // Links are a pipe-delimited list, converting to an array so I can use .map()  
                    data.map(function(v,index){  
                        $mcDiv.html($mcDiv.html() + '<div class="linebyline"><div class="leftDiv" id="status_' + index + '">?</div><div class="rightDiv" id="url_' + index + '">' + v + '</div>');  
                        });  
                    $('.rightDiv').on('click',function(){  
            var leftID = $(this).prev().attr('id'); // ADDED THIS!
                        $.ajax({url: "" + $(this).html() + ""}).done(function(data,statusText,xhr){  
                              $('#' + leftID).text(xhr.status + " " + statusText);//  <--- WORKING!
                              });  
                        }).click().prop('onclick',null).off('click');  
                    });}

Setting the prev() id before the $.ajax() and referencing that worked.

HTH,

^ _ ^

[osgood_]

Although the above will work for 1 div you'll most likley need to use the foreach function for multiple divs where the same class 'rightDiv'contains different content:

$('.rightDiv').each(function(){

var url = $(this).text();

$(this).prev('div').html(url);

});