Category Archives: jQuery

Prevent double clicks on table rows with click event and anchors

Posted on by
Reply

Suppose you have a table, for example to show users, and you want the table row to be clickable. If you click the row, you will go to a page that shows user information. Or maybe edit the user. But the last column of your row also has some action buttons that can delete the user, de-activate it, or whatever. So, for example, something like this:

Now, if you add a click event on the tr, when you click the button, both the button and click event will fire. To prevent this, I found this nice stackoverflow post about it. This answer suited my needs better, because I also had used font awesome icons for my anchors.

I did change it a bit however, because you already know the tr element when it’s being clicked on, right? So I ended up with this javascript code, and it seems to work.

So actually the credits go to Augusto, but I just wanted to make a note her, in case I ever forget. The tagline my external memory is for real you know. My internal memory is not always that reliable ;-)

jQuery Validation form valid event

Posted on by
Reply

I was using the jQuery Validation plugin in a project, but I couldn’t find a proper option that I could use to find out if the form indeed was completely valid. We wanted to show a message like “You’re almost done, just hit signup now and you can start right away!” when all fields in the form were valid. I guess it’s the call to action stuff that marketing guys really like.

Using a $(form).valid() inside the unhighlight would cause a too much recursion error, which actually makes sense. The form itself doesn’t seem to have an invalid state either, when I checked with firebug.

So in the end, all I could think of, was counting the number of valid inputs, and see if they were all valid. I must see, I only used input text and selectboxes. Beware that also hidden inputs will be counter if you use the input selector.

I left out all the other code, so, this is the piece of code that really matters.

You could also do it the opposite way, and count the error elements. I actually did this too, because another comforting text was required when the e-mail input was hit: don’t worry, we won’t sell your data! This actually seemed a bit harder because there were input field that didn’t have a error message. But, surprise surprise, the error element was placed anyways, it just didn’t contain any text.

Also, when you unhighlight, the element doesn’t go away, it just becomes invisible.

But well, if you want to fool around with it, this is the selector I came up with. Note that my error messages go into a feedback container, but I suppose you could just search on the class name as well.

It’s actually the :parent and :visible that does the trick. I wasn’t sure if I could combine them, but it seems to work. According to the jQuery document, :parent is the inverse of :empty.

So you could use this if you only want to show a messages when no more (visible) errors are there anymore, for example if you use the same space. This is a bit different than count the valid options, because if you have invalid options that don’t have an error message, and therefore don’t use space, it still may be nice to show some message.

Clickable panel titles at Metronic theme

Posted on by
3

I wanted the panel titles to be clickable as well, instead of just the little icon on the far right side of the panel. This is easy with just a little javascript.

This is specific for the Metronic theme. This code was placed in the /assets/scripts/core/app.js ..

Use Twig’s renderBlock to update a table row with AJAX

Posted on by
Reply

So I was developing a page with a table, where one could delete and edit the data on the table. Deleting was simple, it would do an AJAX request to delete, and then I’d remove the table row using jQuery.

But when you edit the row, you would also need to update the row after you did the edit. The table row was already defined in the twig template though, so couldn’t I just reuse it? Yes we can. This is probably rookie beginners stuff, but well, I’m still learning Symfony (and bootstrap, and basically all frontend stuff).

So, to illustrate, I had this piece of template in my page.

With jQuery, I had an event handler on the paginationContainer, to catch the edit button. This would open up a modal where the record can be edited. After that, the save button was pressed, which I was also catching using jQuery.

So this javascript code looked like this:

So the controller needed to just return the table row, as defined in the template at the beginning of the post. The code in the controller was like this: