Solved

Intermittent jQuery in IE 11 Only

Posted on 2014-01-13
4
677 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
  • 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 500 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

867 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now