March 18, 2013

jQuery syntax error?

Question by user1977591

I found an example here on stackoverflow that I am trying to recreate and use a solution.
here is the link to the example: Refreshing Partial View in MVC 3

what is wrong with my syntax?

function RefreshPartial() {
        $('#invited-teams').load('/Challenge/GetInvitedTeams', {Model.ChallengeId});
    }   

will this work? or does it need to have the curly brackets?

function RefreshPartial() {
        $('#invited-teams').load('/Challenge/GetInvitedTeams', "<%= Model.ChallengeId %>" );
    }   

UPDATE:

 function RefreshPartial() {
        $('#invited-teams').load('/Challenge/GetInvitedTeams',
            {'paramname' : <%:Model.ChallengeId %> });
    }   

my partial view:

            <div id="invited-teams">
                <% Html.RenderPartial("InvitedTeams", Model.InvitedTeams); %>
            </div>

So, this is what my refreshPartial method is looking like:

function RefreshPartial() {
        alert("in refresh partial");
        alert("<%:Model.ChallengeId %>");
        $('#invited-teams').load('/Challenge/GetInvitedTeams', { 
            'paramname': '<%:Model.ChallengeId %>'
        });


    }

it alerts both alerts correctly, with the 2nd one having the correct ChallengeID. The page is still going blank though. hmm..

Answer by Starx

Your function does not specify a parameter name.

function RefreshPartial() {
    $('#invited-teams').load('/Challenge/GetInvitedTeams', {
       'paramname' :'<%:Model.ChallengeId %>'//Or your ASP wrapper here
    });
}  
August 14, 2012

How can I chage the color of the link in Html.Action link, when the mouse is over the div?

Question by Andrey Lima Ramos

I am using MVC3.
I have a table and an Html.ActionLink inside of it.
I have already set the text decoration for none, but the link is still blue. I change the table:hover background-color and the color(of the text), and when I put the mouse over the row, the text that are not a link gets white, but the link still blue. If I change the a:hover, the link gets white just when I put the mouse over it, and not just over the row.

Is there a way to do that with css?

Answer by Starx

Typically, to cover all the anchors when you are hovering over the row.

#tableid tr:hover a {
    /* Your Styles */
}

But this does not work on all IE browser so, use JS to catch the event and apply styles to anchors in it.

April 2, 2012

Fastest way to checked checkboxes that have a value of specific list in jQuery

Question by Saeid

This is My HTML Dom:

<input type="checkbox" class="chk-act" name="actionChk" value="17">
<input type="checkbox" class="chk-act" name="actionChk" value="18">
<input type="checkbox" class="chk-act" name="actionChk" value="19">
<input type="checkbox" class="chk-act" name="actionChk" value="20">
<input type="checkbox" class="chk-act" name="actionChk" value="21">

And I have a jQuery script that returned a JSon response by ajax:

["18","20","21"]

The list can be as long as up to 200 members. So I am interested to find out the fastest way to checked checkboxes, that have a value in above list, when the response is returned. What is your suggestion?

Answer by Jibi Abraham

The fastest way would be to add an id identifier to your list of checkboxes. For example –

<input type="checkbox" class="chk-act" name="actionChk" value="17" id='chk-act-17' />
//incidentally, I hope the lack of a closing '/' was an oversight
//when you get your JSON response, in your ajax success or done methods
var resp = ["12", "232"],
    respLength = resp.length;
for(var i = 0; i < respLength; i += 1){
    $('#chk-act-' + resp[i]).prop('checked', true);
    //if your are using jquery 1.7+ that is, otherwise use, 
    $('#chk-act-' + resp[i]).attr('checked', 'checked');
}

JS Perf Tests

Comparing the two current answers, the OP’s requirement of “fastest” would be better served by going down the uglier ‘id‘ implementation.
Js Perf

FIddle added

JS FIddle

Posting code from fiddle-

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
    checkboxes = $('.chk');

checkboxes.each(function(i, item){
    $(this).prop('checked', false);
});

arr.forEach(function(item, i) {
    $('#chk_' + item).prop('checked', true);
});

Answer by Starx

Mixing jQuery on this

arr = ["18","20","21"];
$("input:checkbox").prop('checked', false); //If you need to uncheck other boxes too
$.each(arr, function(k,v) {       
   $("input[value=""+v+""]").prop('checked', true);
});

Demo 1 | Demo 2: with all other checks removed

March 23, 2012

Problems with my javascript, I dont want to validate <select> tags that are disabled

Question by ps__

This javascript will find all my selects and validate them but I want to add that it doesnt validate my disabled selects. How can I code that in my javascript?

$("#next-step").click(function () {

                var $step = $(".wizard-step:visible"); // get current step

                var validator = $("form").validate(); // obtain validator
                var anyError = false;
                $step.find("select").each(function () {
                    if (!validator.element(this)) { // validate every input element inside this step
                        anyError = true;
                    }


                });

                if (anyError)
                    return false; // exit if any error found

Thanks in advance!

Answer by ehynds

if (!this.disabled && !validator.element(this)) {
    anyError = true;
}​

or (slower)

$step.find("select:enabled").each(function() {
    if (!validator.element(this)) {
        anyError = true;
    }
});​

Answer by Starx

The easiest way, i know of is to give the select tags, a class like skipvalidation and then

$("form").validate(
   ignore: ".skipvalidation"
);

You can find all the disabled elements and add the class as

$("input:disabled").addClass("skipValidation");
$("form").validate(
   ignore: ".skipvalidation"
);
...

Please fill the form - I will response as fast as I can!