23452

I am having trouble with jquery modal with multiple id's

Question:

I am completely new to jQuery and I have the following script from jquery library. On a single page i have multiple link that when user clicks on it, a dialogue message pops up. So far this is my code. My question is what if I have about 30 links on a single page, should i create a new jquery function over and over again with different ids? How?

<script> $(function() { $( "#dialog1" ).dialog({ autoOpen: false, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 } }); $( "#opener1" ).click(function() { $( "#dialog1" ).dialog( "open" ); }); }); $(function() { $( "#dialog2" ).dialog({ autoOpen: false, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 } }); $( "#opener2" ).click(function() { $( "#dialog2" ).dialog( "open" ); }); }); </script>

I also have the following html

<div title="click to view details"> <a href="#" class="p1" rel="nofollow" aria-haspopup="false" id="opener1"></a> <p id="dialog1"> <strong>Monkey</strong>Monkeys are generally considered to be intelligent. Unlike apes, monkeys usually have tails.

<b class="b1"></b> </div> <div title="click to view details"> <a href="#" class="p2" rel="nofollow" aria-haspopup="false" id="opener2"></a> <p id="dialog2"> <strong>Vulture</strong>A particular characteristic of many vultures is a bald head, devoid of normal feathers.

<b class="b2"></b> </div>

Answer1:

You have at least 2 ways to accomplish this task. Probably the best is to use classes, so you use the same class on links you want to manage, and then you use the <a href="http://api.jquery.com/class-selector/" rel="nofollow">class selector</a> to bind actions to them. Another way could be the use of the <a href="http://api.jquery.com/each/" rel="nofollow">each</a> function on the a tag. I don't think that in your case this is the best solution, but it's just to say that in some circumstances you can use this solution, too.

Recommend

  • kendo window with minimize and maximize
  • Web accessibility
  • Process JSON data coming from server and add/update the objects in CoreData
  • What's wrong with this code? dialog is not a function
  • JSDoc for special singleton pattern
  • jQuery-UI Dialog
  • jQuery UI modal dialog sliding behind dropdownlists in IE6
  • Running a callback once an element is created
  • Passing Variables in jQuery to Change a Dialog Title
  • jqgrid 4.6.0 column chooser issues
  • jquery dialog - push the background content down
  • How Can I place a Line Break while writing to a file
  • JQueryUI Dialog Window Not Inside My DIV, Placed Under Body. How to keep inside my div?
  • Error when creating Toast
  • Jquery dynamic buttons dialog for in loop doesn't populate function
  • cannot call methods on dialog prior to initialization; attempted to call method 'option'
  • C/C++ returning struct by value under the hood
  • Is it one-to-one or Component ? Nhibernate Mapping
  • Implicit property animations do not work with CAReplicatorLayer?
  • jQueryUI dialog replacement for confirm?
  • CKeditor stripping font tags instead of converting to span
  • Are there “Dynamic Playlists” of unit tests in Visual Studio?
  • Ionic Slide Up Slide Down Animation for only one view in sidebar
  • Appium MobileElement swipe returns unknown server error
  • LESS CSS how to modify parent property in mixin
  • Prevent Tomcat from caching request during starup
  • Suppressing passwd when calling sqlplus from shell script
  • Tamper-proof configuration files in .NET?
  • Visual Studio 2010 debugger build correctly - compiler pdb and linker pdb not in synch?
  • JQuery Internet Explorer and ajaxstop
  • Android full screen on only one activity?
  • Alert pop up with LWUIT
  • Sending data from AppleScript to FileMaker records
  • KeystoneJS: Relationships in Admin UI not updating
  • AngularJs get employee from factory
  • Load html files in TinyMce
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?