Thread: Newbie Question

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    3
    Rep Power
    0

    Newbie Question


    I am a newby to Javascript and this may seem really simple but I am struggling at the moment.

    I have a Javascript dialog box popup that I want to use multiple times on a page. At the moment I would need to rewrite the javascript out multiple times (changing the #modal to a new name each time) but I know there must be a better way to code this where I could put a variable inside the button to reference what Text I want it to open.

    Any ideas??

    Lee


    The button for the popup is below
    Code:
    <a href="#" class="btn marginR10 marginB10"
     id="openModalDialog">Show Modal dialog</a>
    The Javscript is below
    Code:
    $('#openModalDialog').click(function(){
           $('#modal').dialog('open');
           return false;
     });
    The Text that is used in the dialog is below

    Code:
    <!-- ui modal dialog -->
    <div id="modal" title="Dialog Title" class="dialog">
          <p>This is my dialog text</p>
     </div>
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    You would use either the .text() or .html() API; like so:

    Code:
    $('#openModalDialog').click(function(){
           $('#modal p').text("New Dialog Text Here");
           $('#modal').dialog();
           return false;
     });
    Or...
    Code:
    $('#openModalDialog').click(function(){
           $('#modal p').html("<span style='color:red;font-weight:bold'>New Dialog Text Here</span>");
           $('#modal').dialog();
           return false;
     });
    Or... you could use the .append() API. There are several choices; but it depends on what you need.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    3
    Rep Power
    0
    I was hoping that there might be a way to plug a variable into each of the buttons that are on the page
    e.g.

    Code:
    <!--Button1-->
    <a href="#" class="btn marginR10 marginB10"
     id="openModalDialog" (InsertVariable1) >Show Modal dialog</a> 
    
    <!--Button2-->
    <a href="#" class="btn marginR10 marginB10"
     id="openModalDialog" (InsertVariable2) >Show Modal dialog</a>
    That might refer to one of many of the dialogs
    Code:
    <!-- ui modal dialog -->
    <div id="variable1" title="Dialog Title" class="dialog">
          <p>This is my dialog text 1</p>
     </div>
    
    <!-- ui modal dialog -->
    <div id="variable2" title="Dialog Title" class="dialog">
          <p>This is my other dialog text 2</p>
     </div>
    I was hoping to keep away from hard coding the dialog text into the javascript so I can keep all javascript in a seperate .js file to keep it nice and neat.

    Is that possible?

    Lee
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    9
    Rep Power
    0
    Try Codecademy, they have a great learning system.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    3
    Rep Power
    0
    Originally Posted by johnny_stocazz
    Try Codecademy, they have a great learning system.
    My apologies. Is this request too basic for an answer?

    Thanks

    Lee
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    You would need to add an attribute to the href tag and store the new dialog message, in that attribute. Then use the .attr() API to get the text that resides, in that attribute (see example below).
    Code:
    <a href="#" class="btn marginR10 marginB10"
     id="openModalDialog" rel="Some Newly Defined Text">Show Modal dialog</a>
    
    <script>
    $('#openModalDialog').click(function(){
           $('#modal p').text($(this).attr("rel"));
           $('#modal').dialog();
           return false;
     })
    </script>
  12. #7
  13. Old Fart
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    Chicago
    Posts
    106
    Rep Power
    4
    You could send the ID to the function as a parameter. Do it like this:

    Code:
    <button id="1" onClick="reply_click(this.id)">B1</button>
    <button id="2" onClick="reply_click(this.id)">B2</button>
    <button id="3" onClick="reply_click(this.id)">B3</button>
    Code:
    <script type="text/javascript">
    function reply_click(clicked_id)
    {
        alert(clicked_id);
    }
    </script>
    This will send the ID this.id as clicked_id which you can use in your function.
  14. #8
  15. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    Originally Posted by richpri
    You could send the ID to the function as a parameter. Do it like this:

    Code:
    <button id="1" onClick="reply_click(this.id)">B1</button>
    <button id="2" onClick="reply_click(this.id)">B2</button>
    <button id="3" onClick="reply_click(this.id)">B3</button>
    Code:
    <script type="text/javascript">
    function reply_click(clicked_id)
    {
        alert(clicked_id);
    }
    </script>
    This will send the ID this.id as clicked_id which you can use in your function.
    That is not going to do what the OP wants to do. Plus, your using normal JavaScript; the OP wanted to know how to do this with jQuery.
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    8
    Rep Power
    0
    Originally Posted by LeeOS
    I was hoping that there might be a way to plug a variable into each of the buttons that are on the page
    e.g.

    Code:
    <!--Button1-->
    <a href="#" class="btn marginR10 marginB10"
     id="openModalDialog" (InsertVariable1) >Show Modal dialog</a> 
    
    <!--Button2-->
    <a href="#" class="btn marginR10 marginB10"
     id="openModalDialog" (InsertVariable2) >Show Modal dialog</a>
    That might refer to one of many of the dialogs
    Code:
    <!-- ui modal dialog -->
    <div id="variable1" title="Dialog Title" class="dialog">
          <p>This is my dialog text 1</p>
     </div>
    
    <!-- ui modal dialog -->
    <div id="variable2" title="Dialog Title" class="dialog">
          <p>This is my other dialog text 2</p>
     </div>
    I was hoping to keep away from hard coding the dialog text into the javascript so I can keep all javascript in a seperate .js file to keep it nice and neat.

    Is that possible?

    Lee
    Sure it is. you don't even need a lot of code.

    your basic code:

    $(#div01).html('<p>' + text01 + '</p>);

    What that will do is change the html inside the div with the ID of div01 to the value of the string stored in text01.

    you set your string variable like:

    var text01 = ("This is some text");

    your buttons need some work though. They have duplicate IDs, which as I understand it is a no-no. you'll want to change them to something like "button01" "button02" etc.

    so the complete code to click button01 and have it change the text in div01:

    var text01 = ("This is some text");
    $(#button01).click(function() {

    $(#div01).html('<p>' + text01 + '</p>');

    });

    Pretty sure that will work for you. Hope it helps!

    If you want to store your dialogue text in a completely separate page on the server, look into the .load() command for jQuery. Really useful stuff.

    Good luck

IMN logo majestic logo threadwatch logo seochat tools logo