jquery - how to get varible to ajax content from jq plugin -
in page have ajax loaded content. content dynamic , contains buttons upload files through custom ajaxupload plugin. use delegate method because ajax content have problem pass variable ajax plugin. infact when try ids returns undefined
ids : $('ul.active').attr('ids') <-- undefined my scenario
html
<div id="load-ajax"></div><!-- ajax load content --> <input type="file" id="inputupload" style="display:none" /><!-- upload file --> load.php - ajax loaded dynamic content buttons
<div class=\"btn-group\"> <button type=\"button\" class=\"btn btn-xs dropdown-toggle\" data-toggle=\"dropdown\" aria-expanded=\"false\"> <span class=\"glyphicon glyphicon-paperclip\"></span> </button> <ul class=\"dropdown-menu\" role=\"menu\" ids=\"1\" > <li><a href=\"\" class=\"upload \">upload</a></li> <li><a href=\"\" class=\"edit\">edit</a></li> </ul> </div> <div class=\"btn-group\"> <button type=\"button\" class=\"btn btn-xs dropdown-toggle\" data-toggle=\"dropdown\" aria-expanded=\"false\"> <span class=\"glyphicon glyphicon-paperclip\"></span> </button> <ul class=\"dropdown-menu\" role=\"menu\" ids=\"4\" > <li><a href=\"\" class=\"upload \">upload</a></li> <li><a href=\"\" class=\"edit\">edit</a></li> </ul> </div> <div class=\"btn-group\"> <button type=\"button\" class=\"btn btn-xs dropdown-toggle\" data-toggle=\"dropdown\" aria-expanded=\"false\"> <span class=\"glyphicon glyphicon-paperclip\"></span> </button> <ul class=\"dropdown-menu\" role=\"menu\" ids=\"3\" > <li><a href=\"\" class=\"upload \">upload</a></li> <li><a href=\"\" class=\"edit\">edit</a></li> </ul> </div> js
// first call loadpage(); function loadpage() { $.ajax({ type: "post", url: load.php, datatype: 'html', success: function(data) { $('#load-ajax').html(data); }, complete: function() { //callajaxupload(); } }); } $('#load-ajax).on('click', '.upload', function(e) { e.preventdefault(); $(e.currenttarget).closest('ul').addclass('active'); $('#inputupload').trigger('click'); }); $('#inputupload').ajaxupload({ allowed_types : ['pdf', 'jpeg', 'jpg', 'bmp'], extra_fields : { ids : $('ul.active').attr('ids') }, <-- undefined onfinish : function() { console.log($('ul.active').attr('ids')); <-- return right ids value loadpage(); } }); custom ajax upload plugin
;(function ($, window, document, undefined) { // function-level strict mode syntax 'use strict'; $.fn.ajaxupload = function(options) { var defaults = { num_files : 0, max_files : 18, max_concurrent : 10, max_filesize : 1024 * 4096, php_max_size : 1024 * 8192, allowed_types : ['jpeg','jpg'], ajax_url : 'ajax-php/action.php', var_name : 'file', extra_fields : {}, onfinish : function() {} }; var options = $.extend(defaults, options); return this.each(function() { var $this = $(this); $this.on('change', function() { var files = $this[0].files; var len = files.length; var items = 0; var diff_files = parseint(defaults.max_files - defaults.num_files - len); if(diff_files < 0) { return false; } if(!maxuploadfiles(len, defaults.max_concurrent)) { return false; } var formdata = new formdata(); jquery.each(files, function(i, file) { if(!isoversized(file, defaults.max_filesize)) { return false; } if(!isallowedtypes(file, defaults.allowed_types)) { return false; } if(!totalfilessize(file, defaults.php_max_size)) { return false; } formdata.append(defaults.var_name + '['+i+']', file); items++; }); // append data formdata $.each(defaults.extra_fields, function(name, value) { formdata.append(name, value); }); // check files have passed test if (len != items) { return false; } $.ajax({ url: defaults.ajax_url, data: formdata, cache: false, contenttype: false, processdata: false, type: 'post', beforesend: function () { }, complete: function () { defaults.onfinish.call(this); }, success: function(data) { totalsize = 0; //reset input data //$this.replacewith($this.val('').clone(true)); } }); }); }); }; var totalsize = 0; function totalfilessize(file, php_max_size) { totalsize += file.size; if(totalsize > php_max_size) { totalsize = 0; return false; } return true; } function maxuploadfiles(len, max_concurrent) { if(len > max_concurrent) { return false; } return true; } function isallowedtypes(file, allowed_types) { var ext = file.name.split('.').pop().tolowercase(); if(jquery.inarray(ext, allowed_types) < 0) { return false; } return true; } function isoversized(file, max_filesize) { if(file.size > max_filesize) { return false; } return true; } })(jquery, window, document); i have modify in ajaxupload plugin? how go taking variable correctly? thank you
try: $('ul.active').attr('id').
there no such attribute called "ids".
edit: sorry rushed answer without reading question properly.
if take @ jsfiddle can see $('ul.active').attr('ids') statement should work https://jsfiddle.net/o3ejzwow/
so reason why statement return undefined when there no "active" class appended of "ul" elements.
p.s: advice use "data-" before custom(user defined) attributes , use .prop instead of .attr post 1.8 version of jquery.
Comments
Post a Comment