Solved

three jQuery uses in one page

Posted on 2012-03-12
4
521 Views
Last Modified: 2012-03-14
I have a page that uses a few different jquery scripts to perform some functions:
1.  I use the jquery datepicker
2.  I use the jquery prop function to remove a checkbox if another is checked.
3.  I use the colorbox system to open up a page in an iframe.

With the code as it stands, I cannot use all three together.  The way it is now, I can use the datepicker and the prop function for checkboxes, but I cannot open the iframe.

If i remove the jquery-1.7.1.js line,  I can use the colorbox as well as the datepicker, but no prop for the checkboxes.  What can I do to use all these functions in harmony?

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>

 
<script type='text/javascript'>//<![CDATA[
$(function(){
$(".material").click(function() {
    var check = $(".material:checked").length;
    $("#none").prop({checked:(check==0)});
});
});//]]>  

</script>

<script>
  $(document).ready(function() {
    $("#datepicker").datepicker();
  });
</script>

<?php

$company = $_GET['company'];

$company = '6728';

$sql = "SELECT name, add1, town, add3, postcode, state FROM dw_names WHERE nameid = '".$company."'";
$res = mysql_query($sql) or die(mysql_error());
$row = mysql_fetch_row($res);
$companyname = $row[0];
$address = $row[1];
$city = $row[2];
$state = $row[3];
$zip = $row[4];


if ($company == '')
      {
      echo "<span class='sectitleblk'><div align='center'><br /><br />This page requires a company be added first.  You cannot attempt to add an activity without having a company first.</span></div><br /><br /><br /><br /><br /><br /><br />";
      require_once($_SERVER['DOCUMENT_ROOT']."/includes/footer.php");      
      die;
      }
      
$activitytype = $_POST['activitytype'];

echo "Activity Id: " . $activitytype . '<Br />';
      
//uc words uppercases everything but when accompanied by strtolower, it puts it in proper case
      
echo "<span class='sectitle'>Add an activity for  ".ucwords(strtolower($companyname)) . '</span><br /><br />';
echo "<form action = 'processactivity.php' method = 'POST' name='activytype'>";

echo "<table width='800px' cellspacing='0' cellpadding='0'>
            <tr>
                  <td class='td_leftCol'>Activity Type:</td>
                  <td class='td_rightCol'>";
                  
                  //Pull the activity types from pr_activitytype
                  
                  $sql2 = "SELECT id, descr, addactivy FROM pr_activitytype WHERE addactivy = '1'";
                  $res2 = mysql_query($sql2) or die(mysql_error());
                  $num2 = mysql_num_rows($res2);
                  
                  echo "<select name='activitytype' onchange='this.form.submit();'>
                              <option value='NULL'>Select An Activity</option>";
                  
                  for($b = 0; $b < $num2; ++$b)
                        {
                        $activityid = mysql_result($res2, $b, 0);
                        $activitydescr = mysql_result($res2, $b, 1);
                        echo '<option value="'.$activityid.'"';?>  <?php if ($activityid == $_POST['activitytype']) echo ' selected="selected"'; ?>><?php echo $activitydescr;

                        }
                        
                  echo "</select></td>
            </tr>";
            
            if ($activitytype == '19')
                  {
                  echo "<tr>
                              <td class='td_leftCol'>Locations/Contacts</td>
                              <td class='td_rightCol'>Location and Contact Choices drop down goes here cuz</td>
                        </tr>
                        <tr>
                              <td class='td_leftCol'>Jobsite/Project</td>
                              <td class='td_rightCol'>Drop down to select the location and contact</td>
                        </tr>
                        <tr>
                              <td class='td_leftCol'>Select Template to Send:</td>
                              <td class='td_rightCol'>Tempates will go in a 3x3 table below once they are all gathered from Aubs.</td>
                        </tr>";
                  }
            
            elseif ($activitytype <> 'NULL' && $activitytype <> '')
                  {
                  if(!isset($createddate))
                        {
                        $createddate = date("m/d/Y");
                        }
                        
                  if(!isset($createdtime))
                        {
                        $createdtime = date("g:i a");
                        }
                        
                  if (isset($duration))
                        {
                        if($duration == 1){ $selected1 = "selected"; }
                        if($duration == 2){ $selected2 = "selected"; }
                        if($duration == 3){ $selected3 = "selected"; }
                        if($duration == 4){ $selected4 = "selected"; }
                        if($duration == 5){ $selected5 = "selected"; }
                        if($duration == 6){ $selected6 = "selected"; }
                        if($duration == 7){ $selected7 = "selected"; }
                        if($duration == 8){ $selected8 = "selected"; }
                        if($duration == 9){ $selected9 = "selected"; }
                        if($duration == 10){ $selected10 = "selected"; }
                        if($duration == 11){ $selected11 = "selected"; }
                        if($duration == 12){ $selected12 = "selected"; }
                        }
                        
                  else
                        {
                        $selected = "selected";
                        }

              echo" <tr>
                              <td class='td_leftCol'>Date:</td>
                              <td class='td_rightCol'><input id = 'datepicker' value='".$createddate."' type='text' size='8'> <font size='1'>(mm/dd/yy)</font></td>
                        </tr>
                        <tr>
                              <td class='td_leftCol'>Time:</td>
                              <td class='td_rightCol'><input type='text' name='time' value='".$createdtime."' size='6'></td>
                        </tr>
                        <tr>
                              <td class='td_leftCol'>Duration:</td>
                              <td class='td_rightCol'>
                                    <select name='duration' size='1' >
                                          <option value='NULL' "; if(isset($selected)) echo $selected; echo "> Select...</option>
                                          <option value='1' "; if(isset($selected1)) echo $selected1; echo "> 5 mins</option>
                                          <option value='1' "; if(isset($selected2)) echo $selected2; echo "> 10 mins</option>
                                          <option value='1' "; if(isset($selected3)) echo $selected3; echo "> 15 mins</option>
                                          <option value='1' "; if(isset($selected4)) echo $selected4; echo "> 30 mins</option>
                                          <option value='1' "; if(isset($selected5)) echo $selected5; echo "> 1 hour</option>
                                          <option value='1' "; if(isset($selected6)) echo $selected6; echo "> 2 hours</option>
                                          <option value='1' "; if(isset($selected7)) echo $selected7; echo "> 3 hours</option>
                                          <option value='1' "; if(isset($selected8)) echo $selected8; echo "> 4 hours</option>
                                          <option value='1' "; if(isset($selected9)) echo $selected9; echo "> 5 hours</option>
                                          <option value='1' "; if(isset($selected10)) echo $selected10; echo "> 6 hours</option>
                                          <option value='1' "; if(isset($selected11)) echo $selected11; echo "> 7 hours</option>
                                          <option value='1' "; if(isset($selected12)) echo $selected12; echo "> 8 hours</option>
                                    </select>
                              </td>
                        </tr>
                        <tr>
                              <td class='td_leftCol'>Locations/Contacts</td>
                              <td class='td_rightCol'>";

                              $sql3 = "SELECT DISTINCT
                                    dw_names.nameid,
                                    dw_names.name,
                                    dw_names.kdaccount,
                                    dw_names.town,
                                    pr_contacts.id,
                                    pr_contacts.company,
                                    pr_contacts.name,
                                    pr_contacts.forename,
                                    pr_activities.contactid,
                                    pr_contacts.active,
                                    pr_contacts.email,
                                    pr_contacts.optOutEmail
                                    FROM dw_names  LEFT JOIN pr_contacts on dw_names.nameid = pr_contacts.company
                                                            LEFT JOIN pr_activities on pr_contacts.id = pr_activities.contactid
                                    WHERE dw_names.nameid = '$company' and active = '1'
                                    ORDER BY dw_names.name, pr_contacts.name, pr_contacts.forename";


                              $res3 = mysql_query($sql3) or die(mysql_error());
                              $num3 = mysql_num_rows($res3);
                              
                              echo "<select name = 'contact'>
                                          <option value='NULL' selected>Select a Contact</option>";
                              
                              for ($c = 0; $c < $num3; ++$c)
                                    {
                                    $nameid = mysql_result($res3, $c, 0);
                                    $name = mysql_result($res3, $c, 1);
                                    $firstname = mysql_result($res3, $c, 7);
                                    $lastname = mysql_result($res3, $c, 6);
                                    $contactid = mysql_result($res3, $c, 8);
                                    $email = mysql_result($res3, $c, 10);
                                    $emailoptout = mysql_result($res3, $c, 11);
                                    
                                    
                                    echo "<option value='".$nameid."'>" . ucwords(strtolower($firstname)) . ' ' . ucwords(strtolower($lastname)) .  ' - ' . ucwords(strtolower($name)) .  "</option>";
                                    }
                                    
                              echo "</select>";
                              
                              // Need to pass a few values here - hidden style!
                              
                              echo '<input type="hidden" name="emailoptout" value="'.$emailoptout.'">
                                      <input type="hidden" name="contactid" value="'.$contactid.'">
                              </td>';
              echo "</tr>
                        <tr>
                              <td class='td_leftCol'>Jobsite/Project</td>
                              <td class='td_rightCol'>";

                              
                              $sql4 = "SELECT dw_jobsite.jobsiteid,dw_names.name
                                                       FROM dw_jobsite    
                                                       LEFT JOIN dw_names ON dw_jobsite.jobsiteid = dw_names.nameid        
                                                       WHERE  dw_jobsite.customerid='".$company."' or dw_jobsite.jobsiteid= '".$company."' GROUP BY dw_names.name";
                              $res4 = mysql_query($sql4) or die(mysql_error());
                              $num4 = mysql_num_rows($res4);
                              
                                 echo '<select name="jobsiteproject" size="1" >
                                                <option value "0" >Select...</option>';
                              
                              for ($d = 0; $d < $num4; ++$d)
                                    {
                                    $jobsiteid  = mysql_result($res4,$d,0);
                                    $sitename = mysql_result($res4,$d,1);      
                                    $sql5 = "SELECT
                                                       dw_jobsite.projectid,
                                                       pr_projects.projectname                
                                                       FROM dw_jobsite
                                                       LEFT JOIN pr_projects ON dw_jobsite.projectid = pr_projects.projectid                
                                                       WHERE  dw_jobsite.jobsiteid='".$jobsiteid."' GROUP BY dw_jobsite.projectid";
                                    $res5 = mysql_query($sql5) or die(mysql_error());
                                    $num5 = mysql_num_rows($res5);
                                    for($e = 0; $e < $num5; ++$e)
                                          {
                                          $projectid = mysql_result($res5, $e,0);
                                          $projectname = mysql_result($res5,$e,1);
                                                                        
                                          echo "<option value='".$jobsiteid."'>" . ucwords(strtolower($sitename)) . ' - ' . ucwords(strtolower($projectname)) . '</option>';
                                          }
                                    }
                              echo "</select>";
                                    
                              echo "</td>
                        </tr>      
                        <tr>
                              <td class='td_leftCol'>Send Thank You Email:</td>
                              <td class='td_rightCol'>
                                      <input checked type='radio' name='sendmail' value='0'>Don't Send&nbsp;
                                      <input type='radio' name='sendmail' value='1'>Send Now Or Delay it By&nbsp;
                                      <input type='radio' name='sendmail' value='2'>1 Day&nbsp;
                                      <input type='radio' name='sendmail' value='3'>2 Days&nbsp;
                                      <input type='radio' name='sendmail' value='4'>3 Days &nbsp;
                                      <span class='boldgreenlinks'><a href='view_automatic_email.php?email_type=thankyou' class='iframetall'>View Email</a></span>
                              </td>
                        </tr>
                        <tr>
                              <td class='td_leftCol'>Marketing Materials Left</td>
                              <td class='td_rightCol'>
                                    <table width='100%' cellspacing='0' cellpadding='0' border='0'>";
                                    $sql = "SELECT productid, name FROM mk_products WHERE item_number LIKE '%ACT%' AND active = '1' GROUP BY productid ORDER BY name ASC";
                                    $res = mysql_query($sql) or die(mysql_error());
                                    $num = mysql_num_rows($res);
                              
                                    echo '<table width="100%" cellspacing="5" cellpadding="5" border = "0" align="center">';
                        
                                    for ($a = 0; $a < $num;++$a)
                                          {
                                          echo '<tr>';
                                          for($count=0;$count<2;$count++)
                                                {
                                                $productid = mysql_result($res, $a, 0);
                                                $name = mysql_result($res, $a, 1);
                                                
                                                echo '<td width="200px"><input type="checkbox" id="a" value="'.$productid.'" class="material">' . $name . '</td>';
                                                 $a++;
                                                }
                                                 
                                                echo '</tr>';
                                                $a--;
                                          }            

                                    echo '<tr><td width="100px"><input type="checkbox" CHECKED id="none" name="material" value="0" CHECKED">&nbsp;No Material Left</td></tr>';                                            
                                                 
                                    echo '</table>
                                          
                              </td>
                        </tr>                        
                  </table>';
                  }
            
      else
                  {
                  echo "<tr><td>&nbsp;</td></tr><td align='center' colspan ='2'><span class='sectitle'><font color='#be0711'>Options will be displayed after selecting an activity type.</font></span></td>";
                  }
            
            
            
      echo '</table>
</form>';                  

?>
0
Comment
Question by:t3chguy
  • 2
  • 2
4 Comments
 
LVL 8

Accepted Solution

by:
Ben McNelly earned 500 total points
ID: 37712110
Absolutely, just use the built in jQuery.noConflict()

http://api.jquery.com/jQuery.noConflict/

<!-- load jQuery 1.2.3 -->
<script type="text/javascript" src="http://example.com/jquery-1.2.3.js"></script>
<script type="text/javascript">
var jQuery_1_2_3 = $.noConflict(true);
</script>

<!-- load jQuery 3.2.1 -->
<script type="text/javascript" src="http://example.com/jquery-.3.2.1.js"></script>
<script type="text/javascript">
var jQuery_3_2_1 = $.noConflict(true);
</script>

Open in new window


Then instead of using the "$" you use "jQuery_1_2_3". Heck you can break these scripts out into another document and use find/replace to change them to use the right version and paste them back in and they will work!

In case you don't read much of the documentation I link to, the basic idea is you are creating custom pointers if you will, to make your code use a specific version of jquery vs using the $ and it using whatever version it sees.

- ben
0
 
LVL 1

Author Comment

by:t3chguy
ID: 37714689
Ben,

Thank you.  It still wasn't working perfectly, I was still missing one function, but upon researching a little further I found that I could just assign a new variable to each of the scripts I want to use.

The prop function is p and the datepicker function is d.  

<script type='text/javascript'>//<![CDATA[
$(function(){

var $p = jQuery.noConflict();

$p(".material").click(function() {
    var check = $p(".material:checked").length;
    $p("#none").prop({checked:(check==0)});
});
});//]]>  

</script>

<script>

var $d = jQuery.noConflict();
  $d(document).ready(function() {
    $d("#datepicker").datepicker();
  });
</script>

The help you provided lead me to the right answer without hours and hours of research, so I thank you and award you the points!
0
 
LVL 1

Author Closing Comment

by:t3chguy
ID: 37714695
Awesome help!
0
 
LVL 8

Expert Comment

by:Ben McNelly
ID: 37721705
Glad to be of any service at all, and best of luck in this and future projects!

- Ben
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now