0

I have some content that I currently use a javascript dialog box to display. This works great when javascript is enabled but not so good when javascript isn't (it shows the dialog components on the screen along with original content). I would like to fix this so that dialog contents display on a separate screen when javascript is not enabled. I thought I saw some documentation somewhere on how to do this but for the life of me I can't find it by googling it again. Can someone point me to the proper online documentation on how to do this?

Additional Info: The page has a button on it that allows the user to create a new item. With JavaScript enabled, the add button displays a dialog box in which the user can enter information about the new item. Currently the text/input fields for that dialog box is on the same page the add button is on but hidden by Javascript using special divs (hence why it is visible when JavaScript is disabled). This is code I inherited from someone else and now would like to fix.

2
  • 3
    I'm not sure if you're thinking of something specific to Drupal or not. Can you describe a bit more about the structure of the page? Does the dialog box open when you first load the page? Does it open after clicking something? – jdu Jul 8 '13 at 16:43
  • Yes you are correct. There is a button on the page to add a new item. When clicked it displays a dialog in which the user can enter details about the new item. – user5013 Jul 8 '13 at 20:57
2

This isn't specific to Drupal but its a javascript technique known as 'unobtrusive javascript'. Not knowing how you are displaying the dialog contents, let's assume this simple case:

<a href="http://link-to-dialog-content" class="dialog-trigger">See Dialog Content</a>

and then somewhere else in your code (next to?) you've got a div with your dialog content set to not display, ex:

<div style="display:none">Your dialog content here .. </div>

What you want to do is use jquery (you can do this with native javascript but you're using drupal so its already loaded) to bind a click handler to this link. The idea is then that if javascript is not loaded, then the browser will automatically send them on their way. So that would look something like this:

$(".dialog-trigger").click(function() {
   // do your display stuff here, 
   return false;
}

The 'return false' statement at the end is key here to making it so that the link won't be followed.

1
  • Thanks for the explanation. I will see if I can modify the code to follow your example. This should help immensely! – user5013 Jul 8 '13 at 21:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.