?
Solved

Need help with querySelector alternative

Posted on 2012-09-05
3
Medium Priority
?
730 Views
Last Modified: 2012-09-05
Hey All,

I'm using mootools and need help with an alternative to "querySelector" and "querySelectorAll" since its not working in ie.

This is the line I need help with:

var listitem = content.querySelector(".list ul li");

var allContent = content.querySelectorAll(".listpage");

Any help would be great. Thanks.
0
Comment
Question by:yando18
  • 2
3 Comments
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38368923
Don't you just use the native Mootool selectors: $, $$, $E, $ES:

var listitem = $E('.list ul li');
var allContent = $$(".listpage");
0
 

Author Comment

by:yando18
ID: 38368981
Here is the full code. Its tabbed content. I have tried to implement what you have above but still get an error in ie for querySelector. I'm missing something.


    var content = $("listContent");
    if (content) {
        var listitem = content.querySelector(".list ul li");
        var idCheck = listitem.id.split("_")[1];
            listitem.parentNode.setProperty("data",idCheck);
            listitem.addClass("active");

        var pages = content.querySelectorAll(".listpage");
            for (var i = 1; i < pages.length; i++) {
              pages[i].setStyle('display', 'none');
            }

        var tabs = content.querySelectorAll(".bbtabs ul li");
            for (var i = 0; i < tabs.length; i++) {
              tabs[i].addEvent('click', function (){
                  var current = this.parentNode.getProperty("data");
                  $$("#tabHeader_" + current).removeClass("active");
                  $$("#listpage_" + current).setStyle('display', 'none');

                  var idCheck = this.id.split("_")[1];
                  this.addClass("active");
                  $$("#listpage_" + idCheck).setStyle('display', 'block');
                  this.parentNode.setProperty("data",idCheck);
            });
        }
    }

Open in new window

0
 
LVL 45

Accepted Solution

by:
Chris Stanyon earned 1500 total points
ID: 38369279
I don't really use MooTools, but your code seems to be using traditional javascript within your MooTools code. While that's not wrong, MooTools should offer you most of what you need, and make things easier

Here's a more MooTools way to do it. Not complete code, but should give you more of an idea.

window.addEvent('domready', function() {
	var content = $("content");
	if (content) {
		var listitem = content.getElement(".list ul li");
		var idCheck = listitem.id.split("_")[1];
		var tabs = content.getElements(".bbtabs ul li");
	
		listitem.addClass("active").getParent().setProperty("data",idCheck);
	
		content.getElements(".listpage").each(function(el) {
			el.addClass("newClass");
		})
	
		tabs.each(function(el){
			el.addEvent('click',function() {
				//put your click code in here.
				this.getParent().getProperty("data");
				//...
			});
		});
	}
});

Open in new window

0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question