We Keep Coding

DropZone JS not grabbing external value from input field called by jQuery ID

I am experiencing an issue with DropZone JS Grabbing an input value and passing it along to the upload script. The upload is working and everything is fine EXCEPT this field not sending in the POST.
I have a very basic DZ config:
$("#file_uploader").dropzone({
url: '/ajax/upload.php',
dictDefaultMessage: 'Drop photos or click here to upload',
maxFilesize: 400000,
params: {'project': $('#project-name').val()}, // This is the part I am having issues with
success: function (file, response) {
var obj = JSON.parse(response);
if (obj.status === 'success') {
console.log('gtg');
} else {
alert('upload failed');
$(".dz-preview").remove();
}
}
});
I have a field in my html that looks like:
<input type="text" id="project-name" required="required"
class="form-control col-md-6 col-xs-12 limited_form"
placeholder="Project Name">
If I simply overwrite 'project': $('#project-name').val() to look like:
'project': 'test'
It works. So it's a matter of Dropzone not being able to "see" that input field for some reason.
I thought it might be the dash in the id project-name -- But according to the rules in HTML5 dashes are allowed in Ids.
There are no errors in the console, and this:
// Testing if Selector is working
$(document).on('keyup', '#project-name', function () {
console.log( $('#project-name').val() );
});
displays the project-name contents in the console correctly as I type them, so I know my selector is OK. Thus, my confusion on why DropZone isn't "seeing" it.
Why is DropZone "ignoring" my jQuery identified by selector id? Am I missing something glaringly wrong?
UPDATE
It is worth noting that my config lies within a $(document).ready(function () { -- However I have tried it both inside, and outside the function and still the problem persists.

Your dropzone script was probably trying to retrieve the value before the element is loaded on the DOM. Loading your script inside a $( document ).ready() function would be one way to go about it. Another way would be to just assign the script to a variable and then referencing the variable in dropzone like this:
$("#file_uploader").dropzone({
url: '/ajax/upload.php',
dictDefaultMessage: 'Drop photos or click here to upload',
maxFilesize: 400000,
params: {'project': function() {
var x = $('#project-name').val();
return x;
}},
success: /* some function */
});
You can also try to directly return the input value within the function and see if that works.
$("#file_uploader").dropzone({
url: '/ajax/upload.php',
dictDefaultMessage: 'Drop photos or click here to upload',
maxFilesize: 400000,
params: {'project': function() {
return $('#project-name').val();
}},
success: /* some function */
});

How to load images from a directory using jquery

I am toying with the following code trying to take images from a set directory, and preload them. I do not want to load the images into a div, but rather preload them in the memory using the normal:
new Image().src = "/wp-content/themes/NCHERM_Theme/images/home4-events.jpg";
I am rather new to jquery so looking for some help to finalize this:
window.onload = function($) {
var folder = "images/preload";
$.ajax({
url : folder,
success: function (data) {
//go through each item in folder
$.each(data, function(i,filename) {
//take each item and run into the normal preload method
setTimeout(function() {
// preload images
new Image().src = filename;
}, 1000);
});
}
});
};
running this in wordpress I get `403 forbbiden' on the url for the folder before i can even test if this is working

Make sure you have added reference of JQuery inside your <script> tag. JQuery Library is missing.
<script src="../../jquery.min.js" type="text/javascript"></script>
For your reference: $.ajax is not a function

Try this code if it work for you.
window.onload = function($) {
var folder = "images/preload";
$.ajax({
url : folder,
success: function (data) {
//go through each item in folder
$.each(data, function(i,filename) {
//take each item and run into the normal preload method
setTimeout(function() {
// preload images
var $img=$("<img />",{"src":filename});
$('#target_id').append($img);
}, 1000);
});
}
});
};

You can solve 403 error by adding:
Options +Indexes
On .htaccess file.

PJAX/DJAX- rerun scripts after pjax load

I'm using RequireJS to structure my JS and DJAX (basically PJAX) as a way to dynamically load content without a full page reload.
The issue I have is that after DJAX has finished loading the content I need to rerun my scripts (e.g. a script that adds multiple images into a carousel) so that the new page renders correctly. I thought the best way to do this would be to simply rerun the function I'm running on $(document).ready(); but I'm getting this output in the console:
Uncaught TypeError: Cannot read property 'djaxLoad' of undefined
which is referring to this line in load-posts.js
bootstrap.init();
I'm guessing I'm writing something incorrectly.
Here is bootstrap.js which is my main file which fires on document.ready and initialises all my modules
require(['base/responsive', 'base/main-menu', 'base/social-share', 'base/randomise-colours', 'base/infinite-scroll', 'base/load-posts', 'base/image-fade', 'base/carousel', 'base/misc'],
function(responsive, main_menu, social_share, randomise_colours, infinite_scroll, load_posts, image_fade, carousel, misc) {
var $ = jQuery;
function djaxLoad() {
//If page has JS (detected with Modernizr) then hide content until the
//doc is ready to avoid flash of unstyled content
$('#djax-container').css('display', 'block');
main_menu.init();
social_share.init();
randomise_colours.init();
load_posts.init();
image_fade.init();
infinite_scroll.init();
carousel.init();
misc.init();
responsive.init();
}
$(document).ready(djaxLoad);
}
);
And this is load-posts.js which handles DJAX for me. DJAX works, I just need to get the scripts to fire again.
define(['djax', 'base/bootstrap'], function(djax, bootstrap) {
var $ = jQuery,
$body = $('body');
return {
init: function() {
if($body.length >= 1) {
this.setUp();
} else {
return false;
}
},
setUp: function() {
this.pjaxLinks();
},
pjaxLinks: function() {
//Initialise DJAX, but stop it from running on pagination links (URL is /page...)
$('body').djax('.updateable', ['page']);
//When clicking a djax link
$(window).bind('djaxClick', $.proxy(function() {
this.addLoader();
},this));
//When the new content has loaded in
$(window).bind('djaxLoad', $.proxy(function() {
this.removeLoader();
},this));
},
addLoader: function() {
$body.addClass('loader-visible');
},
removeLoader: function() {
$body.removeClass('menu-visible');
$('html, body').scrollTop(0);
function removeLoaderDelay() {
$body.removeClass('loader-visible');
bootstrap.djaxLoad();
}
setTimeout(removeLoaderDelay, 1000);
}
};
});
The djaxClick function runs on a link click, and the djaxLoad function runs after the content has been loaded in. I'm adding a loader overlay to the page, then removing it after the content has loaded in.

A bit late but for future reference: In the documentation at https://github.com/beezee/djax you'll find the djaxLoad-event. This is specifically made for your usecase. You can use it as follows:
$(window).bind('djaxLoad', function(e, data) {
// your scripts to run on ajax-calls
});
The site further explains: "the data object passed with the event contains the requested url, the page title for the requested page, and the contents of the requested page as a string".
$(window).bind('djaxLoad', function(e, data) {
var responseObj = $('<div>'+data.response+'</div>');
//do stuff here
});

AJAX $.post works in View, but will not work when placed in a .js file. All other JQuery works

I am new to MVC in general, as well as JQuery and AJAX and I have come across a strange issue.
I have finished my first run-through of building a practice website and the past few days I devoted my time to adding JQuery's and such to make the site more interactive.
Today I finished all my JQuerys and everything works great so I decided to clean it all out of the View and just put them into a script.js file in the Scripts folder of MVC.
Inserted into the View as #Scripts.Render("~/Scripts/Employees.js")
However when I do this anything in regards to AJAX does not work.
Now this only entails two mini-snippets of code that interact with the controller to either Edit or Save a change, but everything else works great! Even the edit and save JQuerys that make menus and other UI changes all work just fine, but the actual $.post to update the change does not work.
Here are the two snippets of code that sit within functions of JQuery that all work just fine.
$.post(
'#Url.Action("customEdit", "Employee")',
{
'id': newID,
'name': newName,
'birth': newDate
},
function (data) { },
"json"
);
and
$.post(
'#Url.Action("customDelete", "Employee")',
{
'id': newID
},
function (data) { },
"json"
);
and again, if I move the entire script literally back into the View it works just great! So I am confused as to why moving it to a .js suddenly makes only these two little snippets not work.
There is no re-ordering of code, it re-inserts exactly where it was before.
For an overview here is my entire <script>.
$(function () {
$("td[colspan=12]").find("p").hide();
$("td[colspan=12]").addClass("nopadding");
$("tr").click(function (e) {
if (!$(e.target).is('button') && !$(e.target).is('input')) {
var $target = $(this);
var $detailsTd = $target.find("td[colspan=12]");
if ($detailsTd.length) {
$detailsTd.find("p").slideUp();
$detailsTd.addClass("nopadding");
} else {
$detailsTd = $target.next().find("td[colspan=12]");
$detailsTd.find("p").slideToggle();
$detailsTd.toggleClass("nopadding");
$detailsTd.stopPropagation();
}
}
});
});
function editFunction(element) {
$(element).closest("span").hide();
$(element).closest("td").find("span.item-save-button").show();
$(element).closest("td").find("span.item-delete-button").hide();
$(element).closest("td").prev("td").find("span.item-display")
.hide()
.next("span.item-field")
.show();
$(element).closest("td").prev("td").prev("td").find("span.item-display")
.hide()
.next("span.item-field")
.show();
}
function saveFunction(element) {
var one = $(element).closest("td").prev("td").find("span.item-field").find(":input:first").val();
var two = $(element).closest("td").prev("td").prev("td").find("span.item-field").find(":input:first").val();
if (one == "" || two == "") {
if (one == "") {
alert("invalid name");
}
if (two == "") {
alert("invalid birthday");
}
} else {
$(element).closest("span").hide();
$(element).closest("td").find("span.item-edit-button").show();
$(element).closest("td").find("span.item-delete-button").show();
$(element).closest("td").prev("td").find("span.item-display").html($(element).closest("td").prev("td").find("span.item-field").find(":input:first").val());
$(element).closest("td").prev("td").find("span.item-display")
.show()
.next("span.item-field")
.hide();
$(element).closest("td").prev("td").prev("td").find("span.item-display").html($(element).closest("td").prev("td").prev("td").find("span.item-field").find(":input:first").val());
$(element).closest("td").prev("td").prev("td").find("span.item-display")
.show()
.next("span.item-field")
.hide();
var newID = $(element).closest("td").find("span.ID").text();
var newDate = $(element).closest("td").prev("td").find("span.item-display").text();
var newName = $(element).closest("td").prev("td").prev("td").find("span.item-display").text();
$.post(
'#Url.Action("customEdit", "Employee")',
{
'id': newID,
'name': newName,
'birth': newDate
},
function (data) { },
"json"
);
}
}
function deleteStart(element) {
$(element).closest("table").toggleClass("table-hover");
$(element).closest("tr").css('background-color', 'red');
}
function deleteStopped(element) {
$(element).closest("table").toggleClass("table-hover");
$(element).closest("tr").css('background-color', 'initial');
}
function deleteFunction(element) {
var newID = $(element).closest("td").find("span.ID").text();
console.log(newID);
$('#'+newID).removeClass('fade');
$('#' + newID).modal('hide');
$(element).closest("table").toggleClass("table-hover");
$(element).closest("tr").next("tr").remove();
$(element).closest("tr").remove();
$.post(
'#Url.Action("customDelete", "Employee")',
{
'id': newID
},
function (data) { },
"json"
);
$(element).closest("tr").css('background-color', 'initial');
}
Sooo yea, EVERYTHING works just as before, even the Save and Edit interactions (row updates, modals, ect..) but the actual $.post does not work (controller isn't even hit in Debug). Yet if I just re-insert all the code back into the View it works.
Any and all help appreciated! :)

When you put your Javascript in a view, Razor rendering engine will resolve the following line to appropriate URL:
'#Url.Action("customDelete", "Employee")'
But .js files do not get rendered by the view engine, so the above line stays the same which is not a URL.

The JS file is not being parsed by the rendering engine, only your views are. So you'll need to save those URL's from Razor as JS variables in the main view.
Place this in your main view:
<script>var action_custom_delete = '#Url.Action("customDelete", "Employee")';</script>
#Scripts.Render("~/Scripts/Employees.js")
Now you can use the variable action_custom_delete in the JS file wherever you need the URL.

Jquery File Tree - how to return folder name on folder click

I have installed and trying to customize Jquery File Tree so that, on click of folder name, the folder name and path are returned to the calling function. Currently it only expands and collapses folders, and returns the file name on click of file.
So I need to return the folder too and cannot see where that is triggered.
I am using the php connector.
Below link is where I downloaded the sample code:
http://abeautifulsite.net/blog/2008/03/jquery-file-tree/
thanks,
Ed

Not sure if there is an "API" way to do it. But if you look at the source code (Line 64-81)
if( $(this).parent().hasClass('directory') ) {
if( $(this).parent().hasClass('collapsed') ) {
// Expand
if( !o.multiFolder ) {
$(this).parent().parent().find('UL').slideUp({ duration: o.collapseSpeed, easing: o.collapseEasing });
$(this).parent().parent().find('LI.directory').removeClass('expanded').addClass('collapsed');
}
$(this).parent().find('UL').remove(); // cleanup
showTree( $(this).parent(), escape($(this).attr('rel').match( /.*\// )) );
$(this).parent().removeClass('collapsed').addClass('expanded');
} else {
// Collapse
$(this).parent().find('UL').slideUp({ duration: o.collapseSpeed, easing: o.collapseEasing });
$(this).parent().removeClass('expanded').addClass('collapsed');
}
} else {
h($(this).attr('rel'));
}
Looks like you can call another function inside the hasClass('directory') if clause and it will work.
So you could:
Change Line 36 to be
fileTree: function(o, h, dire) {
Between 65 and 66 add
dire($(this).attr('rel'));
If you want to have more control/flexibility/information, you can do dire($(this)); , and it will send the jQuery object instead of just the rel attribute.
Example:
$(document).ready( function() {
$('#container_id').fileTree({ root: '/some/folder/' }, function(file) {
// do something when a file is clicked
}, function(dir){
// do something when a dir is clicked
});
});
I have not tested it, you might need to change a couple of things around.

It worked pretty well, I just changed the last function to "dire", like it was it the code between line 65 and 66
... function(dire){
// do something when a dir is clicked
}