Develop Reference

jQuery getting text content of a span

I am trying to write a delete function in Dropzone.js. In order to do that I need the id of the file the way it was uploaded.
I tried to get a property of an object with no success. Now I am trying to use jQuery to get the value or text content of the span that has it.
this is the screenshot of the structure. The jQuery code I am trying is:
var loooot = $(".dz-filename").parents('span').text();
To be more specific I am trying to get the number 1_1477778745352 (which is a time stamp).
The Dropzone code is as follows:
<script>
var listing_id = "1";
// these are the setting for the image upload
Dropzone.options.pud = {
acceptedFiles: ".jpeg,.jpg,.png,.gif",
uploadMultiple: false,
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 1, // MB
addRemoveLinks: true,
maxFiles: 10,
renameFilename: function (filename) {return listing_id + '_' + new Date().getTime();},
init: function()
{
this.on("removedfile", function(file)
{
var loooot = $("span", ".dz-filename").html();
alert(loooot);
});
}
};
</script>

Try this use JQuery's .text(); to get inner text
Update: use this with DOM .ready() like that.
Deep selector
$(document).ready(function(){
var fname = $("#pud .dz-filename span [data-dz-name]").text();
});
OR (if your form is dynamic)
function get_fname(){
return $("#pud .dz-filename span [data-dz-name]").text();
}
Then use get_fname();

It becomes undefined because dropzone works dynamicly, use this:
$('body').find(".dz-filename").find('span').text();
Best way to do this is to declare dropzone:
//first declare somewhere variable
var my_drop;
// then on creating dropzone:
my_drop = new Dropzone('.dropzone', {
/* your setup of dropzone */
});
Then you can retreive information about files with this:
my_drop.files[0].name
The [0] represent's first file, you can loop through them if there's more then one.

Use:
var loooot = $("span", ".dz-filename").html();
Working Demo.
var loooot = $("span", ".dz-filename").html();
alert(loooot);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="dz-filename">
<span>Test</span>
</div>
EDIT
Since you are setting the text dynamically it may happens that jquery read the HTML before that you set it, to prevent this you have to call this function after the timestamp as a callback (i can't help you without seeing how you set the span text).
So do something like:
function setSpan(callback) {
// Set your stuffs
// Call the callback
callback();
}
function getText() {
// I'm the callback witch get the html
}
//Onload
setSpan(getText());
EDIT
For dropzone you can use queuecomplete that start a function after the queue, i'm not an dropzone expert but i suppose:
init: function () {
this.on("queuecomplete", function (file) {
//Get span html
alert("All files have uploaded ");
});
}

The working solution I found is this:
init: function()
{
this.on("removedfile", function(file)
{
var loooot = $(file.previewElement).find('[data-dz-name]').text();
alert(loooot);
});
}

How do I insert an html layout file into a div?

So right now I have a popup div (this is for a chrome extension) and right now the div pops up just fine.
What I would like to do is to inject this layout file that I created (lots of itty bitty design parts) into the div. How would I go about doing this. I tried to set the innerHTML property to index.html (the layout file)
jQuery(function($) {
// Mouse listener for any move event on the current document.
console.log("started"); //debug for starting
var popupStatus = 0; // set value
document.addEventListener('mousemove', function (e) {
var srcElement = e.srcElement;
// Lets check if our underlying element is a DIV.
if (srcElement.nodeName == 'A' || srcElement.nodeName == 'STRONG') {
loadPopup();
}
else{
disablePopup();
}
}, true);
function loadPopup() {
var x = document.getElementById("index");
if(popupStatus == 0) { // if value is 0, show popup
$('<div/>', {
id: 'cover',
innerHTML: index.html //line in question (making it "index.html" doesn't work)
}).appendTo(document.documentElement);
$('#cover').fadeTo("slow",1);
popupStatus = 1; // and set value to 1
}
}
function disablePopup() {
if(popupStatus == 1) { // if value is 1, close popup
$('#cover').fadeTo("slow",0);
$('#cover').remove();
popupStatus = 0;
}
}
});

Maybe you could use ajax to get the content of the file 'index.html'.
A snippet like this:
$.get("index.html", function( data ) {
$.('body').append('<div id="cover">' + data + '</div>');
});
could be placed at the line in question. Replace 'body' with whatever suits to your needs. The snippet can be certainly improved, but for now it should give you an idea.
I'm not aware of other possibilities to read files with JavaScript on the client side.
Or now I see, better make it:
$.get("index.html", function( data ) {
$('<div/>', {
id: 'cover',
innerHTML: data
}).appendTo(document.documentElement);
});
within the if-condition.
I'm not completely sure what you want to make, but it seems that you want to append it to the element with ID 'index'. Than you should change that appropriately in the last line.
EDIT:
Here are some slight changes:
$.get("index.html", function( data ) {
$('<div/>', {
id: 'cover',
html: data // this was making the problem
}).appendTo(x); // append to the element saved in the variable x
}, "html"); // state explicitly that the payload of data is HTML
that make the snippet working for me.

Combine two jQuery-json functions. Right way

I'm totally newbie in jQuery and i wonder if it is possible to combine these two functions.
As you can see, the first function is used to load json data to trigger a click.
The second function is used to toggle view for the list items.
Could you help me, and show me the good way to combine these functions!?
When the json file is loaded, it will be create the list elements (li), and the toggle will be able to toggle these list elements (li).
IMPORTANT: actually, my code don't work (the toggle function not work fine).
Here is the code of 1st functions :
$(document).ready(function() {
// ----------------------
// JSON INFOS
// ----------------------
$(".color-list.one li:first-child").on('click', function() {
$.getJSON("result.json", function(data) {
//Handle my response
$('ul.elements-list').html(
'<li class="elements-item"><span class="tog">' + data.name + '</span><div class="togcont hidden">' + data.info + data.size + '</div></li>');
//alert(data);
});
});
});
The code of 2nd function :
$(document).ready(function() {
// ----------------------
// TOGGLE BULLZ
// ----------------------
$(".tog").click(function(){
var obj = $(this).next();
if($(obj).hasClass("hidden")){
$(obj).removeClass("hidden").slideDown();
$(this).addClass("bounce");
} else {
$(obj).addClass("hidden").slideUp();
$(this).removeClass("bounce");
}
});
});

When you use $(".tog").click() it only binds to whatever elements match the ".tog" selector at that moment so won't work on elements that you add dynamically later. You can instead use the delegated syntax of .on() like this:
$('ul.elements-list').on("click", ".tog", function(){ ...
...which will bind the click handler to your list, but only execute your function if the click occurred on an element in that list that matches the ".tog" selector in the second parameter at the time of the click. And within the handler this will be set to the ".tog" element that was clicked.
Also you can put all your code in a single document ready handler assuming all the code is in the same file.
Also your obj variable is a jQuery object, so you can call jQuery methods on it directly like obj.hasClass() rather than wrapping it in $() again as $(obj).hasClass().
So try this instead:
$(document).ready(function() {
$(".color-list.one li:first-child").on('click', function() {
$.getJSON("result.json", function(data) {
//Handle my response
$('ul.elements-list').html(
'<li class="elements-item"><span class="tog">' + data.name + '</span><div class="togcont hidden">' + data.info + data.size + '</div></li>');
});
});
$('ul.elements-list').on("click", ".tog", function(){
var obj = $(this).next();
if(obj.hasClass("hidden")){
obj.removeClass("hidden").slideDown();
$(this).addClass("bounce");
} else {
obj.addClass("hidden").slideUp();
$(this).removeClass("bounce");
}
});
});

Separating JS to multiple files

There are multiple pages on my web-project working with exactly same JS functions. I was copying and pasting same functions to all pages' js files. But recently seperated common functions to another js file named common_fns.js, for every page created just selector cached variables and placed at the top of every page in order some_page.js, common_fns.js . Something like that
some_page.js
$(function() {
var closer=$("#nlfcClose"),
NewFormContainer=$("#NewLessonFormContainer"),
opener=$("#nlfcOpen"),
NewForm=$("#NewLessonForm"),
OpsForm=$("#LessonOps"),
SelectBox=$( "#courses" ),
SelectBoxOptions=$("#courses option"),
jquiBtn=$(".jquiBtn"),
AddOp="AddLesson",
DelOp="DelLesson";
});
common_fns.js
$(function() {
SelectBoxOptions.text(function(i, text) {
return $.trim(text);
});
SelectBox.combobox();
jquiBtn.button();
closer.button({
icons: {
primary: "ui-icon-closethick"
},
text: false
}).click(function(){
NewFormContainer.slideUp("slow");
});
opener.click(function(){
NewFormContainer.slideDown("slow");
});
NewForm.submit(function(){
var querystring = $(this).serialize();
ajaxSend(querystring, AddOp);
return false;
});
OpsForm.submit(function(){
var querystring = $(this).serialize();
ajaxSend(querystring, DelOp);
return false;
});
});
It was working when I copied and pasted common functions to every pages' file. But now it doesn't: Firebug shows error message undefined SelectBoxOptions even for first function. What am I missing? Only way to copy-paste same functions into every pages' js file?

You are declaring local variables inside the event handler, that's why you can't use them in the next event handler.
Declare the variables outside the function:
var closer, NewFormContainer, opener, NewForm, OpsForm, SelectBox, SelectBoxOptions, jquiBtn, AddOp, DelOp;
$(function() {
closer = $("#nlfcClose");
NewFormContainer = $("#NewLessonFormContainer");
opener = $("#nlfcOpen");
NewForm = $("#NewLessonForm");
OpsForm = $("#LessonOps");
SelectBox = $( "#courses" );
SelectBoxOptions = $("#courses option");
jquiBtn = $(".jquiBtn");
AddOp = "AddLesson";
DelOp = "DelLesson";
});

How do you get a return value from a colorbox?

I have a colorbox that lets the user select an image. How do I get the file name back from the colorbox? (I have noticed the onClosed function.)
Solution:
As #Gummy sugested i used the onComplete function as the following code exemplifies:
'Return' page:
<input id="colorbox_hidden_return" type="hidden"/>
...
$("#whatever-you-want-to-click-on-to-get-the-color-box").click(function() {
$.colorbox(
{
href: '<?= site_url('the-source-url') . '/' ?>' + id,
height: "600px;",
onClosed: function() { // called when the colorbox closes
var image = $('#colorbox_return_hidden').val();
// ... other processing - what ever the value was is in image
}
});
});
In the colorbox source
var image_name_var = "dynamicaly_change_this_name.png";
$('#submit-or-use-button-id').click(function() {
$('#colorbox_return_hidden').val(image_name_var);
});

Any time while colorbox is open, you can call the element method to retrieve a jQuery object of the current element. From there you can select the element, and access the href property:
href = $.colorbox.element()[0].href;
Also, in any callback the execution context (the value of 'this') will be the current element. So if you wanted to use the onComplete callback for example, you could do something like this:
$('#example').colorbox({onComplete:function(){
href = this.href;
}});

This might do it for you
$(document).bind("cbox_complete", function(){
var href = $.colorbox.element().attr("href");
//do something else
});