jQuery Forum

____________________________________
f u cn rd ths u cn gt a gd jb n prgrmmng

I put together a page that shows what's happening.here. The dialog is a confirmation that an email was sent, so you'll need to fill out the form to get the dialog to pop up. (I wanted to retain as much as the original functionality as possible.)

As the title says, I generated a UI theme using Themeroller and the dialog I'm using is completely void of all styling. To the point that the dialog is complete transparent and all that shows is the text in the dialog and the unstyled close buttons.

I need to insert several rows of data into a particular place from the success function of an $.ajax call to a PHP database query.

What follows is the result of a suggestion at StackOverflow and some of my own testing. Currently this only inserts the new table into the space of a single cell immediately after the target row.

2. function GetActorsForSelectedMovie(movieID) {
3.    // $.ajax call gets rows from php script
4. 
   
5.    var row = $('#tblMovieList tbody tr').find('td input.chkDeleteMovie[value="' + movieID + '"]').parent().parent();
6.    var newRowTable = $('<table id="tblActorsForMovie"></table>');
7. 
   
8.    //$.each(data, function (index, element) {
9.    newRowTable.append('<td width="113px"></td><td>actorID: 12, name: Some Actor</td>');
10.    //});
11. 
    
12.    row.after(newRowTable.wrap('<tr id="actorsForMovie" /><td colspan="10" />'));
13. }

What I need to do is insert a row that contains the json data from the php script after the row that has a checkbox with a value set to a specific movie ID.

As I said, the code above inserts a table after the target row, but what gets inserted is just a table, not a table wrapped in a set of <tr><td> tags to work with the "parent" row. You'll see what I mean if you follow the jsFiddle link at the bottom of this post.

The final structure of the row that is to be inserted should look something like this:

2. <tr id="actorsForMovie">
3.     <td colspan="10"> <!-- There are 10 rows in the "parent" table -->
4.         <table>
5.             <tr>
6.                 <td>
7.                     [actor data]
8.                 </td>
9.             </tr>
10.             <tr>
11.                 <td>
12.                     [actor data]
13.                 </td>
14.             </tr>
15.             ... etc for additional rows/actors
16.         </table>
17.     </td>
18. </tr>

I have created a jsFiddle for anyone to take a crack at helping me figure this out. No matter what I've tried, the inserted table 1) Never gets wrapped in the and tags to make it work with the "parent" table, and 2) the inserted table always only gets put in the area of the first cell in the rest of the table.

____________________________________
f u cn rd ths u cn gt a gd jb n prgrmmng

I have a table that is built in an $.ajax success function as a result of a PHP/MySQL database query. The output looks like this:

    <input id="submit1">
    <input id="submit2">

</form>

____________________________________
f u cn rd ths u cn gt a gd jb n prgrmmng

Hi, all

I'm just figuring out how to use $.ajax for the first time and I have a question specific to how I need to implement ajax.

Hi, all

Hi, all

I have UI Accordion set up on a page similar to this:

1. <div id="accordion">
       <h3><a href="#"><input type="checkbox" name="deleteDocs[]" value="' . $rowDocs['docID'] . '" />&nbsp;&nbsp;Class 1</a></h3>
       <div>
           <p>This is a document for the class.</p>
       </div>
      
       <h3><a href="#"><input type="checkbox" name="deleteDocs[]" value="' . $rowDocs['docID'] . '" />&nbsp;&nbsp;Class 2</a></h3>
       <div>
           <p>This is a document for the class.</p>
           <p>This is another document for the class.</p>
       </div>
   </div>
   

Along with the standard UI Accordion functionality I've added this:

1. $( "#accordion" ).accordion({
       collapsible: true,
       active: false,
       autoHeight: false
   });
   

Now, you'll note the checkboxes in each accordion title section. I need to be able to check those with the checkmark showing and the panel NOT expanding, but the panel should expand when the rest of the h3 tag is clicked.

I currently have this code to try to get that to happen:

1. $('#accordion h3')
       .hover(function() {
           $(this).toggleClass('hover').css('cursor', 'pointer');})
       .next().click(function() {
           $(this).parent().next().toggle();});
   

What this is doing is changing the pointer correctly when the checkbox is hovered over, but the panel still expands and the checkmark doesn't show in the checkbox.

So, can anyone offer some help on getting this to work as I described?

Thanks!
____________________________________
f u cn rd ths u cn gt a gd jb n prgrmmng

Hi, all

I have the following code that works fine (except the show/hide animation for the rows is proving to be a pain to get working):

1. $('tr.docRow')
2.     .hover(function() {
3.         $(this).toggleClass('hover').css('cursor', 'pointer');
4.     })
5.     .click(function() {
6.         // Show and hide the row after the row that was clicked on
7.         $(this).next().toggle();
8. });

In the table this is for, I have a checkbox in the first cell in the row the user hovers and clicks on to expand the following row. I am trying to make it so that clicking the checkbox doesn't trigger the jQuery toggling action.

Here is a sample row in the table this is for. The complete row below is what the user clicks on, and the row after that (class="docClassesRow") is what is expanded on clicking the above row

1. <tr class="docRow" bgcolor="#E7DDCC">
2.     <td align="center"><input type="checkbox" class="chkDeleteDoc" name="deleteDocs[]" value="7" /></td>
3.     <td>Document 1</td>
4.     <td>The first document in the list of items the user can see</td>
5. </tr>
6. <tr class="docClassesRow" bgcolor="#E7DDCC">
7.     <td>...

I tried adding :not(:first-child) to the selector:

1. $('tr.docRow:not(:first-child)')

but that didn't work.

What am I missing/doing wrong?

Thanks for anyone's help!
____________________________________
f u cn rd ths u cn gt a gd jb n prgrmmng

Hi, all

You can see here a sample of what I'm working on.

If you click on the second row you'll notice that the text doesn't change, but clicking on the first row changes that row's text.

I'm trying to make it so when you click the Edit Class link the text in that row gets changed, but as my selector is now it always selects the first table row - not the row clicked on.

I know my selector isn't quite right anyway (".parent().parent().child()"), so I need help with that anyway, but I'm sure getting that fixed will get my row-clicking issue fixed as well.

Thanks for anyone's help!

Mark

____________________________________
f u cn rd ths u cn gt a gd jb n prgrmmng

Hi, all

This is the page I have the question on.

I finally figured out how to get the table rows to show and hide when its previous row is clicked (typical detail table setup). However, I can't get any animation to work properly.

Using the toggle() method shows and hides the desired row but they just "snap" open and closed. When I use the slideToggle() method there is a slight delay in the hiding and showing.

Adding some sort of animation parameter (slow, 400, etc) has no effect.

I'd appreciate it if someone could help me out here.

Thanks in advance!

f u cn rd ths u cn gt a gd jb n prgrmmng

Hi,

I have a simple three-field form in a UI Dialog that, prior to POSTing, I need to validate using the jQuery Validation plugin.

Currently, if the user clicks the form's Submit button (the form's action for the PHP form handling is the page with the link that opens the Dialog in the first place) with a field not properly filled out, the Dialog just closes.

Clicking again on the link that opens the Dialog form will show the form with the error message(s) that the Validator generated on the previous click of the submit button.

How can I keep the Dialog open and prevent a POST until the form validates?

Thanks for anyone's help.

f u cn rd ths u cn gt a gd jb n prgrmmng

Hello all

I created a UI theme using ThemeRoller and am trying to use it in a website I am building. The accordion itself is functional, but no styling is being applied.

Here's a link to the problematic page: Test accordion. The folder's indexing is turned on, so you can verify my folder/file structure is correct is you so desire.

Obviously, the first thing to check when styling isn't working is the links to the stylesheets. I've checked, double-checked, and triple-checked both the css and js links and they all point to the files correctly (and the files are actually in the folders they're pointing to!). The doctype is XHTML 1.0 Transitional, so that shouldn't be a problem. Even though ThemeRoller bundles everything together, I even tried linking to the relevant core, widget, accordion, etc. css and js files, but that did nothing.

Now, there is one caveat to my page design: I'm building the individual accordion content sections (<div>s) from a php/mysql database query's while loop. Here's the full extent of the php code on the page:

1. <?php
       // Connect to the db
       include ('includes/dbConnect.php');
      
       // Create the query to get the class IDs (for grouping each class's docs together in each div when the jQuery accordion is built)
       // I just duplicated the query and added the GROUP BY clause, which results in returning the first record found for each class with at least one document assigned
       $queryClasses = "SELECT c2.classID, c2.className, c2.classNumber, d2.docName, d2.docFileName, d2.docDescription
                   FROM classes c2
                   INNER JOIN classDocs cd2 ON c2.classID = cd2.classDocsClassID
                   INNER JOIN docs d2 ON cd2.classDocsDocID = d2.docID
                   GROUP BY c2.classID";
                  
       // Run the query
       $resultClasses = @mysqli_query($dbc, $queryClasses);
      
       // Get the number of returned rows from the classes query
       $numClasses = mysqli_num_rows($resultClasses);
      
       if ($numClasses > 0) {
           // Query ran successfully and returned at least one row
          
           // Open accordion container
           echo '<div id="accordion" style="width: 400px; padding-left: 10px;">';
              
           // Read records from the result set and build the jQuery accordion based on that
           // Iterate through the $resultClasses set, creating a new <h3> & <div> pair for each class
           while ($classesRow = mysqli_fetch_array($resultClasses, MYSQLI_ASSOC)) {
               echo '<h3><a href="#">' . $classesRow['className'] . '</a></h3>
               <!-- Open div containing class info and documents (this is repeated for each class) -->
               <div style="padding-left: 10px;">
                   <p>' . $classesRow['className'] . '</p>
                   <p>' . $classesRow['classNumber'] . '</p>';
                  
               // Get the current row's classID to retrieve the current class's docs in the following query
               $classID = $classesRow['classID'];
                  
               // Build the query to get the current class's docs
               $queryDocs = "SELECT c.classID, d.docID, d.docName, d.docDescription, d.docFileName
                   FROM docs d
                   INNER JOIN classDocs cd ON d.docID = cd.classDocsDocID
                   INNER JOIN classes c ON cd.classDocsClassID = c.classID
                   WHERE c.classID = $classID";
              
               // Run the query
               $resultDocs = @mysqli_query($dbc, $queryDocs);
              
               // Iterate through the result set and output each document's information and a link button to its file
               while ($docsRow = mysqli_fetch_array($resultDocs, MYSQLI_ASSOC)) {
                   echo'<hr style="width: 350px; margin-left: 0px;" />
                   <p>Document Name: ' . $docsRow['docName'] . '</p>
                   <p>Description: ' . $docsRow['docDescription'] . '</p>
                   <p><input type="button" value="Download File" onClick="window.location.href=\'documents/' . $docsRow['docFileName'] . '\'" /></p>';
               } // Close the documents While loop
              
           // Close div containing class info & docs
           echo '</div>
           ';
              
           } // End of individual class's WHILE loop
   
           // Close the accordion container
           echo '</div>';
       }
       else {
           // No records returned
          
           // Message to Web page
           echo '<p class="errors">Didn\'t find any classes. Please contact the site administrator.</p>';
          
           // Debugging message
           echo '<p>' . mysqli_error($dbc) . '<br /><br />Query: ' . $query . '</p>';
       }
   ?>

Like I said, the accordion is functional, as is the querying and populating the div for each database record. I just can't get the styling to work.

Any help will be greatly appreciated!

Hi, all

I have a standard menu structured with an unordered list. Some of the items in the menu have sub items, but are not themselves links. Here's an example:

1. <ul id="mainMenu">
2.     <li><a href="">home</a></li>
3.     <li><a>services</a>
4.         <ul>
5.             <li><a href="">services 1</a></li>
6.             <li><a href="">services 2</a></li>
7.         </ul></li>
8. ...
   

As is, if you mouse over one of the list items that do not have a link, the cursor changes to a text cursor when over the text and becomes a pointer (arrow, not hand) when not on the text, but still within that <li> tag (due to the padding).

I want to change that so that when mousing-over anywhere in the <li> tag's area the cursor is an arrow pointer, but this should happen only for <li> elements that have an <a> tag with an attribute.

The below is what I have for two attempts:

1. // This was supposed to add the linkHover class to just the first level of the menu - but this styled not only all first level elements, but the sub-menu items as well...
   
2. $('#mainMenu li a').hover(function() {
3.     $(this).addClass('linkHover');
4. });

1. // This is supposed to find only <a> tags in #mainMenu that have the href attribute - what it did was give me my "hand" back when mousing over the links, but didn't appear to add the linkHover class to the non-linking list items (they just got the text cursor)
   
2. $('#mainMenu a').find('[href]').each(function(index){
       $(this).addClass('linkHover');
   });
   
   

The comments explain what happened for each.

How do I select a tag that does (or does not) have a particular attribute? In my case, I want to be able to select all <a> tags in #mainMenu that do not have the href attribute.

Hi, all

I have a menu (see it here) that currently styles the anchor tag when an item is moused-over.

In that menu, the top items "services", "pricing", and "about" won't link to anything, so I want to be able to remove the <a> tags from those list items. The problem is I still want the background to change when the item is moused-over. But removing the links removes the styling, in effect.

As far as I know, :hover only works on <a> tags, so putting :hover on the li tag instead of the a tag doesn't work (I tried it), and I've tried styling the top-level li tag with jQuery using

1. this: $('#mainMenu li').hover( function() {
2.       $(this).css({background-color: "1C5B87"})
3. }, function() {
4.       $(this).css({background-color: "2476B2"})
5. }

but that didn't work either.

I'd really appreciate it if someone could offer some coding suggestions on how to accomplish this!

Thanks

In the menu in this page I have four different methods (you can see them in the <script> tag on the pages) of indicating the current page in a menu. I downloaded these from various web pages after Googling "jQuery highlight current page".

None of the methods works. Is there something wrong with my selectors? Can anyone see why none of them are working?

Thanks for anyone's help!

I have a mockup of a new menu I am building here. All of the css and javascript/jQuery code is on web page itself.

I just need to get two things changed and I'm done:

1)
The three middle items that have sub-menus, "services", "pricing", and "about" won't actually link to pages themselves. The CSS (I built this menu based on a web site's tutorial) is looking for the <a> tag to set the background color during a mouse-over. Since those list items don't actually link to a page, I want to remove the <a> tag from them, but keep the mouseover background coloring.

I can't figure out how to do that. I tried changing the existing CSS selectors by removing the a:hover and then adding a line in my jQuery code to add a background-color style on hover, but that only changed the <a>'s text (using parent() ) didn't work either).

How can I remove those three <a> tags but keep the mouseover background styling effect?

2)
You'll notice I'm using fadeIn() for the mouseover event. I would like to use fadeOut() as well, but adding that to my existing mouseout line does nothing. How can I use fadeOut() with what I have?

Thanks for anyone's help!

Hi, all

I'm trying to do what the post title says and I ran across this article whose title is exactly what I'm trying to do, so I gave it a shot, but it didn't work.

I'm just learning jQuery so I've gone over the documentation on selectors, and adding and removing classes and attributes. As far as I can tell I'm selecting the tags and setting the classes/attributes correctly.

On one page I've got some images as links in a table:

1. <td><a href="http://www.example.com"><img src="images/exampleSite.jpg" /></a></td>
   

Now, in my external stylesheet I have these two classes defined:

1. #content a { border-bottom: dashed 1px #000000; }
   
   #content a:hover { border-bottom: solid 1px #2476B2; }
   

And in a linked js file I'm trying to remove the border as follows:

1. $("a[img$='.jpg']").attr( 'border-bottom', 'none' ).attr( 'text-decoration', 'none');
   

But it's not removing the border and I can't figure out why.

I'd appreciate it if someone could offer some help/suggestions.

Thanks in advance.