JS Breakpoint doesn't get hit, but code executes - javascript

I have an unsual problem and working on it since hours. My breakpoint doesn't get hit within the function yet the functionality works, it is driving me crazy. I have tried this with both Chrome/developer tools and Firefox/Firebug. I never had something like this before.
The first breakpoint hits when I click on the button New Conversation.
But then when I click on Cancel Button that comes through the jquery .load() the break point doesn't hit. Yet the functionality behind it executes (the div gets emptied).
What am I missing please?
function cancel_new_conversation(event){
//2nd Breakppoint below this line doesn't get hit, but the empty() statement works.
event.preventDefault();
$('#new_conversation_div').empty();
}
function new_conversation(event){
event.preventDefault();
var url = $(this).attr("href") + "/";
$('#new_conversation_div').load(url, function(){
//1st Breakpoint gets hit.
$('#new_conversation_cancel_button').click(cancel_new_conversation);
});
}
$(document).ready(function (){
$('#new_conversation_button').click(new_conversation);
}
Is there anything I am doing that breaks the javascript somehow?
EDIT:
Good idea with the alerts. here is the proof. Maybe its an environment issue? I have to try it on a different machine.

After lunch yesterday in my infinite wisdom I had my partial html that I was meant to load with $('#new_conversation_div').load(url, function() designed as a full blown html with header and body.
Hence once it was loaded into my div, the html markup became completely a mess (two headers, two bodies)
I moved the javascript file from the corrupted partial html into my main html and removed the header and body from the partial html. Now that I .load() the partial html, it all works as expected and the breakpoint hits. It was very hard to find.
Hope this helps someone else.

The only problem i can see in your code is that you don't unbind click event on #new_conversation_cancel_button when loading a new conversation.
If you use jquery >1.7, you should test following code:
function cancel_new_conversation(event){
//2nd Breakppoint below this line doesn't get hit, but the empty() statement works.
event.preventDefault();
console.log("cancel_new_conversation");
$('#new_conversation_div').empty();
}
function new_conversation(event){
event.preventDefault();
var url = $(this).attr("href") + "/";
$('#new_conversation_div').load(url, function(){
//1st Breakpoint gets hit.
$('#new_conversation_cancel_button').off('click').on('click',cancel_new_conversation);
});
}
$(document).ready(function (){
$('#new_conversation_button').on('click',new_conversation);
});
​

Related

Code claims function does not exist only if it is called from html-set onclick event

I have a very strange issue preventing my code from firing a JQUERY function - but only if the event is declared in an onclick attribute tag within the page's html. If that same function is assigned to an element with a javascript ".click(function()..." event, then the function is called properly and the code doesn't say "This event doesn't exist!", essentially.
I trawled through the internet looking for someone with the same issue, and while there are a lot of questions that look superficially like the issue I am having, none seem to address it exactly.
Here is an example:
//Delete an existing exclusion.
$.fn.deleteExclusion = function (idExclusion) {
document.cookie = idExclusion + "=; expires=; path=/";
$.fn.buildExclusions();
}
If I call this method by saying:
$("#someButton").click(function(){
$.fn.deleteExclusion();
)
... then the function exists and is run properly.
However, if I assign this function as follows (created on page load as part of page html):
Some Button
... then the function doesn't exist when I click that link.
This does not happen for one of my company's websites, which uses ASP.NET .aspx page structures. However, I am working on a new MVC application, which is where this behavior is occurring.
I am stumped, frankly. Right now, I am not sure what else to provide code-wise to demonstrate, without probably overdoing it with unnecessary details. Please let me know if you need additional code to help me figure this out.
You need to include Jquery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
jQuery(document).ready(function($){
$.fn.deleteExclusion = function (idExclusion) {
document.cookie = idExclusion + "=; expires=; path=/";
$.fn.buildExclusions();
}
});
We found a workaround. To get this working, we added:
//Set onclick events for delete exlusion anchor tag buttons created dynamically.
$(document).on("click", "a.deleteExclusion", function () {
$.fn.deleteExclusion($(this).attr("id").replace("delete", ""));
});
This created the onclick event on page load, but applied it to elements as they were created. It allowed elements created in our cshtml file initially, along with dynamically created html elements, to have a working click event.

How to guarantee that a script in the middle of the body runs after all the DOM has finished load

In my <body> I have a component that inserts a script that is supposed to run only after all the page has completely loaded:
<script>
$('<script id="smallPlacarScriptdId">\
$(window).load(function() {\
$(".main.right").hide();\
$("#rightzero").show();\
$(".comp.smallPlacard.firstChild").click(function () {\
var clicked = $(this).parent().attr("id");\
$("main.right").hide();\
$("#right"+clicked+"").show();\
});\
})\
<\script>').appendTo("body")
</script>
That's not happening and this script (1) is correctly inserted into the DOM but (2) is not working (not hiding .main.right nor showing #rightzero).
I though that by using this approach I would guarantee that it would be the same as just put this script at the bottom of the <body> but it isn't. In fact if I put it (not dynamically like this) in my page it produces the desired result.
I tried setTimeout() to validate my theory but I'm getting an error in jQuery and I'm lost.
That might be the problem:
<\script>').appendTo("body")
Browser might think you are actually closing your script tag. Change it to
</' + 'script>').appendTo("body")
Check this plunker out: http://plnkr.co/edit/Oc6yrFMdPoW2WV257CBQ?p=preview
Just use this code
<script id="smallPlacarScriptdId">
$(window).load(function() {
$("main.right").hide();
$("#rightzero").show();
$(".comp.smallPlacard.firstChild").click(function () {
var clicked = $(this).parent().attr("id");
$("main.right").hide();
$("#right"+clicked+"").show();
});
})
</script>
Sorry I didn't read you question well enough.
Javascript will allow you to access undeclared variables, so use that to your advantage. Check if a variable is set, undefined is treated as a false so no need for initialization. As soon as you enter the code just set it to true so nothing else will execute.
Hopefully this solves the problem for you, but you really should look at from the server avoiding the javascript, it will bloat the page.
<script>
if (!myScriptHasLoaded)
{
myScriptHasLoaded = true;
$(window).load(function() {
$("main.right").hide();
$("#rightzero").show();
$(".comp.smallPlacard.firstChild").click(function () {
var clicked = $(this).parent().attr("id");
$("main.right").hide();
$("#right"+clicked+"").show();
});
});
}
</script>

Listen to mousemove only after document loads

I'm trying to use a script called Socialite in my Wordpress site to make social share buttons appear only after the user has moved his/her mouse AND the document already loaded.
I can't get it to work together. My current script, that does work, is:
jQuery(document).one("mousemove", function() {
var social_container = jQuery('.social_buttons');
Socialite.load(social_container);
});
But how do I connect the document load part?
Thanks
Have you tried to put your code into
jQuery(document).ready(function(){/* your code goes here*/});
?
For starters you have a small typo in the first line
jQuery(document).one("mousemove", function() {
You're calling .one("mous...
It should be .on("mous...
Next considerations is that the document ready statement below will happen before images etc have loaded
$(document).ready(function(){
// your code goes here.....
});
using a window load statement like below waits until everything i.e.images have loaded in full
$(window).load(function(){
// code here.....
});
I'm not sure what would suit your needs best as I have no experience with Socialite but hopefully this will give you the answers you need.

Javascript event handler (mouseover) not firing

I have a homepage that dynamically writes javascript in order to handle the mouseover of potential user choices. However, the .bind("mouseover",function()) does not seem to be working.
The PHP produces a script like this:
<script type="text/javascript">
function setPreview(art, title, rt, excerpt) {
$("#boxPreview").attr("src", art);
$("#selectedTitle").text(title);
$("#runningTime").text(rt);
$("#excerpt").text(excerpt);
}
$(document).ready(function() {
$("#tb0").bind("mouseover",setPreview(url,title,running time,excerpt));
$("#tb1").bind("mouseover",setPreview(url,title,running time,excerpt));
$("#tb2").bind("mouseover",setPreview(url,title,running time,excerpt));
$("#tb3").bind("mouseover",setPreview(url,title,running time,excerpt));
</script>
However, it seems that the mouseover event never fires. Instead, it seems that when the page is fully loaded, setPreview is run for the very last element (#tb3).
I have no idea what I'm doing wrong. If you would like to see the page in action for yourself, you can view it here.
You may try writing the same code like this
$("#tb0").bind("mouseover" , function(){
setPreview(url,title,running time,excerpt);
});
This may solve your issue. Because i've got same issue before but it was fixed writing this way.

jQuery - Click on X, grab the NAME, then use that to show a related element

Here's what's happening.
My page loads. Then jQuery loads a feed which is injected into a contentCol div...
in that feed is:
Comment
There is also:
<div class="storyItemComments" id="storyItemComments_66" style="display:none;">....
For some reason this is not working:
$(".commentWrite").live("click",function(){
cmt2open = $(this).attr('name');
$("#" + cmt2open).show();
return false;
});
Any ideas? The only thing I can think of is that it has something to do with the fact that I am using jQuery AJAX to load in the content which the LIVE statement above is referencing....
thanks
on most occasions people should use the die() function before the live... so that will clear any previews instructions and that function is only triggered once...
another thing could be that the instructions are called before the contents are retrieved from the ajax. therefore you should use .success to check if the ajax was successfully loaded and then trigger the click instructions.
as it seems that the <div id="storyItemComments_66" has not been picked up from the DOM.
Following from your comment to this answer
Can you try the following instead of show()?
$("#" + cmt2open).attr('display', 'block');
Can you place your javascript inside;
$(document).ready(function(){
//your code here
});
Not sure this will fix it but it's good practice I find.
Also have you alerted out your variables to see what you get?
What is the error you are getting if any?
Have you tried putting an alert at the top of the function to see if the click event works?
edit
let me know if the above does not fix it and I'll remove this answer to clear out the noise

Categories

Resources