I am creating an ordering system which allows staff to record orders and track their status from ordered to dispatched. The problem that we have however is that when viewing orders, another staff member on another computer may change orders. This wont register until a page refresh is carried out.
To address this I was hoping to use this script....
http://www.michaelfretz.com/2010/04/21/using-ajax-to-load-data-from-php-into-your-website/
I have managed to get it working great within twitter bootstrap. On slower connections, the page loads and says 'please wait while data loads' until the data is loaded.
The problem I have however is that I cannot get javascript to work within the reloading section. I was hoping to use bootstrap tooltips. The user can hover over an order id and it will popup with the order contents. It works great outside of the reloading section, but within I cannot get it to work.
I have tried loading the jquery, and bootstrap tooltip javascript within the loading section, but even this did not work. This would have made it very slow anyhow though.
Does anyone have any ideas how I can use Bootstrap Tooltips with the Ajax reloading PHP document.
Thanks
If you're going to be loading dynamic content, bind your handlers to the closest parent that doesn't change, and then add a filter to only select the elements you want to handle.
So, by why of example:
HTML:
<div id="parent">
<div id="igetinjectedwithdynamiccontent">
...
IMA BUTTON
...
</div>
</div>
jQuery:
$('#parent').on('click', 'a.btn', function(event){
// handle click event for anchors of class 'btn'
});
This will successfully bind onclick handlers to any Bootstrap buttons in the parent div, regardless of whether they existed on page load or were added dynamically.
Thanks for your help answering this question... I have got it figured now. Didn't even know what to search for before asking the question.
I could have either used an onload simulator which will simulate pressing the button. Should Work.
I opted however for instead using the selecter option which Apparently is just an alternative to the jquery 'Live'
For those who are in the same boat I was. Paste this in your page after loading JQuery.
<script type="text/javascript">
( function($) {
$(document).ready(function() {
$('body').tooltip({
selector: '[rel=tooltip]'
});
});
} ) ( jQuery );
</script>
Sorry about the indentation .... Stupid 4 spaces thingy :)
This script will continue loading even if the content is changed.
Related
I want to fire an event (show and hide div) on dynamic generated checkbox (generated through Ajax).
I tried many events like window.onload, document.load etc but I did not get success.
I don't want to click anywhere. I am only fire event on page load or document load.
Can any expert please help me?
Thanks in advance.
You may use
$('body').on('yourEventGoesHere','.className',function(){
... event handler code ....
});
Read more
I am adding the scroll event in javascript for one of my pages. The code is like this:
document.getElementById("myProject").addEventListener("scroll", myFunction);
function myFunction() {
document.getElementById("scrollEvent").innerHTML = "These are all my projects so far";
}
So, when users start scrolling, they will see a text "These are all my projects so far".
My problem is how to stop showing this text when users move to another page.
Please help ( I am a verrrry fresh developer)
Thanks so much
A few thoughts.
Without knowing your dev environment (e.g. are you using MVC with a framework?), I will assume you are simply talking about separate/individual HTML pages.
Each HTML page can have its own javascript. Just like HTML and CSS, there is no need to have the same javascript functions on every page. (You don't have the same HTML content on every page, right?) Usually, we divide up the javascript into multiple files - some files are added to every page, some are specific to a certain page. It is easiest to have one (external) javascript file that you reference on every page, and then specific javascript code for each page - either in a second external file that is referenced, or on the HTML page inside <script>//js here</script> tags.
If the DIV with ID myProject is not on the other page, then the javascript won't do anything. However, it is not good to have broken javascript on a page, so make sure it is not included on other pages.
If you are using a framework, like CodeIgniter or ReactJS or Angular, please tell us so we can adjust our answers accordingly.
If the case is a switching between browser tabs, you can use two different events like below.
$(window).blur(function(e) {
// stop scroll event, when switching to another tab
document.getElementById("myProject").removeEventListener("scroll");
});
$(window).focus(function(e) {
// start scroll event
document.getElementById("myProject").addEventListener("scroll", myFunction);
});
I am not sure what you are actually looking for, because when user switch between tabs, he can not see the text anymore no matter there is a scroll event or not. If you are concern about performance, then the above solution would help.
I've a simple page that requires 2 date input and I would use a datepicker to get them.
I've found glDatePicker http://glad.github.io/glDatePicker (thanks a lot!) that is simple, light and works very well.
My problem is use it in modal with bootstrap 3.
I can call function to display the datepicker, for example
$(window).load(function() {
$('#date').glDatePicker();
});
and it works perfectly anywhere, except in modal where it look likes to appear behind the modal and/or it's not entirely shown (malformed).
I've alredy tried to put it in a specific div (like the author suggest), but the result is the same.
I think that it can't be attached correctly to the input field because of modal, but I'm not sure and anyway I don't know how to solve it :)
Thanks!
I had the same problem with another library. The fact is that the calendar that is shown is attached to "body" element and for this reason it cannot be seen in the modal popup. For this reason you can try if changing z-index property or positioning for you is enough. Otherwise (like in my case) was hacking the library in order to accept one additional optional parameter that was meant to store the dom element to attach the calendar to.
so quick and to the point...
im making a delete post script for my practice cms.
When clicking on delete, i dont want to have the page reload but instead just have the div removed. To do this i do the following:
$("#postholder").load("pageurl.php?id=5 #postholder");
Now, this works fine and looks great. But it stops all of the scripts working on the page.
In my eyes, only that div should be reloaded, but it means that if i go to delete another post, i have to refresh my page for it to work again.
Where am i going wrong?
Also whilst im here, how can i change "pageurl.php?id=5" to just by the current page url.
So what can i replace it with so it works on what ever page as it just uses the current url.
Thanks <3
How about removing the DIV from the DOM?
$("#postholder").remove();
Your click handler doesn't work with dynamically loaded content. Assuming you are using jquery version >= 1.7 you can use the .on() method to listen on ajax loaded content.
$(document).on('click', '.delete', function(){
$("#postholder").load("pageurl.php?id=5 #postholder");
});
I've been trying to get this little project I'm doing finished, but for some reason it is not properly working.
The issue is when I first visit the page and click the first link that appears in the main section it displays the popup box as wanted. Now when I click another day, for instance sunday and try to click the first link it doesn't do anything. And if I click back to Saturday the first link also doesn't do anything anymore.
It seems something is not properly activating or maybe a command is overwriting and not allowing it to work like it does when you first hit the landing page. I'm sorry if this is confusing but any help would be much appreciated.
The website is pouronline.com
that's where i do all my testing.
Thank you
You need to use the .live function.
So in your popup.js replace
$('a.poplight[href^=#]').click(function() {
with
$('a.poplight[href^=#]').live('click',function() {
Swap this:
$('a.poplight[href^=#]').click(function()
with this:
$('a.poplight[href^=#]').live('click',function()
You need to use a future-proof event observer because once you reload those anchors by changing the day in this case, the initial binding is lost. live() means to apply the binding to currently existing nodes as well as nodes that are added to the DOM at a later time.