Search jQuery

jQuery Forum

Better mechanics for this code?

in Using jQuery • 3 years ago

Hello,
I have the following code and even though it does what i want to do i think that i write too many lines of code for this function.

In short, i have some modals in which i load forms dynamically with .html(). I want to add / remove in each modal opened the "modal-lg, modal-md" class etc.. in a better way.

In my fiddle i use some if statements. Is there any other way to achieve this by using less lines of code?

I've tried addClass, removeClass, toggleClass etc.. but it doesn't seem to work as expected.

HERE'S MY FIDDLE

Thank you!

Replies(6)

watusiware

Re: Better mechanics for this code?

3 years ago

I don't understand the purpose of all this removeClass/addClass code. What is it accomplishing?

The purpose seems to be to insure that the modal-dialog is always "small" (has class modal-sm). Why not just write it that way in the first place?

And I don't see anything to "remove". (You don't have any class='modal-lg').

Nevertheless, you can write something like:

$('.modal-dialog).removeClass('modal-lg').addClass('modal-sm');

$('#mainModal').modal({show:true});

HarrysR

Re: Re: Better mechanics for this code?

3 years ago

I have several modals which should have different sizes. I only gave an example.

If i have 5+ modals in page and i want to load an .html() in its body then this is a problem.

I have this:

<div class="modal fade" id="mainModal">
<div class="modal-dialog modal-dialog-centered" id="modal-body" role="document">
</div>
</div>

in my footer in which i load the body containing some forms. Some forms should be smaller and others should be larger. That's why i asked this!
:)

watusiware

Re: Better mechanics for this code?

3 years ago

Use code similar to what I showed above. .removeClass() doesn't care if the class is present or not. It it is there, it removes it. If it is not, it does nothing. You can remove or add any number of classes, as well:

$('.some-selector').removeClass('fee fie').addClass('fo fum');

There's no need for the if statements.

Since your Fiddle has ONE dialog, I can't guess what you are doing with 5 of them.

Your selector:

$('.modal').find('.modal-dialog')

is overly-broad, and will affect ALL of the dialogs on the page (but there is only one in your Fiddle, so it "works").

Your fiddle always shows the same dialog, and always with modal-sm. So, not sure what the Fiddle is demonstrating.

HarrysR

Re: Re: Better mechanics for this code?

3 years ago

I thought i clarified it in my question.

Then yes i have MULTIPLE different modal bodies.

I try to add and remove classes based on if they already exist or not.

So in other words that's the best solution.

watusiware

Re: Better mechanics for this code?

3 years ago

I can't guess what it is you are REALLY trying to accomplish from your fiddle and your word stories.

Make a Fiddle that shows the real problem. You can fake the Ajax.

I try to add and remove classes based on if they already exist or not.

Really no clue what this means. It doesn't seem to matter from the code you showed whether they exist or not. It only ever opens one dialog, and it only ever sets the class to modal-sm.

I can't guess at what other code or HTML is in your head, or in some file you haven't shown us.

I realize you've tried to simplify for the Fiddle. But you simplified too much - we can't guess what you are trying to do. You keep talking about multiple dialogs, but you only have ONE.

You don't need 5 in a demo. But you should show TWO.

HarrysR