SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    does anyone knows how to select dynamic classes using jquery@

    Im trying to select in h3 classes when the tab is generated a page. any ideas anyone?

    // random dynamic classes for Job Description heading title
    $rand = rand(1,50);
    $jd = 'jd-';
    $jd .= $rand;

    // random dynamic classes for main content
    $rands = rand(50,100);
    $maintitlesjd = 'maintitles_jd-';
    $maintitlesjd .= $rands;


    echo("<h3 class='$jd toggle'>" . 'Job Description' . '</h3>');

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,868
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Should be possible and there are a number of options, but I'll be able to help more if you can post some HTML (i.e. whatever is generated by your PHP script)

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here are the code im using:

    <?php

    // random dynamic classes for Job Description heading title
    $rand = rand(1,50);
    $jd = 'jd-';
    $jd .= $rand;

    // random dynamic classes for main content
    $rands = rand(50,100);
    $maintitlesjd = 'maintitles_jd-';
    $maintitlesjd .= $rands;



    require_once("../php_engine/_php_xml.php");

    if(isset($_POST["qsurvey"]) && isset($_POST["qjobnumber"])){
    $x = new aj_xml($_POST["qsurvey"],$_POST["qjobnumber"]);
    }else{
    $x = new aj_xml('LOCL','10.02',true);
    }

    if($x->file_does_exist == true){

    echo("<div id='dad'>");
    echo("<h3 class='$jd toggle'>" . 'Job Description' . '</h3>');

    echo("<div class='$maintitlesjd maintitles_jd' id='jd_content'>");

    $x->readxml_jd();

    if(isset($x->values)){
    foreach($x->values as $key=>$value){
    if($value!='')
    {
    if(is_numeric($key)) echo "<p class='lines'>" . $value . "</p>";
    if(!is_numeric($key))echo "<div class='lines'><span class='heading_jd'>" . $key. "</span>" . $value . "</div>";
    }
    }
    }

    echo("</div>"); // end of jd_content DIV
    echo("</div>");// end of dada DIV
    }

    ?>

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <div class="dad">
    <h3 class="jd-11 toggle">Job Description</h3>
    <div class="maintitles_jd-87 maintitles_jd" id="jd_content">
    <div class="lines"><span class="heading_jd">SURVEY JOB NUMBER</span>10.01</div>
    <div class="lines"><span class="heading_jd">SURVEY JOB TITLE</span> GENERAL MANAGER</div>
    <div class="lines"><span class="heading_jd">ALTERNATIVE TITLE</span>Managing Director</div>
    <div class="lines"><span class="heading_jd">JOB PURPOSE</span>Responsible for running the UK diagnostic company/division. To be responsible for providing strategic direction to the UK business. To plan for and to ensure the achievement of targeted sales revenue and profit and growth plans for the company. </div>
    <div class="lines"><span class="heading_jd">TYPICAL RESPONSIBILITIES</span> </div>
    <p class="lines">To be a Director of the UK company</p>
    <p class="lines">To have full P&amp;L responsibility for the business</p>
    <p class="lines">To plan and implement the growth objectives for the company</p>
    <p class="lines">To ensure the senior management team are fully supported and aware of their own and their teams' objectives</p>
    <p class="lines">To work closely with the management team in achieving the company objectives, planning, budgeting </p>
    <p class="lines">To ensure appropriate staff training and development for all members of staff</p>
    <p class="lines">To set appropriate targets and rewards for staff</p>
    <p class="lines">To ensure implementation of competitive pricing policy for all products to maximise sales and to achieve the Business plan</p>
    <p class="lines">To identify any possible new business opportunities that may complement company portfolio</p>
    <p class="lines">To ensure UK company compliance to group company objectives, e.g. continuous improvement </p>
    <p class="lines">To maintain the Health &amp; Safety policy for the Company</p>
    <div class="lines"><span class="heading_jd">EDUCATION, SKILLS &amp; EXPERIENCE</span> </div>
    <p class="lines">Graduate level education</p>
    <p class="lines">Post-graduate business qualification</p>
    <p class="lines">In depth knowledge of the relevant markets </p>
    <p class="lines">Proven ability to manage a profitable business</p>
    </div>
    </div>

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,868
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Presuming all of the <h3> tags you want to select have ids starting with "jd-", this sounds like a job for the attribute starts with selector.

    So, in your case, this would be:

    Code JavaScript:
    $('h3[class^="jd-"]')

    A further example:

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Unbenanntes Dokument</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      </head>
      <body>
        <h3 class="jd-10 toggle">Job Description 1</h3>
        <h3 class="jd-11 toggle">Job Description 2</h3>
        <h3 class="jd-12 toggle">Job Description 3</h3>
        <h3 class="jd-13 toggle">Job Description 4</h3>
        <h3 class="jd-14 toggle">Job Description 5</h3>
    
        <script>
          $(document).ready(function() {
            $headings = $('h3[class^="jd-"]')
            console.log($headings.length);
          });
        </script>
      </body>
    </html>
    HTH

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you know how to create toggle div img plus and minus when click on that heading?

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've been trying to use this code below but it doesnt work properly.

    $(".dad h3").click(function(event){
    //event.stopPropagation();

    $(this).next(".dad .maintitles_jd").stop(true, true).slideToggle()
    .siblings(".dad .maintitles_jd:visible").stop(true, true).slideUp();

    $(this).stop(true, true).toggleClass("active");
    $(this).siblings(".dad h3").removeClass("active");
    });

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the first toggle when clicked worked correctly but when clicked on the second one it keeps toggle up and down.

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,868
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    I'm probably missing something, but this works for me:

    Code JavaScript:
    $(".dad h3").click(function(){
      $(this).next().slideToggle();
    });

    Could you post a link to a page where I could see this in action?

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by joeboo View Post
    Do you know how to create toggle div img plus and minus when click on that heading?
    Here's a standard tree-view plugin for jQuery, that is very successful at doing what it does.
    http://mbraak.github.io/jqTree/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it works ok on first toggle but when clicked on the other ones it just keep toggle up and down repeatedly :/

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,868
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    joeboo: Could you post a link to your site?

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Here's a standard tree-view plugin for jQuery, that is very successful at doing what it does.
    http://mbraak.github.io/jqTree/
    There's also a slightly older tree-view that uses plus and minus signs on each branch, at https://github.com/jzaefferer/jquery-treeview
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry Pullo i cant as we running as internal web server for our company see.

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by joeboo View Post
    sorry Pullo i cant as we running as internal web server for our company see.
    Okay then. Please let us when there's a way for us to experience the same problem that is being experienced there.
    We will then be able to more easily provide you with assistance for the issue.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,868
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    As Paul says, we need to really see the problem to be able to help further.

    The only other thing which might work is if you go to the page where you are having the trouble, inspect the source code of the page (e.g. Ctrl + U in Chrome), then paste the source code here.
    If you do that, please be sure to use code tags.

  17. #17
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the help guys but I've managed to fix it now


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •