Search jQuery

jQuery Forum

problem with div and display

in jQuery Mobile • 6 months ago

Hello,

i've got a problerm with the display of some divs with this function :

function switch_divs_mobile()
            {
                if( document.getElementById("div_home_mobile").style.display == "none")
                {
                    document.getElementById("div_home_mobile").style.display = "block";
                    document.getElementById("div_titre_mobile").style.display = "none";
                    document.getElementById("div_contenu_mobile").style.display = "none";
                    alert("1");
                }
                else
                {
                    document.getElementById("div_home_mobile").style.display="none";
                    document.getElementById("div_titre_mobile").style.display = "block";
                    document.getElementById("div_contenu_mobile").style.display = "block";
                    alert("2");
                }
            }

When I use it the first time i arrive on a page, i'm in the first case (if... == "block") and it works only for the div_titre_mobile (its display go to "none" ) but not for the 2 others.

If I use the function another time, it's the same, it works only for the div_titre_mobile (this time its display goes to "block") but not for the others.

If I reload the page, there is no problem, everything works.

I tried to write my function in many ways in jquery (show, toggle...) but the problem is exactly the same.

Who can help me ?

PS: sorry for my english

Replies(11)

watusiware

Re: problem with div and display

6 months ago

I'm guessing you have duplicate IDs on your site. You need to read and understand the first few pages of the documentation, especially regarding Ajax, linking and scripting.

Also, I wouldn't use document.getElementByID. The whole point of jQuery is to avoid that kind of painfully obese code. Learn the basics of jQuery and use it to access the DOM.

Hard to tell with so little information. We can only guess what is wrong without an actual example.

pepedelab..

Re: problem with div and display

6 months ago

Thanks for your post.

A search (grep) in the files of my website shows that i haven't any duplicate ids and my function was first writen in jquery (show() toggle() and a few others) with no success, that's why i tried with the old-fashionned javascript :)

But you're right I wanted to go fast and did not read the documentation, i'm going to do it, especially the first pages like you said.

watusiware

Re: problem with div and display

6 months ago

A grep won't tell you if you have duplicated IDs.

In fact, the most common way of getting duplicate IDs is to have two different copies of the same (or same kind of) page in the DOM at the same time.

You need to be especially careful when using MVC frameworks on the back-end. You might generate, say, "venue" pages from a database. You might have hundreds of venues, but each page is structured the same. Don't use IDs within these pages, because if two of them are in the DOM at the same time, you will have trouble.

I don't ever use IDs in a JQM project - period. It's the best way to make sure you don't have ID conflicts.

You can use IDs for pages - IF the pages are actually unique. In the above example, you cannot use "venue" as the page ID, because there are hundreds of venues. You could append some number, or in this case, the venues almost certainly have some database ID that you could use.

Better still, whenever you are tempted to use an ID, don't. Use a class instead.

pepedelab..

Re: problem with div and display

6 months ago

I'm reading the documentation now. Can you help me to find the Ajax, linking and scripting ?

Sorry but at this point I don't understand everything. For me an ID was something like <div id="the_id" ... so I don't understand when you speak about duplicate IDs.

When I arrive on the first page of the jquery website it's written :
"jQuery is designed to change the way that you write JavaScript."

In fact my website has got a lot of js and everything is working well.
I just wanted to use jquery for a few effects (2 slides, en embeddedf popup and the design of the buttons), and for the moment these things are working but two bugs appeared in javascript.
So my goal is not to "simplify" my js code or to write less because it will be longer for me to re-write a shorter code than to let in place the actual longer code. Another thing is I want to respect W3C if possible.

Do you think I made a mistake choosing jquery ?
(i'm not saying jquery is not good, I can see it's a solid and powerful project, but is it adapted for me in this case ?)

For the moment I go on searching the solution of my "bug"...

watusiware

Re: problem with div and display

6 months ago

OK, wait - are you using jQuery Mobile, or just jQuery?

"jQuery Mobile" is a specific framework that builds on top of jQuery. That's what this forum is for - not discussions about using jQuery in a mobile environment.

If you are using jQuery Mobile, you need to read most of the Pages and Dialogs section of the docs, which is the first section, and in particular these parts:

It is not easy to just drop jQuery Mobile into an existing site with existing Javascript. jQuery is a different story.

http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

http://jquerymobile.com/demos/1.2.0/docs/pages/page-cache.html

http://jquerymobile.com/demos/1.2.0/docs/pages/page-navmodel.html

http://jquerymobile.com/demos/1.2.0/docs/pages/page-scripting.html

For me an ID was something like <div id="the_id" ... so I don't understand when you speak about duplicate IDs.

Don't have two <div>s with the same ID. Don't have this anywhere on your entire site, because JQM loads multiple "pages" into the same document, and then you might have a duplicate ID.

pepedelab..

Re: problem with div and display

6 months ago

Yes you're right I'm using jquery mobile !
And in the version "not mobile" of my website i have jquery and no problem with it.

I understand now when you talk about duplicate IDs, that was the problem in my DOM (a script found me the error) I wasn't talking of the same IDs :)

And just before to see your last message I finally find the page in the documentation you were talking about
http://jquerymobile.com/demos/1.2.0/docs/pages/page-navmodel.html and learn and understood the notion of "pages" you told me about.
Also, on this page I found
$.mobile.ajaxEnabled=false;
I put this little bit of code on my page and everything works fine now !

So thanks a lot for your help and your patience :)

watusiware

Re: problem with div and display

6 months ago

$.mobile.ajaxEnabled=false;
I put this little bit of code on my page and everything works fine now !

That's not a good solution. In fact, it's not really a solution at all.

What you've done is completely disabled jQuery Mobile's loading of pages using AJAX, which is a major feature, and probably the main reason most developers use jQuery Mobile at all.

So, you've disabled jQuery Mobile's most important and central feature.

This means that each page will be loaded independently, and the entire jQuery Mobile framework and CSS will be re-initialized with each page view. Probably not the end-user experience you had hoped for.

pepedelab..

Re: problem with div and display

6 months ago

Arg ok... I was happy, lol

In fact I didn't take jquery mobile for this feature at all so I was happy because everything works now like I wanted to.
But when I read your last message I understand it's a major feature and the thing is I don't know why for the moment, so I'm going to listen to you another time and try to learn it :)

I thought Jquery mobile was like jquery but I realize now it's really different...
I put it in my website in five minutes and the effects and designs are very nice, impressive. But it costs me a few hours with the two bugs that appeared in my javascript (I thought a "good javascript", no error in firebug, but I have a doubt now with the story of the duplicate id :) .
Whatever I don't have any regrets, now it works and i'm going to make it better learning about jQuery Mobile's loading of pages using AJAX.

I hope it will help me find the bug and make the code correct...

watusiware

Re: problem with div and display

6 months ago

jQuery Mobile is essentially a big plugin for jQuery. It duplicates much of the functionality of jQuery UI, but with an orientation toward mobile, and introduces the "page" concept. It's a bunch of UI widgets and a mechanism for managing pages and transitioning between pages.

If you don't need these things, you probably don't need jQuery Mobile.

If you are disabling the AJAX mechanism, what you are left with are some very "expensive" widgets, because of the overhead needed to repeatedly re-initialize the library with every page. Without the AJAX loading, JQM gets re-initialized with every page, which is unlikely to draw oohs and ahs from your not-so-impressed users.

If you just need the widgets, there are easier ways to accomplish that. I'd just use jQuery UI.

It sounds like maybe you don't know why you are using jQuery Mobile. You probably should examine more carefully whether or not is something that you need for your site.

pepedelab..

Re: problem with div and display

6 months ago

I finally change the technique : I don't use my function anymore and I use the popup of jquery instead, so there's no problem anymore.

"It sounds like maybe you don't know why you are using jQuery Mobile"
Yes that's why I told you at the beginning : "I just wanted to use jquery for a few effects (2 slides, one popup and the design of the buttons)" and "Do you think I made a mistake choosing jquery ?" ;)
Now I think the answer of this question was "yes", jquery mobile is not done if you want to use just a few things like that an on an existing website because it won't be compatible with simple javascript codes.
Now I will keep it because of some of the nice effects and it works so I don't want to spend time anymore.

PS : about the oohs and aahs of the users, I never told you about a porn website that's not my purpose :)

Thanks a lot.

watusiware

Re: problem with div and display

6 months ago

jquery mobile is not done if you want to use just a few things like that an on an existing website because it won't be compatible with simple javascript codes

Well put. I wish the official website and documentation could put it that clearly.

jQuery Mobile is really an all-in proposition. To be used effectively, you need to develop your app or site around jQuery Mobile. You cannot assume that ANY script that wasn't written specifically to work with jQuery Mobile will work.

If you can embrace that and have a need that fits, you can create a nice mobile UI with little effort given the results.

Top Reply

Response title

Attachments

jQuery Forum

problem with div and display

Replies(11)

Re: problem with div and display

Re: problem with div and display

Re: problem with div and display

Re: problem with div and display

Re: problem with div and display

Re: problem with div and display

Re: problem with div and display

Re: problem with div and display

Re: problem with div and display

Re: problem with div and display

Re: problem with div and display

Statistics

Tags

Actions

Related Posts