Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Intermittent jQuery in IE 11 Only

Posted on 2014-01-13
4
Medium Priority
?
728 Views
Last Modified: 2014-01-17
I’m trying to change a button color in an iFrame bases on the drop down list. My code works every time in Chrome but in IE it works about 45% of the time. It fails on loading. If it works on load it keeps working. If it fails on load it never works. Note, this is a DNN site.

Non-repeatable bugs drive me crazy. Any ideas?

Thanks!

    function buttonColor()
        {
            var color
            switch ($(this).val())
            {
                case "Orange": color = "#FF8429"; break;
                case "Green": color = "#00C354"; break;

            };

            var btn = $(this).closest("td").siblings("td").find(".btnPayPal");
            btn.css("background-color", color);
            btn.css("border", "1px solid " + color);

        }; // END buttonColor

    </script>
    <script>
        $(window).ready(function ()
        {
            $(".iFProductOne").load(function () { $(".iFProductOne").contents().find(".ddlPayPal").on("change", buttonColor) });
            $(".iFProductTwo").load(function () { $(".iFProductTwo").contents().find(".ddlPayPal").on("change", buttonColor) });
            console.log("Win Ready");
        }); 
    </script>

Open in new window


IFRAME LOADED:

Form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="XXX">
<table class="ppTable">
    <tr>
        <td>
            <select name="os0"  class="ddlPayPal">
                <option value="Orange">Orange </option>
                <option value="Green">Green </option>
            </select>
        </td>
        <td>
            <input class="btnPayPal" type="submit" border="0" name="submit" value="Add to Cart" style="color: white;
                background-color: gray; border: 1px solid #FF8429" />
        </td>
    </tr>
</table>
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif"
    width="1" height="1">
</form>

Open in new window

0
Comment
Question by:rcl58
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39778153
Did you really put :  $(window).ready(function ()
instead :  $(window).load(function ()
0
 

Author Comment

by:rcl58
ID: 39779123
I have the code in $(window).ready because in reality I have six iframes on the page and it was binding to maybe two sporadically which lead me to believe that all the iframes were not loaded yet. I tried it in $(document).ready, $(window).load and just in <script>. I’ve gotten closest with in $(window).ready.

I have also added a trigger to to compensate for the widow being completed.

$(".iFProductOne").load(function () { $(".iFProductOne").contents().find(".ddlPayPal").on("change", buttonColor) });
$(".iFProductOne").load(function () { $(".iFProductOne").contents().find(".ddlPayPal").trigger("change") });

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 1500 total points
ID: 39779192
could you add javascript code in the iframe page?
0
 

Author Closing Comment

by:rcl58
ID: 39790018
I have not solved this problem but have to move on and will re-examine later. TX
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

670 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question