Simple jQuery show modal and print a print function while selecting a div

Question

So I have three containers. I have a print button that opens a modal. In that modal I am using jQuery to add a div (that is on the page) to the body of the modal. Inside the modal I have a print button that prints just the image. You can see an example here: http://schomphondaoffers.com/test1. Currently when you click print it should pop the modal without the buttons with the special above it. I am getting varied results with the second image showing up in all the modals, and only the first one removes the buttons.

Everything seems to work fine. With just one. I tried to duplicate this bit of code, to use it 3 times (I just replaced one with two and three for the other columns). I'm new to jquery and know there is a much simpler way to write this. I appreciate any help.

jQuery(document).ready(function( $ ) {

$('#sales-one').appendTo("body").modal('hide');

$('#print-one').click(function(){
    $('.special-one').printElement();
});

$(function(){
    var oldDiv= $('.special-one').html();
    $('.modal-body').html(oldDiv);  
});

$(function(){
    $('#sales-one').click();
    $('.modal-body').eq(0) //use 1 if you want to remove from second section
    .find('#special-one-button').remove();
});

});

jQuery(document).ready(function( $ ) {

$('#sales-two').appendTo("body").modal('hide');

$('#print-two').click(function(){
    $('.special-two').printElement();
});

$(function(){
    var oldDiv= $('.special-two').html();
    $('.modal-body').html(oldDiv);  
});

$(function(){
    $('#sales-two').click();
    $('.modal-body').eq(0) //use 1 if you want to remove from second section
    .find('#special-two-button').remove();
});

});

jQuery(document).ready(function( $ ) {

$('#sales-three').appendTo("body").modal('hide');

$('#print-three').click(function(){
    $('.special-three').printElement();
});

$(function(){
    var oldDiv= $('.special-three').html();
    $('.modal-body').html(oldDiv);  
});

$(function(){
    $('#sales-three').click();
    $('.modal-body').eq(0) //use 1 if you want to remove from second section
    .find('#special-three-button').remove();
});

});

Can you create a `http://www.bootply.com/` demonstrating your issue? That would help me come up with a solution for you. — Trevor, Jan 10 '14 at 20:24
I did but its a wordpress site so the image urls aren't working in it: http://www.bootply.com/104869 http://schomphondaoffers.com/test1 is a working page (same thing really) — user3180166, Jan 10 '14 at 20:36

score 0 · Accepted Answer · answered Jan 10 '14 at 22:06

0

jQuery

jQuery(document).ready(function( $ ) {
  $('.btw').click(function(){
    $('.modal-body').html($('.'+$(this).data('class')).html());
    $('.modal-body [id$=-button]').remove();
  });       
});

HTML

<button href="#sales-one" data-class="special-one" class="btw" data-toggle="modal">Print</button>
<button href="#sales-two" data-class="special-two" class="btw" data-toggle="modal">Print</button>
<button href="#sales-three" data-class="special-three" class="btw" data-toggle="modal">Print</button>

Here is an example that hopefully will help.

http://www.bootply.com/104889

I haven't look into refactoring your html too much but I did notice that you are using three modals.. You could factor that down so that your only using one instead of three. But I just worked on re-factoring the code you shared in your question and modifying the html a little so it would work.

answered Jan 10 '14 at 22:06

Trevor

16,080
9
52
83

@user3180166 please mark this answer as accepted if it answered your question. (There is a Check mark to the left of the answer that you can check) – Trevor Jan 10 '14 at 22:11
1

Awesome thanks! I look into using just one modal. That actually makes sense with how you wrote the button remove. – user3180166 Jan 10 '14 at 23:17
I have one more question about this line you wrote: $('.modal-body [id$=-button]').remove(); The [id$=-button] is what syntax? I've haven't run into it. I am trying to talk it out and my logic tells me is an array of buttons. I'm not sure about id$=- part tho. thanks again for your help – user3180166 Jan 13 '14 at 03:18
@user3180166 Yeah Basically its a wild card selector the `[id$=-button]` basically selects all the elements that have an `id` ending in `-button` Here is a question you can look at for reference. http://stackoverflow.com/questions/5376431/wildcards-in-jquery-selectors – Trevor Jan 13 '14 at 16:27
1

Thanks for the reference. I figured that it was something like that. It's all starting to make sense :) – user3180166 Jan 13 '14 at 18:10

Simple jQuery show modal and print a print function while selecting a div

1 Answers1