Develop Reference

jQuery function not started

I have a weird problem. I have a freight calculation field to be executed if the User deletes a digit input , I hide one content. While running the script in chrome console, it is loaded, but when using the call in html, js it does not run. This is what I have.
https://jsfiddle.net/diasbass/u3xr0921/
jQuery(document).ready(function($) {
$("#btnFreteSimulacao").click(function() {
$("#txtCep").keyup(function() {
if ($("#txtCep").val()) {
$('p.montagem').hide();
} else {
$('p.montagem').show();
}
});
});
});

The keyup event handler is inside the click function, probably it is of no use.
Also need to check $("#txtCep").val().length for showing and hiding the p.montagem
jQuery(document).ready(function($) {
$("#txtCep").keyup(function() {
if($("#txtCep").val().length ==0) {
$('p.montagem').hide();
} else {
$('p.montagem').show();
}
});
});
jsfiddle

Here you are mixing two asynchronous events 1) Button click 2) Input keyup. Your code expects to work when both are happening same time. I would suggest remove dependency on one event. Like below.
$( "#btnFreteSimulacao" ).click(function() {
// $("#txtCep").keyup(function() {
if($("#txtCep").val()) {
$('p.montagem').hide();
} else {
$('p.montagem').show();
}
});
// });
});
If thats not possible, try to look towards promises.

automatic clicks on links and doing something with every page's DOM

i have some links in a web page ,what i want to do :
Trigger click event on every link
When the page of every link is loaded , do something with page's DOM(fillProducts here)
What i have tried :
function start(){
$('.category a').each(function(i){
$.when($(this).trigger('click')).done(function() {
fillProducts() ;
});
})
}
Thanks

What you want to do is much more complicated than you seem to be giving it credit for. If you could scrape webpages, including AJAX content, in 7 lines of js in the console of a web browser you'd put Google out of business.
I'm guessing at what you want a bit, but I think you want to look at using a headless browser, e.g. PhantomJs. You'll then be able to scrape the target pages and write the results to a JSON file (other formats exist) and use that to fillProducts - whatever that does.
Also, are you stealing data from someone else's website? Cause that isn't cool.

Here's a solution that may work for you if they are sending their ajax requests using jQuery. If they aren't you're going to need to get devilishly hacky to accomplish what you're asking (eg overriding the XMLHttpRequest object and creating a global observer queue for ajax requests). As you haven't specified how they're sending the ajax request I hope this approach works for you.
$.ajaxSetup({
complete: function(jQXHR) {
if(interested)
//do your work
}
});
The code below will click a link, wait for the ajax request to be sent and be completed, run you fillProducts function and then click the next link. Adapting it to run all the clicks wouldn't be difficult
function start(){
var links = $('.category a');
var i = 0;
var done = function() {
$.ajaxSetup({
complete: $.noop//remove your handler
});
}
var clickNext = function() {
$(links.get(i++)).click();//click current link then increment i
}
$.ajaxSetup({
complete: function(jQXHR) {
if(i < links.length) {
fillProducts();
clickNext();
} else {
done();
}
}
});
clickNext();
}
If this doesn't work for you try hooking into the other jqXHR events before hacking up the site too much.
Edit here's a more reliable method in case they override the complete setting
(function() {
var $ajax = $.ajax;
var $observer = $({});
//observer pattern from addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjquery
var obs = window.ajaxObserver = {
subscribe: function() {
$observer.on.apply($observer, arguments);
},
unsubscribe: function() {
$observer.off.apply($observer, arguments);
},
once: function() {
$observer.one.apply($observer, arguments);
},
publish: function() {
$observer.trigger.apply($observer, arguments);
}
};
$.ajax = function() {
var $promise = $ajax.apply(null, arguments);
obs.publish("start", $promise);
return $promise;
};
})();
Now you can hook into $.ajax calls via
ajaxObserver.on("start", function($xhr) {//whenever a $.ajax call is started
$xhr.done(function(data) {
//do stuff
})
});
So you can adapt the other snippet like
function start(){
var links = $('.category a');
var i = 0;
var clickNextLink = function() {
ajaxObserver.one("start", function($xhr) {
$xhr.done(function(data) {
if(i < links.length) {
fillProducts();
clickNextLink();
} else {
done();
}
});
})
$(links.get(i++)).click();//click current link then increment i
}
clickNextLink();
}

try this:
function start(){
$('.category a').each(function(i){
$(this).click();
fillProducts() ;
})
}

I get ya now. This is like say:
when facebook loads, I want to remove the adverts by targeting specific class, and then alter the view that i actually see.
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
Is a plugin for firefox, this will allow you to create a javascript file, will then allow you to target a specific element or elements within the html rendered content.
IN order to catch the ajax request traffic, you just need to catcher that within your console.
I can not give you a tutorial on greasemonkey, but you can get the greasemonkey script for facebook, and use that as a guide.
http://mashable.com/2008/12/25/facebook-greasemonkey-scripts/
hope this is it

Same browser version, 2 different javascript handlings

Problem solved: I removed the first function as it wasn't needed anyways, and now it all works in all browsers. Thanks for the posts though!
My issue here is that I have a javascript which on one server runs perfectly with no issues what-so-ever in IE. But on another server gives me 2 errors in IE.
It claims that my offset().top is either Null or not an object.
My fade in and out effect doesn't even become active.
Then I have another HUGE issue, which is that in FireFox NON of it all works.
OPS: This is a webpart, so additional javascripts running on the site might could intervene with the javascript I am trying to execute here. But I'm not sure.
I've tested this webpart in IE 8.0.7600.16385, on both servers.
Script:
<script type="text/javascript"
src="/_layouts/Progressive/Javascripts/jquery-1.4.3.js"></script>
<script type="text/javascript">
(function($) {
$.fn.goTo = function() {
// This is where IE on the second server claims the error to be.
$('html, body').animate({scrollTop: $(this).offset().top + 'px'}, 'fast');
return this;
}
})(jQuery);
function showParagraphs(sender) {
var id = sender.getAttribute('href');
if ($('#<%=paragraph.ClientID%>').hasClass("readable")) {
$('#<%=paragraph.ClientID%>').removeClass("readable");
highlightSelected(id);
}
else {
$('#<%=paragraph.ClientID%>').addClass("readable");
rmvClass(id);
}
};
function highlightSelected(id) {
$(id).goTo();
$(id).addClass("reading");
// This part is what isn't activated on the second server.
$('.reading').fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400);
// .reading only adds a gray background to the DIV.
};
function rmvClass(id) {
$('div').each(function() {
if ($(this).hasClass("reading")) {
$(this).removeClass("reading");
}
});
}
function toTop() {
$('div').each(function() {
$(this).removeClass("reading");
});
$('#<%=paragraph.ClientID%>').addClass("readable");
}
$(document).ready(function() {
$('#<%=q.ClientID%>').find('dd').hide().end().find('dt').click(function() {
$(this).next().slideToggle("fast");
});
$("#<%=q.ClientID%> dt").click(function() {
if ($(this).hasClass("selected")) {
$(this).removeClass("selected");
}
else {
$(this).addClass("selected");
}
});
});
</script>
Any thoughts or suggestions?

When
$(id)
returns an empty jQuery object, then ".offset()" will return null. You're calling that "highlightSelected" code with the "href" value from something, so perhaps what you think to be an "id" value that corresponds to something on the page, well it really doesn't. It's hard to know for sure, however, because you did not post any of the relevant HTML, nor did you even show where "showParagraphs()" is called!

Help me diagnose this jQuery loop / Bookmark Hash problem?

I'm having some trouble getting my jquery to render correctly 100% of the time - the code I am using is located below. Its purpose is to "simulate" the feel of a threaded forum by hiding everything but the subject of replies - when a subject is clicked, the 1st post is then replaced with the reply.
You can see an example of it in action here:
http://bulldogsworld.com/general-bulldog-chat/50-lbs-bulldog-one-shin-pic
The problem is the script doesn't work so well when people land via a bookmark # in the URL, such as:
http://bulldogsworld.com/general-bulldog-chat/50-lbs-bulldog-one-shin-pic#comment-1627028
Specifically, the problem which happens is for some reason all posts below the bookmark entry point are replicated twice. I can't figure out why this is happening - any thoughts?
I'm pulling my hair out on this one - Any help / guidance is greatly appreciated!
function flip(comment) {
$('#first-post').replaceWith(comment.closest(".comment").clone().attr('id','first-post'));
$('#first-post').children('.forumthreadtitle').children('.comment-info').empty();
$('#first-post').find(':hidden').fadeIn('slow');
$('html, body').animate({scrollTop:0}, 'fast');
return false;
}
$(document).ready(
function(){
$('.submitted').each(function() {
$(this).clone().addClass('comment-info').appendTo($(this).siblings('.forumthreadtitle'));
if(!$(this).parent('#first-post').html()) {
$('#first-post').children('span.taxonomy').clone().appendTo($(this));
}
});
$('.display_mode').html('Show All Replies');
expandedMode = false;
$('.display_mode').click(function() {
if ( expandedMode == false ) {
$('.forumthreadtitle').siblings().show();
$(this).html('Collapse Replies');
expandedMode = true;
}
else
{
$('.forumthreadtitle').siblings().hide();
$(this).html('Show All Replies');
expandedMode = false;
}
});
$('.forumthreadtitle').siblings().hide();
if(window.location.hash) {
flip($(window.location.hash).nextAll().children('.forumthreadtitle').show());
}
$('.forumthreadtitle').click(function() {
pageTracker._trackPageview("/comment?page=" + document.location.pathname);
flip($(this));
} );
});

You probably need to use next() instead of nextAll() in your flip
flip($(window.location.hash).next().children('.forumthreadtitle').show());
nextAll() returns all elements after selected, and they all are passed to flip function.

How to — callback functions

I have a big problem writing a small piece of code using JS/jQuery (don't know which of these is causing the problem). Anyhow, here we go:
$('#themePicker').unbind().click(function() {
var t = $(this);
modalwindow2(t, function() {
console.log(1);
}, function(w) {
console.log(w);
});
return false;
});
and the function itself:
function modalwindow2(w, callbackOnSHow, callbackOnHide) {
if (typeof(callbackOnSHow) == 'function') {
callbackOnSHow.call();
}
// do some stuff //
$('form').submit(function() {
ajaxSubmit(function(data) {
if (typeof(callbackOnHide) == 'function') {
console.log('---------------');
console.log(data);
console.log('---------------');
callbackOnHide.call(data);
}
});
return false
});
}
The function is called modalwindow2 and I want to call a function when the modal is shown and another function when the modal will be hidden.
The first is not a problem.
The second… Well… Let's just say it's a problem. Why?
I want a parameter sent to the second function. The paramenter is an ajax response, similar to other jQuery stuff (ajax action, sortable, etc).
I hope I made myself clear enough.
Thanks!
Edit:
I'm using jQuery 1.1.2 (or 1.1.3) and upgrading or using jQuery UI is NOT a solution. I have some dependencies (interface is one of them) and i don't have enough time (nor motivation) to upgrade to 1.3 & UI 1.7.

I noticed that you have a typo on .submit:
$('form').submti(function(){
Was that just an entry error to SO?
EDIT:
Ok, so after looking at your code and doing a short test, I've come up with this (pardon the pun):
function modalwindow2(w, callbackOnShow, callbackOnHide) {
if(typeof callbackOnShow == 'function') {
callbackOnShow.call();
}
$('form').submit(function() {
if(typeof callbackOnHide == 'function') {
callbackOnHide.call(this, "second");
}
});
}
$(document).ready(function (){
$('#themePicker').click(function(){
var t=$(this);
modalwindow2(t, function() { alert("first"); }, function(x) { alert(x); });
return false;
});
});
It looks like you may have just been missing the "this" in your call() statement. Try using callbackOnHide.call(this, data);
Let me know if that works any better!

I understand what you are trying to do, but you will need to store the newly created window so that you can access it on the close callback function.
You might want to look at jQuery UI Dialog. It provides some really basic functionality for dialog windows (modal and otherwise) and handles some of the callback implementation.