I'm building a web application that is extendable by dropping scripts into a preset directory. The script needs to read file headers before going to a page, so I need to use .preventDefault() when links are clicked and run some JScript first. Unfortunately I can't get past the .preventDefault()
Here's my link format:
Some Text
here's the jquery I'm trying to use to stop the default action:
$( '.filelink' ).click( function( e ) {
e.preventDefault();
//do some other stuff here
});
EDIT:
More Info:
The <script>...</script> is in my footer.
This function is INSIDE $(document).ready AFTER a $.ajax call that builds the list of links this function is trying to listen for clicks of.
Since your links are appended dynamically to the page, you need to use document.on() to capture the click events.
the syntax for appending event listeners to dynamic content is as follows
$(document).on( event, selector, callback );
so your click handler would become:
$(document).on('click','.filelink',function(e){
e.preventDefault();
//code here
return false;
});
I think you missed
$(document).ready()
Please update your code as following:
$(document).ready(function(){
$( '.filelink' ).click( function( e ) {
e.preventDefault();
//do some other stuff here
});
})
is your code surrounded by:
$(function(){
//your code here
});
? or
$(document).ready(function(){
//your code here
});
? , because you should wait until the <a></a> element is ready before adding your click listener to it. try the code above or place your code at the bottom of the html right before the </body> tag or just right after the <a></a> element. that should work
EDIT: since your links are added dynamically call your $( '.filelink' ).click() function right after they are added
I had the same problem, because I changed the window.location.search in my event handler:
$( '.filelink' ).click( function( e ) {
e.preventDefault();
window.location.search = "something";
});
To fix my problem I used window.location.hash (which is more what I wanted anyway).
For me, the issue was a syntax error in the Javascript code.
I substituted a php variable to one of the JS variable like below,
var myvar = "<?php echo $myvar; ?>";
which produced the below result,
var myvar = "value in "myvar" which is not escaped";
It worked when I escaped the variable.
Please check if there is any syntax error in your code.
Related
I have a simple div in one of my views that I want to click to hide another element on the page. I put this in my application.js But it doesn't do anything. Did I put it in the wrong place?
function toggleNewPostForm {
$('.new-post-btn').hide();
}
Use document ready to make sure document is loaded before selecting an element from HTML and call your function inside
function toggleNewPostForm(){
$('.new-post-btn').hide();
};
$( document ).ready(function() {
toggleNewPostForm();
});
Try something like this
<div class="xyz">Click here!</div>
in javascript
$(".xyz").click(function(){
$('.new-post-btn').hide();
});
Also check if event listener is added after document ready method? i.e
$(function(){
$(".xyz").click(function(){
$('.new-post-btn').hide();
});
});
If this is the only js you have, there will be no click-behaviour. You have to tell the element, that is has to react to a click-event.
Try this in your application.js-file:
function toggleNewPostForm() {
$('.new-post-btn').hide();
}
$(document).on('ready page:load', function(){
$('.new-post-btn').on('click', function(){
toggleNewPostForm();
});
});
P.S.: As RGraham points out, you have to write the parameter-paranthesis if you define a function.
P.P.S.: In ruby on rails, you should check against 'ready' and 'page:load' as document-ready-handlers, because Ruby on Rails uses the "Turbolinks"-library by default.
I would like to trigger a javascript function when a specific URL is available on the page.
The url looks like:
I would like to use jQuery to detect the url and launch an event.
I have come this far:
$( 'a[href="https://www.mypage.com/my-page/details.jsp"]' ).bind( "click", function() {
alert( "yoehoe" );
});
But it doesn't trigger the alert on a click. on the specific href. Can anyone help me on this one?
You need to wrap the code in document.ready to ensure that event gets bind to respective elements once they are there on page.like this:
$(document).ready(function(){
$( 'a[href="https://www.mypage.com/my-page/details.jsp"]' ).bind( "click", function() {
alert( "yoehoe" );
});});
Demo
Alternatively, You can also use .on() with .click if dom is generated dynamically.like this:
$(document).on("click",'a[href="https://www.mypage.com/my-page/details.jsp"]',function() {
alert( "yoehoe" );
});
I've been looking at this plugin here
http://roblaplaca.com/blog/2013/01/21/custom-styled-select-boxes/
In the instructions it says you can disable the list using this disable()
I added a button to the example 1 and have been trying to get the list to disable when the button is clicked to no avail.
I'm trying
$( document ).ready(function() {
$( "#start" ).click(function( ) {
$("customSelect").disable("custom","disabled");
});
#start being the button id I am trying to use to disable the list
What am I doing wrong here? Using example1 template.
CustomSelect is either a class or a variable; you're using it as a html element which is incorrect. Either remove the quotes (if it's a variable) or add a dot before it (if it's a class).
According to their documentation
disable() Disables interactivity
.disable() does not take any parameters as you are trying to use, instead try this:
$( document ).ready(function() {
$( "#start" ).click(function( ) {
$("customSelect").disable();
});
});
in addition, your customSelect is not a valid selector unless you have an html element named customSelect, which I doubt. More than likely its the ID of the element you want, in which case you should use:
$( document ).ready(function() {
$( "#start" ).click(function( ) {
$("#customSelect").disable();
});
});
you also may want to consider storing a reference to the list when you intialize it, much like this example from their docs:
<script>
var sb = new SelectBox({
selectbox: $("select.custom").eq(0)
});
sb.jumpToIndex(3);
sb.disable();
</script>
then you can call .disable on that reference you stored... will definately work that way.
try this one......
$("input").prop('disabled', true);
$("input").prop('disabled', false);
I have two span elements in a page. when I call a jquery double click function on both then the function is called only on first element. I am using the following code:
<span id="shiftTime_1">1</span>
<span id="shiftTime_2">1</span>
and jquery function is:
$("[id^='shiftTime_']").dblclick(function() {
alert("hello");
});
when I double click on the element Id of shiftTime_1. then the function works fine. But when I double click on element Id of shiftTime_2 then this function does not respond.
Please help.
Thanks
Use .on if you plan to add elements dynamically (e.g. by using $( "body" ).append( "<span id='shiftTime_2'>1</span>" ); )
$( "body" ).on( "dblclick", "span", function() {
alert( "This works also with dynamically added elements" );
} );
try use inside $(document).ready()
$(document).ready(function(){
$("[id^='shiftTime_']").dblclick(function() {
alert("hello");
});
});
When I try the code, it works just fine:
http://jsfiddle.net/Guffa/pfQfK/
Check if there is something different from your code.
I have a div I'm creating dynamically, with a unique id. I append() that to an area on the page.
Later, I try to reference that via $( '#id_here' ), but it returns nothing. Inspector in safari/chrome shows the existence and proper id of the element.
<script>
$( '#box' ).append( '<div><input id="id123" /></div>' );
//Later on in time...
function doingStuff(){
alert( $( '#id123' ) );//undefined
}
</script>
<div id="box">
</div>
Make sure that you append the object not before the DOM is ready, otherwise you will probably not able to access #box yet.
$( document ).ready( function()
{
$( '#box' ).append( '<div><input id="id123" /></div>' );
} );
You're doing it right, it's just your alert statement that might be a bit off. Currently, your passing the jquery result to the alert(), which just reports "[object Objerct]" (in Chrome anyway. It'll differ for each browser).
Try:
alert($("#id123").val());
That would alert the value in the text box.
or
alert($("#id123")[0].id);
That would alert the id of the input (id123).
Perhaps you have an error elsewhere in your code? What you've posted works fine.
UPDATE
As others have pointed out (and I missed), your script is running before the div is appended to the document, hence the "undefined". Preventing your script from running by wrapping everything in:
$(document).ready(function()
{
// Script here
});
is the way to go.
Tell jQuery to wait for the document to be ready before appending the div. This way, the document (and #box) is loaded and ready to be used before jQuery starts with its work. You do this by doing:
$(document).ready(function() {
$( '#box' ).append( '<div><input id="id123" /></div>' );
});
You can keep the rest of the code as it is
Comments on my poorly hacked together and un-tested example were all fair.
Turns out my problem was a special character in my div id.
It's been a long day.
The best way I've used to get arround that type of problems is to use .live() from Jquery, which attaches a handler to the desired event to be used on existent elements or elements to be created later on (like .append())...
Ex.:
$('#box').append('<div><input id="id123" /></div>');
$('#id123').live('click', function() {
// Your Desired Code for that ID
});
Read more about this at: Jquery .live()