jQuery - Applying css style to input element

Question

I am trying to check all links and change the background color of broken links field. Here is my function

function CheckLinks(){
$('#new_post_links_table tbody>tr').find("input").each(function() {
    UrlExists($(this).val(), function(status){
    if(status === 404){
       $(this).css('background-color','#FC0');
    }
}); });}

Input fields looks like this :

<table id="new_post_links_table">
...
<td><input type="text" name="mp3_link[]"/></td>
<td><input type="text" name="mp4_link[]"/></td>
</tr>
</tbody>
</table>

For some reason the css is not applying.

Note: my CheckLinks function does work, except the $(this).css... part. (FireBug'ed)

Note: The rows are added dynamically

EDIT : Here is the function:

function UrlExists(url, cb){
    jQuery.ajax({
        url:      url,
        dataType: 'text',
        type:     'GET',
        complete:  function(xhr){
            if(typeof cb === 'function')
               cb.apply(this, [xhr.status]);
        }
    });
}

No, the first parameter of your UrlExists() function has $(this).val, when it should have $(this).val(). — Sampson
– Sampson, Commented May 2, 2012 at 18:41
Then it's a reference issue. Your inner-most this is not mapped to the element that is currently being tested. — Sampson
– Sampson, Commented May 2, 2012 at 18:50

Sampson · Accepted Answer · 2012-05-02 19:09:59Z

5

Couple things wrong. You didn't include the () on the call to $(this).val, and your this reference within the callback doesn't refer to the element intended.

function CheckLinks(){
  $('#new_post_links_table tbody > tr')
    .find("input")
    .each(function(index, element) {
      UrlExists($(this).val(), function(status){
        if(status === 404) $(element).css('background-color','#FC0');
      }); 
    });
}

Keep in mind when doing this you might run into some snags with Access-Control-Allow-Origin.

You might want to modify your UrlExists function to run through a proxy script on your server. You could do something like the following:

$.getJSON('checklink.php', { location: url }, function ( data ) {
  callback.apply( null, data.status );
});

On your backend, test the URL and send out the response via JSON:

$response = array( 
  'location' => $location, 
  'status' => $status 
);
echo json_encode( $response );

This way your JavaScript communicates with your back-end, and has no problem with origin control.

edited May 2, 2012 at 19:09

answered May 2, 2012 at 18:40

Sampson

269k76 gold badges546 silver badges570 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Hassan Over a year ago

Ok fields back color did change. but the url was not broken. Edit: Ok I am going to check if that is enabled in my server.

Sampson Over a year ago

@xperator You cannot just hit random URLs with JavaScript. Which urls are you trying to test?

Hassan Over a year ago

They are on same server. They look like this http://www.dl.mysite.com/momeni/momeni-09.mp3 I use nginx + ISPConfig. www.dl.mysite is treated as a different site in ISPConfig and the script I am trying is in mysite.com/at-admin

devnull69 Over a year ago

So effectively they are on two different domains. The browser cannot know that they are "physically" on the same device

Hassan Over a year ago

I marked as accepted answer for the time being. Because Css problem is solved. Now the url issue is related to back-end. I need some time to dig this. Thanks a lot you are giving too much info on this :-)

|

Pete Lada · Accepted Answer · 2012-05-02 18:40:25Z

2

My feeling is that this is no longer referring to the input. You should add a variable to store the input so you can access it within closure

var input = $(this);
UrlExists($(this).val(), function(status){
  if(status === 404){
     input.css('background-color','#FC0');
  }
});

answered May 2, 2012 at 18:40

Pete Lada

1,32810 silver badges12 bronze badges

7 Comments

Hassan Over a year ago

Um... I entered a valid link and a broken one. The valid url starts downloading and the broken doesn't change background color.

devnull69 Over a year ago

Then you should finally expose the UrlExists() function to us :-)

Pete Lada Over a year ago

You might want to post something so we can check it out then! :)

Hassan Over a year ago

@devnull69 Exposed ^_^ sorry for being late

Pete Lada Over a year ago

Still looks like a reference issue to me.

|

Rob · Accepted Answer · 2012-05-02 18:41:27Z

0

Does that function know that there are added rows dynamically? While ago I've had similar issue. Problem was that jQuery didn't know that there are added new rows with some content. Try console out what is under $(this) in function and tell us what result have You get.

answered May 2, 2012 at 18:41

Rob

5701 gold badge6 silver badges16 bronze badges

Collectives™ on Stack Overflow

jQuery - Applying css style to input element

3 Answers 3

10 Comments

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related