Solved

Intermittent jQuery in IE 11 Only

Posted on 2014-01-13
4
719 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 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

Get HTML5 Certified

Want to be a web developer? You'll need to know HTML. Prepare for HTML5 certification by enrolling in July's Course of the Month! It's free for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
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…

635 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