jQuery Forum

hey guys i've made a plugin for my site which allows the user to edit thier data ie. editable table

as seen here: https://jsfiddle.net/dom484wo/

i have 2 problems

problem 1. validation

in line 251 i'm trying to apply validation to all input containing 'name', which is referring to the inputs that show in 1st column (name1, name2)

1.     $("input[name*='name']").rules("add", {
            required: true,
           messages: {
               required: "Name: Name is required."
           }
       });
      
       $("#test-form").validate({
           errorPlacement: function(error, element){
               error.insertAfter(element);
               }
       });
   

but i'm really strugging to get it to work...also i get an error:

1. jQuery.Deferred exception: d is undefined .rules@https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js:15:261
   window.onload/<@https://fiddle.jshell.net/_display/:375:2
   g/</j@https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:29946
   g/</k<@https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:30262
    undefined  jquery.min.js:2:31515
   TypeError: d is undefined[Learn More]  jquery.validate.min.js:15:261

problem 2:

on line 264 im trying to determine if the table is empy ie. all rows deleted....which also doesnt work.

1.     $("#editable-table-row-options-menu .editable-table-row-delete").click(function() {
           if(test_table.is_empty()){
               console.log('table is empty');
           }
       })

i hope i can get a repsone to how i can get these problems fixed....thank you

hey guys, i'm trying to find out if when making a remote connection in my validation, is it possible to return cusom error messages?

here is the code i'm using at the moment.

1. $("#reg-form").validate({
           rules: {
               email_address: {
                   required: true,
                   remote: {
                       url: "localhost/validate/email_address",
                       type: "post",
                       data: {
                           email_address: function() {
                             return $("#email_address").val();
                           }
                       }
                   }
                }
2.       }
3. });

now when connected to localhost/validate/email_address i want it to return different error messages depending on the constraint.

ie. my php method

1.     public function validate_email_address()
       {
           $request       = $this->get_request();
           $email_address = $request->post()->email_address;
          
           if ($request->is_ajax() && !empty($email_address))
           {
               $email = new Email_Address(array(
                   'value' => $email_address
               ));
              
               $user = $this->get_model('user:users');
              
               if (!$email->is_valid())
               {
                   echo 'Invalid email address';
               }
               else if ($user->email_address_registered($email_address))
               {
                   echo 'Email address already registered';
               }
               else
               {
                   echo 'true';
               }
           }
           else
           {
               // 404 error
           }
       }

is this possible please?...if so how?

thank you

hey guys im using a plugin called bxslider and i'm trying to detect when a user swipes the divs.

here are the versions i'm using...i have to use jquery 2.2.4 as the errors it creates with jquery mobile.

jquery            2.2.4
jquery mobile 1.4.5

html

1. <div class="internet_data">
                     <div class="slide slide-selected" data-value="1 GB">1 GB</div>
                     <div class="slide" data-value="2 GB">2 GB</div>
                     <div class="slide" data-value="3 GB">3 GB</div>
                     <div class="slide" data-value="4 GB">4 GB</div>
                     <div class="slide" data-value="5 GB">5 GB</div>
                     <div class="slide" data-value="6 GB">6 GB</div>
                     <div class="slide" data-value="7 GB">7 GB</div>
                     <div class="slide" data-value="8 GB">8 GB</div>
                     <div class="slide" data-value="9 GB">9 GB</div>
                     <div class="slide" data-value="Unlimited">Unlimited Data</div>
                   </div>
   

jquery

1. $.event.special.swipe.horizontalDistanceThreshold = 5;
   $.event.special.swipe.scrollSupressionThreshold  = 5;
   $.event.special.swipe.durationThreshold = 5;
   
   $( document ).on( "pageinit", function() {
       $('.slide').on("swipe",function() {
               alert('swipe');
       });
   });

sometimes i get the alert swiped sometimes i don't...this is the first time i've worked with jquery mobile so i'm sure i'm doing something wrong here

hope somene can help

thank you

i've made a form which includes 3 steps...when you click next button the next stage will show...i'm wanting to use https://jqueryvalidation.org/ for the form validation but there's no examples on how i'm able to validate each step individually

can someone please tell me if this is possible and how it can be done please?

thank you

i though this would be a lot easier but for some reason i'm having problems to get my dragenter to work with

1. .upload-container > child

but it works with selector on it's own fine. i've also tried :child

how can i please trigger an event on selector and any child please?

1. $('.upload-container > child').on({
              dragenter: function(e) {
                  var dt = e.originalEvent.dataTransfer;
                  if(dt.types != null && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('application/x-moz-file'))) {
                      $('.upload-container').addClass('over-droppable-area');
                      console.log('file here');
                  }
              },
              dragleave: function(event) {
                  $('.upload-container').removeClass('over-droppable-area');
              },
              drop: function(event) {
                  console.log('drop here');
                  event.stopPropagation();
                  event.preventDefault();
                  console.log(event.originalEvent.dataTransfer.files);
              }
          });

thank you guys

hey guys i have a function like so:

1.     function ajax(type, url, data){
           return $.ajax({
                   type: type,
                   url: url,
                   data: data,
                   cache: false,
                   processData: false,
                   contentType: false,
                   dataType: "text"
               });
       }

i'm able to call for success and error function like so:

1. var upload = ajax('POST', 'save.php', data);
   
    upload.success(function (src) {
                         
    });
                                        
   upload.error(function (data) {
   
   });

but what i've been trying to accomplish is to get the xhr function but i'm having no luck.

1. upload.xhr(function () {
                         
    });

is what I'm trying to do possible please?

thank you

hey guys,

i've been working on a multiple image uploaded but i'm having trouble running the script when selecting multiple images as it will only upload 2/3 out of 9 images for some strange reason

when i try to upload files singularly then all 9 will upload perfectly.

i'm getting no errors in my server log also, so it must be something wrong with my script somewhere if someone can point out where I'm going wrong please.

 when user selects image(s)

1.     $('.upload-container').on('change', 'input[name="images[]"]', function(){
           var files_length = this.files.length,
               count        = files_length + $("li[id^='image-'] img").length;
    
            if (count > max_images){
                upload_status('Too many images selected.');
             }
            else {
                
                for (var i = 0; i < files_length; i++, id++) {
                      read_file(this.files[i], id);
                 }
            }
       });

read file function

1.     function read_file(file, id){
           var reader = new FileReader();
   
           loader.display('loading Image');
   
           reader.onload = function (event){
                if (reader.readyState == 2) {
                    loader.stop('loading Image');
                
               var image_type   = file['type'].split("/"),
                   type         = image_type[0],
                   extension    = image_type[1],
                   size         = file['size'];
                   image_string = event.target.result,
                   img          = document.createElement("img"),
                   img.src      = image_string,
                   cover_image  = false;
   
                   img.onload = function() {
                       var width  = img.width,
                           height = img.height;
                      
                       if (width < 1 && height < 1){
                           width  = img.clientWidth;
                           height = img.clientHeight;
                       }
             
                       if (type !== "image"){
                           upload_status('File type: ' + type + ', isn\'t supported.');
                       }
                       else if (jQuery.inArray(extension, extensions) === -1 ){
                           upload_status('File extension .' + extension + ', isn\'t supported.');
                       }
                       else if (size > maximum_size){
                           upload_status('Image is too big.');
                       }
                       else if (width < minimum_width || height < minimum_height){
                           upload_status('Image must be at least 500 x 500.');
                       }
                       else {
                           var image_string = event.target.result,
                               name         = file['name'];
                               container_id = $("li[id^='image-'] img").length;
                               id           = "image_id_" + id,
                               img          = document.createElement("img");
                               img.src      = image_string,
                               width        = img.width,
                               height       = img.height,
                               cover_image  = 0,
                               filename = name.split('.');
                              
    
                             if (filename_exists(name)){
                               var new_filename = null;
                                
                                 for (i = 1; i < 10; i++) {
                                   new_filename = filename[0] + '- Copy(' + i + ')' + '.' + filename[1];
                                  
                                   if (!filename_exists(new_filename)){
                                       name = new_filename;
                                       break;
                                   }
                                 }
                             }
                            
                           images[id] = {
                                   'string'  : image_string,
                                   'name'    : name,
                                   'size'    : file['size'],
                                   'options' : [],
                                   'width'   : width,
                                   'height'  : height
                           };
   
                           if (container_id === 0){
                               cover_image = 1;
                            }
   
                           $('#image-container-' + container_id).prepend('<img src="' + image_string + '" id="' + id + '" data-uploaded="false" data-edited="false" /><div class="overlay" title="' + name + '"></div><div class="options" title="Options"></div>');
                           send_image('upload', $('#' + id), name, file, cover_image);
                       }
                      
                     };
                    
                    img.onerror = function (event){
                        upload_status('Unable to load image.');
                    };
                }
                else{
                    upload_status('Unable to read file.');
                }
         
          };
        
          reader.readAsDataURL(file);
       }
   

and finally my uploader

1.     function send_image(method, selector, filename, file, cover){
             var data    = new FormData(),
                 xhr     = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"),
                 message = 'Uploading ' + filename;
           
             if (method !== 'upload'){
                 file = JSON.stringify(file);
             }
            
             if (method === 'crop'){
                message = 'Editing ' + filename;
             }
             else if (method === 'restore'){
                 message = 'Retoring ' + filename;
             }
             else if (method === 'remove'){
                 message = 'Removing ' + filename;
             }
             else if (method === 'change_cover_image' ||
                     method === 'set_cover_image'){
                 message = 'Changing cover image';
             }
            
            loader.display(message);
            
            if (method === 'upload'){
                data.append('cover', cover);
            }
            
             data.append('method', method);
             data.append('file', file);
             xhr.open('POST', 'save.php', true);
            
             xhr.upload.onprogress = function(e) {
               if (e.lengthComputable) {
                   var percentage = Math.round((e.loaded * 100) / e.total);
   
                   progress.display(message, percentage);
                  
                   if (percentage === 100){
                       loader.stop(message);
                   }
               }
             }
            
             xhr.onerror = function () {
                 upload_status('Image failed to upload.');
             };
            
             xhr.onreadystatechange = function(){
                 if (xhr.readyState == 4) { 
                     if (xhr.status == 200) {
                         if (method.match(/^(upload|crop|restore)$/)){
                             var src = this.responseText;
                             selector.attr('src', src + '?time=' + new Date());
                             selector.data('uploaded', true);
                             $('#images-uploaded').text($("li[id^='image-'] img").length);
                         }
                     } else {
                         upload_status('Image failed to upload.');
                     }
                 }
             };
   
             xhr.send(data);
            
             return xhr;
        }

i just don't understand how i can upload images one by one alright...but when trying to upload more, they all won't upload.

if someone could give me some advise on this it would be very helpful.

thank you

hey guys i'm having a little trouble when it comes to firing a onload function when selecting files on local drive.

if i select multiple files to upload it can take a few up to 5 seconds for anything to happen due to how many images i upload and their size.

i'm trying to use:

1. this.files.onload = function(){
                   console.log('started');
               };

but i'm not getting any response.

ideally i'd like to know when files have loaded and finished...is and how is this possible please?

thank you

1.     $('.upload-container').on('change', 'input[name="images[]"]', function(){
           var files_length = this.files.length,
               count          = files_length + $("li[id^='image-'] img").length;
   
           this.files.onload = function(){
                   console.log('started');
               };
   
               this.files.onreadystatechange = function(){
                   if (this.files.readyState == "loaded" || this.files.readyState == "complete"){
                       console.log('ended');
                   }
               };
              
            if (count > max_images){
                upload_status('Too many images selected.');
             }
             
            for (var i = 0; i < files_length; i++, id++) {
                     read_file(this.files[i], id);
             }
       });
   

hey guys,

i'm trying to alter the css of a image using the following:

1.            preview.css({
                  'top'      : preview_left,
                  'left'     : preview_top,
                  'position' : 'relavtive'
              });
   

although preview_left and preview_top have a value

1. console.log(preview.css('top'));

it returns 0px

here is my jsfiddle:

http://jsfiddle.net/destramic/5jf9wwna/

for the life of me i can't see where it is I'm going wrong, if someone can help me on why the css properties aren't changing please

thank you

hey guys,

i know i'm using the correct code here but for some reason the offset left and right doesn't change when moving the draggable grid/image cropper here:


http://jsfiddle.net/destramic/ybq2mab5/

1.  $('img').click(function() {
           offset      = $('.cropper').position(),
               selected_x  = offset.left,
               selected_y  = offset.top,
               selected_x2 = $('.cropper').width(),
               selected_y2 = $('.cropper').height(),
              
           console.log('x = ' + selected_x + '  y=' + selected_y + ' x2 = ' + selected_x2 + ' y2= ' + selected_y2);
         });

if you move grid and click on image i get the results of x and y as:

x = 0  y=1 x2

which is incorrect...what is going wrong here please?

thank you

hey guys i'm trying to get a preview image after it being cropped using this function...although its not displaying the cropped picture (preview)...i'm getting rather confused with all these co-ordinates etc and to be honest I'm slightly out of my depth here.

here is the function and my jsfiddle is here.

https://jsfiddle.net/destramic/52mL83pb/

1.     function preview(image, selected) {
           var offset   = image.position(),
               image_x  = offset.left,
               image_y  = offset.top,
               image_x2 = image.width(),
               image_y2 = image.height(),
              
               offset      = selected.position(),
               selected_x  = offset.left,
               selected_y  = offset.top,
               selected_x2 = selected.width(),
               selected_y2 = selected.height(),
   
               preview_width  = 100,
               preview_height = 100,
              
               scale_x = preview_width / selected_x2,
               scale_y = preview_height / selected_y2;
   
           $("#cropped-image").css({
               width: Math.round(scale_x * image_x) + "px",
               height: Math.round(scale_y * image_y) + "px",
               marginLeft: "-" + Math.round(scale_x * selected_x) + "px",
               marginTop: "-" + Math.round(scale_y * selected_y) + "px"
           });
       }
2. 
   
3.  preview($('#image-to-be-cropped'), $('.crop-container'));

the image in the fiddle is 1980 x 1200 although in the crop process i have resized to 500 x 500

can someone please help / advise me on how to get a preview of the crop please...thank you

i don't know if i need a js forums but..how do i unshift a object please?

1. Object { 1: File, 3: File, 4: File, 5: File }

in this scenario how i make key 5 appear at the beginning of the object? like so:

1. Object { 5: File, 1: File, 3: File, 4: File}

thank you

to sort or to drag and drop?...i don't know....i need some advice and a bit of help please.

here is my fiddle:

http://jsfiddle.net/destramic/spvogc4d/


basically what im after is for the images without the blue border to be able to switch places with the blue border image only and for the blue border image to replace one which hasn't got a boarder.

do i use sort of drag and drop on this please?...also fiddle isnt working for some strange reason.

any advise or help would be appreciated guys.

thank you

the problem i'm having with this loop is when selecting 2 files in the input the files gets read with the read_file function, then when debugging my var id it always shows up as 2.

as the id is increasing while in the loop i expect a result of 0, 1 or 1, 2 (maybe) =/

here is my fiddle if someone can please tell me what is happening here.

https://jsfiddle.net/7ume34ea/1/

thank you

hey guys i have a scenario like so:

1. <div id="test-value" class="selected-option"><div class="remove"></div></div>
   

1. $(document).ready(function() {
       $('#test-value').text('123');
   
       console.log($('#test-value').html());
   });
2. // returns: 123
   

how it it possible for me to add text to #test-value selector without removing the <div class="remove"></div> already inside?

suppose i could do:

1. $('#test-value').text('123<div class="remove"></div> ');

but is there a proper way of altering the text but not the html (in this scenario) without messing around with the div wrapping

thank you

hey guys i made my own simple plugin which can be seen here:

https://jsfiddle.net/bgc329mL/

when assigning my drop down plugin to selectors I'm unable to get both of them to work

1. $('.mutliple-select-dropdown').drop_down(); // not working
   $('.dropdown2').drop_down();  // working
   

the colour drop down works as it should be the one above doesn't...i used "this" in plugin also.

why isnt both drop downs working and how can i make it so both do please?

thank you guys

hey guys i'm wanting to know how  to position the cursor on a input text field when clicking on it please?

what i want is for the cursor to always start at the beginning of the field.

i've had a search about but wasn't able to find what i wanted if someone could point me in the right direction.

thank you

   hey guys im currently using the load() function to load a report form inside a div container...this works beautifully.

but how can i detect when form is submitted after form is loaded please?

1.     var report_button = $('#report-txt');
      
       report_button.click(function(){
           var item_id = $(this).data('item-id');
          
           if (item_id !== null){
               $('#report-item-container').load('item/' + item_id + '/report', function() {
                   $(this).show();
               });
           }
       });

thank you

hey guys im trying to use the jquery countdown plugin but it's not displaying correctly.

timestamp : 2015-09-06 04:00:00

and it shows: 0 Days 03 Hours 11 Minutes and 40 Seconds remaining

can anyone tell me why please?

1. $('#timestamp').countdown({   
   	      until: $(this).text(),
   	      compact: true,
   	      layout: '{dn} Days {hnn} Hours',
   	      description: ' remaining',
   	      onTick: function(periods) {
   	            $(this).countdown('option', 'layout', periods[3] > 2 ? '{dn} Days {hnn} Hours' :
   	                  '{dn} Days {hnn} Hours {mnn} Minutes and {snn} Seconds {desc}');
   	      },
   	      
   	      tickInterval: 10
   	}); 
   

thank you

hey guys i've just set up a web socket on my server...but does anyone have a good tutorial on how to connect and how to execute SQL queries to my database so i'm able to gather rows please?

thank you

hey guys im a ajax request to get selected words so that i can then translate the text in my page...but while trying to replace text which works it effects every other script from working like my form validation, password strength meter etc...

1. function translate(words) {
       var language   = localStorage.getItem('language');
       var parameters = {from: 'en',           
                         to: language,
                         words: words};
      
       if (language === null) {
           language = $('#language').val();
       }
      
       $.ajax ({
           type: 'POST',
           url: 'http://bisi.bid/translate',
           datatype : "json",
           data: parameters,
           success: function(data){
               $.each(data, function(word, translation) {
                   var regex  = RegExp(word ,"gi");
                   var string = $('body').html().replace(regex, translation);
                   $('body').html(string);
               });     
           },
           error: function() {
           }
       });
   }
   
   var words = ['hello'];
   translate(words);

i think that this part of the code is effecting the dom

1.   var regex  = RegExp(word ,"gi");
     var string = $('body').html().replace(regex, translation);
    $('body').html(string);

is there a better way to replace text in the body?

thank you

hey guys i'm using

1. $("#language option[value='ar']").attr('selected','selected');

in my ajax script if successful...but it doesn't select the option...now if i run the same code above at the end of the ajax it works like a dream.

i don't understand what is going on...any ideas please guys...thank you

1. $(document).ready(function(){
       $("#language").change(function() {
           console.log('changed');
       });
      
       $.ajax({
           dataType: "text",
           url: "http://bisi.bid/language",
           success: function(language) {
               language = language.trim();
               console.log(language);
               $("#language option[value='ar']").attr('selected','selected');
           },
           error: function() {
           }
       });
       // this line works if uncommented
       //$("#language option[value='ar']").attr('selected','selected');
   });
   

Hey guys im tring to use the grep() function to filter my array but im having problem as the array is returning empty.

what im trying to achive is if the selected category exists in the array then for it to return the relevant rows.

i've tried different variations in the return but im having no luck.  Any advise would be greatful...thanks guys


selected['categories'] =

1. ["Clothes" , "Footwear" ]

1. filtered_data = jQuery.grep(data, function(index, item) {
               return ($.inArray(item.category, selected['categories']) > -1);
           });
2. console.log(filtered_data);
   

hey guys im tring to get a difference between 2 timestamps, now here's the first timestamp string i have:

1. 2000-12-15 21:51:45

and i've tried to use the following to create a timestamp

1.     today = new Date();
       var dateString = today.format("yyyy-mm-dd hh:mm:ss");
   
   1.     console.log(dateString);

but its not working =/

basically i'd like to know how many days difference between the timestamp string and todays date.

if anyone can help or know a article on this, that would be great.

thank you