I'm developing a PHPFox Module where I use a jQuery Plugin to paginate a serie of images. When I access the module the plugin doesn't work, but the rest of the js code have no problem. The only code that doesn't work is which is placed inside the $(document).ready event. If I refresh the page the plugin starts to work.
I think the problem is caused for the cache of the CMS, because the DOM isn't reloaded when I load the Module. I tried to change de $(document).ready for window.onload but I've the same problem.
Could somebody help me?
Finally I've find the solution:
To use jQuery functions on load in phpfox you must use the sintax $Behaviour.onLoadEvents = function(){rest of the code} insted of the traditional and standar $(document).ready
Related
I just tried to implement the json tag editor to create a tag editor.
I want to implement it in a bigger laravel project. Therefore I included jQuery, as well as the js and css file from the json tag editor. It's all loading fine, which I figured out under the network tab.
Now I have:
an input element:
<input id="keywords" class="form-control" name="keywords"
autofocus></div>
and on top of the page I have:
$().ready(function(){
$('#keywords').jsonTagEditor();
});
But i get an error saying
Uncaught TypeError: $(...).jsonTagEditor is not a function...
As I said, the files are loaded as I can see in the network tab...
Any ideas what the problem could be?
Again to make everything clear, I'm using laravel, so the files are all included in the master-layout file and I'm trying to use it in a document that extends this master template. But shouldn't change anything as I'm already using some other plugins that work fine that way.
Any ideas?
After some discussion in chat, the problem turns out to be the suspected re-import and re-initialization of jQuery. The Laravel framework has it's own import of jQuery that happens via require(), and that was the happening after the plugin in question was imported.
Moving the plugin import to the end of the <body> worked around that, but in addition the plugin (as of this writing) has a bug and must be initialized with an empty object passed in (or probably any other value):
$("#keywords").jsonTagEditor({});
You are missing document and just to be certain that the element is accessible, place your script before the ending '</body>' tag so that it loads your page content first.
$(document).ready(function(){
$('#keywords').jsonTagEditor();
});
You forgot to write document
Instead of this
$().ready(function(){});
Use this
$(document).ready( () => {});
The => means, that you use newest standarts of JS
Or you can just use this alternative jQuery tagEditor
I load my content using ajax, says it's content.html. So in content.html there's a script tag. I found a problem with this approach. I do a console.log('debug') within content.html, and load it with ajax, and it trigger every time. How to do a flag to prevent that?
Note that I can't load the js of content.html in global scope dude to some plugin conflicts.
It's only an idea... since we didn't see anycode yet...
And I'm still not sure what the problem really is.
If you want to leave this script in content.hmtl but disable it when called by layout.html.
You could do something like this in layout.html:
$("script").each(function(){
if($(this).attr("src")=="[particular source]"){
$(this).remove();
}
});
Or use an id if there is no src attribute.
This has to run after you got the ajax result....
I faced with the same issue.
Chrome load the js many times with unique VM files and execute all of them when the html in ajax is loaded.
I have some code that uses jQuery and it's in the html. I include jQuery at the bottom of the page so the problem is that every use of $. is undefined.
I remember reading somewhere that you can create a holder $ function and when the jQuery get loaded it will execute everything that called $. (like some sort of a stack).
Can you please tell me how to do this? Like with a code example or if you have that article link it will be great. :)
No, you can't make a whole bunch of jQuery calls before it's loaded and then expect something later on to play back everything.
Your choices are:
Load jQuery before things that use it.
Don't use any jQuery calls until after the page and jQuery are loaded.
Create your own list of initialization functions that you want called after jQuery is loaded and register those callbacks as the page is loading. Then, have your own function that walks that list of initialization functions and calls them all once jQuery is loaded to kick of the initialization that uses jQuery.
But, #3 seems like a lot of work that isn't really necessary. Either load jQuery up front or don't run your initialization functions that use jQuery until after it is loaded - either is cleaner and simpler.
Keep in mind that you also need to load any jQuery plugins after jQuery is loaded because they use jQuery to initialize/install themselves.
Make sure that you are not loading any plugins before you load jQuery. Plugins extend the "$" object, so if you load a plugin before loading jQuery core, then you'll get the error you described.
It could be that you have your script tag called before the jquery script is called
place the jquery.js before your script tag and it will work
i have jquery plugin jquery-1.4.2.min.js. while loading this file the following error is showing. but if i use it in another screen or another program it is loading successfully... i am unable to find the reason. Can any one help me please.
Thank you
Mihir
Make sure you are not referencing (linking) jQuery more than once in the page and that the plug-in is referenced after the jQuery reference. What sometimes happens (especially with auto script management) is jQuery is loaded, the plug-in is loaded in the jQuery instance, then jQuery is loaded again, which effectively resets any plug ins.
Interesting problem here from some inherited code I recently looked at. I'm trying to add a compression module to a project. It is loading all the JS and CSS files, combining them, minifying them, and compressing them. I've tried a number of solutions, but all of them have one fatal problem.
I have some javascript that is being loaded via Page.ClientScript.RegisterClientScriptBlock in the PreRender of the MasterPage. The compression module is loading as a Script Tag link in the MasterPage, but when I run the page... the code from the PreRender is lopped on top and is giving me a '$ is undefined' error, telling me jQuery isn't loaded yet.
Furthermore, I can't seem to get past the same problem when it comes to inline javascript on content pages.
Any ideas as to what is causing this? Enlighten me as I have no clue.
If have done this before with RegisterStartupScript (instead of RegisterClientScriptBlock) and called the $(document).ready(function() from WITHIN that script.
If the script tag link that eventually expands out to jquery is not in the head, but in the body of the page, then $ will be undefined when the script block executes, unless it is included in the html before the opening <form /> tag in the rendered html, which I understand is where RegisterClientScriptBlock spits out its script (just after that opening tag).
If this is not the case, and the joined/minified script is in the head, then I'd use a browser debugger such as Firebug or IE Dev Tools to verify that the jquery script is being correctly included in your combined script.
I know this answer is late to the party, but try calling ClientScript.RegisterClientScriptBlock in your OnPreRenderComplete (rather than OnPreRender) handler. This inserts the code later in the page rendering process.
All your jQuery code should be written inside the DOM-ready function:
$(function() {
// your code here
});
indipendently from where you place it in the page, 'cause the jQuery() function isn't avalaible before.