CODEWITHSUNDEEP
javascriptjqueryhtmlfunctionradio-button
tctc91
tctc91

Reputation: 1363

Creating a reusable jQuery function

Instead of re-writing a massive block of code each time, I'm trying to incorporate functions into my work but I'm having trouble making it work.

Basically, I've got a selection of radio buttons and I'm performing some stuff each time a radio button is clicked. (I'm actually loading an iFrame). However, I need to make the iFrame SRC different for each radio button so how would I cater for this within the function?

The function:

jQuery.fn.switchPreview = function () {
$('.liveDemoFrame').remove();
$('.liveDemoHand').append('<iframe class="liveDemoFrame" src="themes/src/' + themeName + '/" width="100%" height="300" scrolling="no"><p>Your browser does not support iframes.</p></iframe>');
$('.liveDemoHand').append('<div class="switchPreview"><div class="loadingPreview"></div></div>');
$('.liveDemoFrame').load(function() {
    $('.switchPreview').fadeOut();  
    $('.switchPreview').remove();   
    $('.liveDemoFrame').fadeIn();
});
return this;
}

Within the iFrame SRC I have a variable called themeName. I need this to somehow change for each radio button. You can see within the code that calls the function I've tried to declare the variable each time but this still gives me an undefined error.

The code that calls it:

$('#cTheme1').click(function () { 
    $('input:radio[name=mgChooseTheme]:nth(1)').attr('checked',true); 
            var themeName = 'theme1';
            $('.liveDemoFrame').switchPreview();
});

$('#cTheme2').click(function () { 
    $('input:radio[name=mgChooseTheme]:nth(2)').attr('checked',true); 
            var themeName = 'theme2';
            $('.liveDemoFrame').switchPreview();
});

$('#cTheme3').click(function () { 
    $('input:radio[name=mgChooseTheme]:nth(3)').attr('checked',true); 
            var themeName = 'theme3';
            $('.liveDemoFrame').switchPreview();
});

I'm sure this is something very simple but I'm still learning so little things always throw me off!

Upvotes: 1

Views: 1553

Answers (2)

Manse
Manse

Reputation: 38147

Why not just update the src tag of the iframe ...

$('#cTheme1').click(function () { 
    $('input:radio[name=mgChooseTheme]:nth(1)').attr('checked',true); 
            $('#liveDemoFrame').attr('src', <the new url>);
});

Then your iframe would already need to be part of the page : 

<iframe id='liveDemoFrame' src='<default page>'></iframe>

i notice your using a CLASS attribute on your iFrame and accessing it using that - you really need to think about using the ID attribute if you are just wanting to refer to a single object. (as in my example above)

Upvotes: 1

robmisio
robmisio

Reputation: 1176

Pass in the themeName as an argument of the switchPreview function.

-Change the first line of the function to:

jQuery.fn.switchPreview = function (themeName) {

-For each of the three times you are calling the function, make sure you are passing in the argument, i.e:

$('.liveDemoFrame').switchPreview(themeName);

Upvotes: 3

Related Questions