Alright, I'm currently working to create on an account mainpage a applet to show each "kid" the user has registered to the site. My idea is simple :
Kid 1 / Kid 2 / Kid 3
As buttons (with style and such) when he goes on this page. When he clicks on one of those buttons/names, I use javascript to show the description of the infos of the kid, etc. When I click on another name, the current content closes and shows the new appropriate content.
The content is dynamically created, so the id's of the divs containing the info are named after the number of kids. Example : content_Info_Kid1, content_Info_Kid2, ... It doesnt matter how many kids there are, they will be named content_Info_Kid32 if need be.
Now, I'm not too comfy with AJAX and javascript in general. In fact, I am not at all.
My first idea was to do this in a separate javascript file.
$(document).ready(function() {
$("#content_info_kid1").hide();
$("#content_info_kid2").hide();
$("#content_info_kid3").hide();
$("#KID_1").click(function () {
if ($("#content_info_kid1").is(":hidden")){
$("#content_info_kid2").hide();
$("#content_info_kid3").hide();
$("#content_info_kid1").show("slow");
$(this).css("font-weight","bold");
$("#KID_2").css("font-weight","normal");
$("#KID_3").css("font-weight","normal");
}
});
$("#KID_2").click(function () {
if ($("#content_info_kid2").is(":hidden")){
$("#content_info_kid1").hide();
$("#content_info_kid3").hide();
$("#content_info_kid2").show("slow");
$(this).css("font-weight","bold");
$("#KID_1").css("font-weight","normal");
$("#KID_3").css("font-weight","normal");
}
});
$("#KID_3").click(function () {
if ($("#content_info_kid3").is(":hidden")){
$("#content_info_kid2").hide();
$("#content_info_kid1").hide();
$("#content_info_kid3").show("slow");
$(this).css("font-weight","bold");
$("#KID_1").css("font-weight","normal");
$("#KID_2").css("font-weight","normal");
}
});
});
Obviously, this is not dynamic. And I don't want to create 32 alternatives, of course. Can somebody point me the right direction to create a dynamic way to show my content based on the number of kids ?
EDIT (see bottom for updated on loading just one kid data at a time)
An example on how you could achieve that:
<style type='text/css' media='screen'>
button { margin-left:20px; display:inline; }
</style>
<script type='text/javascript' src='jquery-1.7.1.min.js'></script>
<script type='text/javascript'>
function loadKidData(kidID) {
switch (kidID) {
case 1 : $('#kName').text(' John Doe');
$('#kNickname').text(' Speedy');
$('#kHobbies').text(' Booling');
break;
case 2 : $('#kName').text(' Mathews Doe');
$('#kNickname').text(' Slowy');
$('#kHobbies').text(' Basketball, baseball');
break;
case 3 : $('#kName').text(' Jackson Doe');
$('#kNickname').text(' J-DOE');
$('#kHobbies').text(' Archery');
break;
case n : $('#kName').text(' Enne Doe');
$('#kNickname').text(' The-Nanny');
$('#kHobbies').text(' Anything goes');
break;
default : $('#kName').text('');
$('#kNickname').text('');
$('#kHobbies').text('');
}
}
jQuery( function () {
$('.nav').click( function () {
loadKidData($(this).html().replace('KID ','')*1.0); // *1.0 same as parseInt(...,10).
})
});
</script>
</head>
<body>
<button class='nav' >KID 1</button><button class='nav' >KID 2</button><button class='nav' >KID 3</button>
<div id='KID_INFO' style='margin:20px auto; overflow:auto; ' >
<p>Name:<span id='kName'></span></p>
<p>Nickname:<span id='kNickname'></span> </p>
<p>Hobbies:<span id='kHobbies'></span> </p>
</div>
</body>
Sample at: http://zequinha-bsb.int-domains.com/kidsinfo.html
Now, as far as dynamically displaying the data, it will have to do with your resources: database? If so, you could read the data and pass it over:
$.get('url-of-the-database-reading-script',function (data) {
// assumed all data comes back formatted:
$('#KIDS_INFO').html(data);
});
I can/could help you further, more details would help. Are you using classic asp (.asp); php; etc?
EDIT:
Instead of this:
jQuery( function () {
$('.nav').click( function () {
loadKidData($(this).html().replace('KID ','')*1.0); // *1.0 same as parseInt(...,10)
})
});
Do this:
jQuery( function () {
$('.nav').click( function () {
$.get('your-data-fetching-url?kidID='+$(this).html().replace('KID ','')*1.0, function (data) {
//assumed the data comes back formatted:
$('#KIDS_DATA').html(data);
})
})
});
Note that I put a question mark at the end of the url; followed by the querystring kidID=
Give each "Kid" button the same class and use that for the click handler. From there, you can associate the "content_info_kid" with the "kid" button either by
1)Using the index of the element. The button for kid2 should be index 1 relative to its parent and the content_info for kid2 should also be index 1 relative to its parent.
or
2)Extract the number from the ID of the button.
Both approaches are documented below.
$('.kid_button').click(function(){
// get number from index (this starts at '0')
// if your kid #'s start at 1, you should add 1 to this
var id = $(this).index();
// OR...get number from id where id format is kid_{#}
var id = $(this).attr('id').split('_').pop();
// now we have the number to append to everything else
// we should also associate all "content_info" with a class
// which we will call "kid_content"
if($("#content_info_kid"+id).is(":hidden")){
// hide all of the 'kid_contents'
$(".kid_content").hide();
// show the one we want
$("#content_info_kid"+id).show("slow");
// normalize all buttons
$(".kid_button").css("font-weight","normal");
// bold this one
$(this).css("font-weight","bold");
}
});
Related
I am building a nested simple_form_for in rails using cocoon to dynamically add and remove nested elements. The main model object is a quote and a quote has many employees. I've reached the limit of my amateur code skills and would like some guidance on writing a neat js script so to achieve the following:
if nested_object.count <= 2 then remove_empee_link.hide
if nested_object.count > 2 then remove_empee_link.show, but not on the first two nested_objects.
if nested_object.count > 10 then add_empee_link.hide, otherwise always add_empee_link.show
Adapted from a really helpful post here courtesy of #nathanvda I've got to here;
$(document).ready(function() {
function check_to_hide_or_show_add_empee_link() {
if ($('#empee-form .nested-fields:visible').length == 5) {
$('#empee-form .links a').hide();
} else {
$('#empee-form .links a').show();
}
}
$('#empee-form').on('cocoon:after-insert', function() {
check_to_hide_or_show_add_empee_link();
});
$('#empee-form').on('cocoon:after-remove', function() {
check_to_hide_or_show_add_empee_link();
});
check_to_hide_or_show_add_empee_link();
});
$(document).ready(function() {
function check_to_hide_or_show_remove_empee_link() {
if ($('#empee-form .nested-fields:visible').length <= 2) {
$('.remove_fields').hide();
} else {
$('.remove_fields').show();
}
}
$('#empee-form').on('cocoon:after-insert', function() {
check_to_hide_or_show_remove_empee_link();
});
$('#empee-form').on('cocoon:after-remove', function() {
check_to_hide_or_show_add_remove_empee_link();
});
check_to_hide_or_show_add_remove_empee_link();
});
But I'm struggling to put a strategy together on how I can I achieve what I outlined in my biullets above in a neat solution, any guidance would be really appreciated after starting and playing with this for hours. Thanks
The updated code that I've now written, but the behavior is unexpected;
If 1, 2 or 3 nested elements on page, then all remove_links hidden.
If 4 nested elements on page then 1st, 2nd & 4th have remove_link hidden
If 5 nested elements on page then 1st, 2nd & 3rd have remove_link hidden
Intended behaviour, 1st and 2nd remove_links hidden always, anoy others shown:
// Hiding the 1st 'remove employee' link for the first two employee fields.
$(document).ready(function() {
function hide_first_and_second_remove_empee_links() {
var remove_links = $('.remove_fields')
$(remove_links[0]).hide();
$(remove_links[1]).hide();
// $('a.remove_fields:first-child').hide();
// $('a.remove_fields:nth-child(2)').hide();
}
$('#empee-form').on('cocoon:after-insert', function() {
hide_first_and_second_remove_empee_links();
});
$('#empee-form').on('cocoon:before-insert', function() {
hide_first_and_second_remove_empee_links();
});
hide_first_and_second_remove_empee_links();
});
How can this be? There's one method, it collects all .remove_fields' into the remove_links var, then wraps the[0]element of that collection in a jQuery object and callshideon it. Then the same to the1element. That method is called on page ready and then again oncocoon:before-insertandafter-insert. I don't see how the definition of the[0]and the1` elements changes?
Your logic becomes easier when you write:
always hide the first two remove links
hide the add association link if there are more than 10 employees
The second is already covered in your answer.
The first one is actually pretty easy using jquery:
$('.remove-fields:first-child').hide()
$('.remove-fields:nth-child(2)').hide()
I am trying to open a fancybox iframe on my page. Pass over some basic information to the iframe. Then I want to make it so that the iframe talks back to it's parent.
I am passing nameid-1 throughout statically, though I would really like to have this as variable such as: var nameid=$(this).attr('nameid')
I just don't know how to execute this all correctly as I am new to Ajax/Javascript and struggling with the logic.
Base.html
JS:
<script type='text/javascript'>
//<![CDATA[
// Popup Function
$(document).ready(function () {
$('a.openinformation').fancybox({
openEffect: 'fade',
openSpeed: 500 //,
});
});
// Update from iFrame
function setInformation(userText) {
$('#displayfield-nameid-1').html(userText);
$('#showhide-nameid-1').show();
}
//]]>
</script>
HTML:
<div>
<a class="openinformation fancybox.iframe" href="iframe.html" nameid= "1" originalname="Mary Poppins" >Mary Poppins</a>
</div>
<div id ="showhide-nameid-1" style=" display:none; background:#0CF;">
<p>Replacement Name: <span id="displayfield-nameid-1"></span></p>
</div>
iframe.html
JS :
<script type='text/javascript'>
//<![CDATA[
// Start
$(window).load(function () {
// When Loaded get going.
$(document).ready(function () {
$('a.doupdate').click(function () {
parent.setInformation($(this).text());
parent.$.fancybox.close();
});
$('a.closeremove').click(function () {
parent.$('#showhide-nameid-1').hide();
parent.$.fancybox.close();
});
});
});
//]]>
</script>
HTML
<p>The old name: $originalname;</p>
<p>The id for this column is: $nameid</p>
<p>Please select a new name:</p>
<div><a class="doupdate" href="#">Display new married name : Mary Smith</a></div>
<div><a class="doupdate" href="#">Display new married name: Sandy Shore</a></div>
<div><a class="closeremove" href="#" id="1">Clear (Hide) married Names Box</a></div>
Your question can be dived in two parts :
How to pass data (stored in variables) from parent page to an iframe (opened in fancybox)
How to manipulate data (and/or store such data in variables) inside the iframe and then pass those values to the parent page when fancybox is closed.
1). Pass data from parent page to (fancybox) iframe
I think your best choice is to store all your data in a single javascript object like :
var parentData = {};
... so you can pass a single object to the iframe instead of several variables. Then you can add different properties and values to that object like :
parentData.nameid = "1";
parentData.originalname = "Mary Poppins";
... or more if you need so.
You still may want to pass that information statically through (HTML5) data attributes like :
<a data-nameid="1" data-originalname="Mary Poppins" href="iframe.html" class="openinformation">Mary Poppins</a>
... and push the data values into the parentData object within the fancybox beforeLoad callback like :
beforeLoad : function () {
parentData.nameid = $(this.element).data("nameid");
parentData.originalname = $(this.element).data("originalname");
}
... that would give you much more flexibility IMHO.
Now, the only thing you need to do in the iframed page is to refer to those properties as parent.parentData.nameid and parent.parentData.originalname any time you need them, e.g.
having this html (iframe.html)
<p>The old name: <span id="originalname"></span></p>
<p>The id for this column is: <span id="nameid"></span></p>
... you can use this script to write the values of the parent object like :
$("#nameid").text(parent.parentData.nameid);
$("#originalname").text(parent.parentData.originalname);
Notice you cannot do (as in php)
<p>The old name: $originalname;</p>
... so we used <span> tags to write their content via javascript.
2). Pass data from iframed page to parent page.
First thing you need to do is to declare in your parent page, an object to store data from the iframe and a function to process it like :
var iframeData = {};
function setInformation(data) {
return iframeData = data;
};
Then in the iframed page, you can write different properties/values to the iframeData object and run the setInformation() function (in the parent page) from the iframe to pass the values to the parent page like :
$(".doupdate").on("click", function (e) {
e.preventDefault();
iframeData.newname = $(this).find("span").text(); // set object property/value
parent.setInformation(iframeData); // pass it to parent page
parent.$.fancybox.close();
});
The code above assumes you have a similar html like
<a class="doupdate" href="#">Display new married name : <span>Mary Smith</span></a>
... notice I wrapped the name I want pass in a span tag. Optionally you could separate it in 2 spans like :
<span class="fname">Mary</span><span class="lname">Smith</span>
... and write them in separated values like :
iframeData.fname = $(this).find("span.fname").text();
iframeData.lname = $(this).find("span.lname").text();
For the clear button, I would just reinitialize the variable and close fancybox like
$('a.closeremove').on("click", function (e) {
e.preventDefault();
iframeData = {}; // reset variable
parent.setInformation(iframeData); // pass it to parent page
parent.$.fancybox.close();
});
... and perform the manipulation of the parent page from the parent page itself using the fancybox afterClose callback like :
afterClose : function () {
if ( objLength(iframeData) > 0 ) {
$('#displayfield-nameid-1').html(iframeData.newname);
$('#showhide-nameid-1').show();
} else {
$("#displayfield-nameid-1").empty();
$('#showhide-nameid-1').hide();
}
}
... notice I will only show the selector #showhide-nameid-1 if the iframeData object's length is bigger than 0. Because that, I need a function to validate the object's length :
Based on this answer, you could do:
function objLength(iframeData) {
// ref https://stackoverflow.com/a/5533226/1055987
var count = 0, i;
for (i in iframeData) {
if (iframeData.hasOwnProperty(i)) {
count++;
}
}
return count;
};
... which will return the object's length.
Last note :
Since the iframed page is referring to the parent page using the prefix parent, it will return js errors if it's opened outside an iframe. You may want to validate first if the iframed page is actually contained inside an iframe before trying to access data back and forth to/from the parent page like :
if (window.self !== window.top) {
// the page is inside an iframe
}
See DEMO and feel free to explore the source code of both pages.
I am trying to open a fancybox iframe on my page. Pass over some basic information to the iframe. Then I want to make it so that the iframe talks back to it's parent.
I am passing nameid-1 throughout statically, though I would really like to have this as variable such as: var nameid=$(this).attr('nameid')
I just don't know how to execute this all correctly as I am new to Ajax/Javascript and struggling with the logic.
Base.html
JS:
<script type='text/javascript'>
//<![CDATA[
// Popup Function
$(document).ready(function () {
$('a.openinformation').fancybox({
openEffect: 'fade',
openSpeed: 500 //,
});
});
// Update from iFrame
function setInformation(userText) {
$('#displayfield-nameid-1').html(userText);
$('#showhide-nameid-1').show();
}
//]]>
</script>
HTML:
<div>
<a class="openinformation fancybox.iframe" href="iframe.html" nameid= "1" originalname="Mary Poppins" >Mary Poppins</a>
</div>
<div id ="showhide-nameid-1" style=" display:none; background:#0CF;">
<p>Replacement Name: <span id="displayfield-nameid-1"></span></p>
</div>
iframe.html
JS :
<script type='text/javascript'>
//<![CDATA[
// Start
$(window).load(function () {
// When Loaded get going.
$(document).ready(function () {
$('a.doupdate').click(function () {
parent.setInformation($(this).text());
parent.$.fancybox.close();
});
$('a.closeremove').click(function () {
parent.$('#showhide-nameid-1').hide();
parent.$.fancybox.close();
});
});
});
//]]>
</script>
HTML
<p>The old name: $originalname;</p>
<p>The id for this column is: $nameid</p>
<p>Please select a new name:</p>
<div><a class="doupdate" href="#">Display new married name : Mary Smith</a></div>
<div><a class="doupdate" href="#">Display new married name: Sandy Shore</a></div>
<div><a class="closeremove" href="#" id="1">Clear (Hide) married Names Box</a></div>
Your question can be dived in two parts :
How to pass data (stored in variables) from parent page to an iframe (opened in fancybox)
How to manipulate data (and/or store such data in variables) inside the iframe and then pass those values to the parent page when fancybox is closed.
1). Pass data from parent page to (fancybox) iframe
I think your best choice is to store all your data in a single javascript object like :
var parentData = {};
... so you can pass a single object to the iframe instead of several variables. Then you can add different properties and values to that object like :
parentData.nameid = "1";
parentData.originalname = "Mary Poppins";
... or more if you need so.
You still may want to pass that information statically through (HTML5) data attributes like :
<a data-nameid="1" data-originalname="Mary Poppins" href="iframe.html" class="openinformation">Mary Poppins</a>
... and push the data values into the parentData object within the fancybox beforeLoad callback like :
beforeLoad : function () {
parentData.nameid = $(this.element).data("nameid");
parentData.originalname = $(this.element).data("originalname");
}
... that would give you much more flexibility IMHO.
Now, the only thing you need to do in the iframed page is to refer to those properties as parent.parentData.nameid and parent.parentData.originalname any time you need them, e.g.
having this html (iframe.html)
<p>The old name: <span id="originalname"></span></p>
<p>The id for this column is: <span id="nameid"></span></p>
... you can use this script to write the values of the parent object like :
$("#nameid").text(parent.parentData.nameid);
$("#originalname").text(parent.parentData.originalname);
Notice you cannot do (as in php)
<p>The old name: $originalname;</p>
... so we used <span> tags to write their content via javascript.
2). Pass data from iframed page to parent page.
First thing you need to do is to declare in your parent page, an object to store data from the iframe and a function to process it like :
var iframeData = {};
function setInformation(data) {
return iframeData = data;
};
Then in the iframed page, you can write different properties/values to the iframeData object and run the setInformation() function (in the parent page) from the iframe to pass the values to the parent page like :
$(".doupdate").on("click", function (e) {
e.preventDefault();
iframeData.newname = $(this).find("span").text(); // set object property/value
parent.setInformation(iframeData); // pass it to parent page
parent.$.fancybox.close();
});
The code above assumes you have a similar html like
<a class="doupdate" href="#">Display new married name : <span>Mary Smith</span></a>
... notice I wrapped the name I want pass in a span tag. Optionally you could separate it in 2 spans like :
<span class="fname">Mary</span><span class="lname">Smith</span>
... and write them in separated values like :
iframeData.fname = $(this).find("span.fname").text();
iframeData.lname = $(this).find("span.lname").text();
For the clear button, I would just reinitialize the variable and close fancybox like
$('a.closeremove').on("click", function (e) {
e.preventDefault();
iframeData = {}; // reset variable
parent.setInformation(iframeData); // pass it to parent page
parent.$.fancybox.close();
});
... and perform the manipulation of the parent page from the parent page itself using the fancybox afterClose callback like :
afterClose : function () {
if ( objLength(iframeData) > 0 ) {
$('#displayfield-nameid-1').html(iframeData.newname);
$('#showhide-nameid-1').show();
} else {
$("#displayfield-nameid-1").empty();
$('#showhide-nameid-1').hide();
}
}
... notice I will only show the selector #showhide-nameid-1 if the iframeData object's length is bigger than 0. Because that, I need a function to validate the object's length :
Based on this answer, you could do:
function objLength(iframeData) {
// ref https://stackoverflow.com/a/5533226/1055987
var count = 0, i;
for (i in iframeData) {
if (iframeData.hasOwnProperty(i)) {
count++;
}
}
return count;
};
... which will return the object's length.
Last note :
Since the iframed page is referring to the parent page using the prefix parent, it will return js errors if it's opened outside an iframe. You may want to validate first if the iframed page is actually contained inside an iframe before trying to access data back and forth to/from the parent page like :
if (window.self !== window.top) {
// the page is inside an iframe
}
See DEMO and feel free to explore the source code of both pages.
I have a table generated from a program, listing info from a database. You can see it here:
http://www.homeducate.me/cgi-bin/browseTutors.cgi?Lui=en&countryCode=MO
For one piece of text, if it's long, I'm listing a shortened version of the text.
Now I'd like to switch it to the longer version when the user clicks on the row to expand some other rows below.
My table has a set of repeating sections like this:
<tr class="header">
//some stuff
<script>
var approachTxt1 = "Shortened version of the text...";
var approachFullTxt1 = "Full length version of the text to be displayed.";
</script>
<td><img src="an_image.png"><span id="approach1">Shortened version of the text...</span><img src="another_image.png"></td>
//some more stuff
</tr>
<tr>Some more rows of stuff</tr>
Then I use the following script to (1) initially collapse all the rows up under each header row, (2) toggle them to display again when a header row is clicked (3) redirect to a url if the user clicks on the un-hidden rows and (4) change the pointer to a mouse when over the table. It all works nicely.
<script>
$('#listTutors .header').each(function () {
$(this).nextUntil('tr.header').toggle();
});
$('.header').click(function () {
var $this = $(this);
$(this).nextUntil('tr.header').slideToggle(100).promise().done(function () {
});
});
$("tr:not('.header')").click(function () {
top.window.location.href="http://www.homeducate.me/cgi-bin/createAccountForm.cgi?Lui=en";
});
$('html,table').css('cursor','pointer');
</script>
Now what I wanna do is switch the shortened version of the text to the full text when the user clicks to expand that section, and then switch it back to the shortened form once again when the user clicks again to hide that section. I've been trying:
$(this).next('span').html($(this).next('span').html() == approachTxt1 ? approachFullTxt1 : approachTxt1);
But I'm getting "undefined is not a function" and "unexpected string" errors. Its clearly not picking up the span after the current header.
Plus I'm struggling to think how can I actuate this change for each set of my table rows (eg. switch the appropriate strings out according to which header row the user picks). I've been scratching my head on this for too long :( and would really appreciate any guidance.
Any help much appreciated.
Cheers.
Ok, finally worked out how to do it. Posting here just in case it might help someone else in the future....
First, I set a unique id for each section of my table:
<tr class="header" id="$nnn">
where $nnn is driven from my Perl program and is simply 1,2,3 etc.
Then for each section of the table, I put the short and long text strings into elements of an array:
<script>
approachTxt[$nnn] = "short version of the text";
approachFullTxt[$nnn] = "long version of the text which will be switched in and out";
</script>
Then my script becomes:
<script>
$('#listTutors .header').each(function () {
$(this).nextUntil('tr.header').toggle();
});
$('.header').click(function () {
var $this = $(this);
$(this).nextUntil('tr.header').slideToggle(100).promise().done(function () {
});
$('#span' + this.id).html($('#span' + this.id).html() == approachTxt[this.id] ? approachFullTxt[this.id] : approachTxt[this.id]);
});
$("tr:not('.header')").click(function () {
top.window.location.href="http://www.homeducate.me/cgi-bin/createAccountForm.cgi?Lui=en";
});
$('html,table').css('cursor','pointer');
</script>
Now it all works beautifully.
And I can sleep better tonight :)
I have a recordset loop that creates a table, and every 9 items it wraps a div around them so basically looks like:
<div>
<table>rs1, rs2 ----> rs9</table>
</div>
<div>
<table>rs10, rs11 ----> rs18</table>
</div>
etc...
Now, I want it so at first only the first div is showing and the others are hidden, but I have ASP loop that generates clickable links for the various divs (pages) and clicking on any given link will show that div and hide all the others.
Here is the asp code I have so far:
Dim i
If totalPages > 1 Then
Response.Write("<div id='navigation'>")
For i=1 to totalPages
Response.Write ("<a href='' onlick=''>"& i &"</a> | ")
Next
Response.Write("</div>")
End If
Now I just need to figure out the javascript...
To make this easier, you should identify your tables somehow. Give them an ID that identifies a specific resultset and a classname that identiefies all resultsets:
<table id="resultset-1" class="resultset"> ...
Then you can bind an event to the links in your navigation element:
window.onload = function() {
document
.getElementById('navigation')
.getElementByTagName('a')
.onclick = function() {
var id = parseInt(this.innerHTML, 10);
document.getElementsByClassName('resultset').style.display = 'none';
document.getElementById('resultset-'+id).style.display = 'block';
return false;
}
}
I haven't tested this and my vanilla JS skills are a bit rusty, but it should work to my understanding. Just for the kicks, here's a version using jQuery which I can guarantee to work:
$(function() {
$('#navigation a').click(function() {
var id = parseInt($(this).html(), 10);
$('.resultset').hide();
$('#resultset-'+id).show();
return false;
});
});
Remember to initially hide all but the first div somehow – you don't need to use JS for that, you can use ASP to print style="display: none;" to all tables you want to hide, for example.