<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("a").click(function() {
$("#myDiv").load( "job_board_data.php", { pageNo: $(this).text()} );
return false;
});
});
</script>
1
How can I pass variables to my job_board_data.php script???? I want to pass variables such as page, sort by .. anyone?
$(document).ready(function() {
$("a").click(function() {
$("#myDiv").load("job_board_data.php", { pageNo: $(this).text()} );
return false;
});
});
In that code, when a user clicks on a link, you are loading the contents of the response for "job_board_data.php?pageNo=1" into a div.
job_board_data.php sees this as a regular HTML url call, so it would put the parameters (that you specified in the second parameter of $.load.
for example, using your above .load statement:
$_POST['pageNo']
will return
"1"
$('a').click(function () {
$('#myDiv').load($(this).attr('href'));
}
Related
I have a function that works on the body onload="" but I need it to load before other elements of the page and I'm trying to add the document ready function in the header but it just doesn't seem to work.
f1menu() {
$('.menuH').hover(
function() {
$('.menuC').stop().animate({width: '90px'},333)
},
function() {
$('.menuC').stop().animate({width: '-0'}, 333)
}
);
}
$(document).ready(function() {
f1menu();
});
So the onload function that works is just this one below:
onload="$('.menuH').hover(function() {$('.menuC').stop().animate({width: '90px'}, 333)}, function() {$('.menuC').stop().animate({width: '-0'}, 333)});"
Note that the following answer was provided before the OP changed the question.
You should write:
function f1menu(){}
not,
f1menu(){}
In addition, you can streamline your document.ready code by simply passing the function that you want called when the document is ready, directly to jQuery:
$(function() {
$('.menuH').hover(
function() {
$('.menuC').stop().animate({width: '90px'}, 333);
},
function() {
$('.menuC').stop().animate({width: '-0'}, 333);
}
);
});
UPDATE:
After OP revised the question, the solution (not a recommended approach by the way) would be to just insert the script into the body of the page, but AFTER any elements that the function references, such as:
<body>
<!-- elements that the code references must come before the code -->
<script>
// .menuH and .menuC elements must have already been loaded into DOM
$('.menuH').hover(
function() {
$('.menuC').stop().animate({width: '90px'},333)
},
function() {
$('.menuC').stop().animate({width: '-0'}, 333)
}
);
</script>
<!-- Rest of HTML -->
</body>
It doesnt know f1menu is a function since you didnt declare it as one. Try this:
function f1menu(){
//logic
}
I have a function foo(peram) which I want to call from multiple jquery .keyup() events.
How can I define/pass function foo so that I can call it from inside the event?
I tried something like this:
function foo(peram) {
alert(peram);
}
$("#someElement").keyup(function(alert) {
foo("You pressed a key!");
});
However I get TypeError: foo is not a function.
Update:
I have removed everything from my script and html, and it still does not work.
html:
<html>
<head>
<script src="../jquery-1.10.2.js" type="text/javascript"></script>
<script src="test.js" type="text/javascript"></script>
</head>
<body onload="asdf()">
<input type="text" name="name">
</body>
</html>
test.js:
function asdf() {
function hqxftg(stuff) {
alert(stuff);
}
$(document).ready(function() {
$('[name="name"]').keyup(function(hqxftg) {
alert(typeof hqxftg)
hqxftg("asdf");
})
})
}
It does seem to work in jsfiddle for some reason.
It is because you have named the event parameter same as the function
function asdf() {
function hqxftg(stuff) {
alert(stuff);
}
$(document).ready(function () {
$('[name="name"]').keyup(function (event) {
alert(typeof hqxftg)
hqxftg("asdf");
})
})
}
The event callback keyup receives the event object as the first parameter, you are naming it as hqxftg which overrides the external scoped function name.
Also there is no need to use the onload="", you can just use the dom ready callback
jQuery(function ($) {
function hqxftg(stuff) {
alert(stuff);
}
$('[name="name"]').keyup(function (event) {
alert(typeof hqxftg)
hqxftg("asdf");
})
})
You are missing a couple of things...
1) You miss the ; at the end of calling foo()
2) You are missing tags to close the jQuery selector
When you try this it will work:
function foo(peram) {
alert(peram);
}
$("#someElement").keyup(function(alert) {
foo("You pressed a key!");
});
JSFiddle here...
Update: Post has been updated and original comment of mine becomes obsolete.
I would go with the comment of Derek.
I am able to reproduce the problem: JSFiddle
Is it correct you have also foo declared as a var?
Try this code.
HTML
<input id="someElement" />
Java script:
function foo(peram) {
alert(peram);
}
$( document ).ready(function() {
$("#someElement").keyup(function() {
foo("You pressed a key!");
});
});
Demo
I've searched, but I could not find the solution to this problem. For some reason function doesn't get called when page loads the first time, only after refreshing the page it gets called. Examples:
function init() {
alert("hello");
}
Either calling the function with following method:
$(window).load(function () {
init();
});
Or inside a body tag:
<body onLoad="init()">
Also, this problem doesn't occur when I open page directly, only when I'm being linked to the page from another page.
Solved, mobile options must be set before loading jquery.mobile.
<script language=javascript>
$(document).bind("mobileinit", function () {
$.mobile.ajaxLinksEnabled = false;
$.mobile.ajaxEnabled = false;
});
</script>
<script src="scripts/jquery.mobile-1.2.0.js"></script>
Try something in the lines of:
function init() {
alert('Hello!');
}
window.onload(function() {
init();
}
I have a jQuery function that uses ajax to get data, then displays it, I want to use an if statement to determine if the function has already been run, if it has, a certain section of the function doesn't run again, for some reason, the if statement is being ignored.
This is my code:
<script type="text/javascript">
var a = 1;
$(function() {
if(a<2) {
$('.notifications').click(function() {
$('#notifications2').show();
$('#loader').show();
$.get('/getnotifications.php', function(data) {
$(".getnot").append(data);
$('#loader').hide();
a++;
});
});
}
});
</script>
Any idea why this is failing to work?
You're placing the if statement at the wrong point, try this:
<script type="text/javascript">
var a = 1;
$(function() {
$('.notifications').click(function() {
if(a<2) {
$('#notifications2').show();
$('#loader').show();
$.get('/getnotifications.php', function(data) {
$(".getnot").append(data);
$('#loader').hide();
a++;
});
}
});
});
</script>
You're current code is simply checking that a is less than 2 when the document first loads, not every time you click on .notifications.
After getting a new page with $.get none of the javascript will run on the new page.
Is there a way to make javascript use the new page too?
Many thanks
Dorjan
Edit: Example:
$(function() {
$('.viewPage').click(function() {
$('#mainarticle').fadeOut('slow')
$.get($(this).attr('href'), { js: "1" }, function(data) {
$('#mainarticle').html(data).fadeIn('slow');
});
return false;
});
});
Now this works fine however, the new page's anchor tags won't trigger (lets say it has a .viewPage).
I hope that clarify's the issue.
You need to bind events to your anchors using live:
$('a.something').live("click",function() {
alert('this will still work after a.something has been replaced via ajax');
});
Another way using $.get's callback:
$.get( "page.html", function(data) {
$('#someDiv').html(data);
$('a.something').click(function() {
alert('this will still work after a.something has been replaced via ajax');
});
});
Now that I've seen your code:
$(function() {
$('.viewPage').live("click",(function() {
$('#mainarticle').fadeOut('slow')
$.get($(this).attr('href'), { js: "1" }, function(data) {
$('#mainarticle').html(data).fadeIn('slow');
});
return false;
});
});
Yep; there is another jquery ajax method that will take the returned script from your page and execute it. Check the jquery docs.