Develop Reference

How to use multiple versions of jQuery?

There are other answers on Stack Overflow however, I can't get any of them to work.
I need to use 2 versions of jQuery. Here is my code:
I link to first version then have this code:
<script>
var $i = jQuery.noConflict();
</script>
I then link to the 2nd version and have this code:
<script>
var $j = jQuery.noConflict();
</script>
Here is the code I need to run with the 2nd version $j
<script type="text/javascript">
$j.ready(function() {
$j('#slider').layerSlider({
sliderVersion: '6.2.1',
type: 'fullsize',
responsiveUnder: 0,
fullSizeMode: 'hero',
maxRatio: 1,
parallaxScrollReverse: true,
hideUnder: 0,
hideOver: 100000,
skin: 'outline',
showBarTimer: true,
showCircleTimer: false,
thumbnailNavigation: 'disabled',
allowRestartOnResize: true,
skinsPath: 'skins/',
height: 800
});
});
</script>
I inspected the page in Chrome and not showing any errors but it will not run the slider at all.

Here's one way to load (and use) 2 versions of jQuery at once. There's no need to call .noConflict at all.
console.log(jQuery3.fn.jquery);
console.log(jQuery2.fn.jquery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>var jQuery3 = jQuery;</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>var jQuery2 = jQuery;</script>
Then to run your slider script with jQuery2:
$jQuery2.ready(function() {
$jQuery2('#slider').layerSlider({
sliderVersion: '6.2.1',
type: 'fullsize',
responsiveUnder: 0,
fullSizeMode: 'hero',
maxRatio: 1,
parallaxScrollReverse: true,
hideUnder: 0,
hideOver: 100000,
skin: 'outline',
showBarTimer: true,
showCircleTimer: false,
thumbnailNavigation: 'disabled',
allowRestartOnResize: true,
skinsPath: 'skins/',
height: 800
});
});

Disable a single JS event on a specific page?

I added a JS script to my footer template before the closing body tag so the code is present on all my pages.
Is there a way to disable this ONE (not all JS) script on specific pages?
This is the code I'm using:
<script>
ulp_add_event("onload", {
popup: "iP5vHdfUaGgeZ247",
mode: "once-period",
period: 90,
delay: 2,
close_delay: 0
});
</script>
Thanks

If you want to restrict this in client side the easiest and fastest way I can think of is:
<script>
if(window.location.href !== "YOUR_EXCLUDE_FULL_URL"){
ulp_add_event("onload", {
popup: "iP5vHdfUaGgeZ247",
mode: "once-period",
period: 90,
delay: 2,
close_delay: 0
});
}
</script>
you can also use window.location.pathname and not provide the host and protocol prefix.
if you want something more generic to support multiple exclude pages you can create an array of addresses and the code should look:
<script>
var addressesScriptIsNotLoaded = [
'ADDRESS_ONE',
'ADDRESS_TWO'
];
if(addressesScriptIsNotLoaded.indexOf(window.location.href) === -1){
ulp_add_event("onload", {
popup: "iP5vHdfUaGgeZ247",
mode: "once-period",
period: 90,
delay: 2,
close_delay: 0
});
}
</script>

You can use the windowlocation object and an if statement. (There may be a better way)
if(window.location.href = 'example.com/mypage'){
dothis()
}
else{
}

document type does not allow element "h4" here

I can't find out what the problem is with this line of code:
…sc', '<h4 class="vtem_news_show_title">Nesmet El Bouhaira</h4>');$('#vtem1 img…
This is the error message I receive:
**document type does not allow element "h4" here**
What do I need to change?
This is the whole <script>:
<script type="text/javascript">
var vtemnewsshow = jQuery.noConflict();
(function($) {
$(document).ready(function() {
$('#vtem0 img').data('ad-desc', '<h4>Nesmet El Bouhaira</h4>');
$('#vtem1 img').data('ad-desc', '<h4>Tunis Mall 1</h4>');
$('#vtemnewsshowid89-newsshow').adGallery({
loader_image: 'http://laselection-immobiliere.com/modules/mod_vtem_news_show/images/loading.gif',
update_window_hash: false,
start_at_index: 0,
bottompos: 20,
thumb_opacity: 0.8,
animation_speed: 400,
width: '970',
height: '340',
display_next_and_prev: 1,
display_back_and_forward: 0,
slideshow: {
autostart: 1,
speed: 5000
},
effect: 'slide-hori', // or 'slide-vert', 'fade', or 'resize', 'none'
enable_keyboard_move: 1,
link_target: '_self'
});
});
})(jQuery);
</script>

If your Javascript contains HTML tags, a validator considers these part of the document, unless you prefix your code like this:
<script type="text/javascript">
//<![CDATA[
jQuery.data(element, '<h1>Hello, world.</h1>');
//]]>
</script>
You might have come across another way to resolve this issue:
<script type="text/javascript">
jQuery.data(element, '<' + 'h1>Hello, world.<' + '/h1>');
</script>
This basically chops the string to "hide" the tags from a validator. It makes code harder to read and I'd never prefer this "hack" to the CDATA solution.
Please have a look at this question, which is rather old but has a lot of answers.

Jquery Datatable Page Number Issue

I am using Jquery Datatable in Asp.net Page. As we know that at bottom it shows message like "Showing 1 to 10 of 100" . But i am getting issue that whenever Page size is less than total records then at bottom i always get Message ""Showing 1 to 010 of 100". 0 is getting prefixed before End records. My code is as below
var pagesize = jQuery('#hdpagesize').val();
jQuery('#dyntable').dataTable({
"sPaginationType": "full_numbers",
"iDisplayLength": pagesize,
"aaSortingFixed": [[0, 'asc']],
"aoColumnDefs": [
{ 'bSortable': true, 'aTargets': [1] }
],
"fnDrawCallback": function (oSettings) {
jQuery.uniform.update();
}
});

I believe this is where iDisplayLength is being processed as a string as opposed to an integer.
Try using parseInt(pagesize, 10) and see what result is returned.
If that fixes the problem, then try and apply a server-side fix so that pagesize is processed and served as an integer.

Call jQuery function in a loop with different parameters

I am trying to create multiple carousels in one page following this example.
I am creating my carousels in a foreach loop, and I assign to each carousel the names c0, c1, c2, etc. (Each carousel is a <div>)
Now, in order to run the script according to the example, I should run in on each carousel separately.
For example:
<script type="text/javascript">
$(document).ready(function() {
$('#c0').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay: 3, orientation: 'v' });
$('#c1').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: false, masked: false, itemstodisplay: 5, orientation: 'h' });
$('#c2').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: true, itemstodisplay: 5, orientation: 'h' });
});
</script>
Since my carousels are created in a foreach loop, I cannot know how many of them I will have, so I tried to call the function in a for loop:
for (int i = 0; i < counter; i++)
{
string cNum = "#c" + i.ToString();%>
<script type="text/javascript">
$(document).ready(function() {
$(cNum).jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true });
});
</script>
<%} %>
I checked, and the cNum values are okay, it gets the values #c0, #c1, etc. but it can't recognize it as an equivalent to '#c0' etc. that were there initially.
How can I insert dynamic carousel names into the function?

Instead of doing that, just give each div a class. Like this:
<div class="someClassThatIKnowIsACarousel">
Then you don't need a loop:
$(".someClassThatIKnowIsACarousel").jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true });

The problem in your code is that cNum inside your dynamically generated JavaScript section isn't interpreted as an ASP variable. You could fix that with something like $('<% cNum %>') (also note the JavaScript quotes, without get you would get $(#c0), which is erroneous).
However, your approach is wrong, please avoid the best you can mixing server/client code like that.
As aquinas already pointed out, the best solution is to add a class to the divs:
HTML:
<div class="carousel">
JavaScript:
$('div.carousel').jsCarousel({ ... });