www.webdeveloper.com

View Poll Results: Why click is triggering twice with other browsers than IE?

Voters
0. You may not vote on this poll
  • Click event

    0 0%
  • Triggering twice

    0 0%
Results 1 to 8 of 8

Thread: Event JS redundancy with different browsers

Hybrid View

  1. #1
    Join Date
    Jan 2013
    Location
    Itterbeek
    Posts
    4

    Event JS redundancy with different browsers

    -----------------------------------------------------------------------------------
    Question 1:
    -----------------------------------------------------------------------------------
    On Fri, Jan 11, 2013 at 8:53 AM, Daniel Pisters wrote:
    > Dear Sir.
    >
    > I have integrated your sorttable.js module in my web application as a
    > poor web JavaScript developer beginner :
    >
    > Please see the result on the Creative part of my new website :
    >
    > http://www.danielpisters.eu/
    >
    > or
    >
    > http://www.imaginenigma.com/
    >
    > or soon (as stupid nationalism requires)
    >
    > http://www.danielpisters.be
    >
    > This site is build from Dreamweaver CS6. On my Internet Explorer 8
    > (yet with Windows XP) , when I click on a header column, the content
    > is perfectly sorted in ascending or descending order. But with Google
    > Chrome or Safari, the sorting does not work ; it is sorted only once
    > in descending order. Can you suggest me a way to change your code to
    > match the specificities of these damned browsers?
    >
    > I thank you in advance,
    >
    > Daniel Pisters

    ---------------------------------------------------------------------------------
    Answer to Question I
    ---------------------------------------------------------------------------------
    <pre lang="xml">Your problem, according to the web console in Firefox, is being throws by thiscode:

    &lt;script&gt;
    $(function() {
    $(&quot;#panel&quot.sortable({
    items: &quot;.content&quot;,
    forcePlaceholderSize: true
    }).disableSelection();
    $(&quot;.content&quot.disableSelection();}
    );
    &lt;/script&gt;

    I don't know what that code is, I'm afraid; it doesn't seem to have anything to do with my sorttable.js :-)

    sil</pre>

    -----------------------------------------------------------------------------------
    Question II
    -----------------------------------------------------------------------------------

    De : Daniel Pisters Envoyé : dimanche 13 janvier 2013 7:36 À : 'Stuart Langridge'
    Objet : RE: Sortable
    Importance : Haute

    Dear Sir,

    First, I have to thank you very much for your rapid reactivity.

    I put in comment the code you have pointed out as probably guilty and it did not change anything so that I uncommented it.
    I have tested your code on IE, Firefox, Google Chrome and Safari. Google Chrome is perceived as a combined, hybrid Opera/Safari probably from legacy upon which this new monster was build

    Compared to the first (IE), those browsers have different behaviors in catching the click event; that is to say: dean_AddEvent is called twice for the same event so that when the column was sorted, it is sorted again in the reverse order, resulting in a column being always sorted in the same order (descending). Please, see the sequence bellow:

    After loading the page:

    <Click>
    dean_addEvent
    dean_addEvent
    reverse

    <Click>
    dean_addEvent
    re-reverse
    dean_addEvent
    reverse

    The sort occurs twice for the same event.

    Note however that I have experienced such event redundancy in non web system, event programming such as Oracle Forms 4.5 and so on for Windows.

    I repeat that I am only a poor JavaScript beginner. I don't like very much this programming style, though it may be very tricky and elegant at the same time, such as yours. An objet language without class can be understood by the fact it has to deal with the dynamic of web pages, which does not allow referring upstream to static definitions, I suppose, but you are foreseeing as well as me that it will not last very long and that the near future is to be able programming for the web as for a windows application, without seeing much difference. Beside those philosophical considerations, please help me, because your programming level in JavaScript is too high in comparison with mine to allow pretending to debug it an correct it in the good way.

    Thank in advance,

    Daniel Pisters

    -----------------------------------------------------------------------------------
    This sequence can be traced on my test website: http://espritnegatif.businesscatalyst.com
    -----------------------------------------------------------------------------------

    I thanks you all in advance,

    Daniel Pisters

  2. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    I think I found a problem in sorttable.js...

    Code:
    if (this.className.search(/\bsorttable_sorted\b/) != -1) {
      ...
      this.className = this.className.replace('sorttable_sorted', 'sorttable_sorted_reverse');
      ...
    }
    if (this.className.search(/\bsorttable_sorted_reverse\b/) != -1) {
      ...
      this.className = this.className.replace('sorttable_sorted_reverse', 'sorttable_sorted');
      ...
    }
    If the first if statement passes then the second one also will because the class is changed in such a way. An else keyword would probably be suitable here. :)

    The click event is not triggered twice as far as I know. You might also want to check the console for errors.
    Last edited by ReFreezed; 01-22-2013 at 10:03 AM.

  3. #3
    Join Date
    Jan 2013
    Location
    Itterbeek
    Posts
    4

    Return

    Did you note that that there is a return statement in each {} so that an ELSE is not necessary. However, I inserted an ELSE between the two bracketed statements in order to be sure beyond programming logic by the practical verification, and it didn’t work better.
    In any case, I thank you for your attempt to solve my damned problem and continue hoping you to provide a solution.
    Daniel Pisters
    http://danielpisters.eu
    http://danielpisters.be
    http://imaginenigma.com

    Quote Originally Posted by ReFreezed View Post
    I think I found a problem in sorttable.js...

    Code:
    if (this.className.search(/\bsorttable_sorted\b/) != -1) {
      ...
      this.className = this.className.replace('sorttable_sorted', 'sorttable_sorted_reverse');
      ...
    }
    if (this.className.search(/\bsorttable_sorted_reverse\b/) != -1) {
      ...
      this.className = this.className.replace('sorttable_sorted_reverse', 'sorttable_sorted');
      ...
    }
    If the first if statement passes then the second one also will because the class is changed in such a way. An else keyword would probably be suitable here.

    The click event is not triggered twice as far as I know. You might also want to check the console for errors.

  4. #4
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    No I missed the return statements, but I now noticed that you're including the sorttable.js file several times in the HTML file.

  5. #5
    Join Date
    Jan 2013
    Location
    Itterbeek
    Posts
    4
    No. <script src="/javascripts/sorttable.js"></script> appears only one time in the <head> part of the HTML file. I have verified it by a search. How did you note that sorttable.js was included several time in it?

  6. #6
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    No, in /Creative.html the script (sorttable.js) is included twice, not in the head tag at the top of the html document, but in two other separate head tags - a quick search will prove that. Your head and body tags are all over the place it seems! :S

  7. #7
    Join Date
    Jan 2013
    Location
    Itterbeek
    Posts
    4

    Html Creative refers to two others in a container

    In fact, sorttable.js is included only once in two othes html CreativePouhons.html and Inventairesdesoeuvres.html in a a container. In this two subcreatives, sorttable.js is well included only once, but when you right-click to see the source, all seem to be mixed in only one html file, although it is well separated in Creative.html:

    <div class="container">
    <!-- InstanceBeginEditable name="ContentArea" -->
    <section class="eleven columns content">
    <article>
    <header>
    <h2>Ecrivain, poète, dessinateur</h2>
    </header>
    </article>
    <table width="641">
    <tr>
    <td width="579" height="41">
    <!-- <aside class="four columns offset-by-one"> -->
    <!-- you can edit the sidebar from "_System/ContentHolders/creativePouhons.html" -->
    {module_contentholder,name="creativePouhons"}
    <!-- </aside> -->
    </td>
    </tr>
    <tr>
    <td width="579" height="41">
    <!-- <aside class="four columns offset-by-one"> -->
    <!-- you can edit the sidebar from "_System/ContentHolders/inventairedesOeuvres.html" -->
    {module_contentholder,name="inventairedesOeuvres"}
    <!-- </aside> -->
    </td>
    </tr>
    <tr>
    <td height="41">
    <!-- <aside class="four columns offset-by-one"> -->
    <!-- you can edit the sidebar from "_System/ContentHolders/?.html" -->

    <!-- </aside> -->
    </td>
    </tr>
    </table>
    </section>

    <aside class="four columns offset-by-one">

    <!-- you can edit the sidebar from "_System/ContentHolders/sidebar.html" -->
    {module_contentholder,name="creativesidebar"}

    </aside>

    <!-- InstanceEndEditable -->
    </div>

  8. #8
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    Then that's your problem: both CreativePouhons.html and Inventairesdesoeuvres.html contains <head> and <body> elements, and both files imports the sorttable.js script which affects the final page, Creative.html (which is the only page the browser sees). I'm guessing you want to either use iframes here, or simply remove the body tag and the whole head from those files and only import the sorttable script in the head of Creative.html.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles