Click here to Skip to main content
14,297,845 members

JavaScript

 
QuestionCan anyone help me understand this code? Pin
Member 1411814323-Jan-19 1:20
memberMember 1411814323-Jan-19 1:20 
AnswerRe: Can anyone help me understand this code? Pin
Richard Deeming23-Jan-19 7:35
mveRichard Deeming23-Jan-19 7:35 
QuestionJavaScript : TypeScript :: Python : <what> Pin
Amarnath S20-Jan-19 16:58
professionalAmarnath S20-Jan-19 16:58 
AnswerRe: JavaScript : TypeScript :: Python : <what> Pin
Richard MacCutchan20-Jan-19 21:29
protectorRichard MacCutchan20-Jan-19 21:29 
QuestionInjecting an external page to a div using ajax. Pin
Member 1125974616-Jan-19 23:59
memberMember 1125974616-Jan-19 23:59 
AnswerRe: Injecting an external page to a div using ajax. Pin
Graham Breach17-Jan-19 0:31
memberGraham Breach17-Jan-19 0:31 
GeneralRe: Injecting an external page to a div using ajax. Pin
Member 1125974617-Jan-19 0:36
memberMember 1125974617-Jan-19 0:36 
QuestionCan someone help me reverse engineer this code and get it working as jQuery? Pin
Member 1411874515-Jan-19 4:14
memberMember 1411874515-Jan-19 4:14 
Hi, I am trying to get a page to work properly offline. It uses EmberJS for rendering, RequireJS for defining modules. Since I have the page fully loaded I don't need any of the app-specific functionality. I just need user interaction on page to work. Here is example of HTML that I am trying to get to behave properly:

<div id="area49253971_6938" class="component interaction-component float-none clear-none  interaction_booted">
    <div role="status" class="int-prep hidden"><br> Loading interaction...</div>
    <div>
        <div class="data-field interaction-type">RevealContent</div>
        <div class="interaction_title"></div>
        <div class="interaction_content RevealContent" style="min-height: 400px; width: 400px;">
            <div class="pointer">
                <td>
                    <div id="area49253971_6940" class="component image-component float-left clear-none  booted"><img src="somelink" height="50" width="30" title="" alt="" style="padding-right: 10px;"></div>
                    <p class="body" id="area49253971_6941"><a href="#">Some question</a></p>
                </td>
            </div>
            <div style="display: block;">
                <td>
                    <p class="body" id="area49253971_6942">Some answer</p>
                </td>
            </div>
        </div>
        <div class="interaction_data" style="display: none;">
            <div id="area49253971_6939" class="component table-component float-none clear-none ">
                <div class="component_caption"></div>
            </div>
        </div>
    </div>
</div>


It is just a simple hide/show interaction. Here is the code that the app uses to make this work:

define("site/mixins/interactions/reveal_content", ["exports", "jquery"], function (exports, _jquery) {

  function RevealContent($el) {
    this.el = $el;

    this.interactionData = $el.find(".interaction_data");
    this.container = $el.find(".interaction_content");
  }

  RevealContent.prototype = {
    init: function init() {
      var contentToReveal = (0, _jquery["default"])('<div />').append((0, _jquery["default"])(this.interactionData.find('td')[1]).detach());
      var initialContent = (0, _jquery["default"])('<div class="pointer" />').append((0, _jquery["default"])(this.interactionData.find('td')[0]).detach());

      this.container = this.container.parent().find('.RevealContent');

      this.container.append(initialContent);
      this.container.append(contentToReveal.hide());

      initialContent.click(function () {
        (0, _jquery["default"])(contentToReveal).slideToggle('slow');
      });

      // prevent any links within initialContent from navigating anywhere
      initialContent.find('a').click(function (e) {
        e.preventDefault();
      });
    }
  };

  exports["default"] = RevealContent;
});


I think this code depends on various app-specific touch points. So I am trying to get it to work using jQuery alone (though I would like to get it working as is...).

So I tried this:

$(document).ready(function() {
    $(this).on('click', '.interaction_booted', function () {
    //console.log('made it here');
     
        interactionData = $(this).find(".interaction_data");
        this.container = $(this).find(".interaction_content");
        
        var contentToReveal = $('<div />').append($(interactionData.find('tdd')[1]).detach());
        var initialContent = $('<div class="pointer" />').append($(interactionData.find('tdd')[0]).detach());

        this.container = this.container.parent().find('.RevealContent');

        this.container.append(initialContent);
        this.container.append(contentToReveal.hide());

        initialContent.click(function () {
            $(contentToReveal).slideToggle('slow');
        });

    });
  
    
});


Notice I changed the td elements to tdd because these td elements are without a table parent and Chrome was removing the td tags that this script looks for. So in my tests I changed the HTML tags as well. So in the above HTML, I am actually using <tdd>.

Now I have interactionData and this.container returning same values as the remote version of the site, as confirmed by stepping through the js code in Chrome. But things fail at these lines

var contentToReveal = $('<div />').append($(interactionData.find('tdd')[1]).detach());
var initialContent = $('<div class="pointer" />').append($(interactionData.find('tdd')[0]).detach());


What I mean by fail, is the return vales are not the same as on the remote page. The tdd elements are not being returned. Now I have no idea what these two lines of code even mean. And not sure what an append() function followed by detach() is supposed to be doing...

In the original code above these lines are

var contentToReveal = (0, _jquery["default"])('<div />').append((0, _jquery["default"])(this.interactionData.find('td')[1]).detach());
var initialContent = (0, _jquery["default"])('<div class="pointer" />').append((0, _jquery["default"])(this.interactionData.find('td')[0]).detach());


I took a guess that (0, _jquery["default"]) is the jQuery operator $.

But really, I have no idea what I have to do to get this to work as plain jQuery. So that is why I am here.

Can anyone help me get this working?

Thanks!
QuestionJavaScript Pin
Bram van Kampen11-Jan-19 13:52
memberBram van Kampen11-Jan-19 13:52 
AnswerRe: JavaScript Pin
Richard MacCutchan11-Jan-19 22:50
protectorRichard MacCutchan11-Jan-19 22:50 
AnswerRe: JavaScript Pin
Nathan Minier14-Jan-19 1:16
professionalNathan Minier14-Jan-19 1:16 
QuestionGet html element position on window scroll Pin
Vinod Jangle9-Jan-19 3:43
memberVinod Jangle9-Jan-19 3:43 
AnswerRe: Get html element position on window scroll Pin
Richard Deeming9-Jan-19 8:12
mveRichard Deeming9-Jan-19 8:12 
QuestionFailing to call the put and post Web Api methods from the react js components Pin
simpledeveloper24-Dec-18 9:55
membersimpledeveloper24-Dec-18 9:55 
Questionget a function to countdown (from any number) to zero Pin
Member 1409810523-Dec-18 14:49
memberMember 1409810523-Dec-18 14:49 
QuestionRe: get a function to countdown (from any number) to zero Pin
Richard MacCutchan25-Dec-18 21:18
protectorRichard MacCutchan25-Dec-18 21:18 
AnswerRe: get a function to countdown (from any number) to zero Pin
Bohdan Stupak9-Jan-19 19:40
professionalBohdan Stupak9-Jan-19 19:40 
Questionhow to get a js fuction to return html opening and closing tag Pin
Member 1409810522-Dec-18 17:34
memberMember 1409810522-Dec-18 17:34 
AnswerRe: how to get a js fuction to return html opening and closing tag Pin
Richard MacCutchan22-Dec-18 23:35
protectorRichard MacCutchan22-Dec-18 23:35 
GeneralRe: how to get a js fuction to return html opening and closing tag Pin
Member 1409810523-Dec-18 14:31
memberMember 1409810523-Dec-18 14:31 
QuestionGet an html table multiple rows as a string URL for Ajax Pin
Member 1409585019-Dec-18 22:55
memberMember 1409585019-Dec-18 22:55 
AnswerRe: Get an html table multiple rows as a string URL for Ajax Pin
Afzaal Ahmad Zeeshan23-Dec-18 0:29
mveAfzaal Ahmad Zeeshan23-Dec-18 0:29 
Questiondebug shopping cart project Pin
ghazabaz13-Dec-18 15:56
memberghazabaz13-Dec-18 15:56 
Questione.target.value, switch-case operators Pin
ghazabaz6-Dec-18 19:22
memberghazabaz6-Dec-18 19:22 
QuestionRe: e.target.value, switch-case operators Pin
Richard MacCutchan6-Dec-18 23:26
protectorRichard MacCutchan6-Dec-18 23:26 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.