jQuery Forum

SuperFish Menu sub-menu arrow styles
[0Replies]
- 05-Dec-2014 10:03 AM
- Forum: Using jQuery Plugins
How do I change the style of the arrows on the Superfish menu? I can't find any styles anywhere but my layout stylesheet and it has nothing defining the arrows.

The second level menu has the sf-arrows class and it shows a down arrow vs. a right arrow like the third level.

How can I change the arrow style for the second level to a right arrow?

HTML
1. <ul class="sf-menu fixed" id="menu">
2. <li class="current">
3. <a href="index.html">Home</a>
4. </li>
5. <li>
6. <a href="#">About us</a>
7. </li>
8. <li class="dropdown">
9. <a href="#">Courses</a>
10. <ul class="sf-arrows">
11. <li class="dropdown">
12. <a href="/courses">Classroom Courses</a>
13. <ul>
14. <li class="dropdown wide">
15. <a href="/courses/CIC/">Certified Insurance Counselors (CIC)</a>
16. <ul>
17. <li><a href="/courses/CIC/cic_personal_lines">CIC Personal Lines</a></li>
18. <li><a href="/courses/CIC/commercial_casualty11">CIC Commercial Casualty</a></li>
19. <li><a href="/courses/CIC/commercial_property">CIC Commercial Property</a></li>
20. <li><a href="/courses/CIC/life_and_health">CIC Life & Health</a></li>
21. <li><a href="/courses/CIC/agency_management">CIC Agency Management</a></li>
22. </ul>
23. </li>
24. 
25. </ul>
26. </li>
27. <li class="dropdown">
28. <a href="#">Online Courses</a>
29. <ul>
30. <li class="wide"><a href="/online_courses/self_study/self_study">Self-Paced Online Courses</a></li>
31. <li class="wide"><a href="/online_courses/online_classroom">Instructor-Led Online Courses</a></li>
32. </ul>
33. </li>
34. <li>
35. <a href="#">In-House Courses</a>
36. </li>
37. </ul>
38. </li>
39. <li>
40. <a href="#">Schedule or Register</a>
41. </li>
42. 
43. </ul>

Smart Wizard plugin variable steps?
[0Replies]
- 24-Feb-2012 05:12 PM
- Forum: Using jQuery Plugins
Was kind of wondering how I can have a variable number of steps in the wizard loading each of them via ajax.
Is this possible?

We offer online and classroom courses and some of the courses qualify for CE (Continuing Education) credit. If the course doesn't have CE credit, I don't want to include the CE step in the wizard. The full wizard will have 5 steps:
Login
Participant Selection
CE Gatekeeper (optional)
Register For Other (optional, depends on Participant Selection)
Review

Any ideas how to implement this?

[JQuery multi-click-slider] problem with script on two different installs
[0Replies]
- 19-Jan-2012 11:48 AM
- Forum: Using jQuery Plugins
Links:
http://test.scic.com/files/durable/index.html
http://test.scic.com/

When you hover over the Designation logos, the text below them changes. The one on http://test.scic.com/ is the way it is supposed to work.
The one on http://test.scic.com/files/durable/index.html doesn't act the same even though it uses the exact same javascript and has the exact same HTML content.

Can anyone explain why it isn't working the same on both?

[SOLVED] [msDropDown] remove msDropdown styling
[2Replies]
- 05-Jan-2012 12:14 PM
- Forum: Using jQuery Plugins
I am dynamically creating a select in my form. I do not want it styled like the other msDropDown controls. I want it styled like a normal select control.

How can I remove the msDropDown styling from this select and have it change the code BACK to a select vs. the other code that replaces the select when applying the msDropDown?

Filtering issue
[1Reply]
- 25-Oct-2011 06:23 PM
- Forum: Using jQuery
I have a select box and I need to filter it.

This is a list of cities and I want to filter by the state that the city is located.

Here is a sample:
1. <select title="Select City..." id="city-list" name="city-list" class="city-list" multiple="multiple">
  <option value="TX|75001">Addison (Dallas)</option>
  <option value="OH|44300">Akron</option>
  <option value="NY|12205">Albany</option>
  <option value="NM|87102">Albuquerque</option>
  <option value="VA|56308">Alexandria</option>
  <option value="PA|18109">Allentown</option>
  </select>
I want to filter them by the state, which is the first 2 chars of the value. The state will be selected in another select and the select function will need to filter the options in the city by that state value.

I also need to know how to take out the state and '|' when selecting a value from the city list. I am appending the zip codes to an array as they are selected.

.ajax POST with JSON, no $_POST data on server

[0Replies]

04-Oct-2011 02:54 PM
Forum: Using jQuery

Go the code below that builds the window.attendees object and submits it via .ajax call.

    window.attendees = {};
    window.attendees.eventcode    = "GEVENT";
    window.attendees.price        = 99.00;
    window.attendees.WaitingList  = "";
    window.attendees.participants = [];

    if(waiting_list_flag) {
      window.attendees.WaitingList = "YES";
    } else {
      window.attendees.WaitingList = "NO";
    }

    $('#next_btn').click(function() {
 addParticipant(); // adds the last entered participant 
 // info to the participants object
 // see below
      var url = AJAX_URL_ADD;

      $.ajax({async: false, 
              type:'POST',
              url: url, 
              data: window.attendees, 
              dataType: 'json', 
              contentType: "application/json; charset=utf-8", 
              success: function(data){
                if(data.result=='success') {
                  window.location = GOTO_URL;
                } else {
                  //display error
                  $('.error_message').html(data.message);
                } // if(data.result=='success')
              } // success function()
      }); // $.ajax
    }); // $('#next_btn').click

  // also called from another button click to add more participants
  function addParticipant() {
    var participant = {};
    participant.firstname   = $('#FirstName').val();
    participant.lastname    = $('#LastName').val();
    participant.email       = $('#Email').val();
    window.attendees.participants.push(participant);
  } // function addParticipant()

Now, here is my PHP code at the AJAX_URL_ADD url:

<?php

//header('Content-type: text/json');
echo json_encode('NOTHING');
error_log( "Timestamp:".date("m-d-Y H:i:s")."\n\r".var_export($_POST, true). "\n\r", 3, "/var/tmp/" . "add_to_voucher.log");
exit;
?>

And all I'm getting in my log is

Timestamp:10-04-2011 13:40:54

array (
)

However, if I use this PHP code:

<?php

//header('Content-type: text/json');
echo json_encode('NOTHING');
error_log( "Timestamp:".date("m-d-Y H:i:s")."\n\r".var_export($_REQUEST, true). "\n\r", 3, "/var/tmp/" . "add_to_voucher.log");
exit;
?>

I get a lot of data, but nothing from my POST.

jQuery form cloning
[1Reply]
- 27-Sep-2011 11:50 AM
- Forum: Using jQuery
We allow people to register other people for courses. I want to allow them to enroll multiple participants at one time. The UI should have one and only one form but when they enter a person's information and click a button to add another person, they should be able to see a list of people that they have previously registered and have the capability to remove them from the list.

Here is a URL to the basic beginnings with comments on what needs to be done:
http://jsfiddle.net/Mrbaseball34/vdUuy/3/

I'm having problems with being able to set the participant's name in the cloned participant's div

[SOLVED] variable scoping problem
[2Replies]
- 15-Sep-2011 03:44 PM
- Forum: Using jQuery
I have some JavaScript code in an ExpressionEngine template and because it is in an EE template, you can include PHP inside the JavaScript to be parsed before the JavaScript is served to the client. I am setting a variable like this inside a $(document:).ready() function:
1. $(document).ready(function() {
  
  $(document).ajaxError(
      function(e, jqxhr, settings, exception) {
        final_message('We apologize for the inconvenience, the our website is currenty not able to process new registrations. Please try again later or call 800-555-1234');
      }
  );
  
  <?php
  // this code gets the current user PID from magento
  include_once($_SERVER['DOCUMENT_ROOT'] . '/expressionengine/third_party/na_config.php');
  include_once($_SERVER['DOCUMENT_ROOT'] . '/store/app/Mage.php');
  umask(0);
  Mage::app();
  $pidsess = Mage::getSingleton('core/session', array('name'=>'frontend'));
  $piddata = $pidsess->getNA_pid();
  $pid = (isset($piddata["PID"])) ? $piddata["PID"]: 0;
  echo "var userpid = $pid;\n";
  ?>
  });
So the resulting JavaScript like like this:
1. $(document).ready(function() {
  
  $(document).ajaxError(
      function(e, jqxhr, settings, exception) {
        final_message('We apologize for the inconvenience, the our website is currenty not able to process new registrations. Please try again later or call 800-555-1234');
      });
  
  var userpid = 1007945;
  });
Now, later in my script, I am testing the value of the userpid value like this:
1. function logon_or_signup() {
  //Logon before initial question
  if(undefined === window.userpid) {
      userpid = 0;
  }
  if(userpid == 0) {
      // show login form
  } else {
      // do something else
  }
  }
In the if(undefined === window.userpid) line, the value of window.userpid is ALWAYS undefined.

Even if I eval userpid, it comes up undefined.

Why would that be since it is given a value in the $(document).ready() function? This is pretty critical to our entire application and it is making me pull my hair out.

Form to handle multiple entries
[2Replies]
- 14-Sep-2011 03:51 PM
- Forum: Using jQuery
I have a form with 12 fields. This form submits the information for registering a student for courses that we offer. Currently, it only handles one registration at a time and is kind of clunky.

I want to present the user the capability to register more than one person at a time. Essentially adding multiple users' info at once before submitting the form.

I also want to have an area above the form that shows a list of people that they enter in a select, which will later be modified to have checkboxes so they may remove them, if needed.

Anyone know of any tutorials or sample showing how to do something like this using jQuery?

[SOLVED] form not submitting correctly
[2Replies]
- 09-Sep-2011 11:22 AM
- Forum: Using jQuery
Got this form:
1.       <div id="checkout-step-billing" class="step a-item">
          <h4>Enter the name and email of a person you'd like<br/>to purchase a registration for:</h4>
          <form class="voucher_form" id="voucher_form">
            <fieldset>
                <ul class="form-list">
                  <li class="field">
                    <div class="field">
                      <label class="l1">Student Member #:</label>
                      <div class="input-box">
                        <input type="text" id="customer_id" name="customer_id" class="oblSomeoneElseCustID"/>
                      </div>
                    </div>
                  </li>
                  <Other form fields...>
                  <li class="field">
                    <div class="field">
                      <label class="l1">Student Email:<em>*</em></label>
                      <div class="input-box">
                        <input type="text" id="SomeoneElseEmail" name="SomeoneElseEmail" class="validate[required,custom[email] oblSomeoneElseEmail"/>
                      </div>
                    </div>
                  </li>
                </ul>
              </fieldset>
            <a href="#" class="btn btncenter oblsomeoneelsenext">Next</a>
            <div class='spinner'><img src='/images/grey_spinner.gif'></div>
          </form>
Now. I am submitting by clicking the Next button (anchor) like this:
1.     $('#checkout-step-billing a').click(function(){
        $('#checkout-step-billing .voucher_form').submit();
      });
And also have a submit function like this:
1. $('#checkout-step-billing .voucher_form').submit(function(event){
      event.preventDefault();
      var email          = $('#checkout-step-billing .oblSomeoneElseEmail').val();
      var ParticipantID = $('#checkout-step-billing .oblSomeoneElseCustID').val();
      /*
        Other form fields are assigned to variables here.
      */
      if (ParticipantID == ''){
        ParticipantID = '-1';
      }
      if (Last4SSN == ''){
        Last4SSN = '-1';
      }
      var valid = $('#checkout-step-billing .voucher_form').validationEngine('validate');
      if (valid){
        var url = AJAX_URL_ADDVOUCHER + '?&email=' + doUrlEncode(email)
          /*
            Other form fields are added to the URL here
          */
          + '&ParticipantID=' + doUrlEncode(ParticipantID);
  
        // AJAX call sends the data to the cart to add the voucher values.
        $.ajax({async: false, type:'POST',url: url, dataType: 'json', success: function(data){
          if(data.result=='success'){
            window.location = CART_URL; // const define at top of file
          } else {
            //display error
            $('#checkout-step-billing .error_message').html(data.message);
          }
        }});
      }
  });
The problem is that it never goes into the submit function AND, after the submit is called in the button's click() function, the page refresshes with the values in the querystring in the address bar.

What am I doing wrong here?

Check if option exists already
[0Replies]
- 30-Aug-2011 06:24 PM
- Forum: Using jQuery Plugins
I'm building the options for the gMap plugin dynamically and need to know how to check to see if one of the markers already exists.

This is how it is being built in javascript:
1. success: function(data) {
  var markers = { controls: true, scrollwheel: true, markers: [], zoom: 8 };
  $.each(data["events"], function(id, event) {
      // .. do other stuff with the data
      if(showmap) {
        // add location to maps list prevent multiples
        //
        // How do I check to see if it already exists?
        // event[] is a JSON Object
        //
        //if((markers.indexOf(event['LocLatitude']) == -1) && (markers.indexOf(event['LocLongitude']) == -1)) {
        marker1 = { latitude: event['LocLatitude'],
                    longitude:event['LocLongitude'],
                    html: '"'+event['LocName']+'<br />'+event['LocAddress']+'<br />'+event['LocCity']+', '+event['LocState']+'"',
                    icon:{image: "/images/gmap_pin_orange.png",
                          iconsize: [26, 46],
                          iconanchor: [12,46],
                          infowindowanchor: [12, 0]
                         }
                  };
        markers.markers.push(marker1);
        //} // if((markers.indexOf(event['LocLatitude']) == -1)
      } // if(showmap)
  } // $.each(data["events"]
  }, // success:
The red code above shows how I was doing it when I was building it as a string, that technique no longer works.
I need to know how to check to see if the marker being added already exists in markers.markers before it is pushed.

<SOLVED> [gMap] problem with dynamically built options.
[1Reply]
- 29-Aug-2011 06:22 PM
- Forum: Using jQuery Plugins
Using jQuery plugin gMap from http://gmap.nurtext.de/.

I can't understand why the first (commented out) call works and shows the map correctly
but the second one (dynamically built) doesn't work. It shows a map but with no markers and zoomed out all the way.
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
      <title>GMap Test</title>
      <script src="/assets/js/jquery-1.6.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=My_API_Key"></script>
      <script type="text/javascript" src="/assets/js/jquery.gmap-1.1.0.js"></script>
      <script>
        $(document).ready(function(){
          /*
          $("#course_map").gMap({controls: true,
                                 scrollwheel: true,
                                 markers: [{latitude: 44.5643,
                                            longitude:-88.1033,
                                            html: "Radisson/Oneida Casino<br />2040 Airport Drive<br />Green Bay, WI",
                                            icon: {image: "/images/gmap_pin_orange.png",
                                                   iconsize: [26, 46],
                                                   iconanchor: [12,46],
                                                   infowindowanchor: [12, 0]
                                                  }
                                           },
                                           {latitude: 44.2674,
                                            longitude:-88.4383,
                                            html: "Radisson Paper Valley Hotel<br />333 W. College Avenue<br />Appleton, WI",
                                            icon: {image: "/images/gmap_pin_orange.png",
                                                   iconsize: [26, 46],
                                                   iconanchor: [12,46],
                                                   infowindowanchor: [12, 0]
                                                  }
                                           }
                                           ],
                                 zoom: 8
                                }
                               );
          */
  
          var markers = 'markers: [{latitude: 44.5643, '+
                        '           longitude:-88.1033, '+
                        '           html: "Radisson/Oneida Casino<br />2040 Airport Drive<br />Green Bay, WI", '+
                        '           icon: {image: "/images/gmap_pin_orange.png", iconsize: [26, 46], '+
                        '                  iconanchor: [12,46], '+
                        '                  infowindowanchor: [12, 0] '+
                        '                 } '+
                        '          }, '+
                        '          {latitude: 44.2674, '+
                        '           longitude:-88.4383, '+
                        '           html: "Radisson Paper Valley Hotel<br />333 W. College Avenue<br />Appleton, WI", '+
                        '           icon: {image: "/images/gmap_pin_orange.png", iconsize: [26, 46], '+
                        '                  iconanchor: [12,46], '+
                        '                  infowindowanchor: [12, 0] '+
                        '                 } '+
                        '          },';
          markers = markers.slice(0, -1);
          markers =       '{controls: true, scrollwheel: true, ' + markers + '], zoom: 8}';
          $("#course_map").gMap(markers);
  
        });
      </script>
  </head>
  <body>
      <div id="course_map" style="height:297px; width:380px;border: 2px solid #666;"></div>
  </body>
  </html>
Can anyone help out here?

Accordian icon switch problem
[3Replies]
- 15-Aug-2011 05:56 PM
- Forum: Using jQuery Plugins
site:
http://www.scic.com/files/toggler.html

Using the jQueryUI accordian with toggler from here: http://jsbin.com/eqape

When the page first loads, the classes for the span that is the arrow image on the Dates section of the Accordian look correct. When one of the datae checkboxes or Check All is selected, I remove the ui-icon-triangle-1-e class and add the ui-icon-star class. Looks good. But if I Clear Date selections, or uncheck all the dates checkboxes, I want to remove the ui-icon-star class and add the ui-icon-triangle-1-e class. It is not working correctly and I don't know why it is not adding the ui-icon-triangle-1-e class back.

You can see the problem if you then minimize the dates section, the ui-icon-triangle-1-e class is not there.

Can anyone help me figure out why? This is the function I'm using to toggle the icons:
1.       function toggleStar(elem, on) {
          if(on) {
            $(elem)
              .find("h3")
                .find("span")
                  .removeClass("ui-icon-triangle-1-e")
                  .addClass("ui-icon-star");
          } else {
            $(elem)
              .find("h3")
                .find("span")
                  .removeClass("ui-icon-star")
                  .addClass("ui-icon-triangle-1-e");
          }
        }

[SOLVED] Accordian Toggle grow/shrink
[2Replies]
- 11-Aug-2011 11:28 AM
- Forum: Using jQuery Plugins
I am combining a select box enhancer called Chosen from https://github.com/harvesthq/chosen
and the jQueryUI accordian with toggler from here: http://jsbin.com/eqape

When the States section is toggled, the accordian's area is not grown when the chosen is activated and shows a scrollbar when it shouldn't.

How do I need to handle that?

[SOLVED] Can't figure out why this plugin won't work
[2Replies]
- 11-Aug-2011 10:47 AM
- Forum: Using jQuery Plugins
I am combining a select box enhancer called Chosen from https://github.com/harvesthq/chosen
and the jQueryUI accordian with toggler from here: http://jsbin.com/eqape

Now, when I place the chosen plugin inside one of the togler sections, it just doesn't show correctly.

Here is a demo: http://www.scic.com/files/toggler.html
Click on the States section to see the chosen plugin.

I can't figure out why it is not displaying correctly. If I use it outside the toggler, it works fine.

[Validate] IE8 and $.validator is null or not an object
[3Replies]
- 27-Jul-2011 10:02 AM
- Forum: Using jQuery Plugins
Was wondering how to handle this. I've seen tons of things for fixing it with IE6 but some of my users are getting this with IE8.

I don't see too many answers to problems with this plugin is it not being supported anymore?
I also see that the version on the jQuery site is 1.5.5 and the version on the author's site is 1.8.1; does this mean that the author isn't keeping things here updated and thus isn't supporting the product via these channels like he says on his site?

<SOLVED> [MSDropDown] Can't reset to first option
[1Reply]
- 11-Jul-2011 06:13 PM
- Forum: Using jQuery Plugins
http://www.scic.com/schedule

For some reason, I cannot reset the City back to the initial first option when the Clear Selection link is clicked.

This is the code that is called when it is clicked:
1. $('#clear_geo').click(function(event) {
  
  $('#input_zip').val('0');
  zip = '0';
  
  event.preventDefault();
  
  st_list = Array();
  refresh_s_boxes();
  
  refreshList();
  
  });
Setting the val() works but it stays on the last selected value.
Any ideas?

I've tried a number of things:
1. document.getElementById('input_zip').value= '0';
1. $('#input_zip').find('option:first').attr('selected', 'selected')
1. var field = $('#input_zip');
  field.val($('option:first', field).val());
But nothing has worked.

[Validate] IE7 and jquery.validate
[3Replies]
- 07-Jul-2011 06:18 PM
- Forum: Using jQuery Plugins
jquery.validate.js ver 1.5.2
Line 283
Object doesn't support this property or method

Actually highlights line 287 in script debugger.
1. 285 function delegate(event) {
2. 286 var validator = $.data(this[0].form, "validator");
3. 287 validator.settings["on" + event.type] && validator.settings["on" + event.type].call(validator, this[0] );
4. 288 }
Would an update to 1.5.5 fix this problem?

[Validate] cancel class not working for submitHandler to ignore button click
[1Reply]
- 04-May-2011 11:49 AM
- Forum: Using jQuery Plugins
Go these two image buttons:
1. <input type="image" src="images/Update.png" name="btnSubmit" value="Update"/>
2. <input type="image" src="images/Cancel.png" value="Cancel" name="btnCancel" class="cancel" onclick="hide_edit_div()" />
Now, even clicking on the Cancel button runs the submithandler. How do I modify it to ignore it?
1. $(document).ready(function(){
  if(this.forms[4]) {
      $("#editTaskInfo").validate({
          rules:{"task_title"   : {required: true},
                   "task_instr" : {required: true},
                   "task_desc" : {required: true}
                  },
         submitHandler: function(form) {
           var postData = $('#editTaskInfo').serialize();
           $.ajax({type: "POST",
                   url: "post_task.php",
                   data: postData,
                   dataType: "json",
                   success: function(data) {
                     if(textStatus == 'success') {
                       $("div.error span").html(data.msg);
                       $("div.error img").hide();
                       $("div.error").show();
                       $("#static_task_price").text(data.price);
                       $("#static_title").text(data.title);
                       $('html, body').animate({scrollTop:0}, 'fast');
                       hide_edit_div();
                       $("div.error").fadeOut(10000);
                     }
                   },
                   error: function(jqXHR, textStatus, errorThrown) {
                     $("div.error span").html(errorThrown);
                     $("div.error img").show();
                     $("div.error").show();
                   }
           });
         }
      }
      );
  }
  });

[Validate] submitHandler not working
[0Replies]
- 03-May-2011 03:03 PM
- Forum: Using jQuery Plugins
Got this code:
1. $(document).ready(function(){
  if(this.forms[4]) {
      $("#editTaskInfo").validate({
          rules:{"task_title" : {required: true},
                 "task_instr" : {required: true},
                 "task_desc"   : {required: true}
                 },
         submitHandler: function(form) {
           var postData = $('#editTaskInfo').serialize();
           $.post('post_task.php', postData);
         }
      }
      );
  }
  });
postData looks correct but it does not post anything to post_task.php:
1. <?php
  // if(isset($_POST["btnSubmit"])) {
  $sqlupdateTask = "UPDATE task SET
2.                                         task_title   = '".addslashes(trim($_POST["task_title"]))."',
                                          task_desc    = '".addslashes(trim($_POST["task_desc"]))."',
                                          task_instr   = '".addslashes(trim($_POST["task_instr"]))."',
                                          task_tags    = '".addslashes(trim($_POST["task_tags"]))."',
                                          category_id = ".$_POST["category_id"].",
                                          task_days    = ".$_POST["task_days"].",
                                          task_price   = ".$_POST["task_price"].",
                                          task_status = '".$_POST["task_status"]."'
                          WHERE task_id   = ".$_POST["task_id"];
      echo $sqlupdateTask;
      exit;
      mysql_query($sqlupdateTask) or
3. die("SQL error occured: {$sqlupdateTask}<br />".mysql_error().
4.           "<br />".__FILE__.":".__LINE__);
  
      $UID           = uniqid('a');
      $new_task_image = $UID.$_FILES['task_image']['name'];
      if(trim($new_task_image)!=$UID) {
        $sql_image = "UPDATE task SET task_image = '".$new_task_image."'
5. WHERE task_id=".$_POST["task_id"];
  mysql_query($sql_image) or
6. die("SQL error occured: {$sql_image}<br />".mysql_error().
7.           "<br />".__FILE__.":".__LINE__);
        copy ($_FILES['task_image']['tmp_name'], "taskimages/".$new_task_image);
      } // if($taskimagenew!=" ")
      header("location:taskset.php?msg=Task information was successfully updated...");
  //} // if(isset($_POST["btnSubmit"]))
  ?>
Any ideas as to what may be going wrong?

[SOLVED] Setting visibility
[1Reply]
- 03-May-2011 12:33 PM
- Forum: Using jQuery
The following snippets are not equivalent, what am I doing wrong?

This one does not actually show the div
1. $('#edit_div').css.visibility= 'visible';
whereas this one does.
1. var div = document.getElementById('edit_div');
2. div.style.visibility="visible";
The div is defined like:
1. <div id="edit_div" style="visibility:hidden;">
1. $('#edit_div').show();
doesn't work either.

[SOLVED] Help with JQuery loadJSON plugin
[1Reply]
- 03-May-2011 12:05 PM
- Forum: Using jQuery Plugins
I am trying to load an HTML form from JSON returned from a PHP script.

The code I have goes into the plugin's code but nothing ever happens.
The data parameter has the correct data.
It doesn't go into either of the functions so I don't know what I'm doing wrong.
I know this is a long post but I really appreciate your taking a look.

script calling loadJSON:
1. $(document).ready(
  function() {
  $('#show_edit_div').click(function(){
      var url="edit_task.php?id="+this.attributes[0].nodeValue;
      try{
        $.getJSON(url, function(data, textStatus) {
          $('#editTaskInfo').loadJSON(data);
        });
      }catch(err){
        alert(err.description);
      }
      var div = document.getElementById('edit_div');
      div.style.visibility="visible";
      return true;
  })
  });
PHP code to return JSON:
1. <?php
  include("include/config.php");
  if(isset($_GET["id"])) {
      $sqltask = "SELECT `task_title`, `task_desc`,`task_instr`,`task_tags`,
                         `task_price`,`category_id`,`task_days`,`task_image`,
                         `task_status`
                  FROM task WHERE task_id = '".$_GET["id"]."'";
      $result = mysql_query($sqltask) or die("SQL error occured: {$sqltask}<br />".mysql_error()."<br />".__FILE__.":".__LINE__);
      $resArr = mysql_fetch_assoc($result);
      echo json_encode( $resArr );
  } // if(isset($_GET["id"]))
  ?>
form code:
1. <div id="edit_div" style="visibility:hidden;">
  <table width="80%" align="center">
      <tr>
        <td bgcolor="#FFFFFF">
          <table width="100%" border="0" align="center" cellpadding="0" cellspacing="4" style="border:solid 1px #FF8043;">
            <form name="editTaskInfo" action="#" method="post" enctype="multipart/form-data">
            <tr>
              <td colspan="4" height="7"></td>
            </tr>
            <tr>
              <td colspan="4" align="left" class="smlt">
                <span style="color:#ff6600; font-size:18px; font-weight:bold;"> Edit Task Information</span>
              </td>
            </tr>
            <tr>
              <td colspan="4" align="left" width="3%" class="smlt"> </td>
            </tr>
            <tr>
              <td align="left" width="3%" class="smlt"> </td>
              <td width="35%">
                <span style="color:#0099FF; font-size:12px; font-weight:bold;">Task Title: </span>
              </td>
              <td align="left" width="59%" class="smlt">
                <input type="text" name="task_title" value="" size="42" />
              </td>
              <td align="left" width="3%" class="smlt"> </td>
            </tr>
            <tr>
              <td width="3%" height="154" align="left" class="smlt"> </td>
              <td width="35%" ><span style="color:#0099FF; font-size:12px; font-weight:bold;">Task Description :</span> </td>
              <td align="left" width="59%" class="smlt">
                <textarea cols="35" rows="10" name="task_desc" class="smlt" style="font:Arial, Helvetica, sans-serif; font-size:11px;"></textarea>
              </td>
              <td align="left" width="3%" class="smlt"> </td>
            </tr>
            <tr>
              <td width="3%" height="154" align="left" class="smlt"> </td>
              <td width="35%" ><span style="color:#0099FF; font-size:12px; font-weight:bold;">Task Instructions:</span> </td>
              <td align="left" width="59%" class="smlt">
                <textarea cols="35" rows="10" name="task_instr" class="smlt" style="font:Arial, Helvetica, sans-serif; font-size:11px;"></textarea>
              </td>
              <td align="left" width="3%" class="smlt"> </td>
            </tr>
            <tr>
              <td align="left" width="3%" class="smlt"> </td>
              <td width="35%" ><span style="color:#0099FF; font-size:12px; font-weight:bold;">Tags :</span> </td>
              <td align="left" width="59%" class="smlt">
                <textarea cols="35" rows="10" name="task_tags" class="smlt" style="font:Arial, Helvetica, sans-serif; font-size:11px;"></textarea>
              </td>
              <td align="left" width="3%" class="smlt"> </td>
            </tr>
            <tr>
              <td align="left" width="3%" class="smlt"> </td>
              <td width="35%"><span style="color:#0099FF; font-size:12px; font-weight:bold;">Task Price (in USD) :</span> </td>
              <td align="left" width="59%" class="smlt">
                <select name="task_price">
  <?php
  $sqlprice          = "SELECT comm_trans FROM commission
                          ORDER BY comm_trans ASC";
  $result            = mysql_query($sqlprice) or die("SQL error occured: {$sqlprice}<br />".mysql_error()."<br />".__FILE__.":".__LINE__);
  while($record      = mysql_fetch_array($result)) {
  ?>
                  <option value="<?php echo $record['comm_trans'] ?>"><?php echo $record['comm_trans']; ?></option>
  <?php
  } // while($record=mysql_fetch_array($result))
  ?>
                 </select>
              </td>
              <td align="left" width="3%" class="smlt"> </td>
            </tr>
            <tr>
              <td align="left" width="3%" class="smlt"> </td>
              <td width="35%"><span style="color:#0099FF; font-size:12px; font-weight:bold;">Category :</span></td>
              <td align="left" width="59%" class="smlt">
                <select name="task_category">
  <?php
  $sqlcategory       = "SELECT * FROM category
                          ORDER BY category_name ASC";
  $result            = mysql_query($sqlcategory) or die("SQL error occured: {$sqlcategory}<br />".mysql_error()."<br />".__FILE__.":".__LINE__);
  while($record      = mysql_fetch_array($result)) {
  ?>
                  <option value="<?php echo $record['category_id']; ?>"><?php echo $record['category_name']; ?></option>
  <?php
  } // while($record=mysql_fetch_array($result))
  ?>
                 </select>
              </td>
              <td align="left" width="3%" class="smlt"> </td>
            </tr>
            <tr>
              <td align="left" width="3%" class="smlt"> </td>
              <td width="35%"> <span style="color:#0099FF; font-size:12px; font-weight:bold;">Days :</span> </td>
              <td align="left" width="59%" class="smlt">
                <input type="text" name="task_days" value="" size="20" readonly="readonly" />
              </td>
              <td align="left" width="3%" class="smlt"> </td>
            </tr>
            <tr>
              <td align="left" width="3%" class="smlt"> </td>
              <td width="35%"><span style="color:#0099FF; font-size:12px; font-weight:bold;">Task Image:</span> </td>
              <td align="left" width="59%" class="smlt">
                <input type="file" name="edittask" size="30" onchange="example_ajax_request(document.editTaskInfo.edittask.value,'editimage')" />
              </td>
              <td align="left" width="3%" class="smlt"> </td>
            </tr>
            <tr>
              <td align="left" width="3%" class="smlt"> </td>
              <td width="35%"><span style="color:#0099FF; font-size:12px; font-weight:bold;">Status :</span> </td>
              <td align="left" width="59%" class="smlt">
                <select name="stat" style="width:128px;">
                  <option value="0">Blocked </option>
                  <option value="1">Unblocked</option>
                </select>
              </td>
              <td align="left" width="3%" class="smlt"> </td>
            </tr>
            <tr>
              <td colspan="4" align="left" width="3%" class="smlt"> </td>
            </tr>
            <tr>
              <td align="left" class="smlt"></td>
              <td align="left" class="smlt"></td>
              <td align="center" class="smlt">
                <input type="image" src="images/Update.png" name="btnSubmit" value="Update" onclick="checkForm(document.editTaskInfo.edittask.value);"/>
                <input type="image" src="images/Cancel.png" value="cancel" onclick="hide_edit_div()" />
                <input type="hidden" value="" name="taskID" />
              </td>
              <td align="center" class="smlt"> </td>
            </tr>
            <tr>
              <td colspan="4" align="left" width="3%" class="smlt"> </td>
            </tr>
            </form>
          </table>
        </td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF"> </td>
      </tr>
  </table>
  </div>

[jQZoom] Chrome doesn't show good
[1Reply]
- 25-Apr-2011 04:26 PM
- Forum: Using jQuery Plugins
http://www.listinventory.com/index.php

For some reason, Chrome messes up the jQuery jQZoom plugin. Images are all grouped at the top-left.

Any ideas on how to correct this?

[jqZoom] Not working in Safari 5.0.5
[0Replies]
- 22-Apr-2011 09:03 AM
- Forum: Using jQuery Plugins
Just downloaded Safari 5.0.5 to test a site and see that jQZoom is not working.
I am using jQuery 1.4.2 and jqZoom 1.0.1.

I tried the latest version of jqZoom but because it requires jQuery 1.5 it messes up my other
plugins, such as curvyCorners.

Any ideas?

Problem with noConflict()
[4Replies]
- 06-Apr-2011 09:48 AM
- Forum: Using jQuery
Trying to use noConflict() to allow a plugin that uses 1.3+ along with others that require
1.2.6.

Here are the calls in my header:
1. <script type="text/javascript" src="js/jquery/jquery.1.4.4.min.js"></script>
  <script type="text/javascript">
  var $jq = jQuery.noConflict();
  </script>
  <script type="text/javascript" src="js/jquery/jquery-1.2.6.pack.js"></script>
Here is the call on my page:
1. <script type="text/javascript" src="js/jquery.colorbox.js"></script>
  <script type="text/javascript">
  // <![CDATA[
  $jq(document).ready(function(){
  //Examples of how to assign the ColorBox event to elements
  $jq("a[rel='cbox']").colorbox();
  });
  //]]>
  </script>
and how the link is defined:
1. <li>
2. <a class="span_link" title="" rel="cbox" href="/img/p/1006-1141-thickbox.jpg">View full size</a>
3. </li>
I still get this error:
1. $("." + boxElement).live is not a function in jquery.colorbox.js Line 385
What am I be doing wrong here?

Response title

Attachments

jQuery Forum

Activity Trend