Conflict in using multiple JQUERY libraries - javascript

In my web application, I have a datepicker jquery, Everything works well, until I added a new jquery codes referencing a diffrent library. This Jquery's purpose is to fixate a gridview header.
After I added this code, the datepicker stopped working. What could be causing the conflict?
Here are the codes
1. DatePicker JQuery locatred in external JS File
$(function () {
$("#txtdatefrom").datepicker();
});
$(function () {
$("#txtdateto").datepicker();
});
window.onload = function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
}
function endRequestHandler(sender, args) {
init();
}
function init() {
$(function () {
$("#txtdatefrom").datepicker();
});
$(function () {
$("#txtdateto").datepicker();
});
}
$(function () { // DOM ready
init();
});
3. Jquery to fix gridview header.
After adding this the the datepicker feature stopped working.
<script type = "text/javascript">
//not needed kasi it produced double scrolls, pero pwede din e.. ewan
$(document).ready(function () {
$('#<%=grdWSR.ClientID %>').Scrollable({
ScrollHeight: 300
});
})
window.onload = function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
}
function endRequestHandler(sender, args) {
init();
}
function init() {
$(document).ready(function () {
$('#<%=grdWSR.ClientID %>').Scrollable({
ScrollHeight: 300
});
})
}
$(function () { // DOM ready
init();
});
</script>
upon checking the browser console to locate the error, here is the reason:
jquery-ui-1.8.19.custom.min.js:5 Uncaught TypeError: Cannot read property 'ui' of undefined

The issue is due to conflict in definition of init() function. In both the files, you have used the same name. Try renaming one of them and your issue should be fixed.
Edit: Try changing the second snippet to the following:
<script type = "text/javascript">
//not needed kasi it produced double scrolls, pero pwede din e.. ewan
$(document).ready(function () {
$('#<%=grdWSR.ClientID %>').Scrollable({
ScrollHeight: 300
});
})
window.onload = function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
}
function endRequestHandler(sender, args) {
fixGridHeader();
}
function fixGridHeader() {
$(document).ready(function () {
$('#<%=grdWSR.ClientID %>').Scrollable({
ScrollHeight: 300
});
})
}
$(function () { // DOM ready
fixGridHeader();
});
</script>

I already found the answer. Based on research, using multiple Jquery codes or libraries can be done by using jquery.noConflict() code.
javascript for Datepicker
var $152 = jQuery.noConflict();
$152(function () {
$152("#txtdatefrom").datepicker({
changeMonth: true,
changeYear: true
});
//On UpdatePanel Refresh
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
$152(function () {
$152("#txtdatefrom").datepicker({
changeMonth: true,
changeYear: true
});
});
}
});
};
for gridview header
var $151 = jQuery.noConflict();
//not needed kasi it produced double scrolls, pero pwede din e.. ewan
$151(document).ready(function () {
$151('#<%=grdWSR.ClientID %>').Scrollable({
ScrollHeight: 300
});
})
window.onload = function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
}
function endRequestHandler(sender, args) {
init();
//fixGridHeader();
}
function init() {
//function fixGridHeader()
$151(document).ready(function () {
$151('#<%=grdWSR.ClientID %>').Scrollable({
ScrollHeight: 300
});
})
}
$151(function () { // DOM ready
//fixGridHeader()
init()
});
just create a variable that will be assigned with a jquery.noconflict() function. then replace all $ with the created variable per javascript. then it will work already.
reference: https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

Related

running a jquery task forever

I am new in jQuery / java script; trying to make a slider. Please help with the following problem.
I want to make a div (class is slider) fade-out and fade-in forever; please check this code.
Is it possible to use setInterval() function for this?
<html>
<head>
<title>Slider</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../jquery/jquery.min.js"></script>
<style>
.slider1{
width: 500px;
height: 250px;
margin: 0 auto;
background-image: url(images/rectblue.png);
}
</style>
<script type="text/javascript">
var runForever = $(document).ready(function () {
$(".slider1").fadeOut(2000, function () {
$(".slider1").fadeIn(2000);
});
});
runForever();
//setInterval(runForever, 4000);
//This runs the function 'runForever' one time only, how to run it every 4 sec?
//the above commented out code does not work.
</script>
</head>
<body>
<div class="slider1"></div>
</body>
You didn't define runforever as a function, you made it the result of the call to $(document).ready. If you define it as a function and put it in a setInterval, it works.
var flashSlider = function () {
$(".slider1").fadeOut(2000, function () {
$(".slider1").fadeIn(2000);
});
};
$(document).ready(function () {
setInterval(flashSlider, 4000);
});
Fiddle: http://jsfiddle.net/uoqdfhdb/
I think it's a little more jQuery-elegant to write the flash-forever recursively:
var flashForever = function () {
$(".slider1").fadeOut(2000).fadeIn(2000, flashForever);
};
$(document).ready(function () {
flashForever();
});
http://jsfiddle.net/uoqdfhdb/1/
Except I wonder if the tail-recursion will eventually cause stack overflow.
This should work:
var $slider = $('.slider1');
var flashSlider = function () {
$slider.fadeToggle(2000, flashSlider);
};
$(document).ready(function () {
flashSlider();
});
Yes it is possible. You should put all of your code in $(document).ready argument for the callback function, you can't capture that as a function. It is a listener on the document object to make sure everything is loaded. So it should look something like:
$(document).ready(function () {
var runForever= function()
{
$(".slider1").fadeOut(2000, function () {
$(".slider1").fadeIn(2000);
});
}
setInterval(runForever, 4000);
//This runs the function 'runForever' one time only, how to run it every 4 sec?
//the above commented out code does not work.
});
Just let me rewrite your code:
$(document).ready(function() {
var runForever = function() {
$(".slider1").fadeOut(2000, function() {
$(".slider1").fadeIn(2000);
});
}
runForever();
setInterval(function(){runForever();}, 4000);
});
Here is a live preview
you could also write a recursive function calling itself again and again after completing animation:
$(document).ready(function() {
var runForever = function() {
$(".slider1").fadeOut(2000, function() {
$(".slider1").fadeIn(2000, function(){
runForever();
});
});
}
runForever();
});
$(document).ready(function () {
var $slider1 = $(".slider1");
function runForever(){
$slider1.fadeOut(2000, function () {
$slider1.fadeIn(2000);
});
clearTimeout(t);
var t = setTimeout(runForever, 4000);
}
runForever();
});

Div not displaying correctly on show

<script type='text/javascript'>
$(document).ready(function () {
var fenster = $(location).attr('href');
if (fenster == 'http://www.cyrill-kuhlmann.de/index.php/') {
$('#intro-page').show(function () {
$(this).click(function () {
$(this).fadeOut(250);
});
});
}
});
</script>
I have a div that needs to be displayed in full-screen as an intro. The problem is that it doesn't display correctly; it just displays itself in the top left corner and grows until its full-screen. Why is it doing this?
show() takes the duration of the animation as a first parameter. You have given it a function, which is incorrect. Either you meant to chain your methods:
$('#intro-page').show().click(function () {
$(this).fadeOut(250);
});
Or, you did mean to put a callback function in there, but you missed out the first parameter; the duration:
$('#intro-page').show(250, function(){
$(this).click(function(){
$(this).fadeOut(250);
});
});
Documentation
show()
<script type='text/javascript'>
$(document).ready(function () {
var fenster = $(location).attr('href');
if (fenster == 'http://www.cyrill-kuhlmann.de/index.php/') {
$('#intro-page').show(function () {
$(this).click(function () {
$(this).fadeOut(250);
});
});
}
});
</script>
try the following:
<script type='text/javascript'>
$(document).ready(function () {
var fenster = $(location).attr('href');
if (fenster == 'http://www.cyrill-kuhlmann.de/index.php/') {
$('#intro-page').show();
$('#intro-page').click(function(){
// seperate it from show function call so you can have more access to object
// and do logic on it.
$(this).fadeOut(250);
});
}
});
</script>

Script conflict Mootools Validation with jQuery Slide

Ok guys, I have the following problem I have a script to slideToggle obtained from this site, and another called formcheck.js form validation, I only load one at a time, I can avoid this conflict as I tried $.noConflict(true) without success helps the code is as follows:
<script type="text/javascript" src="js/mootools.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/lang/es.js"></script>
<script type="text/javascript" src="js/formcheck.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){ check = new FormCheck('third', {
display : {
fadeDuration : 500,
errorsLocation : 1,
indicateErrors : 1,
showErrors : 1
}
});
});
$(document).ready(function(){
$("#flip4").click(function(){
$("#panel4").slideToggle("slow");
});
});
$(document).ready(function(){
$("#flip5").click(function(){
$("#panel5").slideToggle("slow");
});
});
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
Try this for the jQuery part:
jQuery(document).ready(function () {
jQuery("#flip4").click(function () {
jQuery("#panel4").slideToggle("slow");
});
jQuery("#flip5").click(function () {
jQuery("#panel5").slideToggle("slow");
});
jQuery("#flip").click(function () {
jQuery("#panel").slideToggle("slow");
});
});
Or do it all with Mootools:
window.addEvent('domready', function () {
check = new FormCheck('third', {
display: {
fadeDuration: 500,
errorsLocation: 1,
indicateErrors: 1,
showErrors: 1
}
});
document.id("flip4").addEvent('click', function () {
document.id("panel4").toggle();
});
document.id("flip5").addEvent('click', function () {
document.id("panel5").toggle();
});
document.id("flip").addEvent('click', function () {
document.id("panel").toggle();
});
});
If you go for Mootools effects you can use reveal() and dissolve() to hide/show also.

how do I include a jQuery script into an include.js file?

lease forgive me if this is simple-minded a question.
I have a jQuery script shown below embedded in my app:
<script type='text/javascript'>//<![CDATA[
$(function(){
$('#div1).on('click', function () {
$('#divTitle').show();
});
$('#div1').on('click', function () {
$('#divTitle').slideUp();
});
});//]]>
</script>
<script type='text/javascript'>//<![CDATA[
$(function(){
$('#div2').on('click', function () {
$('#secDiv').show();
});
$('#div2).on('click', function () {
$('#secDiv).slideUp();
});
});//]]>
</script>
My boss just told me to put this jQuery in include.js file.
I included the file as shown below
function showIcon() {
toggleButtonIcon('[Widget dijit.form.ToggleButton, pan]');
navToolbar.activate(esri.toolbars.Navigation.PAN);
/*dijit.registry.byClass("dijit.form.ToggleButton").forEach(function(togbtn) {
if (togbtn == '[Widget dijit.form.ToggleButton, pan]') {
togbtn.attr("checked", true);
}
else
{
togbtn.attr("checked", false);
}
});
*/
}
//<![CDATA[
$(function(){
$('#div1).on('click', function () {
$('#divTitle').show();
});
$('#div1').on('click', function () {
$('#divTitle').slideUp();
});
});//]]>
<![CDATA[
$(function(){
$('#div2').on('click', function () {
$('#secDiv').show();
});
$('#div2).on('click', function () {
$('#secDiv).slideUp();
});
});//]]>
but now it isn't working anymore.
It is supposed to show and hide certain icons.
What am I doing wrong?
A couple things. First drop the <script> and CDATA tags. They aren't necessary in an external javascript file (presumably being included by a <script> tag in the HTML).
Secondly, you'll need to wrap your javascript with $(document).ready(). You probably had this javascript at the bottom of your current HTML (or at least after the HTML elements it was binding to), and since this external JS file likely gets loaded in the header, the HTML elements aren't there to bind to.
new include.js :
function showIcon() {
toggleButtonIcon('[Widget dijit.form.ToggleButton, pan]');
navToolbar.activate(esri.toolbars.Navigation.PAN);
/*dijit.registry.byClass("dijit.form.ToggleButton").forEach(function(togbtn) {
if (togbtn == '[Widget dijit.form.ToggleButton, pan]') {
togbtn.attr("checked", true);
}
else
{
togbtn.attr("checked", false);
}
});
*/
}
$(document).ready(function() {
$(function(){
$('#div1).on('click', function () {
$('#divTitle').show();
});
$('#div1').on('click', function () {
$('#divTitle').slideUp();
});
});
$(function(){
$('#div2').on('click', function () {
$('#secDiv').show();
});
$('#div2).on('click', function () {
$('#secDiv').slideUp();
});
});
});
Also verify that you have something like this in your HTML file:
<script type="text/javascript" src="path/to/include.js"></script>
You want to include your Javascript in a file right ?
Assuming jQuery has been included before :
Html
<script type="text/javascript" src="path/to/include.js"></script>
include.js
jQuery(function($){
$('#div1').on('click', function () { //missing '
$('#divTitle').show();
});
$('#div1').on('click', function () {
$('#divTitle').slideUp();
});
$('#div2').on('click', function () {
$('#secDiv').show();
});
$('#div2').on('click', function () { //missing ' here
$('#secDiv').slideUp(); //missing ' here too
});
});
//Edit omitted this part
function showIcon() {
toggleButtonIcon('[Widget dijit.form.ToggleButton, pan]');
navToolbar.activate(esri.toolbars.Navigation.PAN);
}

javascript dollar sign variable not working

I have following code in my Wordpress:
(function ($) {
var $header = $("div.header");
$(window).bind("scroll resize", function () {
if ($(window).scrollTop() > 30) {
$("div.header").stop().animate({
'opacity': 0.24
}, {
duration: 1000
});
} else {
$header.stop().animate({
'opacity': 1
}, {
duration: 1000
});
}
});
})(jQuery);
If statement kicks in when supposed but else never...
BUT
If I enclose it with:
jQuery(document).ready(function($) {
// code here
});
It's all fine. Why?
Thank you
May be you're trying to use jQuery when dom in not build. Try to use $(document).ready function:
(function ($) {
$(document).ready(function () {
$header = $("div.header");
$header.remove();
});
})(jQuery);
About what you have mantioned in the question:
jQuery(document).ready(function ($) {
// code
});
It works because it do the same thing: it binds event handler on ready event and pass jQuery object as a parameter to the function as $.
Now what you did before:
(function ($) {
$header = $("div.header");
$header.remove();
})(jQuery);
Here you just declare anonymous function with named $ parameter:
function ($) {
}
And call it with jQuery object as a parameter, which will be available in the function as $:
(function ($) {
})(jQuery);

Categories

Resources