[RESOLVED]jquery crosspage

i have a main page with tabs.

<body>
    <input runat="server" id="hdnReload" type="hidden" value="0" />
    <input runat="server" id="hdnChange" type="hidden" value="0" />
    <input type="hidden" id="hdnChangeContract" class="change" value="0" />
    <input runat="server" id="hdnIdContract" type="hidden" value="0" />
    <input type="hidden" runat="server" id="hdnTypeEmployer" value="0" />
    <ul class="nav nav-tabs" role="tablist">
        <li class="active"><a class="tabLink" Link="Details" href="#">Details</a></li>
        <li><a class="tabLink" Link="Looncomponenten" href="#">Looncomponenten</a></li>
        <li><a class="tabLink" Link="Log" href="#">Log</a></li>
    </ul>
    <div id="BodyContainer">
        <div id="DetailContainer">
            <div id="loader" style="line-height: 115px; text-align: center;">
                <img src="../../Content/ajax-loader.gif" alt="" />
            </div>
        </div>
        <div id="RemunContainer">
            <div id="Div2" style="line-height: 115px; text-align: center;">
                <img src="../../Content/ajax-loader.gif" alt="" />
            </div>            
        </div>
        <div id="LogContainer">
            <div id="Div1" style="line-height: 115px; text-align: center;">
                <img src="../../Content/ajax-loader.gif" alt="" />
            </div>
        </div>
    </div>
</body>

i have a hdnChange and a hdnChangeContract in my main view. and i use a script like 

        $('.change').on('change', function () {
            if ($('#hdnChangeContract').val() == "0") {
                $('#hdnChange').val(0);
            }
            else {
                $('#hdnChange').val(1);
            }
        });

also tried 

        $('body').on('change', '.change', function () {
            if ($('#hdnChangeContract').val() == "0") {
                $('#hdnChange').val(0);
            }
            else {
                $('#hdnChange').val(1);
            }
        });

then in my partials i have a script like 

        $('input').on('input', function () {
            $('#hdnChangeContract').val(1).trigger('change');
        });

this script is working perfectly it changes the value in the main view but it doesn’t trigger the change event in the main view so the script to change hdnChange to 1 is not working.

i tried catching the change event in the partial and that works perfect but then i would have to copy that script to all my future partials which doesn’t look like best practice to me.

can someone help me out or make clear why it doesn’t work?

Are you attaching the change event in the $(document).ready() event?  It could be your code is running before the desired elements have been created.  Running your code on the ready event (or using one of the equivalent syntax versions) ensures the elements
are all there before you attach events.

Have you tried using the Developer Tools (F12) within your browser to see if any errors are present within the Console? 

Additionally, you might want to check the following :

  • Ensure your jQuery code is placed within a "document.ready" block so that it is guaranteed that jQuery will be loaded prior to attempting to execute any jQuery-related code :
    <script type='text/javascript'>
        // Short-hand Document Ready Block
        $(function(){
            // One of your jQuery events
            $('.change').on('change', function () {
                if ($('#hdnChangeContract').val() == "0") {
                    $('#hdnChange').val(0);
                }
                else {
                    $('#hdnChange').val(1);
                }
            });
    
            // Other jQuery functions omitted for brevity
        });
    </script>
  • You might try also defining your other event (that is currently within your Partial View) within your main page instead. Since you are using the "on" event handler, it will target both present and future elements that match the specific selector :
    <script type='text/javascript'>
        // Short-hand Document Ready Block
        $(function(){
            // One of your jQuery events
            $('.change').on('change', function () {
                if ($('#hdnChangeContract').val() == "0") {
                    $('#hdnChange').val(0);
                }
                else {
                    $('#hdnChange').val(1);
                }
            });
    
            // Your "future" event
            $('input').on('input', function(){
                $("#hdnChangeContract').val(1).trigger('change');
            });
    
            // Other jQuery functions omitted for brevity 
        });
    </script>
  • Ensure your actual scripts are correct. If you wanted to capture when your input element changed, you could always use either the ‘change’, ‘keyup’, ‘keydown’ or ‘blur’ events instead of ‘input’ to see if that makes any difference :
    $('input').on('change', function () {
                $('#hdnChangeContract').val(1).trigger('change');
    });

Those are just a few suggestions, but hopefully one of them helps you out.

AidyF

Are you attaching the change event in the $(document).ready() 

i’m using 

    $(function () {

    });

just the shorthand of the document load.

anyway i tried the fully typed version but without success

Rion Williams

Have you tried using the Developer Tools (F12) within your browser to see if any errors are present within the Console? 

yes i also put debugger line in my partial so i could debug that. no errors are present.

Rion Williams

You might try also defining your other event (that is currently within your Partial View) within your main page instead. Since you are using the "on" event handler, it will target both present and future elements that match the specific selector :

i can’t do that because that event should not have any effect on my other tabs. (i might still have a problem there executing it within my partial)

Rion Williams

Ensure your actual scripts are correct. If you wanted to capture when your input element changed, you could always use either the ‘change’, ‘keyup’, ‘keydown’ or ‘blur’ events instead of ‘input’ to see if that makes any difference :

this script is working perfectly. in an early version i only had hdnChange and only 2 tabs with 1 page that was readonly.

the thing is we are using ext.net. we have a dashboard with tabs and within one tab i have my main page with 2 tabs so if someone tries to close the main page it has to give a modal that there are still changes within the page. it might give some insight
on why these hdnChangeContract and hdnChange in the next stage there would come an extra hdnChangeRemun. 

Thanks Rion, 

your post brought me on an idea, so here a working solution.

in main view i now have:

    function CheckChange() {
        if ($('#hdnChangeContract').val() == "0" && $('#hdnChangeRemun').val() == "0") {
            $('#hdnChange').val(0);
        }
        else {
            $('#hdnChange').val(1);
        }
    }

    $(function () {
        setInterval(function () {
            CheckChange();
        }, 100);

        $('#DetailContainer').on('input', 'input', function () {
            $('#hdnChangeContract').val(1);
        });
        $('#DetailContainer').on('change', 'select', function () {
            $('#hdnChangeContract').val(1);
        });

        $('#RemunContainer').on('input', 'input', function () {
            $('#hdnChangeRemun').val(1);
        });
    });

so now i wouldn’t have the problem when changing something in other tabs. 

i tried with the change event in my main view but for some reason it’s just not working while it does work when i put these scripts in my partial. i have no idea why but i have this little workarround with setinterval.

thanks for the little push i needed.

Leave a Reply