I am running the following jQuery that affects elements on a page view.
$(document).ready(function($){
$(".views-field-field-video").click(function() {
$(this).parent().find("a.cboxElement").click();
});
});
The code works perfectly, but only on the first page. When I use the pager at the bottom and navigate to any other page, the script does not work. Then, when I navigate back to the first page, the script also fails.
If I reload the page however, it brings me back to the first page and the script works again.
I am linking a .js file, and link in between the <head> </head> tags using <script type="text/javascript" src="http://source_to_file"></script> It is loading, I can see in the web developer tool.
EDIT:
The classes I am selecting in the script remains the same on all pages.
It sounds like you are only adding click events when the page is first loaded. If you are then dynamically adding HTML (with pagination) then you need to re-add the click events to those new objects.
Sounds like you just need to reatache the event. Drupal gives you a great way to do that right in your javascript:
Drupal.attachBehaviors('.behavior_class');
This will cause a lot of headache if you don't have context passed to your behaviors though.
Make sure your code is wrapped in, for drupal 6:
Drupal.behaviors.clikfocus_map = function (context) {
for drupal 7:
(function ($) {
Drupal.behaviors.ajax_example = {
attach:function (context) {
}
}
})(jQuery);
and your selectors should all have
$('.myselector', context');
Turns out I needed to just turn off AJAX on the view. Sorry to over complicate things, but thank you for all your help!
Related
I'm working on a JavaScript script that aims to add some events on a couple of buttons in the barcode interface in Odoo V15.
When I'm trying to add an event on a button in the standard navbar at the top of the page (the navbar that allows, for example, to go back to the applications list) I can't locate the button with jQuery. I select the button through its class, but the returned object remains empty.I'm simply doing something like :
console.log($('.buttonClass'));
I guess that is because my script executes before the button generation.
I tried to place my script at the last position of the assets in the manifest, but it still not working.
How could I execute JavaScript code only when my page is fully loaded, so I can be sure that all of my elements exist?
Thank you,
Regards,
Try to use the DOMContentLoaded event for all your script.
More here: https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
Example:
addEventListener('DOMContentLoaded', (event) => {
// your code
console.log($('.buttonClass'));
});
How about using $(document).ready()?
Example:
$(document).ready(function() {
console.log($('.buttonClass'));
});
See more about ready on jQuery API Documentation.
I'm facing the following issue:
All code works properly unless I navigate to a page by copy-pasting the url, clicking on the mouse scroll wheel etc. If I use the site menu to navigate to a page by left-clicking on it, it works fine.
So, when a page is loaded indirectly, some of my JQuery code stops working after the page has finished loading - so it actually works for a second or so, and then stops. If, e.g. a click on a button before the page has finished loading, the code will run. If I wait until the page has finished loading, it doesn't.
Also, this doesn't happen to all code, just parts of it. I've tried to figure out why some of it works, and it might be (or not) that the code that stops working is the one directly using methods from plugins I've included, which isn't inside a click event (or maybe inside another function?).
Example of working code:
$(".pr-gallery img").click(function(){
var gallery = $(this).attr("data-num");
$(gallery.toString()).magnificPopup('open');
});
Here, even though there is the magnificPopup method, it works fine.
Example of non-working code:
$('#ctr-fixed-menu').drawer({
align: 'right'
});
I load all code inside:
(function($) {
$(document).ready(function() {
...code...
});
})(jQuery);
and have also tried $(function(window), jQuery(window).load, as well as encasing all code inside a function like so:
jQuery(window).load(function(){
function TestCall() {
...all code here...
}
window.onload=TestCall;
});
})(jQuery)
none of which have worked. It might be something really simple but I've tried to solve it for a couple of weeks now and it's driving me crazy. Also, there are no error messages in the console.
Just to note that this is for a WordPress website, so I don't know whether there might be some type of conflict with the original theme code (lazy loading for example?).
Any help would be greatly appreciated.
Okay, so this one is gonna be a doozy!
NOTE: This will be for a windows desktop application running sqlite and mongoose, so loading times are not as important (to me, for now) and there will be no connection to a non-local server.
I have searched all over and couldn't find anything that is specific to my situation, most seem to load into an iframe or use that framework provided by css-tricks.com
I am using my own (sorta) framework. The libraries i am using are bootstrap 3, jquery 2.1.4, jqueryui 1.12.1, and Bootstrap-select v1.12.1
index.php will have all content dynamically loaded into a div#wrapper and will act as the head of all page loading. This is the skeleton of my index.php. In sidebar.html the links have the attribute 'pagetoload', jquery catches the click event and loads the data into div#wrapper
<body>
<?php require_once("res/sidebar.html"); ?>
<div class="container-fluid" id="body-container">
<div id="wrapper" style="border:1px black solid;">
<!-- dynamic page content will be loaded here-->
</div>
</div>
<script src="res/js/jquery.js"></script>
<script src="res/js/jquery-ui.js"></script>
<script src="res/js/bootstrap.js"></script>
<script src="res/js/bootstrap-select.js"></script>
<script src="res/js/menu-handling.js"></script>
<script>
//index.php js
$(document).ready(function () {
$.get("home.php", function (data) {
$("div#wrapper").html(data);
});
$("a.loader").click(function (e) {
e.preventDefault();
$.get($(this).attr("pagetoload"), function (data) {
$("div#wrapper").html(data);
});
});
//dateFormat 10/dd/yy to constrain input only to october
//get current month number and constrain to prevent additions to wrong month
$("#date-input").datepicker({
dateFormat: "12/dd/yy"
, constrainInput: true
});
$("#date-input").focus(function () {
$(this).datepicker("show");
});
});
</script>
</body>
Each page that will be dynamically loaded will ideally contain minimal php and only contain the necessary html/css/js for that page. My issue is for example, after loading one page such as my dbviewer.php (which contains js and gives me the asynchronous loading warning) and reloading home.php into the container, javascript no longer works. The javascript for each page are inline tags.
I have tried piling all the javascript for every dynamic page into index.php so that it's all loaded on startup, but the issue arises that it still won't work. What is the best method make this dynamic loading work while having each page modular. I have tried to researching this but only stuff like using the hashTag thing comes up.
If you need more code from my files please post, i think i explained it enough for you to understand as there is nothing too wild going on outside of index.php Just scripts inside each dynamic page that basically interacts with dom elements using jquery.
I'm leaving this answer because it helped you, and also can be usefull as a general rule of thumb for any developer out there that can find himself in similar situation.
So when developing the app you have to separate all javascript, css assets in master file to host them on first pageload. (maybe it's event better for performance)
All other server generated files (php, node.js etc) files you have do structure to only be data source for pages that users click or land to .. or at least try to..
after that you have to trigger
$.ajax().callback
function on frontend to do job on each page. Such as page effects, data manipulation and etc .. Callback is very important because that's when data was actually loaded!
cheers, k
I have a button that shows a dropdown menu when clicked. This code works on pages that are loaded with data-ajax="false":
$('#btnMainMenu').live('click', function() {
$('#dpMainMenu').selectmenu('open');
});
But there are some anchors on the website where data-ajax="true", so whenever the users load those pages - the codes above doesn't seem to work.
Pages that are loaded with data-ajax="true" only load a specific part of the pages (which is the default behaviour for jQuery Mobile). Namely everything between <div data-role="page">...</div>. Does your code work even though pages are loaded this way?
References: Linking Pages
I just had the same problem and my solution was to include the code bellow in the body of the page that is being loaded via Ajax (I put it just bellow the form).
<script>
$('document').read(function () {
$("#form-id").trigger("refresh", true);
});
</script>
With this, when the page is ready Jquery recreates the form where the selectmenu is and so all behaviours are back again.
So I am having a hard time getting $.mobile.changePage to function properly. I call it like this:
$.mobile.changePage( "DataformsM-AddRecord.html", { transition: "slide"} );
But for some reason, when the HTML page is loaded, none of the external .js (the files that I wrote to actually do something) are included. I am following the significant loading conventions of
-Jquery
-(CUSTOM JS)
-Jquery Mobile
Does anyone know why this is not getting loaded properly? Also, the pageshow function is not getting fired either, which is strange. It looks like this:
$("div[data-role*='page']").live('pageshow', function(event, ui) {
loadFormFields();
});
Now the page is rendered, but none of the functional things happen. If I hack it and do something like this:
document.location.href="DataformsM-AddRecord.html";
It will function properly.
jQuery Mobile does not pull the whole page into the dom, it grabs the first data-role="page" element and its descendants and pulls that into the current dom.
So any scripts in the <head> of the document will not be included.
I generally put all the functional JavaScript for my site on the index page and then when external pages are loaded into the dom they can benefit from the already loaded scripts.
Also, you can place JavaScript code inside the data-role="page" element and it will be included when jQuery Mobile does its AJAX load of the page.
UPDATE
A good system for this is to put all of your JS into an include file and include it on each page of the site. It will be ignored if pages are brought into the DOM by AJAX, but if someone refreshes somewhere in your site, the JS will be available.
So building off of what Jasper so wisely noted above, I came up with a working solution.
Basically I Load up all of my JS and CSS files into the index page to start. Now when you load, this method will be triggered for the pageshow
$("div[id*='page1']").live('pageshow', function(event, ui) {
setTimeout(function() { window.scrollTo(0, 1) }, 100);
doStuffWhenPageintializes();
});
Once I call the $.mobile.changePage( "someOtherPage.html", { transition: "slide"} );, the pagehide method will get fired for the page1 object. This is where you can trigger the method to initialize the page you are transitioning to.
$("div[id*='page1']").live('pagehide', function(event, ui) {
setTimeout(function() { window.scrollTo(0, 1) }, 100);
loadStuffForNewPage();
});
Now you can remove the document.location.href="external.html" line and simply use the native JQM call. Hope this helps some people.
Kindly repeat the head section with all the scripts in each html page, since change page will cause reload of pages and will re create head section...
a simple change page like this would then work:
$.mobile.changePage('abc.html', {
transition: 'slide'
});
It seems that there is no "right" way provided by JQM to load external html files. Thanks a bunch to Jasper for the solution.
JQM suggests an AJAX reload if we want to switch to external pages, like:
<a href="foo.html" rel="external">
or
<a href="foo.html" data-ajax="false">
I tried both but they didn't work - I"m programming for native apps, so maybe it may work for web apps?
I solved this by putting script in the head section of last loaded page that helped and worked for me. JQM is not getting the head section of recently loaded page in the DOM so not bringing the JS content of the recent page. By putting all the script in an External JS file or by putting it in the head section of very first page might do the trick for you.
I too am looking for this solution the "correct way" for loading external pages. However, I will concur, that your hack does indeed work. I'll take the hack for now:
$(document).ready(function(){
$("#page1").bind('ended', function(){
$.mobile.changePage($(document.location.href="external.html"), 'fade');
});
});