locked
conditional bootstrap modal on click of webgrid row - redirect not working RRS feed

  • Question

  • User379720387 posted

    Suppose I have grid like this

    72 Name1 Location1 testing

    84 Name2 Location2 hold

    If the fourth column of the clicked row = "hold" I want to execute a redirect to another page

    any other string  there and I want to open the modal

    The opening of the modal works, however when I click the row that has "hold" the the background changes but the modal never opens.

    Stepping through this in the debugger in the browser, it is not immediately clear if child(3) is even recognized, or if it can find selectSetup.

    Any suggestions on how to make this work?

    TIA

    wavemaster

    $('#thetableTOP tbody tr').hover( function(){
                $(this).toggleClass('clickable');
            }).on('click', function(e){
                // if it is NOT a checkbox, OPEN modal
                if(e.target.type != "checkbox"){
                    if ($(this).find('td:nth-child(3)').text() == "hold"){
                        window.location.href("~/AdminUser/selectSetup.cshtml");
                        return false;
                    }
                    else
                    {
                        $('#detailsModal').removeData('bs.modal');
                        $('#detailsModal').modal({
                            keyboard: false,
                            remote: 'appDetailsSite/' + $(this).find("td:first").text()
                        });
                        $('body').on('hidden.bs.modal', '.modal', function () {
                            $(this).html("");                    
                        });
                    }
                }
            });

    Monday, November 7, 2016 9:09 PM

Answers

  • User-1838255255 posted

    Hi wavemaster,

    According to your code, I test your code, I found window.location.href("") is not work, you need use window.location.href="url"; Here is my code:

    <head>
        <title></title>
    	<meta charset="utf-8" />
        <script src="Scripts/jquery-1.10.2.js"></script>
        <script>
            function change() {
                window.location.href="http://www.google.com.sg";
            }
        </script>
    </head>
    <body>
        <input id="Button1" type="button" onclick="change()" value="button" />
    </body>

    You can refer it, if this suggestion can't solve your problem, please post your all code for test.

    Best Regards,

    Eric Du
     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 8, 2016 5:27 AM
  • User-183374066 posted

    the if statement does not work.

    Put a break debugger in your code and find out either your pointing to right cell or not. Some times we have hidden column in the grid which cause wrong pointing.

    debugger;
    if ($(this).find('td:nth-child(3)').text() == "hold"){
                        window.location.href = "/AdminUser/selectSetup";
                        return false;
                    }
    
    

    The other thing you can do is place hold inside a tag (let say span) and give it an id (let say mySpan) and change your code to 

    debugger;
    if ($(this).find('#mySpan').text().toLowerCase() == "hold"){ // or you can use $(this).find('#mySpan').text().toLowerCase().includes("hold")
                        window.location.href = "/AdminUser/selectSetup";
                        return false;
                    }
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 8, 2016 9:19 AM

All replies

  • User-183374066 posted

    window.location.href("~/AdminUser/selectSetup.cshtml");

    ~ sign doesn't work and you can't load directly the cshtml file. 

    Try like following

    window.location.href = "/AdminUser/selectSetup")

    Assuming AdminUser is Controller and SelectSetup is action name

    Or 

    window.location.href = '@Url.Action("selectSetup", "AdminUser")';

    Monday, November 7, 2016 10:49 PM
  • User379720387 posted

    the if statement does not work.

    doesn't even reach the redirect.

    What is wrong with the condition?

    Tuesday, November 8, 2016 12:42 AM
  • User-1838255255 posted

    Hi wavemaster,

    According to your code, I test your code, I found window.location.href("") is not work, you need use window.location.href="url"; Here is my code:

    <head>
        <title></title>
    	<meta charset="utf-8" />
        <script src="Scripts/jquery-1.10.2.js"></script>
        <script>
            function change() {
                window.location.href="http://www.google.com.sg";
            }
        </script>
    </head>
    <body>
        <input id="Button1" type="button" onclick="change()" value="button" />
    </body>

    You can refer it, if this suggestion can't solve your problem, please post your all code for test.

    Best Regards,

    Eric Du
     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 8, 2016 5:27 AM
  • User-183374066 posted

    the if statement does not work.

    Put a break debugger in your code and find out either your pointing to right cell or not. Some times we have hidden column in the grid which cause wrong pointing.

    debugger;
    if ($(this).find('td:nth-child(3)').text() == "hold"){
                        window.location.href = "/AdminUser/selectSetup";
                        return false;
                    }
    
    

    The other thing you can do is place hold inside a tag (let say span) and give it an id (let say mySpan) and change your code to 

    debugger;
    if ($(this).find('#mySpan').text().toLowerCase() == "hold"){ // or you can use $(this).find('#mySpan').text().toLowerCase().includes("hold")
                        window.location.href = "/AdminUser/selectSetup";
                        return false;
                    }
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 8, 2016 9:19 AM
  • User379720387 posted

    Eric,

    the code doesn't reach the redirect just yet.

    But I take you suggestion anyway.

    Do you have any suggestions on the if statement  how to make that work?

    Thanks.

    Tuesday, November 8, 2016 12:10 PM
  • User379720387 posted

    With the debugger sitting at the if statement I can navigate the properties of "this".

    Under the 4th (base 0) node Children.HtmlCollection(6) I can see innerHtml as "hold"

    Still takes the wrong branch.

    Tuesday, November 8, 2016 12:38 PM
  • User-1838255255 posted

    Hi wavemaster,

    I test my post code of the early reply, it run perfect. So I'm not clear the condition of the code in your side, So I hope you can post your code for me test.

    Best Regards,

    Eric Du

    Tuesday, November 8, 2016 12:41 PM
  • User379720387 posted

    You suggestion to check if I had the right column was what pushed me again to check.

    Columns are counted by base 1, so my column was 5.

    And there was a formatting problem with the condition.

    The one that worked is:

     if ($(this).find("td:nth-child(5)").text() ==  "hold"){



    Thanks to both of you for the help.

    Tuesday, November 8, 2016 2:06 PM