0

I'm not the very best expert, but I can do a decent job good looking and functional websites or web applications. My main tools are PHP5, HTML5, CSS2 y 3, a database (SQLite, MySQL) and JavaScript and jQuery.

I'm not an expert at all in JavaScript. I often find interesting jQuery plugins or tutorials and try to mix them up to do the functionality needed. This time I'm mixing maybe too much plugins and js files from different sources.

In fact, my app do what I want except for certain behaviors. There are no errors, everything looks fine, but the misbehavior persists. So maybe I need to specify a class I don't know about, or one contradicts another one from another plugin and I just can't understand, for example, why a <button type="button">DON'T submit</button> just submits the form.

Anyway, my point is: how can I debug this situation? Is there a generic tool, suggestion, workflow or something to help me understand conflicts or omissions between libraries or plugins? (JavaScript libraries, my own JavaScripts and jQuery plugins)?

Edit

I know about Chrome's debugger and Firebug. But maybe I just don't know how to get the functionality I need. Reading about how to use these tools haven't helped me. For example: I've got a tag which has inherit a class I didn't assigned it to by hand (example: <button type="button" disabled>DON'T submit</button> I didn't write disabled by myself) So some JavaScript file is assigning it, but how can I see WHO did this? Which file? Class? Plugin? Library? Etc? That's another example of what I mean to ask.

halfer
  • 19,824
  • 17
  • 99
  • 186
Metafaniel
  • 29,318
  • 8
  • 40
  • 67
  • Okay, so what's your question? How to debug an entire page? – MetalFrog May 31 '12 at 16:35
  • Well, my question is if everything Javascript related don't generate any errors and thus it doesn't gives me any clues, how can I debug or find out why some misbehavior happen? Thanks =) – Metafaniel May 31 '12 at 16:47
  • That's the point, though, what is misbehaving? The button submitting the form? – MetalFrog May 31 '12 at 16:54
  • That's just one example. I'm not being much more specific because I'm not certain myself what the problem can be in first place, and you're not here to solve my life hehe I MUST learn, so I want some tips from you people; I'm trying to get generic answers if possible to this kind of situation. I'm certain this must be because I'm using many JQuery plugins and mixing their functionality. – Metafaniel May 31 '12 at 16:58
  • I know my question it's generic, a little weird, but I just want to learn what to do in this kind of situation – Metafaniel May 31 '12 at 17:00

3 Answers3

2

It is possible that you're using two libraries that use the $() function. In jQuery, the $() function is just shorthand for jQuery(), so you could try taking your jQuery code and replacing every instance of "$(" with "jQuery(" and see if that helps out. Without know what scripts you're using I can't tell if that will work or not, but this is likely the problem if you have more than one framework (e.g. jQuery) loaded at one time.

Just make sure you don't change any non-jQuery functions from $() to jQuery() or else they'll break.

Anthony Atkinson
  • 3,101
  • 3
  • 20
  • 22
  • By the way, [here's a good article](http://docs.jquery.com/Using_jQuery_with_Other_Libraries) on jQuery's website about using jQuery in non-conflict mode. – Anthony Atkinson May 31 '12 at 16:38
  • I know I haven't shared with you my scripts but that's exactly what I want: ideas like yours with that generic feeling that can help. I'll try your answer soon ;) Thanks a lot. – Metafaniel May 31 '12 at 16:53
  • HEY! WELL DONE =D You're such a detective, you guess what to do without even watching my code, THANKS =) I didn't knew this existed =) – Metafaniel Jun 01 '12 at 14:18
1

The default functionality of the <button> tag is the same as <input type="submit">.

http://htmldog.com/reference/htmltags/button/

Adrian J. Moreno
  • 14,350
  • 1
  • 37
  • 44
  • Yes I know, thank you ;) I've just added this answer today [link](http://stackoverflow.com/a/10836076/1119621) But that's not my only problem. I would like to know how to find out if everything Javascript related don't generate any errors and thus it doesn't gives me any clues, how can I debug or find out why some misbehavior happen? Thanks =) – Metafaniel May 31 '12 at 16:51
1

Yes, there are tools to debug javascript.

Chrome as inbuilt debugger (Press F12 to open it)

But my favourite is firebug (its an addon for firefox, download it from here)

To resolve the conflicting issue, read here

Also, by default <button> submits the form.

If you do not want <button> to submit form, you can use this,

<button type="button" onclick='return false;'>DON'T submit</button>
Jashwant
  • 28,410
  • 16
  • 70
  • 105
  • Thanks for your kind help. However I know all what you've said already... I'm using Chrome's debugger right now and also Firebug... That's my problem. Maybe I just don't know how to determine things... For example: A tag inherits a class I didn't write, so a Javascript must be assigning it. How can I know where it gets it if in the Styles tab in the debugger I just get what it's being applied but not WHO applies it??? I don't know if I'm making sense =( – Metafaniel May 31 '12 at 17:04