I am very new to jquery and have been working on some snippets I found online. I have reached a problem where I think because I have 2 different jquery libraries called to the page and 2 functions both using $(function) are causing the page not to work. I've tried using the no.conflict option but not sure I used this properly or missed something out elsewhere. Would appreciate if someone can explain or tell me what the solution would be? Thanks in advance.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.revolution.js"></script>
</head>
<body>
<div id="overlay"></div>
<div id="container">
<div id="jstwitter"></div>
<script type="text/javascript" >
$(function() {
$('#container').revolution();
});
</script>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="nested.jstwitter.js"></script>
<script type="text/javascript" src="automate.js"></script>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript">
$(function () {
// start jqtweet!
JQTWEET.loadTweets();
});
</script>
</html>
Don't know why do you need two versions, but you can try something like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var jQuery_1_10_2 = $.noConflict(true);
</script>
<script type="text/javascript" >
(function( $ ) {
$('#container').revolution();
})( jQuery_1_10_2 );
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var jQuery_1_8_2 = $.noConflict(true);
</script>
<script type="text/javascript" >
(function( $ ) {
JQTWEET.loadTweets();
})( jQuery_1_8_2 );
</script>
Could you not just combine them?
<script type="text/javascript">
$(function () {
// Container Revolution
$('#container').revolution();
// start jqtweet!
JQTWEET.loadTweets();
});
</script>
Related
I have a long status list in SharePoint 2019 that has the following CSS for color coding rows:
how do I get this to work on all the multiple pages vs just the first page of the list.
Can the code be modified to work with a grouped view as well?
<script type="text/javascript" src="/sites/aaa/MSLibrary/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document.ready(function(){
$Text=$("td.ms-cellstyle.ms-vb2:contains('High')");
$Text.css("background-color", #FFAA99");
$Text=$("td.ms-cellstyle.ms-vb2:contains('Medium')");
$Text.css("background-color", #FFFF99");
$Text=$("td.ms-cellstyle.ms-vb2:contains('Low')");
$Text.css("background-color", #EEFFE6");
});
</script>
<script type="text/javascript" src="/sites/aaa/MSLibrary/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document.ready(function(){
$Text=$("td.ms-cellstyle.ms-vb2:contains('Not Started')");
$Text.css("background-color", #F0F0F0");
$Text=$("td.ms-cellstyle.ms-vb2:contains('In Progress')");
$Text.css("background-color", #D9E5F0");
$Text=$("td.ms-cellstyle.ms-vb2:contains('Completed')");
$Text.css("background-color", #99CC66");
});
</script>
<script type="text/javascript" src="/sites/aaa/MSLibrary/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/sites/aaa/MSLibrary/jquery-ui.js"></script>
<script type="text/javascript">
(function($){
function doCollapseTaskList(){
$(.ms-commentcollapse-iconouter>img">.each(function(){
$(this).click();
});
}
$(function(){
ExecuteOrDelayUntilScriptLoaded(function(){
if(typeofasyncDeltaManager !="undefined")
asyncDeltaManager.add_endRequest(doCollapseTaskList);
else doCollapseTaskList();
},"init.js");
});
</script>
Thanks for the help in advance!
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
<script type="text/javascript" src="assets/js/jquery.placepicker.js"></script>
<script>
$(document).ready(function () {
$(".placepicker").placepicker();
}); // END document.ready
</script>
<input class="placepicker form-control" name="location" placeholder="location"/>
Please help me. It's not working properly.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=true&libraries=places"></script>
you have to provide api key only, then it will work fine.
I created jquery code and when a value is assigned into the input ,this will show a div.
Here is the demo working:
<script>
$(document).ready(function () {
if ($("#mont1").val() == '9') {
$("#di1").show();
}
});
</script>
<input id="mont1" value="9" />
<div id="di1">
<input type="submit" value="Submit" />
</div>
But In my project I'm getting this error:
$(document).ready(function(){ Uncaught ReferenceError: $ is not defined
I have lots of scripts:
<script src="/javascripts/prototype.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/effects.js?1375798766" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1375798766" type="text/javascript"></script>
<script src="/javascripts/controls.js?1375798766" type="text/javascript"></script>
<script src="/javascripts/application.js?1393972990" type="text/javascript"></script>
<script src="/javascripts/jquery/jquery-1.4.min.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/jquery/easyTooltip.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/jquery/jquery-ui-1.7.2.custom.min.js?1375798764" type="text/javascript"></script><script src="/javascripts/jquery/jquery.wysiwyg.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/jquery/hoverIntent.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/jquery/superfish.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/jquery/jquery_popup.js?1405027324" type="text/javascript"></script>
<script src="/javascripts/jquery/jquery.validationEngine.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/jquery/jquery.validationEngine-en.js?1403629546" type="text/javascript"></script><script src="/javascripts/calendar_date_select/calendar_date_select.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/calendar_date_select/format_hyphen_ampm.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/autoNumeric.js?1375798766" type="text/javascript"></script>
Somebody can help me with this jquery conflict?
The problem is with jsfiddle link what have posted:
Your script is wrapped in onLoad event. So this line fails to execute.
window.onload=function(){
Either you change the wrapped to No wrap in head it works fine. Or you may simply remove the annonymous function in the jsfiddle that will also do:
window.onload=function(){ //<-- remove this
...
} //<-- remove this
EDIT:
script
jQuery(document).ready(function ($) {
$(document).ready(function () {
if ($("#mont1").val() == '9') {
$("#di1").show();
}
});
});
you can add a class wich appropriate style
.hidden { display: block; }
.inline { display: inline; }
in js
window.onload=function(){
var inputval = document.getElementById("input-hi").value;
var div = document.getElementById("div-hi");
if (inputval == 5)
div.className = "hidden";
else
div.className = 'inline';
}
How can I reload Reddit buttons with jquery? I have load more ajax function and Reddit buttons don't appear when loaded via jquery. I tried to use:
$.ajax({ url: 'http://www.reddit.com/static/button/button2.js', dataType: 'script',
cache:true});
This is the actual button attached to each post:
<script type="text/javascript">
reddit_url = "http://domain.com/post-num";
</script>
<script type="text/javascript" src="http://www.reddit.com/static/button/button2.js">
</script>
Thanks
You can accomplish this by updating the Reddit iframe's "src".
$('some-surrounding-div-here').find('iframe').attr('src','http://www.reddit.com/static/button/button2.html?width=51&url=http%3A%2F%2Fdomain.com%2Fpost-num');
Here it is in a full working example:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#refresh_reddit_button').click(function(){
$('#reddit_button_container').find('iframe').attr('src','http://www.reddit.com/static/button/button2.html?width=51&url=http%3A%2F%2Fdomain.com%2Fpost-num');
});
});
</script>
</head>
<body>
<input id="refresh_reddit_button" type="button" value="Refresh Reddit">
<div id="reddit_button_container">
<script type="text/javascript">
reddit_url = "http://domain.com/post-num";
</script>
<script type="text/javascript" src="http://www.reddit.com/static/button/button2.js">
</script>
</div>
</body>
</html>
I've set an onclick event unobtrusively to one of my buttons which is working fine in Firefox, Chrome, Safari and Opera. But in IE8 te script is never called (debugger statement is never executed).
The script:
$(function () {
$('#template-button').click(function () {
debugger;
var $templateDdl = $('#templateDdl');
var selTempID = $templateDdl.val();
var url = $templateDdl.data('url');
$.post(url, { selectedTemplateID: selTempID }, function (data) {
$('#template').html(data);
});
});
});
The button:
<input type="button" value="Verander template" id="template-button" />
The JQuery is in a seperate file called artsportaal.js which is loaded in the _Layout.cshtml:
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.core.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/IG/infragistics.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/IG/infragistics.loader.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/artsportaal.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/DatePickerReady.js")" type="text/javascript"></script>
It is being loaded as almost the last script.
Is this a well known issue with a work around? Have I done something wrong? Thanks for your time and interest in my question.
This code works perfectly. As #ravisoni commented, I could have been because of name collision.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript">
$(function () {
$('#my_button').click(function () {
alert('button got clicked!');
});
});
</script>
</head>
<body>
<input type="button" value="click_me" id="my_button" />
</body>
</html>
EDIT: I edit to comment to #devnull69 as to "debugging;". Statements with no side efects are accepted in JS, and therefore the script does not crash because of that "debugging;"
This is valid JS:
$(function () {
$('#my_button').click(function () {
'use strict';
'or better, do not use strict';
var x = 83;
x;
alert('button got clicked!');
});
});
Try it out: http://jsfiddle.net/SQgdK/1/