jQuery Forum

Hello Everyone:

This question is hard to conceptualize, so please bear with me. Does anyone know of a jQuery table plugin that will allow dynamic blocking of data? Specifically the table needs to be able to block data as follows:

1. One block for every work station
2. Within each work station block by group assignments - will need to color code each work group
   
3. Force table to start a new column of data for every 4th work station
4. Allow users to designate number of work stations
5. Allow users to name and designate number of work groups within individual work stations.
   

If anyone knows of a jQuery plugin that can accomoditate this type of data grouping, I'd really appreciate a heads up.

Thanks Much:

Michelle

Hello Everyone:

I hope this question is in the right forum. I'm using jQuery fullCalendar and having trouble with asynchronous execution preventing a proper refetchEvents. In research I found out about jQuery.deferred, but can't seem to properly execute a refetchEvents AFTER posting new events to the php file. Following is my script as it now stands:

1.                 // Now that you've grabbed returned data from ol_LogEdits.php and created arrays, send the new arrays to ol_postActivity.php for INSERTing
2.                 $.post("ol_postActivity2.php",{activityAry:extendArry, participantArry:extendParticipants},function(data){
3.                 })
4.                 .done(function (response) {
5.                     //Our JSON response will come back with an http status of 200,
6.                     // so we have to handle our errors in the "done" (success)
7.                     // callback of the promise returned by post().
8.                     if (response.error) {
9.                         console.log("An error occurred");
10.                     } else {
11.                     $('#calendar').fullCalendar( 'refetchEvents' );
12.                         console.log("Success!");
13.                     }
14.                 })
15.                 .fail(function (response) {
16.                     //This gets executed on failing http status codes (e.g. 400)
17.                     console.log("A server error occured (failing http status code)");
18.                 });

The console log is reporting "Success" from line 12. And I can see the calendar refresh, but the newly added events are not showing up on the calendar.

What am I doing wrong, the new data is INSERTING into the appropriate table, it's just that the calendar is not refetching it. I can only assume that it is because of asynchronous execution. So... why isn't the deferred taking care of the issue?

Thanks in Advance - Pavilion

Hello:

I'm running jQuery datetimepicker with fullCalendar. For the most part things are working well. Specific to this situation, I built it so that after user's ..

1. Selects a date on the Calendar
2. The date (or dates if user selects multiple dates on the calendar) are then dumped into #startDate and #endDate input controls.
• There are other input fields that user's enter data in to start the new activity, then a submit button pushes the dates and other values into an array for processing.

It all works pretty well, accept when users immediately start a second activity. After activity 1 is saved, user's are sent back to the calendar. If they select a second date (or date range) then things start to go wrong. I've narrowed the problem down to the onSelect option in the datetimepicker. Following is the script for my $("#endDate").datetimepicker({}) control ....

1. $("#startDate").datetimepicker({
2. onClose: function(dateText, inst) {
3.     // Get start dateTime and add 15 minutes for end dateTime
4.     start_TimeStamp = new Date(dateText);   
5.     end_TimeStamp = new Date(start_TimeStamp.setMinutes(start_TimeStamp.getMinutes() + 15));
6.             setTimeout(function() {
7.             // Need to set timeout to grab correct end_TimeStamp after StartDate was populated.
8.             // Before setTimeout() was inserted the end_TimeStamp variable was not grabbing the right time.
9.             }, 500);
10.             endDateTextBox.datetimepicker('setDate', end_TimeStamp);
11.             endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate') );
12.     },
13.     onSelect: function (selectedDateTime){
14.         // restrict choices in endDateTextBox by what is chosen in startDateTextBox
15.     endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate') );       
16.     },
17.     showSecond: false,
18.     timeFormat: 'hh:mm TT',
19.     minuteGrid: 15,
20.     stepHour: 1,
21.     hourMin: 0,
22.     hourMax: 24,
23.     separator: ' @ ',
24.     showTimezone: false
25. });

As you can see I'm using the onClose and onSelect options to manage synchronization of #startDate and #endDate. I don't want folks to choose and end datetime previous to the the start datetime. The script I've got above works great on the 1st activity. But all subsequent activities are polluted with the first activity's datetime value.

I can't clear out either the onClose or the onSelect options after submitting and saving an event.

Does anyone know how to clear datetimepicker options?

Thanks in advance - Pavilion

Hello:

Help is needed with jQuery.parseJSON(). Following is a sample of the json_encode() array returned from a php file.

{"startTM":"09-10-13 | 08:30 AM","endTM":"09-06-13 | 08:30 AM","Owner":"Duck, Donald","ActivityID":"550"}

As you can see:

1. There are double " around all associative keys and values.
2. Both the startTM and endTM values include an |
3. The Owner value includes a ,

So ... in jQuery when I use the following syntax:

1.         rowContent_Arry = $(this).val();
           console.log("dump content array: " + jQuery.parseJSON(rowContent_Arry));

I'm getting the following error message:

SyntaxError: JSON.parse: unterminated string 

So... what needs to be done in order to properly parse the returning json_encode() array?

Thanks in Advance:

Pavilion

Hello:

I'm adding some column filters to a table. The column filters with <selects are working great because there is an apples-to-apples match.

However, one of my column filters needs to work with a wildcard, and I'm running into problems. Following is the applicable script:

1.     $(document).on('keypress','#filterSubject',function(e) {
2.    
3.         if(e.which == 13) {   // runs on ENTER key
   
4.    
5.         // Extract user entered filter val()
6.         var filterSubject = $(this).val();
7.    
8.         // run an .each function on the td class 'toggleSubject'. This forces the filter to only act on the Subject column
9.         $("td.toggleSubject").each(function () {
10.             var TD_txt = $(this).html();
11.             // now compare user entered filter val() against inspected .html(). If there is NOT a match, then hide parent <tr
12.             if (TD_txt *= filterSubject) // stops working here
    
13.             {
14.             console.log("contains string: " + TD_txt);
15.             // $(this).parent('tr').show();
16.             }
17.             else
18.             {
19.             console.log("Does NOT contain string: " + TD_txt);
20.             // $(this).parent('tr').hide();
21.             }       
22.         });
23.        
24.         } // End if
25.     });

Since the subject column needs to be searched via a wildcard, I did a bit of research and found *= as the jQuery wildcard operator. But it's not working with my if() function. The script stops working at the following line:

1.             if (TD_txt *= filterSubject) // stops working here
   
2.             {

Does anyone have any idea why? Am I using the correct wildcard operator?

Thanks in Advance - Pavilion

Hello Everyone:

I've got a couple of questions about setInterval(). Following is my setInterval script:

1. var varFilter = '';   
2. // ############ Manage autoreload of table data ############   
3. var logInterval = setInterval(function(){
4.     varFilter = $('#filterBy').val();
5.     initializeLogTbl(varFilter);
6. }, 50000);

The actual setInterval works. But...

1. There are situations where user action hides the table, so I want to pause setInterval
2. In addition, the table container needs to be hidden.
3. Then when the table container is shown once again, then I need to restart the setInterval
   

Following is my attempt at pausing the setInterval and hiding the table container:

1. $('#activityLog').hide(clearInterval(logInterval));

When I'm testing I set the timer interval to 500 or 5000. When I click the applicable button, the clearInterval is definitely working, but $('#activityLog').hide() does not always work. Sometimes it does, and sometimes it doesn't.

So.. my questions are as follows:

1. How can I make sure the .hide() always works? Do you think the intermittent might have something to do with my shortened timer intervals?
   
2. How can I restart the setInterval when a user .shows the table container again?

Thanks for your help in advance - Pavilion

I've an html table dynamically constructed in a php file. The table id is logTable

When the user page is loaded, I use $.getJSON to grab the table and display it on the user page as follows:

The console.log is reporting the correct class. So I'm able to successfully use $('#activityLog') to grab appropriate table information.

But the initialization

OK - I didn't think this was going to cause me such big headaches.

I have the following function:

1. function getTimeStamp() {
2.        var now = new Date();
3.        return ((now.getMonth() + 1) + '/' + (now.getDate()) + '/' + now.getFullYear() + " " + now.getHours() + ':'
4.                      + ((now.getMinutes() < 10) ? ("0" + now.getMinutes()) : (now.getMinutes())) + ':' + ((now.getSeconds() < 10) ? ("0" + now
5.                      .getSeconds()) : (now.getSeconds())));
6. }

Hello

Does anyone here know anything about CKEditor?

I've got it installed on my site and it works great in FireFox and Chrome. But IE 9 is causing problems.

For some reason I can't destroy the CKEditor instance in IE 9. Following is my script:

1.     $("#ckSubmit").click(function(){
2.         // grab reply editor data
3.         var editor_data = CKEDITOR.instances.replyTxtarea.getData();
4.        
5.         // Push getActivityID and editor_data into array
6.             // getActivityID; is activityID variable from $(document).on('click','.details_button',function() {
7.         var postRply_Array = new Array();
8.         postRply_Array.push({activityID:getActivityID, replyTxt:editor_data});
9.                
10.         $.post("ol_postActivity.php",{postReply_Ary:postRply_Array},function(data){
11.             $.getJSON("ol_LogPosts.php", {actID:getActivityID}, function(data) {
12.             $('#postDiv').html(data);
13.             });
14.             $("#filterBy").val(1);
15.         });
16.             // set textarea data to empty, then destroy the ckeditor instance so it's completely cleared out.
17.             CKEDITOR.instances.replyTxtarea.setData('');
18.             CKEDITOR.instances.replyTxtarea.destroy();
19.            
20.             $("#replyTxtarea").hide();
21.             $(".postReplyBttn").show();
22.             $("#ckSubmit").removeClass('ol_shownTR').addClass("ol_hidden");       
23.     });

Hello:

I'm having a problem with the Cleditor iframe. Following is a screen shot, even though my height setting is 300, this only controls the textarea box. It does not control the iframe. When I paste large quantities of text into the editor, the text overflows the textarea and pushes the iframe out. See image below:

As you can see the text is overflowing the actual cleditor. The red border shows the iframe, as I added border settings to the iframe within the cleditor.css file - the settings are changed as follows:

1. .cleditorMain iframe {border:8px solid red; margin:0; padding:0}

So .. now that I can prove the text is overflowing the cleditor control because of the iframe height, how can I address the problem. Putting a max-height in the iframe settings (as I did for the border) does not solve the problem.

Thanks in advance - Pavilion

Hello Everyone:

I am using a jQuery .map(function() to iterate through a table and compile an array. My problem is pretty straight-forward. How do I test for duplicates, so the resulting array has unique subarrays? Following is my script:

1.                     // use .map function to iterate through the tables <select objects
2.                     post_ParticipantsArray = $(".grpBK_O1 select").map(function(){ // mapping table with class ".grpBK_O1" selects
3.                         // now set variables for assembling the array
4.                         var row_ID = this.id; // this.id is jQuery for javascripts: $(this).attr('id');
5.                         var rowArray = row_ID.split("_");
6.                         var membID = rowArray[1];
7.                         var varPrivilegesID = $(this).val();   
8.                        
9.                     // return {} pushes the variables into the post_ParticipantsArray. It is "returning" the array to post_ParticipantsArray.
10.                     return {participantID:membID, PrivID:varPrivilegesID};
11.                     }).get();
12.                     console.log("post participantArray: " + JSON.stringify(post_ParticipantsArray));

Hello:

I've just finished writing a routine to do the following:

1. Use $.post to grab a dynamically produced php table and display it in a "group" container. The table shows 1 line for each group member, and their privileges.
2. Use $(".grpBK_O1 select").map(function(){ to iterate through the resulting member table and grab the value of the privileges <select object.
• Assign values to variables that will be pushed into an array
3. Use $.each(memberID, function() {    to test and process EVERY memberID
• Use $.grep(grpPrivilege_array, function(v,i) { within the $.each() to figure out if there are duplicates in the array - BEFORE pushing
• Use if (result=='') to do an array push

Hello

I've got a php dynamically constructed table in one file: ol_list_ActivityPrivileges.php

In my main file - the table is pulled in through the following script:

1.     $.getJSON("ol_list_ActivityPrivileges.php", function(data) {
2.     $('#address_Book').html(data);
3.     });

So... I figured out how to add items to a pre-existing array. Following is the applicable script snippet:

1. catch_array["privilegesID"] = []; // Declare a new associative key in the catch_array.
2. catch_array.privilegesID.push(varPrivilegesID); // Add varPrivilegesID to catch_array, assign it to the associative key.
3. console.log("data row After processing: " + JSON.stringify(catch_array));
   

Hello:

I didn't think this would be so difficult, but then again...

I've got a table with a checkbox in the first <td> and a <select><option>. When The checks the checkbox and it is true, then I want to populate the <option>.

How do I do that? I just want to populate it with a value from the option list and give it the appropriate val().

Thanks in advance:

Pavilion

I am trying to get the Trent Richardson Timepicker up and running. For the most part it is up and running, but I've one problem.

My datetime input is set up as follows:

1.     $("#startDate").datetimepicker({
2.     showSecond: false,
3.     timeFormat: 'hh:mm:tt',
4.     hourGrid: 4,
5.     minuteGrid: 15,
6.     stepHour: 1,
7.     stepMinute: 15,
8.     hourMin: 8,
9.     hourMax: 20
10.     });

That works great, the control is working. I can select a date from a calendar and use hour and minute sliders to choose the time.

Now for the problem - following is my listener function:

1.     $("#startDate").change(function(){
2.         var startDate = $(this).val();
3.         console.log("Inside start Date Change: " + startDate);
4.     });

Because I'm using sliders to select times, the console log returns multiple date/times. An example follows:

1. [20:45:53.615] Inside start Date Change: 02/19/2013 08:00:am
2. [20:45:57.070] Inside start Date Change: 02/19/2013 09:00:am
3. [20:45:57.114] Inside start Date Change: 02/19/2013 10:00:am
4. [20:45:57.157] Inside start Date Change: 02/19/2013 11:00:am
5. [20:45:57.280] Inside start Date Change: 02/19/2013 12:00:pm
6. [20:45:57.642] Inside start Date Change: 02/19/2013 01:00:pm
7. [20:45:59.515] Inside start Date Change: 02/19/2013 01:15:pm
8. [20:46:00.141] Inside start Date Change: 02/19/2013 01:30:pm

Hello:

I'm having a problem with order of operations, and hoping someone here can help. The routine in question, deletes members from a group, and then displays the new group membership without deleted members. The routine uses two different files, because the select query used for displaying group members is called in other routines within the application. It only makes sense to use the same SELECT statement in the same file (easier maintenance). Following is the snippet of code in question:

1. //======================== Delete selected individuals from Group =======================
2. $('#removeMember').click(function() {
3.     var removeAnswer = confirm("Do you really want to remove the selected user(s)?");
4.     if (removeAnswer){
5.         $.post("org_users_data6.php",{bind_MemberArray:MemberArray},function(data){
6.         console.log("1st Post Return: " + MemberArray);
7.         });
8.         $.post("org_users_data5.php",{bind_GrpArray:grpID_Array},function(data){
9.             console.log("2nd Post Return: " + data);
10.         $('#MemberBody').html(data);
11.         });
12.         // Reset select options to reflect deleted group
13.         $('#AddMemberOpt').html('Add Individuals to <b><u>ONE</u></b> Selected Group');
14.        
15.         // Reset applicable Arrays - so that deleted members don't remain in play for other procedures.
16.             MemberArray = new Array();
17.             tableRow = '';
18.     }
19.     // ### ADDED: 01-27-13 to reset and clean after action
20.     $('#new_OrgGrp').val('');
21.     $('#GroupSelect').val(0);
22. });

Hello:

I've a small problem and am hoping someone here knows the answer. Following is my jQuery snippet:

1.     window.location.reload();
2.    
3.         // after reloading ... select userGrps_tab
4.         $items.removeClass('selected');
5.         index = 2;
6.         $('#userGrps_tab').addClass('selected');
7.         $('#vtab>div').hide().eq(index).show();

Hello Everyone:

My goal here is to extract a sub-array from a multi-dimensional array. As users select and unselect a checkbox the array needs to be added to or subtracted from. Details follow:

1. catch_array = jQuery.parseJSON($(this).val());
   

Hello Folks:

I'm trying to iterate through a table's <tr>s. To some degree I've found success. But have gotten stuck on testing for checked in a row's checkbox. Following is my current attempt:

1.             $("#address_bk").find("tr").each(function() { //get all rows in table
2.                 var chkTest = $(this).find('td.selectChk').find('.Record_Chk').is(':checked');
3.                 console.log("Check Test: "  + chkTest);
4.             });     
   

Hello Folks:

I'm working on my first application which uses jQuery extensively. So far, I've got the first basic pages done. Registration, uploading contacts, profile pages for individuals and organizations, and making own groups. They all work great on my two computers. My desktop is a bit older (Windows XP) than my laptop (Windows 7) and I've tested the work in all the major browsers.

Today I am testing this application on my daughter's really old laptop with Windows Vista. This testing is necessary because my application will be used in small offices, a lot of which will be non-profits with low budgets. So.... I feel the need to test on older computers. Now for the problem ...

JQuery is NOT working in any browser on Windows Vista. We've downloaded Javascript and we've checked options to make sure javascript is enabled in the browser.

Does anyone have any idea why it is NOT working in Windows Vista? Or... what other troubleshooting should I be doing?

Thanks in advance:

Pavilion

Hello:

I'm working with a jQuery constructed table. The table assembles wonderfully. Now I want to grab the text() of the 2nd <td> on the row I've selected. But I can't figure out how to do it. Following are the details:

construction syntax:

1. function rowBuilder(data) {
2.       return '<tr class="myRows">'
3.             + '<td class="e_lay"><input type="checkbox" class="Grp_Chk" value=' + data.GroupID + '></td>'
4.             + '<td class="b_lay GrpName">'
5.                 + data.GroupName
6.             + '</td>'
7.             + '<td class="c_lay">'
8.                   + data.Grp_CreateDate
9.             + '</td>'
10.       + '</tr>';
11. }

Hello:

Hello - 

Six Months ago I started another thread about json_encoded arrays, because I was having trouble grabbing data.

That thread did give me some solutions, and until just a couple days ago I had no problems. However, now I am having problems with characters like slashes and commas. Following are the details:

Php script encoding the array

1. echo "<td class='e'><input type='checkbox' class='Record_Chk' value='". json_encode($row_array) ."'></td>";

jQuery Script

1.    $('.Record_Chk').click(function() {
2.         var check = $(this).is(':checked');
3.         var catch_array = $(this).val();
4.         var data_row = jQuery.parseJSON(catch_array);
5.         console.log("test: " + catch_array);    
6.     });