jQuery Forum

As per your image its a dialog not a window so all html in same page as well.
Solutions you are looking for is easy to do but for that you need share markup and js code you did.

Better you setup a jsfiddle page with same table and dialog then we can help you one that.

Here is the code. This is a Visualforce page but you may only refer to the js code here.

I don't know what serverside language you are using or can't predict what markup it will generate.

Get the raw html what we see in browser. If you find difficulties getting markup then copy it from browser's source code. Better create a jsfiddle page

Here it is....

I can't read your code at all. if i can't read your code then how i will do it?

Read how to use jsfiddle here http://doc.jsfiddle.net/

Hello, Sorry for posting it multiple times. I removed the unnecessary headers. you can see code here. http://jsfiddle.net/mpw2ffqn/3/

check this http://jsfiddle.net/vngh1tj7/

I used your html but few rows and few checkboxs in dialog. Not all. Even if i use all rows in table and checkboxes then also it will work.

Its doing below things.

1. When dialog get opened, it sets the same row 1st column value as title.
2. when you check some checkbox and click save, it populated a string with space and comma seperated string. I used space and comma because your checkbox value contains comma as well.
3. It put the comma separated string in same row 3rd column.
4. in dialog all checkbox get unchecked so when you click on any button all checkboxs will come unchecked.
5. If a row has any value in 3rd column and you clicked on same row's button then it will open the dialog with all checkbox selected which values presents in 3rd row of that column.

I use same html structure you have but i removed unnecessary class and property.

Now you need to change the script if you change anything in html. Also i used a fake class for all buttons which opens the dialog. You can use any other call as i need a selector.

Thanks Sµßhrånil∂ ,

Follow my previous fiddle and set another from which i can read. You just put a junk over there.

Follow fiddle guide line to setup a fiddle. There are separate sections for html, javascript, css and including scripts.

Thank you Subhranil. We implemented it.

Hi Subhranil,

Check this

http://jsfiddle.net/mpw2ffqn/9/

Hi Subhranil,

Sorry i didn't able see any problem. Can you take screenshots and annotate.

Did something like this. But any better way?

The problem was since I put a small check box below the 1st column values, the label for small text field was coming in the header of the popup. i some how removed it but asking if there is any better way.

Can you put the checkbox in the fiddle as well so i can edit code accordingly.

Also its very easy to avoid that checkbox in dialog title but i need to see your markup

It is already there.

You can simplify your js code by wrapping your source column in a span.

Check this

http://jsfiddle.net/mpw2ffqn/12/

Also showing selected values in a label inside dialog.

Thanks Subhranil. 

That is the design you need to do.

Then you have all values here

$.each(texts, function(i, value){ $("#divPopUp").find(':checkbox[value="'+$.trim(value)+'"]').prop('checked', true);
//append value to that section one by one here

            });

Hi Subhranil. Need little help. I have implemented a delete row functionality using Visualforce pages which has inbuilt ajax functionality. Unfortunately I can not publish the entire code here. The thing is when i delete a row and click on map button the popup does not open. I am attaching screenshot. Could you atleast give and idea what might be the reason?

Its very difficult to predict something without seeing your markup or jscode.

It will be good if you can share your js code and markup

Sorry Subhranil,

I think jQuery library are there. Your js code not working.

What i can guess, all your code inside document.ready handler like dialog initialization etc.

When you call ajax your dom get changed again and doesn't fires again as your dom get changed.

So after ajax call you need to re-initialize dialog and other control again.

Better cover those code as a function.

Call that function inside document.ready as well on ajax complete.

If you have an URL you can share or you js code  

Hi,

How do I keep the checked check boxes on top , next time the user clicks on map field so that he does not have to scroll down to see which are checked. Any idea?

I added below code to show checked checkbox first while open the dialog again

1.       $('#divPopUp div').sort(function(a,b){
2.             var a = $(a);
3.             var b = $(b);
4.             if( a.find("input").is(':checked') && !b.find("input").is(':checked') )
5.                 return -1;     
6.             if( !a.find("input").is(':checked') && b.find("input").is(':checked') )
7.                 return 1;
8.             }).appendTo('#divPopUp');

Check here http://jsfiddle.net/subhranild/mpw2ffqn/14/

Hi Subhranil,

It didnt work. not sure what was issue in my code. tried changing little here and there but didnt work now the search text is coming down. and selected are not on top.

1. <script type="text/javascript">       
           $(function() {                            
               $("#divPopUp").dialog({
                   resizable: true,
                   autoOpen: false,
                   height:500,
                   width: 550,
                   modal: true,
                   show:{effect: "blind"},
                   buttons: {
                       "Save": function() {
                           var text = $(this).find( ":checkbox:checked" ).map(function() {
                               return this.value+' ';
                           }).get().join(",\n");
                          
                           var obj = $(this).data("opener");
                            $(obj).parents('td:first').siblings(':eq(3)').find(':input').val(text);
                            $("#searchText").val("");
                            $( this ).dialog( "close" );                       
                       },
                       Cancel: function() {
                           $( this ).dialog( "close" );
                       },
                       "Reset": function() {
                           var numberOfChBox = document.getElementsByClassName('chk');
                           for(i = 0; i < numberOfChBox.length; i++)
                           {
                               if(numberOfChBox[i].checked) {                             
                                   numberOfChBox[i].checked = false;
                               }
                           }
                       }
                   },
                   close:function(){
                       $(this).find( ":checkbox" ).removeAttr('checked');
                       $(this).find('.mychk').show();
                       $("#searchText").val("");
                       $( this ).dialog( "close" );
                   }
               });
               $('button.mapbtn').on('click', function(){
                   var title = $(this).parents('td:first').siblings(':eq(1)').text();
                   var sourceHeadertext = title.split("\n");
                   title = sourceHeadertext[0];
                   $( "#divPopUp" ).data('opener', this).dialog( "option", "title", "Select Target Fields For : "+title ).dialog( "open" );
                   var text = $(this).parents('td:first').siblings(':eq(3)').find(':input').val();
                   if($.trim(text) != ''){
                       $('#searchedText').html('Searched Text: '+text);
                       var texts = text.split(",\n");
                       $.each(texts, function(i, value){ $("#divPopUp").find(':checkbox[value="'+$.trim(value)+'"]').prop('checked', true);
                       });
                      
                       $('#divPopUp div').sort(function(a,b){
                       var a = $(a);
                       var b = $(b);
                       if( a.find("input").is(':checked') && !b.find("input").is(':checked') )
                       return -1;     
                       if( !a.find("input").is(':checked') && b.find("input").is(':checked') )
                       return 1;
                       }).appendTo('#divPopUp');
                   }
               });
               $(".chk").each(function () {
                   $(this).add(this.nextSibling)
                       .add(this.nextSibling.nextSibling)
                       .wrapAll("<label class='mychk'></label>")
               });
               $("#searchText").keyup(function () {
                   var re = new RegExp($(this).val(), "i")
                   $('.mychk').each(function () {
                       var text = $(this).text(),
                           matches = !! text.match(re);
                       $(this).toggle(matches)
                   })
               });
              
               $('#inputFileSpan').find("input").change(function(event) {
               //check whether browser fully supports all File API
               if (window.File && window.FileReader && window.FileList && window.Blob)
               {
                   var fsize = $('#inputFileSpan').children()[0].files[0].size;
                   if(fsize>102400) //do something if file size more than 1 mb (1048576)
                   {
                       alert('Please upload data file only with column names or less than 10 records');
                       $("#inputFileSpan").find("input").val("");
                   }
               }else{
                   alert("Please upgrade your browser, because your current browser lacks some new features we need!");
               }
           });           
           });
      
      
      
       </script>
   

I didn't see the HTML you have for your dialog. I just saw the html in the fiddle you created. In the fiddle its working perfect. Start checking selector and debug your code accordingly.

Please ignore. I resolved it.

Hi Subhranil,

I know it is the same div, so once I select something for one row and save it, same sequence appears in other rows. Is there any way like if I click on a row where i have not selected a mapping would still give me the check boxes in original sequence?

It can be doable but then you need to store original sequence somewhere in the page or need to have a sequence with each checkbox like data-sequence="1" so when we rearrange this data will not be changed.

While opening the popup need to rearrange based upon that data property first then the checked property, so there will be two sort function.

You need to use sort function i used first but not with checked property.