2

I am trying to load a div with different content based on the link I click...

While it seems to work for the first link when I click it, clicking the other links only replaces the content with the same content for 'encodeMe' , yet I have specified different content that I want to replace for 'htmlize-me'

The first run-through of this I did not use jQuery's .bind() function. I simply used .click() , and both had the same result. Looking through the jQuery API I thought using the .bind() function would bind each function within it to that particular page element, but it seems to apply it to all my links.

I've achieved the same effect using .hide and .show to toggle divs but I want to be more elegant about how I do that, and this was my attempted alternative...

here's the relevant html:

<label for="list-root">App Hardening</label>
<input type="checkbox" id="list-root" />
<ol>
   <li id="encode-me"><a class="show-popup" href="#">encodeMe()</a></li>
   <li id="htmlize-me"><a class="show-popup" href="#">htmlizeMe()</a></li>
</ol>
<div class="overlay-bg">
<div class="overlay-content">
    <div class="the-content"></div>
        <br><button class="close-button">Close</button>
    </div>
</div>

here's the script I made to trigger the content change:

$('#encode-me').bind('click' , function() {
   $('div.the-content').replaceWith('<h3 style="color: #008ccc;"> function encodeMe( string ) </h3>' +
        'Found in <p>[web root]/redacted/redacted.asp</p>');
    }); 
});
$('#htmlize-me').bind('click' , function() {
   $('div.the-content').replaceWith('Hi, Im something different');
    }); 
});
Brittany Alkire
  • 420
  • 5
  • 8

3 Answers3

3

Try something like this:

Use html() instead of replaceWith()

 $('#encode-me').bind('click' , function() {
       $('div.the-content').html('<h3 style="color: #008ccc;"> function encodeMe( string ) </h3>' +
            'Found in <p>[web root]/redacted/redacted.asp</p>');
        }); 
    });
    $('#htmlize-me').bind('click' , function() {
       $('div.the-content').html("Hi, I'm something different");
        }); 
    });
Aditya
  • 4,453
  • 3
  • 28
  • 39
  • i tried to upvote but apparently i need 15 rep points :( yay - nevermind, it worked =D i got more points :) – Brittany Alkire Apr 01 '14 at 18:51
  • There you go, read up on this question , you may find it helpful: http://stackoverflow.com/questions/730916/whats-the-difference-between-jquerys-replacewith-and-html – Aditya Apr 01 '14 at 18:54
  • And don't forget to accept your answer to the question , cheers! – Aditya Apr 01 '14 at 19:05
3

replaceWith does exactly what it sounds like, it replaces the div with the h3, so when you click the second link there is no div.

Try setting the innerHTML instead

$('#encode-me').on('click' , function() {
   $('div.the-content').html('<h3 style="color: #008ccc;"> function encodeMe( string ) </h3>Found in <p>[web root]/redacted/redacted.asp</p>');
});
$('#htmlize-me').on('click' , function() {
   $('div.the-content').html('Hi, I\'m something different');
});
adeneo
  • 312,895
  • 29
  • 395
  • 388
  • so i've noticed something - even when i do that (similar to the answer above also) clicking on 'encodeMe' replaced the inner html of the div with 'Hi Im something different' , which is the last in the list of calls to .html - and that makes me think something is always overwritten by the last call to .html – Brittany Alkire Apr 01 '14 at 18:47
  • 1
    `html()` will always overwrite whatever content is in the DIV, if you want to just add content you'd use `append()` instead. – adeneo Apr 01 '14 at 18:51
  • hmmm, makes sense - actually this gives me an idea of a way to hack around this. it might get ugly, but it's worth a shot =P – Brittany Alkire Apr 01 '14 at 19:01
  • 1
    @BrittanyAlkire - There are a multitude of jQuery methods to insert content, so you generally don't have to "hack" anything. There's append, appendTo, prepend, prependTo, insertBefore, before, insertAfter, after, html ++++ so just read up on them on the jQuery website (they all do pretty much what it sounds like) and you'll probably find something that fits, if not you can always ask on Stack Overflow. – adeneo Apr 01 '14 at 19:10
0

So I figured out a more clever way to do this! Use the DOM to your advantage - set up a nested list structure and change the content using .find() on parent and child elements the list.

Markup

<span style="font-size:1.4em">Type  
    <ul class="row">
        <li><a href="#" class="show-popup">Blah</a>
            <div class="overlay-content">
                <p><a href="#" class="close"></a></p>
                    <p class="changeText">Blah</p>
            </div>
        </li>
        <li><a href="#" class="show-popup">Blah2</a>
            <div class="overlay-content">
                <p><a href="#" class="close"></a></p>
                    <p class="changeText">Blah2</p>
            </div>
        </li>
    </ul>
</span><br>
<!-- OVERLAYS -->
<div class="overlay"></div>

CSS

.close {
    border-radius: 10px;
    background-image: url(../img/close-overlay.png);
    position: absolute;
    right:-10px;
    top:-15px;
    z-index:1002;
    height: 35px;
    width: 35px;
}

.overlay {
    position:absolute;
    top:0;
    left:0;
    z-index:10;
    height:100%;
    width:100%;
    background:#000;
    filter:alpha(opacity=60);
    -moz-opacity:.60;
    opacity:.60;
    display:none;
}
.overlay-content {
    position:fixed!important;
    width: 60%;
    height: 80%;
    top: 50%;
    left: 50%;
    background-color: #f5f5f5;
    display:none;
    z-index:1002;
    padding: 10px;
    margin: 0 0 0 -20%;
    cursor: default;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0,0,0,0.9);
}

Script

$(document).ready(function(){
$('.show-popup').click(function() {
    var ce = this;
    $('.overlay').show('slow', function() {
        $(ce).parent().find('.overlay-content').fadeIn('slow');
    });
});
// show popup when you click on the link
$('.show-popup').click(function(event){
    event.preventDefault(); // disable normal link function so that it doesn't refresh the page
    var docHeight = $(document).height(); //grab the height of the page
    var scrollTop = $(window).scrollTop(); //grab the px value from the top of the page to where you're scrolling       
    $('.overlay').show().css({'height' : docHeight}); //display your popup and set height to the page height
    $('.overlay-content').css({'top': scrollTop+100+'px'}); //set the content 100px from the window top   
});
/*
// hides the popup if user clicks anywhere outside the container
$('.overlay').click(function(){
    $('.overlay').hide();
})
*/
// prevents the overlay from closing if user clicks inside the popup overlay
$('.overlay-content').click(function(){
    return false;
});
$('.close').click(function() {
    $('.overlay-content').hide('slow', function() {
        $('.overlay').fadeOut();
    });
  });
});
Brittany Alkire
  • 420
  • 5
  • 8