To explain this shortly, I have an mouseenter Jquery event firing up an AJAX call. And a Jquery UI tooltip.
$(function()
{
$(document).tooltip({track:true});
$('#NewUser').mouseenter(function(){AJAXValidation("NewUser")});
});
Here is the call:
function AJAXValidation(section)
{
var request = $.ajax(
{
url: "ProcessJRT.php",
type: "POST",
contentType:"application/x-www-form-urlencoded;charset=UTF-8",
data:
{
validate:section
}
});
request.done(
function(message)
{
var div = document.createElement('div');
$(div).html(message);
$(div).children().each
(
function(i)
{
var title = '';
if($('#' + $(this).attr('id')).attr('title') != null)
{
title = $('#' + $(this).id).attr('title');
}
title += $(this).html() + '\r\n';
$('#' + $(this).id).attr('title', title);
}
);
});
}
What it does now is it take the <div>s from message and it place them in a parent <div>. (In my code the div already exist, I changed that part so the question would stay as short as possible).
I then take the text from those <div> and I want to place them in the corresponding <input/> title attribute.
Everything work just perfect here exepte this stupid little thing:
I am unable to add a LN or a CR in the title so all the texts from the divs would be on separate line...
I have tried adding a </br> inside the attribute like this:
function(i)
{
var title = '';
if($('#' + $(this).id).attr('title') != null)
{
title = $('#' + $(this).attr('id')).attr('title');
}
title += $(this).html() + '</br>';//<---See I added a BR here
$('#' + $(this).id).attr('title', title);
}
But it display the </br> as normal text. I than tried String.fromCharCode(13) but did'nt work, I tried jus '\n' or '\r\n' and still does work.
Can someone point out were I am derping on this one??
Thanks!
EDIT:
Changed the $('#' + $(this).attr('id')) to $('#' + $(this).id).
You can't format the title attribute in that way, it doesn't work, and will be different across different browsers.
Try the jquery plugin qTip to achieve what you want. (looks good too!)
http://craigsworks.com/projects/qtip/
Alternatively, you can cheat by using etc, to push the text to the next line. but this is flaky at best.
Here is how I resolve my problem with the idea that #crush gave me:
First:
I removed the tooltip initialization from the function that fire the event :
$(function()
{
$('#NewUser').mouseenter(function(){AJAXValidation("NewUser")});
});
Next:
I changed the "done" function so I would initialise a new tooltip each time with html content (FYI JQuery tooltip can format HTML)
Here what it look like now:
function(message)
{
var div = document.createElement('div');
$(div).html(message);
var title = '';
$(div).children().each
(
function(i)
{
if($('#' + $(this).id).attr('title') != null)
{
title = $('#' + $(this).id).attr('title');
}
title += $(this).html() + '</br>';
$(document).tooltip({content:title, items:('#' + $(this).id)});
}
);
}
Related
I have my code working tho what i would like it's to customize the text link so it should be a picture.
Example the "View" text link will be /pics/icon.png and "Edit", /pics/icon2.png
Here it's my code:
var $container = $( "#daif_results" );
$container.empty();
$.each( items, function() {
var str = '<li>' + this.label + ' - <a href="' + daif_consts.home_url + '?p=' + this.value +
'">View</a> - Edit</li>';
$container.append( str );
});
I couldn't run your code, but I believe you are trying to add images to one of your lists. I think you could use CSS to achieve that, like this example.
I also found a javascript example here.
I think you could create an image element:
img = document.createElement('img');
img.src = "http://sourcetoimage";
And then append it to your list:
li.appendChild(img);
Here's a JFiddle.
First time posting = )
I have been searching for a little while and have tried many ('refresh').trigger , ('create') and markup answers other members have suggested or I have seen on other posts. I am pretty new to JS JQM but I am having troubles having my dynamically added buttons viewed with the CSS properties. I have tried other solutions posted on similar questions such as:
How to add dynamic jquery button?
Jquery Dynamically generated buttons no css
A few other posts too.
Sorry in advance if already answered, I could not find a solution.
Here is my code:
The Reason I made the button a variable was because of another form post suggested it then refreshing that way...
$( '#csvButton' ).on( 'click', function() {
$('#viewData').empty();
$('#testView').empty();
$.ajax( {
url: 'xhr/data.csv',
type: 'GET',
dataType: 'text',
success:function ( result ) {
//console.log(result);
var lines = result.split("\n");
//console.log(lines);
var dataRow = lines[0];
var dataCol = dataRow.split(",");
for (var lineNum = 1; lineNum < lines.length; lineNum++) {
var row = lines[lineNum];
var columns = row.split(",");
var thisButton = $("<a>").attr("href", "#").attr("data-role", "button").attr("data-theme", columns[1]).attr("data-icon", columns[2]).text(columns[0]);
thisButton.appendTo('#testView');
$('<ul>' + '<li><b>' + dataCol[0] + " " + columns[0] + '</b></li>' +
'<li>'+ dataCol[1] + " " + columns[1] + '</li>' +
'<li>'+ dataCol[2] + " " + columns[2] + '</li>' + '</ul>'
).appendTo('#testView');
}
}
});
});
return false;
});
I am having trouble with thisButton displaying properly with CSS properties. I am made it a link with data-role="button" and trying it as a
my CSV has button name "Settings", button theme "a", and button icon "gear" data.
Any help would be great. #testView was a temp I created to test ideas to get CSS properties to work.
Thanks in advance!
Well you're working on dynamic buttons so it seems it would be better if you set css to a class and then add class to button dynamicaly.
Try add class to your css code with parameters you need and then in your code put somewhere
$("#testView").addClass("name of your class");
I'm sorry but i can test this solution right away so i'm not sure if its working as you wish.
Good Luck :)
You can remove or put CSS properties with this:
E.g.:
$("#testView").class('display', 'none');
Look at this Porperty CSS documentation
I've been working on a project for 4 days now, completely written by hand, to see where I'm at with javascript (I've been going through the codecademy courses). I'm trying to create a browser based checklist program. So far I've written a clean menu interface that can dynamically create <div>s.
Here's what I've got on jsfiddle:
http://jsfiddle.net/SdCaf/1/
My questions:
Can I write the taskToggle() function more efficiently? Is there a jquery way to simplify it?
If you have the time to examine my code in the Fiddle; will it take to mysql easily, or have I created some goofy redundant kludges, that will make it difficult to update?
FIXED Why won't my formatTask() constructor add the check boxes and descriptions (as seen in it's if/else) - is there something wrong with my taskToggle() function, is it the checkbox <div> I'm trying to add, both, or something else?
The formatTask() constructor:
function formatTask(target, divId, content, description, complete) {
function taskToggle() {
if ($(this).hasClass("completeTask")) {
$("#" + divId).attr("class", "incompleteTask");
$("#" + divId + "Box").attr("class", "incompleteBox");
}
else if ($(this).hasClass("incompleteTask")) {
$("#" + divId).attr("class", "completeTask");
$("#" + divId + "Box").attr("class", "completeBox");
}
};
if (complete) {
var div = new formatDiv(target, divId, "completeTask", content, taskToggle, description);
formatDiv(divId, divId + "Box", "completeBox", "O");
div.addDescription();
}
else {
var div = new formatDiv(target, divId, "incompleteTask", content, taskToggle, description);
formatDiv(divId, divId + "Box", "incompleteBox", "[ ]");
div.addDescription();
}
}
When I call it, it seems to accept all of it's parameters and I get no errors in the console, but it doesn't seem to run formatDiv(divId, divId + "box", "completeBox", "O"); and div.addDescription. You can see this for yourself if you click on "»Show Lists" in the result pane of the Fiddle (and you'll get an example of how the .addDescription() function should work)
Any other feedback you may wish to provide would be greatly appreciated. I need to know if I'm on the right track, or if I'm starting to write junky code that will become inelegant.
Thank you for your time if you give it!
The issue here is that the DOM ID that you're assigning for your task is "atask!" which isn't valid (because of the !) character. Make sure you remove invalid characters from your IDs and class names!
Are you sure that when you say this:
$("#" + divId).attr("class", "incompleteTask");
You don't mean this?
$("#" + divId).addClass("incompleteTask");
$("#" + divId).removeClass("completeTask");
seperate the taskToggle() from formatTask() and simply call taskToggle() in formatTask() like this
function formatTask(target, divId, content, description, complete) {
taskToggle();
if (complete) {
var div = new formatDiv(target, divId, "completeTask", content, taskToggle, description);
formatDiv(divId, divId + "Box", "completeBox", "O");
div.addDescription();
}
else {
var div = new formatDiv(target, divId, "incompleteTask", content, taskToggle, description);
formatDiv(divId, divId + "Box", "incompleteBox", "[ ]");
div.addDescription();
}
}
function taskToggle() {
if ($(this).hasClass("completeTask")) {
$("#" + divId).attr("class", "incompleteTask");
$("#" + divId + "Box").attr("class", "incompleteBox");
}
else if ($(this).hasClass("incompleteTask")) {
$("#" + divId).attr("class", "completeTask");
$("#" + divId + "Box").attr("class", "completeBox");
}
};
How to make fields in Html which may collapse if checkbox is chosen.
I am programming in Django.
regards,
Gintare
Touche Spacedman...
I'd recommend jquery as well ( http://jquery.com/ ) as it's very easy to use.
Here's some code whipped up in a heartbeat.
$("#my_checkbox").change( function() {
if ($(this).is(':checked')) {
$("#my_html").hide(); // hide element with id="my_html"
} else {
$("#my_html").show(); // show...
}
});
You need a javascript library, such as jQuery - then its easy to assign animation actions to events. Read the jQuery docs to learn, or cut and paste the solution that someone else will doubtless put here shortly...
Note this isn't a Django-specific problem, its javascript and html.
The jQuery code below uses an image of a '+' and then a header. e.g. + Top Ten
I used it to create an accordion.
$(document).ready(function () {
$("div#hideable div").hide();
// add css to show +/- symbols and labels - no point showing them if they don't work!
$("div#hideable h3 a img").css("display", "inline");
$("div#hideable label").css("display", "inline");
$("div#hideable h3 a").toggle(function () {
$($(this).attr("href")).show();
imgName = $(this).find('img').attr("src").split("-", 1); //grab the image name so that we get the right one
$(this).find('img').attr("src", imgName + "-minus.gif"); //change img, alt and label to match action
$(this).find('img').attr("alt", "-");
var sectionId = $(this).attr("href").substring($(this).attr("href").length - 1);
if (sectionId == 0) {
sectionId = 10;
}
labelName = "#lblSection" + sectionId;
$(labelName).text("click '-' to collapse");
}, function () {
$($(this).attr("href")).hide();
$(this).find('img').attr("src", imgName + "-plus.gif");
$(this).find('img').attr("alt", "+");
var sectionId = $(this).attr("href").substring($(this).attr("href").length - 1);
if (sectionId == 0) {
sectionId = 10;
}
labelName = "#lblSection" + sectionId;
$(labelName).text("click '+' to expand");
});
});
I have to develop a small application for school and I first designed in photoshop a bit and "converted" it into html. That went all fine. I created a custom dropdown with javascript and it worked smoothly. I've just tried implementing CodeIgniter into the design but the javascript started running twice.
I've tried comparing the code of the plain html version with the codeigniter result but I can't seem to find any difference.
Can any of you maybe help me?
Here's the CodeIgniter result:
http://intellia.itforit.net/index.htm
As asked by Krof Drakula here are the most important pieces of code:
The actual jquery plugin: (styleForm.js)
;(function($){
$.fn.styleForm = function() {
var form = this;
/* Select */
$('select', this).each(function(){
var div = '<div class="styledSelect"><ul>';
var first = false;
$('option', this).each(function(){
var cssclass = "";
if(!first) {
first = true;
cssclass = 'class="first"'
}
div += '<li ' + cssclass + ' id="' + $(this).attr("value") + '">' + $(this).text() + '</li>';
});
div += '</ul></div>';
$(this).hide();
$(this).after(div);
});
$('.styledSelect ul').toggle(function(){
$('li:not(.first)', this).show("fast");
}, function(){
$('li:not(.first)', this).hide("fast");
});
$('.styledSelect ul li:not(.first):not(.selected)').click(function(){
var id = $(this).attr('id');
var content = $(this).text();
$('.styledSelect ul li.first').attr('id', id).text(content);
$('.styledSelect ul li').css({'font-weight': 'normal'});
$(this).css({'font-weight': 'bold'});
/* SELECT in Select form item */
var selected = $('select option[value="' + id + '"]:not(.first)', form).get(0);
selected.setAttribute("selected", "selected");
//$(form).submit();
});
};
})( jQuery );
And here's where it gets launched: (canvasDrawing.js)
$(document).ready(function(){
$('form').styleForm();
//Unimportant canvas stuff
});
Thanx in advance,
Duckness
The problem is that your canvasDrawing.js, in the "unimportant canvas stuff", causes a javascript error. If the canvas it describes actually exists, your styleForm stuff only runs once. So add this to your HTML:
<canvas id="floorplan"></canvas>
And magic will happen. Or, in your canvasDrawing file, add clause like this right after styleForm:
var canvas = document.getElementById('floorplan');
if (!canvas)
return;
I'm not actually all that clear why having an error in that function causes it to run twice, but it's definitely the problem. See it: your code + a canvas element = working.