Solved

three jQuery uses in one page

Posted on 2012-03-12
4
531 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Hide cell in a table 2 27
Add or delete table rows 10 53
Filktering Alphabetically 8 28
Copying table data to one another 15 29
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

809 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