I'm trying to make a mobile version of a web page. My problem is that I have to manipulate a accordion menu to use jQuery mobile linked list. To do this I manipulate the menu with jQuery ex:
$(document).ready(function() {
$('#globalMenu').attr("data-role", "listview");
.. .. . . ..
});
It works great if I load the page first time, but when I navigate in the jQuery mobile list and push one of the link the script do not run, but if I refresh the page (f5) it works! I've read that I have to use init instead of document ready but I can't manage it to work.
Please write some examples.
jQueryMobile event page
Supposing your page div is like this:
<div id="my-page" data-role="page">
Try with:
$('#my-page').live('pageinit', function(event){
$('#globalMenu').attr("data-role", "listview");
});
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.
We have a WP site that uses a 3D Cart Plugin - when you click on "Add to Cart" it opens a new window. This is because *'target='_NEW''* is built into the plugin link code. See the following page and click on any Product Description or Add to Cart button.
http://tipsybir.nextmp.net/freestyle-hummingbird-feeders-375ml/
To override this, I use this code:
<script type="text/javascript">
jQuery(document).ready(function() {
$("a[target='_new']").removeAttr("target");
});
</script>
which I got from a previous question here. We have another WP site using the same plugin, and the above code works perfect, but it is not working on this site. It is the same exact code, placed in the header, but a new window is still opened.
Can anyone help on this? We do not want a new window to open.
You are probably not using jQuery noConflict, so use jQuery instead of $
jQuery(document).ready(function() {
jQuery("a[target='_new']").removeAttr("target");
});
It was indeed that I did not have the JQuery Library loaded.
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!
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.
In my jQuery Mobile project, I have a page that shows a slide's content. The content is dependent of the query string.
On opening of the first slide by visiting #slidePage?sec=0&page=0 -> It works
On the same slide page I have a link for #slidePage?sec=0&page=1 ( the second page). --> this link doesn't work
Seems that the browser or jQuery is convinced that it is the same page and do not navigate .
What can I do ?
I tried to disable ajax but that didn't work.
#Cameron Askew has just released a brilliant JQuery (Mobile) plugin that enables you to send QueryString parameters between pages:
https://github.com/CameronAskew/jquery.mobile.paramsHandler
Query strings (to internal pages) are not supported by jQuery mobile.
There are a number of jQuery mobile plugins that could be useful to enable this feature.
See:
http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html
You can do this just with jquery mobile. On pagebeforeshow simply read the data-url attribute that jquery mobile adds to the page. Then just add the code to do what you need to do with the querystring.
This will only work with Ajax navigation rather than multi-page.
Show page "two" querystring id=1
<script type="text/javascript">
$('#your-page-id-here').on('pagebeforeshow',function(){
console.log($(this).data("url"))
});
</script>