We Keep Coding

How do I have an event filter a page?

I'm working on a twitter clone in JS + jQuery for a pre-course to a development program, so if this is an obvious fix - let me know!
I have a problem I'm unable to solve: "click on username, page returns with that user's last tweets".
The only thing I could come up with is, an event handler on the <a> tag filter the page. However I'm vastly inexperienced and unclear in how to proceed.
Any ideas?
note- I removed some code for brevity.
$(document).ready(function() {
var $body = $('body');
$body.html();
var stream = function() {
var index = streams.home.length - 1;
while (index >= 0) {
var tweet = streams.home[index];
var $tweet = $('<div class="tweetbody"></div>');
$tweet.text(': ' + tweet.message);
$tweet.appendTo($body);
index -= 1;
var link = $('<a>', {
text: tweet.user,
href: '#',
}).prop('outerHTML');
$tweet.html('#' + link + ': ' + tweet.message);
}
};
Here's the <a> tag event:
//click on a username to see that user's timeline.
$('a').on('click', function() {
console.log("a tag is clicked ");
console.log(this);
});
}();
}); //end document ready body

In the on click function you could perhaps do either of the two things, so go to another page, like redirecting to a new page
//click on a username to see that user's timeline.
$('a').on('click', function() {
//console.log("a tag is clicked ");
//console.log(this);
window.location = '/some_file.php?get_tweets='+tweet.user;
});
or, use an ajax call to do the same:
//click on a username to see that user's timeline.
$('a').on('click', function() {
//console.log("a tag is clicked ");
//console.log(this);
$.ajax({
type: "GET",
url: "/some_file.php",
data: {
'user' : tweet.user
},
success: function(msg) {
$body.html(msg);
});
});
In both cases some_file.php should format the content.

How do I combine two JQuery functions?

I am trying to combine these two functions into one. I know there has to be a really simple way to do it, but everything I have tried so far has not worked. Essentially there are two icons and two menus. When you click one icon a menu either drops down (or raises) depending on the state they are in. Everything after the variables is the same, so it seems to make sense to consolidate them into one shared function. Any help would be greatly appreciated. Thanks!
$(function(){
///Manage Icon 1
$('.ecGlobalNavStudentIcon').click(function(e){
var n = 'hideme'
var m = $('#ecGlobalNavStudentPanel')
var p = $('#ecGlobalNavStaffPanel')
e.preventDefault(); //just prevent the default behavior of the hyperlink
if(m.hasClass(n)) {
console.log($(m).attr('id') + " Has 'hideme' gonna open up");
$(m).show().removeClass(n);
$(m).animate({
height:'49px'
},
500, // Duration
function() { // Callback when the animation is finished
console.log($(m).attr('id') + " Opened!");
});
} else {
console.log($(m).attr('id') + " didn't have 'hideme' gonna try and
close. ");
$(m).animate({
height:'0px'
},
500, // Duration
function() { // Callback when the animation is finished
$(m).hide().addClass(n);
console.log($(m).attr('id') + " Closed!");
});
}
if(!$(p).hasClass(n)) {//open
console.log($(p).attr('id') + " panel open! Gonna close.");
$(p).animate({//close
height:'0px'
},//close
500, // Duration
function() { // Callback when the animation is finished /open
console.log($(p).attr('id') + " Closed by animation!");
$(p).hide().addClass(n);
});//close
}
});
///Manage Icon 2
$('.ecGlobalNavStaffIcon').click(function(e){
var n = 'hideme'
var m = $('#ecGlobalNavStaffPanel')
var p = $('#ecGlobalNavStudentPanel')
e.preventDefault(); //just prevent the default behavior of the hyperlink
if (m.hasClass(n)) {
console.log($(m).attr('id') + " Has 'hideme' gonna open up");
$(m).show().removeClass(n);
$(m).animate({
height: '49px'
},
500, // Duration
function () { // Callback when the animation is finished
console.log($(m).attr('id') + " Opened!");
});
} else {
console.log($(m).attr('id') + " didn't have 'hideme' gonna try and close. ");
$(m).animate({
height: '0px'
},
500, // Duration
function () { // Callback when the animation is finished
$(m).hide().addClass(n);
console.log($(m).attr('id') + " Closed!");
});
}
if (!$(p).hasClass(n)) {//open
console.log($(p).attr('id') + " panel open! Gonna close.");
$(p).animate({//close
height: '0px'
},//close
500, // Duration
function () { // Callback when the animation is finished /open
console.log($(p).attr('id') + " Closed by animation!");
$(p).hide().addClass(n);
});//close
}
});
});

If you want to handle same event for multiple selectors, use the selectors as comma separated.. In your case
$('.ecGlobalNavStudentIcon, .ecGlobalNavStaffIcon').click(function(){
//Your common event handler
});
Always remember, repeating code is evil, a sign of some mistake you've made. And you have done a great job finding it :) Happy coding

It is always good to separate DOM event handling and actual logic.
icon1 click and icon2 click triggers event A
on event A do action A'
consider this example:
$(body).on('togglePanels.my', function (e, activePanel ) {
var panels = $('.panels')
panels.removeClass(cssClass)
activePanel.addClass(cssClass)
})
$(body).on('click','.panelHeader' function(e) {
var $this= $(this)
, panel = $('#' + $this.data('target'))
$(body).trigger('togglePanels.my', [panel])
})
This is pretty much all code you need for accordion you are building, with exception of animation effects
Notice that it requires you to slightly change markup:
common .panel class added for panels
another one .panelHeader for icons
icon has data-target attribute with ID of panel to open.
instead of hide-me class to hide panel, cssClass should hold name of css class to open active one
example markup:
<div>
<i class="panelHeader ecGlobalNavStudentIcon"
data-target="ecGlobalNavStudentPanel">Student</i>
<i class="panelHeader ecGlobalNavStuffIcon"
data-target="ecGlobalNavStaffPanel">Stuff</i>
</div>
<div id='ecGlobalNavStudentPanel'
class="panel ecGlobalNavStudentPanel">...</div>
<div id='ecGlobalNavStaffPanel'
class="panel ecGlobalNavStaffPanel">...</div>

Something like this would work:
$('.ecGlobalNavStudentIcon, .ecGlobalNavStaffIcon').click(function(e){
var n = 'hideme'
var m = $(e.target).hasClass('ecGlobalNavStudentIcon') ? $('#ecGlobalNavStudentPanel') : $('#ecGlobalNavStaffPanel');
var p = $(e.target).hasClass('ecGlobalNavStudentIcon') ? $('#ecGlobalNavStaffPanel') : $('#ecGlobalNavStudentPanel');

$('.ecGlobalNavStaffIcon, ecGlobalNavStaffIcon').click(function(e){
var n = 'hideme';
if this.hasClass('ecGlobalNavStaffIcon'){
var m = $('#ecGlobalNavStudentPanel')
var p = $('#ecGlobalNavStaffPanel')
}
else {
var m = $('#ecGlobalNavStaffPanel')
var p = $('#ecGlobalNavStudentPanel')
}
...
}
if you need, just apply a param and then use the same code (example: $('#'+myParamToSelect).function()

how to add a value onto the url using javascript var

Is there a way to add the select-result on the url when the pop up window appears? The select-result gives the value of the boxes selected and i want to pass the values selected gto a form but i am not ussing a form. can i pass the values ussing the url?
i want to add the selected values like form.php?id=2882,222,22412,23
$(function() {
$(".selectable").selectable({
filter: "td.cs",
stop: function() {
var result = $("#select-result").empty();
var result2 = $("#result2");
$('.ui-selecting:gt(31)').removeClass("ui-selecting");
confirmation($(".ui-selected").length + " box selected. " + ($(".ui-selected").length));
function confirmation() {
var answer = confirm($(".ui-selected").length + " box selected. " + ($(".ui-selected").length));
if (answer) {
window.open("form.php", "mywindow", "menubar=no,resizable=no,width=650,height=700");
}
else {}
}
$('#divmsg').html($(".ui-selected").length + " box selected")
$('#divmsg2').html($(".ui-selected").length)
if ($(".ui-selected").length > 90) {
alert("Selection of only 90 boxes allowed");
$('#divmsg').html($('#divmsg').html() + ",<br><b>Message: Selection of only 90 pixels allowed!!</b>");
$(".ui-selected").each(function(i, e) {
if (i > 3) {
$(this).removeClass("ui-selected");
}
});
return;
}
$(".ui-selected", this).each(function() {
var cabbage = this.id + ', ';
result.append(cabbage);
});
var newInputResult = $('#select-result').text();
newInputResult = newInputResult.substring(0, newInputResult.length - 1);
result2.val(newInputResult);
}
});
});​
this is the fiddle http://jsfiddle.net/dw6Hf/57/
i have tried
window.open ("form.php?id="+ select-result, "mywindow",....
but it won't work!! any idea???
Thanks in advance ​

If you're asking what I think you're asking, and selectable does what I think it does, then try this:
window.open("form.php?id=" + $('#select-result').text(), "mywindow", "menubar=no,resizable=no,width=650,height=700");
If that doesn't work, then I've obviously misunderstood your answer. I'd suggest clearing it up, and maybe getting a working example up and running for us to see.

Firstly the fiddle you have posted is broken. But no worries i have fixed it along with the solution at http://jsfiddle.net/paragnair/dw6Hf/61/
I have added the following line:
var selectedIds = $.map($('.ui-selected'),function(a){ return $(a).attr('id');}).join(',');
The above line gets the list of ids for all the elements which have the class ui-selected. Then you can append the variable selectedIds to window.open like so:
window.open("form.php?id=" + selectedIds, "mywindow", "menubar=no,resizable=no,width=650,height=700");

Why is my JavaScript code not working?

I keep getting the "Syntax Error: Unexpected identifier" JS error with this code:
function hashStuff() {
var messageID = window.location.hash.replace('#inbox-', '');
var msgSubject = $('#subject_' + messageID).html();
setTimeout("readMessage2(" + messageID + ", " + msgSubject + ");", 300);
}
if (window.location.hash) {
setTimeout("hashStuff();", 400);
}
I've also tried:
if (window.location.hash) {
function hashStuff() {
var messageID = window.location.hash.replace('#inbox-', '');
var msgSubject = $('#subject_' + messageID).html();
setTimeout("readMessage2(" + messageID + ", " + msgSubject + ");", 300);
}
setTimeout("hashStuff();", 400);
}
Neither of them work.
What I was trying to do was get information from the elements but I guess the page wasn't loaded yet so I need it to trigger after a second. I put it in a function so I can use a timeout and it will not work.
Any ideas? Thanks in advance.

If your messageID is something like 1234 and the msgSubject is Hello World, then the statement being evaluated is:
readMessage2(1234, Hello World);
Which, clearly, is incorrect and error-inducing.
The correct code is:
setTimeout( function() {readMessage2(messageID,msgSubject);}, 300);

You can run the script inside $(document).ready(function() {//script here}); . That will make sure that it is run after all the elements have loaded.

try wrapping your code inside ready block:
$(document).ready(function () {
//your code
});

jQuery .load (or $.ajax) to get and set page title?

So far...
$('#container').load(hash + ' #page','', function() {
$('#container').fadeIn('fast');
document.title = $('#title').load(hash + ' #title').text();
});
...doesn't work.
Is there a better/correct way to do this?
FYI: -
I've added the ID #title the tag (all pages/it's a PHP template).
The container is .fade(ed)Out beforehand (less important)
Thanks in advance.

The problem is that, at the time you assign to document.title, the $('#title').load(hash + ' #title').text() might not have finished yet. Try setting the new document.title in the callback of that .load.
UPDATE
Try:
$('#container').load(hash + ' #page','', function() {
$('#container').fadeIn('fast');
$('#title').load(hash + ' #title', '', function(data) {
document.title = $(this).text();
});
});

I had the same requirement, to update the title for the page after ajax loads and that's what I used – one request, no need to set special attributes in your HTML:
var contentWrap = $('#content-wrap'),
contentId = '#content';
$.ajax({
url: hash.replace(/^#!\//, '') + '.html',
success: function(text) {
var oldContent = contentWrap.find(contentId),
newPage = $(text),
newContent = newPage.find(contentId);
oldContent.remove();
contentWrap.append(newContent);
// Set New Title
document.title = newPage.filter('title').text();
}
});

Do this :
$('#container').load(hash + ' #page','', function(result) {
$('#container').fadeIn('fast');
document.title = $(result).find('#title').text();
});
:)

We wanted to have an effect such that when someone visits our website, one should see the individual page's Title but when you move away, you can see "We'll still miss you... :)" using the below code:
<!-- Active Navigation Script -->
<script>
var url = window.location;
$('ul.nav a[href="'+ url +'"]').parent().addClass('active');
$('ul.nav a').filter(function() {
return this.href == url;
}).parent().addClass('active');
</script>
<!-- Tab Title change Script -->
<script>
$(function() {
// Get page title
var pageTitle = $("title").text();
// Change page title on blur
$(window).blur(function() {
$("title").text("We'll still miss you... :)");
});
// Change page title back on focus
$(window).focus(function() {
$("title").text(pageTitle);
});
});
</script>
You can see this in action here: http://www.solutelabs.com

Try below code:
.**filter**('title').text()
$('#container').load(hash + ' #page','', function(result) {
$('#container').fadeIn('fast');
document.title = $(result).filter('title').text();
});