How to find a string in a dynamically created list - javascript

Upon loading a page I make a database call (via ajax / php) to get a dynamic list. The list displays fine and looks something like this:
<ul id="menu">
<li>bla</li>
<li>bla2</li>
<li>bla3</li>
</ul>
As soon as the list is done loading I want to dynamically load content based on the page I am on, so I grab the page URL which in this case lets say is bla3. I want to look through the list and grab the URL(href) of the li item containing bla3.
I figured something like this below would work but it does not.
$(document).ready(function() {
$('#menu').on('load', function(){
var pageID = $('#menu li a[href$="?bla3"]').attr('href');
alert(pageID);
});
});
The problem (I am assuming) is that #menu is not loaded quickly enough so the on load event fires before #menu loads, I have tried it with body and that didn't work either. Essentially I just need a away to look through a dynamically generated list after it and the page it is on is fully loaded.
Any ideas?

<body onload="findList()">
Then you need this function in your <head>
<head>
<script type="text/javascript" language="javascript">
function findList() {
var list = document.getElementById("menu").getElementsByTagName("li");
var contains = "bla3";
var patt = new RegExp(contains,"g");
for (var x=0;x<list.length;x++) {
if (list[x].match(patt).length>0) {
var hrefVal = list[x].childNodes[0].href;
alert(hrefVal);
}
}
}
</script>
</head>

To start, it seems like you're in need of a way to wait for your menu. You can try polling the DOM for the element.
Here's a rough fiddle that seems to simulate what you're describing: http://jsfiddle.net/rkLVx/1/
var menuHasArrived = function (fn) {
console.log('checking...');
if ($('#menu').length) {
fn();
} else {
setTimeout(function () {
menuHasArrived(fn);
}, 1000);
}
}
menuHasArrived(function () {
alert($('#menu li a:contains(bla2)').attr('href'));
});
setTimeout(function () {
$('body').append(
'<ul id="menu">' +
'<li>bla</li>' +
'<li>bla2</li>' +
'<li>bla3</li>' +
'</ul>');
}, 2000);
Good luck

Related

jQuery Modal and FancySelect Plugin

I have the jQuery FancySelect plugin installed. Works fine. Now I am trying to call it in a modal popup, but it does not work. This is the code in the parent window:
<script src="/js/fancySelect.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.fancyselect').fancySelect();
var repoName = 'fancyselect'
var menu = $('#top').find('menu');
function positionMenuArrow() {
var current = menu.find('.current');
menu.find('.arrow').css('left', current.offset().left + (current.outerWidth() / 2));
}
$(window).on('resize', positionMenuArrow);
menu.on('click', 'a', function(e) {
var el = $(this),
href = el.attr('href'),
currentSection = $('#main').find('.current');
e.preventDefault();
menu.find('.current').removeClass('current');
el.addClass('current');
positionMenuArrow();
if (currentSection.length) {
currentSection.fadeOut(300).promise().done(function() {
$(href).addClass('current').fadeIn(300);
});
}
else {
$(href).addClass('current').fadeIn(300);
}
});
menu.find('a:first').trigger('click')
});
</script>
Adding class="fancyselect" to any select in the parent works. However, does not work if added to modal popup select.
Just speculating here as you did not show the HTML or the JS logic that is dealing with the popup creation. Are the elements where you wan to apply the FancySelect method, from the popup plugin already on the page when you call the:
$('.fancyselect').fancySelect();
?
If the elements are added after the page load they won't be picked up by that statement. When displaying the popup you would do somehting like
$('#popupcontainer .fancyselect').fancySelect();
So they will all the required code will be applied on that elements as well.
Update:
Following the update give in your original post, you can add something like: [not tested]
onLoad: function() {
var wrap = this.getOverlay().find(".contentWrap");
$(wrap).find('.fancyselect').fancySelect();
}
This should be triggered after the popup has been populated.

Jquery function - on element

I have this jquery code, working 100%.
This is executing on every page load, when i import my js file in the html.
My question, how can i make use of this code, only when the element is present, or call it directly from the element itself? I have similiar functions, but, on html's that dont have specific elements, javascript execution halts. Sometimes because the html elements dont exist on that specific html file.
/**
* Message Box Display
*/
$(document).ready(function() {
$("#Message-Box" ).slideDown("slow", function() {
$("#Message-Box").addClass('Show');
setTimeout(function(){
$('#Message-Box').addClass('Hide');
}, 5000);
});
});
try something like this
$(document).ready(function() {
var msgbx = $("#Message-Box");
if (msgbx.length) {
msgbx.slideDown("slow", function() {
msgbx.addClass('Show');
setTimeout(function() {
msgbx.addClass('Hide');
}, 5000);
});
}
});
The function halting my script was this one:
/**
* Background-Audio
*/
$(document).ready(function() {
var audioTrack = document.getElementById("Background-Audio");
if(audioTrack)
{
audioTrack.volume = 0.05;
audioTrack.play();
}
});

random li (list) with jQuery before page get loaded

how I can random a list with jQuery before page get loaded?
i found this example on the web: http://whatanswered.com/websites-javascript/random-elements-using-jquery.php
(you must scroll down a bit to see)
but it works only after mouse press the button. *this is my problem, i need it to work atomatically before the page is getting loaded.
Any ideas?
I copied the code in this FIDDLE, if anyone would like to help, it might be usefull!
$(function() {
$('button').click(function() {
$("div.list").randomize("div.cat");
});
});
(function($) {
$.fn.randomize = function(childElem) {
return this.each(function() {
var $this = $(this);
var elems = $this.children(childElem);
elems.sort(function() { return (Math.round(Math.random())-0.8); });
$this.remove(childElem);
for(var i=0; i < elems.length; i++)
$this.append(elems[i]);
});
}
})(jQuery);
You can just call the randomize plugin when the page loads - be aware though the plugin needs to have been loaded before hand:
$(function() {
$("div.list").randomize("div.cat");
});
Updated fiddle: http://jsfiddle.net/yNChm/1/
The easiest way is to call the randomize() function after the document.ready event has fired:
$(document).ready(function() {
$("div.list").randomize("div.cat");
});
You should be able to accomplish this by doing a $(window).ready, or something along those lines:
$(function() {
console.log('Yo');
$("div.list").randomize("div.cat");
});
Make sure you register the plugin first!

Number, hover (etc) effect not work after Ajax Load More

I'm using Drupal 7 and get my content with View module on page. And my pager Views Load More module. And my thumbnail effect hover, shadow etc. Image hover using this code:
var hoverImg = '<div class="hoverimg"></div>';
$(".thumb").each(function(){
$(this).children("div").each(function(){
$(this).find("a").append(hoverImg);
});
});
$(".thumb div").hover(function() {
$(this).find(".hoverimg").animate({ opacity: 'toggle' });
});
$(".thumb").hover(function() {
$(this).find("div").each(function(){
$(this).find(".shadow").fadeOut(500);
});
});
And getting number on my current thumbnail. This code:
var c = '';
var d = '';
$('.view-content div.views-row').each(function(){
c = 0;
d = 0;
var i = 1;
d = $(this).find('.thumbimg').length;
$(this).find('.thumbimg').each(function(){
sayi=i++;
$(this).append('<div class="img_no">0'+sayi+'</div>');
});
});
Everything is OK. All effects on start page. But when click Load More button, my effects can't work another page.
How do i solve this problem? Thanks.
The reason why it stops working is due to the hover function (and your other scripts/functions) only works on existing elements. So if you add something with ajax, it wont apply to that unless you reload the script after the ajax load.
Another option is to use live() or on() (for the hover part. On is the new version of live, added in jQuery 1.7).
Live and on listens for any existing or future elements.
A live script would look something like this:
$(".yourElement").live({
mouseenter:
function () {
// Do something
},
mouseleave:
function () {
// Do something
},
mousemove:
function () {
// Do something
}
});

Assign dynamic div id from js var

I am having trouble selecting a div with jQuery after assigning the id to a Javascript variable:
$(function() {
$(".do").live("click",function()
{
var id = $(this).attr("id");
$.ajax({
//reload div using js var id
$('id').fadeOut('fast').load('http://example.com/get.php').fadeIn("slow");
});
return false;
});
});
When I call a static div it works just fine like this:
$('#staticdiv').fadeOut('fast').load('http://example.com/get.php').fadeIn("slow");
How can I select a div from a Javascript variable containing its id?
*EDIT
Here is an example if the divs:
Button to engage reload
click to reload
DIV to reload:
<div id="12">to be refreshed</div>
keep in mind the "12" us dynamic and could be any variable.
You can do that using this:
$("#"+id).fadeOut() // ...
However, I wouldn't recommend doing it that way (it won't work on things without IDs); try this instead (which should work on things without IDs):
$(".do").live("click", function() {
var me = $(this);
$.ajax({
// ...
success: function(data) {
me.fadeOut('fast').load('http://example.com/get.php').fadeIn("slow");
}
// ...
});
return false;
});
Additionally, I'm not sure if you really want that .fadeOut().load().fadeIn() chain; the load will not wait for the fadeOut to finish and the fadeIn will not wait for the load to finish (although the fadeIn will wait for the fadeOut to finish). If you have problems with that, you should try this:
me.fadeOut('fast', function() {
me.load('http://www.example.com/get.php', function() {
me.fadeIn('slow');
});
});
Aren't you supposed to use the variable id instead of string 'id'.
As follows:
$('#'+id).fadeOut('fast').load('http://example.com/get.php').fadeIn("slow");

Categories