The following script link, is linking to a JavaScript file that handle form validation
<script type="text/javascript" src="assets/js/form-validation.js"></script>
And it is included to all the pages using PHP include, the question is; how do I only make it run or even load when there is a form on the page?
I tried this: $('form').load('form-validation.js', function(){ /* callback */ });
But did not work, I also searched and did not find a real answer...
You should use jQuery.getScript(), it load a JavaScript file from the server using a GET HTTP request, then execute it.
You can use .length property to check form exists or not.
if ($('form').length) {
$.getScript('form-validation.js', function () {
/* callback */
});
}
EDIT
There is no option to add it to the JS file it self, and make it work
//Place this code at the top of your form-validation.js file
$(document).ready(function () {
if ($('form').length > 0) {
//Do validation
}
});
use jquery to do it :
<script type="text/javascript">
$(document).ready(function(){
if ($('form').length>0) {
$.getScript('form-validation.js', function () {
});
}});
</script>
Related
I want to make this JS function go from a button to a page load
I am integrating a jira issue collector into our webpage.
Bug Report
<script type="text/javascript" src=""></script>
<script type="text/javascript">window.ATL_JQ_PAGE_PROPS = {
"triggerFunction": function(showCollectorDialog) {
//Requires that jQuery is available!
jQuery("#myCustomTrigger").click(function(e) {
e.preventDefault();
showCollectorDialog();
});
}};</script>
To load when the page reloads I used the window.onload but that didnt work
Add a document complete jquery handler:
$(document).ready(function(){
showCollectorDialog();
});
This will run as soon as the document is fully loaded.
here you can do it it with jquery just like like this.You can place this at the end of your html file.And also include jquery cdn in script tags in your html file.
$(document).ready ( function(){
alert('hello world');
});
or you can do this like this
function functionName() {
alert('hello world');
}
window.onload = functionName;
Looking for an easy answer, nothing works from existing googles.
No custom triggers needed.
Put this into your html head and it will trigger the form, I just tested it ;-)
<script type="text/javascript">
setTimeout(function() {
$('#atlwdg-trigger').trigger('click');
},100);
</script>
I do have a problem with the trigger-event of bootstrap.
I try to call a function after my content got hidden or shown.
After my search i found this solution, but it doesn't work yet:
$(document).ready(function () {
$('#widget-box').on('hidden.bs.collapse', function () {
alert("hidden");
})
$('#widget-body').on('hidden.bs.collapse', function () {
alert("hidden");
})
$('#SearchForm').on('hidden.bs.collapse', function () {
alert("hidden");
})
});
The widget-box is the one getting the collapsed class.
The widget-body is the one getting shown/hidden.
The SearchForm is the content of widget-body which dis-/appear.
Neither of this 3 functions shows me an alert. What am I doing wrong?
Use external javascript file. Try to write your jQuery code into external javascript file and link that external javascript file to your html file using script tag.
I want to be able to include an external jQuery script only after a certain jQuery event, for example, after fade in, like this:
<script type="text/javascript">
$(window).load(function() {
$('body').fadeIn(300, function() {
// Include http://www.mydomain.com/js/myscript.js
});
});
</script>
Is something like that possible? Or, if not, perhaps there's a way to activate a script that has already been included, but kept "dormant"?
I would appreciate help from an expert!
jQuery has an AJAX method $.getScript
http://api.jquery.com/jQuery.getScript/
$.getScript('http://www.mydomain.com/js/myscript.js',function(){
/* new script has already run, can call additional code here if needed*/
})
I need to learn how to initialize scripts. I have google it but dont dont really understand it.
Right now I have a toggle-script that is in a div, that entire div gets loaded in to another page. The toggle scripts work, but not when its loaded in.
$(".class").click(function () {
$(this).toggleClass("add_class");
});
If somebody have time, can you explain to me how to initialize this script?
Thanks.
You should put this script inside a document.ready call.
Eg.
$(document).ready(function() {
//Put your code here
});
If I misunderstood your question and what you actually mean is:
How do you execute the script after you load it in through an AJAX call.
Then see this question: executing script after jQuery Ajax Call
Are you calling it after the elements are loaded on the page?
You should be using on() with jQuery 1.7+
$(document).on("click", ".class", function () {
$(this).toggleClass("add_class");
});
If you want to keep your syntax, you would have to do it either after the elements are rendered, or do it on document.ready.
I figure you're using jquery.ajax to fetch the div?
If so, you should be able to add the listeners in the success-function of the jquery.ajax call:
$('#result').load('ajax/test.html', function() {
$("#result .class").click(function () {
$(this).toggleClass("add_class");
});
});
simple and best
$(function(){
//your code here...
$(".class").click(function () {
$(this).toggleClass("add_class");
});
});
Basically my app work like that :
Index.php manage call to other pages.
Each page contains 2 function onLoad() and onClose() which are redefined in each page
Index.php call the pages and execute the onLoad
Basically, i preload the page in a hidden div, i execute the predefined $.onLoad function and the i put the loaded content into a visible div
My question is only about the onLoad() scope, i want to remove code from the jquery eval seq when i change page, but i need a way to define it in the page.php file without knowing the container
The eval/seq is probably the eval queue of jquery, can't found info about that, just obtain with firebug...
In 2 words, i would like to be able to remove injected dom and script when i change context (pages)
index.php
$.onLoad = function() {}
$("#blabla").onChange(function() {
$("#data_iframe").load(chaineUrl, {}, function(responseText, textStatus, XMLHttpRequest) {
$("#data_iframe").ready(function() {
$("#data_div").children().remove();
$.onLoad();
$("#data_iframe").children().hide().appendTo($("#data_div")).show(); $("#data_iframe").children().remove();
$.onLoad = undefined;
}
});
});
page.php
<script>
$.onClose = (function(){
$('#container').blablabla();
//alert("test");
});
$.onLoad = (function(){
$('#container').blablabla();
}
</script>
The problem is that the jquery EVAL/SEQ keep growing each time a page is opened
and there are some side-effect like calling multiple time a function...
I guess its a scope problem so can you help me correct my code
(i've try with or without the $ but doesn't change anything)
just for information
<div id="data_div"></div>
<div id="data_iframe"></div>
Thanks
I usually use $(document).ready instead of onload. No need to do the "onload" trigger in load complete function. The ready function within the page.php will do the same job.
And how about direct load into data_div?
index.php
$("#blabla").onChange(function() {
$("#data_div").load(page.php);
});
page.php
<script>
$(document).ready(function() {
$('#container').blablabla();
});
</script>
I didn't try page close function before, may be it is not what you want. But you can try:
<script>
$(document).ready(function() {
$('#container').blablabla();
$(window).unbind('unload');
$(window).unload(function(){
$('#container').blablabla();
//alert("test");
})
});
</script>