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
Related
I working on divide and merge jquery UI tabs. My Fiddle is
MyCode:
$("#content_2").tabs();
$("#content_3").tabs();
var originalState = $("#content_2").clone();
$('#but').click(function(i) {
$('#content_2 > ul li a').each(function(i) {
$(this).hide();
var spanVal = $(this).attr('href');
var valueText = $(this).text();
$(spanVal).hide();
$('#content_2').prepend($('<div id="content_' + i + '"><ul><li class="ui-widget _lngTrans_Translatable">' + valueText + '</li></ul><span id="' + spanVal + '">' + $(spanVal).text() + '</span></div>'));
$("#content_" + i).tabs();
});
});
$('#but1').click(function() {
$("#content_2").replaceWith(originalState);
$("#content_2").tabs();
$("#content_3").tabs();
});
Here I have two buttons 'divide' and 'merge' If I click divide the tabs separated with its contents.If I click Merge The tabs should come to original form.
The problem is first time its working fine but the second time when I click merge the orignalstate changing and goes weird.
Please anyone help me to create this feature in Jquery UI tabs.
If you need more information comment me.
Thanks in Advance.
Just Change your function
$('#but1').click(function () {
$("#content_2").replaceWith(originalState);
originalState = $("#content_2").clone();
$("#content_2").tabs();
$("#content_3").tabs();
});
Here is Updated Fiddle Link
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)});
}
);
}
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");
}
};
Made a fiddle: http://jsfiddle.net/n6ub3/
I'm aware that the code has a LOT of repeating in it, its on the list to refactor once functionality is correct.
The behaviour i'm trying to achieve is if there is no selectedTab on page load, set the first tab in each group to selectedTab. If there is a selectedTab present, then use this as the default shown div.
However, as you can see from the fiddle its not working as planned!
If anyone has any ideas how to refactor this code down that'd be great also!
Change
if($('.tabs1 .tabTrigger:not(.selectedTab)')){
$('.tabs1 .tabTrigger:first').addClass('selectedTab');
}
to
if ( !$('.tabs1 .tabTrigger.selectedTab').length ) {
$('.tabs1 .tabTrigger:first').addClass('selectedTab');
}
Demo at http://jsfiddle.net/n6ub3/1/
They way you are doing it (the first code part) you are adding the .selectedTab class if there is at least one of the tabs in that group that is not selected at start .. (that means always)
Update
For a shortened version look at http://jsfiddle.net/n6ub3/7/
Your selector are doing exactly what you're writing them for.
$('.tabs3 .tabTrigger:not(.selectedTab)') is true has long as there is at least one tab that has not the selected tab (so always true in your test case).
So you should change the logic to !$('.tabs3 .tabTrigger.selectedTab').length which is true only if there are no selectedTab
WORKING DEMO with simplified code
$('.tabContent').hide();
$('.tabs').each(function(){
var search = $(this).find('div.selectedTab').length;
if( search === 0){
$(this).find('.tabTrigger').eq(0).addClass('selectedTab')
}
var selectedIndex = $(this).find('.selectedTab').index();
$(this).find('.tabContent').eq(selectedIndex).show();
});
$('.tabTrigger').click(function(){
var ind = $(this).index();
$(this).addClass('selectedTab').siblings().removeClass('selectedTab');
$(this).parent().find('.tabContent').eq(ind).fadeIn(700).siblings('.tabContent').hide();
});
That's all! You don't need all that ID's all around. Look at the demo!
With a couple of very minor changes you code can be reduced to:
$('.tabContent').hide();
$('.tabs').each(function(){
if($('.tabTrigger.selectedTab',$(this)).length < 1)
$('.tabTrigger:first').addClass('selectedTab');
});
$('.tabTrigger').click(function(){
var content = $(this).data('content');
$(this).parents('div').children('.tabContent').hide();
$(this).parents('div').children('.tabTrigger').removeClass('selectedTab');
$(this).addClass('selectedTab');
$('#' + content).show();
});
$('.tabTrigger.selectedTab').click();
Those changes are
Change the class on the surrounding div to just class="tabs.
Add a data-content attribute with the name of the associated content div
Live example: http://jsfiddle.net/gsTBQ/
Well, I'm a bit behind the times obviously; but, here's my updated version of your demo...
I have updated your fiddle as in the following fiddle: http://jsfiddle.net/4y3Xp/1/.
Basically I just tidied it up a bit, and to refactor I put everything in a separate function instead of having each of the cases in their own. This is basically just putting a new function in that does similar to what yours was doing (e.g. not modifying your HTML model), but I tried to clean it up a bit, and I also just made a function that took the tab number and did each of the items that way rather than needing a separate copy for each.
The main issue with the 'not' part of your query is that the function doesn't return a boolean; like all JQuery queries, it's returning all matching nodes. I just updated that part to return whether .selected was returning more than 0 results; if not, I go ahead and call the code to select the first panel.
Glad you got your problem resolved :)
$(document).ready(function(){
var HandleOne = function (i) {
var idxString = i.toString();
var tabName = '.tabs' + idxString;
var tabContent = tabName + ' .tabContent';
$(tabContent).hide();
var hasSelected = $(tabName + ' .tabTrigger.selectedTab').length > 0;
if (!hasSelected)
$(tabName + ' .tabTrigger:first').addClass('selectedTab');
var selectedTabId =
$(tabName + ' .tabTrigger.selectedTab').attr('id');
var selectedContentId = selectedTabId.replace('tab','content');
$('#' + selectedContentId).show();
$(tabName + ' .tabTrigger').click(function() {
$(tabName + ' .tabTrigger').removeClass('selectedTab');
$(tabName + ' .tabContent').hide();
$(this).addClass('selectedTab');
var newContentId = $(this).attr('id').replace('tab','content');
$('#' + newContentId).show();
});
}
HandleOne(1);
HandleOne(2);
HandleOne(3);
});
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.