I have a document ready load when I click a button on view.php:
<script type="text/javascript">
$(document).ready(function () {
$("#admin_user_view").load('admin_modules/user_mgt/pending.php', function(){ //get content from PHP page
$(".loading-div").hide();
});
});
</script>
The pending.php page also contains another load:
$("#pending_view" ).load( "fetch_pages.php?query=admin_user_view&view_page=pending", function(){ //get content from PHP page
$(".loading-div").hide();
});
The problem is, the loading in pending.php is not working. I also tried:
$('#admin_user_view').load('admin_modules/user_mgt/pending.php',
function(){
$("#pending_view" ).load( "fetch_pages.php?query=admin_user_view&view_page=pending", function(){ //get content from PHP page
$(".loading-div").hide();
});
});
What did I miss? Or is this really not possible? If not possible, what alternative can I do?
Your help is highly appreciated.
Thanks!
Note: Both the first and the second load functions are wrapped in document ready function and the third one is being called by a function when a button is clicked.
Forgive me for not double checking everything. The jQuery functions are working perfectly. The problem lies within the PHP code I'm calling inside that load so nothing seems to happen. When I fixed the PHP code, everything worked fine. Thanks for your help!
Related
I am a beginner in playing with jQuery/AJAX, my goal is to load content to the div below:
<div id="blogcontentloaded">
</div>
I came up with .load and it worked, the page loads but it keeps refreshing and loads over and over.
$(function loadBlog(e) {
$('#blogcontentloaded').load('/blog/page1.html');
e.preventDefault();
return false;
});
I tried using e.preventDefault but it doesn't work for me.
Also my goal is to do this without any buttons. When main page loads portion of the page that I want to load along with main page is going to be for updating the content in loaded element.
Thanks for the help!
You can use the javascript load function. It may solve your problem. here you can get some information about windows load and jQuery ready functions.
$( window ).on( "load", function() {
$('#blogcontentloaded').load('/blog/page1.html');
});
You need to wrap the function in the 'ready' function and make sure that it is executed once:
$(document).ready(function(){
$('#blogcontentloaded').load('/blog/page1.html');
});
Have you used the jQuery file on the top of other js files?
Add the jQuery.js file
$(document).ready(function(){
$('#blogcontentloaded').load('/blog/page1.html');
e.preventDefault();
return false;
})
On one of my previous pages I use
<script src="/js/wireEvent.js"></script>
<body onload="wireEvent();" >
Basically, wireEvent() displays an image on top of the page whenever the mouse goes out of the browser.
However, now I cannot add this function directly to the body of my page, so what is the proper way to add it? Will it be right if I add
<script>
window.onload = wireEvent;
</script>
or I enclose the whole function in
$( document ).ready
and only include the function's file to my html?
The code below executes only after all your images load completely. So you can try this:
$(document).on('load', function(){
wireEvent();
});
You can just do:
$(function(){
//jQuery code here
});
What am doing is writing wizards using existing forms and list views. we want to combine these forms in single page. here is a script we have used to get form from url then called function to bind widgets. first line is loading content of form but bindWidgets is not working. While bindWidgets is working on preloaded content which is default loaded with page.
<script>
$(document).ready(function() {
$("#template_form").load("/push_templates/pushtemplate/create/ #zform");
bindWidgets();
});
</script>
Do we need to wait for load, as it seems that 2nd line is executed prior to content loaded. How can we go to wait stat or better way to call bind function after load complete.
Use this;
<script>
$(document).ready(function() {
$("#template_form").load("/push_templates/pushtemplate/create/ #zform", function() {
bindWidgets();
});
});
</script>
You can see demo here: jsfiddle
When I load Bootstrap popver content with ajax, the popover is not showing.
Javascript:
var id = 1;
$.post("load.php?pageid",
{
pageid:id;
},
function(data,status){
document.getElementById("body").innerHTML=data;
});
HTML response:
hover for popover
<script>
$(function ()
{ $("#example").popover();
});
</script>
When I place the HTML response above directly in the <body id="body"></body> code, the popover works fine. I dont understand what is going wrong here.
The problem is that you're setting up the popover inside of the function $(). Rather than
$(function ()
{ $("#example").popover();
});
It should be just
$("#example").popover();
Or perhaps better
$(document).ajaxComplete(function() {
$("#example").popover();
});
The reason being that any function inside of $() is run when the document is first finished loading, when the "document ready" event is fired. When that code is pasted inside of the original HTML, it works because it's present when the document finishes loading.
When it's the response from an AJAX call, it won't run inside of $(), because the "document ready" event already fired some time ago.
with the help of jQuery you can initialize all things that needs to be initialized using
$(document).ajaxSuccess(function () {
$("[data-toggle=popover]").popover();
$("[data-toggle=tooltip]").tooltip();
// any other code
});
inspired from Olaf Dietsche answer
<script>$(function () { $('[data-toggle="tooltip"]').tooltip()});</script>
Add this at the end of whatever you are loading in with ajax. You should already have this somewhere to opt-in to the tooltip, but put it again to re-initialize the tooltip.
this seems to be simple.. but I am a bit noobish with jquery, maybe I am doing something silly wrong?
I want to click an image, and on that click, hide another image right next to it.
<script type="text/javascript">
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
</script>
Id's are correct as per the two images. What am I missing? Debugging it, the code never gets fired...
Thanks
EDIT
I had my control as a nested control on an asp masterpage, and its id was being rewritten. I have now fixed the id, but I still cant get any joy... I also see my markup is being rendered as an "input", would that make a difference?
<head>
<script src="js/jquery.min.1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#butShowMeSomeUnits").click(function () {
$('#arrowUnitspic').hide();
});
});
</script>
</head>
<body>
<input type="image" src="bookings_media/buttons/show-me-some-units.png" onmouseout="this.src='bookings_media/buttons/show-me-some-units.png'" onmouseover="this.src='bookings_media/buttons/show-me-some-units_orange.png'" id="butShowMeSomeUnits" name="ctl00$ctl00$ContentPlaceHolder1$bookings_right_content$butShowMeSomeUnits">
</body>
EDIT
JS Fiddle
If there is any confusion... the JS fiddle I spooled up with the exact code also does not work...
You need to do do on page ready:
<script type="text/javascript">
$(document).ready(function() {
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
</script>
Edit:
The fiddle you provided did not work until I chose jQuery 1.10.1 from the dropdown. You will notice your onmouseover changes the element first, but once you click on the input it does hide the image. Can you verify this works the same for you?
If the answer is no then I don't think you are loading the jQuery library on your page. To check this should work:
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
In addition it might be helpful to see what errors your browser console /dev tools is showing.
Wrap the code in jQuery.ready() event. And also check whether jquery js file is loaded or not.
$(document).ready(function(){
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
You code looks good and works check here
What you might be missisng is either:
to load jQuery script in the head of your page.
to include $(document).ready(function() { //code here }); in case your <img> tags are after the script in the page code. This is so your code loads when page is ready/loaded.
Steps that may help you:
make sure you integrate jQuery lib right. (to check that you might wanna open console on chrome and type $("html").hide(); and see if the current page dissapears)
make sure your custom JS file or code is UNDER the including of jQuery lib.
very good starting point with jQuery is to put everything in $(document).ready() as below example:
$(document).ready(function(){
$("img").click(function(){
$("img").hide();
$(this).show();
});
});