JQuery $(document).ready

Hi, I was wondering is there something in Spry that equals
what is $(document).ready in jQuery? This is called when the DOM is
ready but page images might still be loading and this would be
called before window.onload...
Thanks

Spry.Utils.addLoadListener(function(){
i think.
function from SpryDOMUtils.js

Similar Messages

Get jQuery Document Ready to work in a Custom Layout Page

Hi
Working with a branding company I have placed my Bootstrap and JQuery files at the bottom of my custom Master page
</footer>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js">//<![CDATA[
//]]>
</script>
<script type="text/javascript" src="/Style%20Library/Client/js/bootstrap.min.js">//<![CDATA[
//]]>
</script>
<script type="text/javascript" src="/Style%20Library/Client/js/bootstrap-datepicker.js">//<![CDATA[
//]]>
</script>
All good! Now if I add a $(document).ready(function() below the above definitions and say have a date picker widget marked up this
works.
I have noticed that in my case I am unable to run document ready function at the custom page layout level- only the one in the custom master file is ever executed - I have tried moving the above definition files into the header as per the sample in
Bootstrap2.html but SharePoint simply removes them during the conversion. Moving the same document ready function out of the master into the layout page doesn't work
I guess my question is am I am have a unique document ready function at the page layout level as this I would have thought this would be possible - In my case I need my JQuery functon to perform some runtime branding that is unique per page
Daniel
Freelance consultant

for a quick and dirty implementation, I coded this up which works. I will see about the other implementation as suggested by Hugh as I am not entirely happy about loading the document ready as there is a slight delays as the body class is set and the
page is rendered
var bodyCSS ;
function SetBodyCSS()
var ctx = new SP.ClientContext();
var site = ctx.get_site();
var web = ctx.get_web();
// construct a json object
ctx.load(web);
ctx.executeQueryAsync(function(s, a){
var siteBodyContainerCSS = {
"Sales": "Pink",
"IT": "burgundy"
// lookup the class to set from the title
bodyCSS = siteBodyContainerCSS[web.get_title()];
// only bother to set if not null , undefined or empty
if (bodyCSS)
$('#s4-bodyContainer').removeClass("default");
$('#s4-bodyContainer').addClass(bodyCSS);
else
alert( ' no body css class defined for ' + web.get_title()) ;
// now call this to get the body css class
//]]>
</script>
</a>
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
ExecuteOrDelayUntilScriptLoaded(function () {
/* your code here */
SetBodyCSS();
}, "sp.js");
$('#dp6').datepicker();

Document.ready() in jQuery

Hi,
On jsf fragement page, I want to do something when the is loaded. So, in jQuery, I do this.
<af:resource xmlns:af="http://xmlns.oracle.com/adf/faces/rich type="javascript">
$(document).ready(function() {
// Handler for .ready() called.
alert('load');
$("input[name='" + "T:prof:businessS:viewbusiness:oliit4" + "']").attr("readonly", true);
</af:resource>
The ready() is called only when the page is just loaded. If I go to another page, and come back to the page, ready() is not invoked. If I hit “F5” to refresh the page, I got the alert. Is it supposed to fire the alert every time a page is loaded or “clicked”?
Thank you.

can you try having a pageTemplate and use the template in all your page..
and inside the pageTemplate you can have the following code
<af:clientListener method="loadJquery()" type="load"/>and at the top you can have as
function loadJquery() {
$(document).load().scrollTop(0); // or any other code
}

JQuery slideshow doesn't work

Now that I have the javascript code in the right place in the head, and I have followed all the other instructions to get a jQuery slideshow into my webpage, are there any ideas why it doesn't function as a slideshow please?
In browser preview, one piece of javascript code shows at the top of the page
jQuery(document).ready(function($) { $('#SWAP').cycle({ fx: 'fadeZoom'}); });
and the images for the slideshow are all showing on the page one underneath the other.
Here's all the code for the page, with the relevant code for the slideshow in BOLD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="description" content="The most recent review of Lunaire Collective printed in The Australian newspaper.">
<meta name="keywords" content="review, The Australian, Whistler, Tom Green, Birtwistle secret theatre">
<title>LUNAIRE COLLECTIVE: Reviews and photos of Lunaire Collective - News and Reviews</title>

<link href="desktop.css" rel="stylesheet" type="text/css">
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
jQuery(document).ready(function($) {
$('#SWAP').cycle({ fx: 'fadeZoom'});

<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body>
<div class="container">
<div class="header"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1024" height="133" id="FlashID" title="Lunaire Collective with moon animation">
    <param name="movie" value="lunaire_banner.swf">
    <param name="quality" value="high">
    <param name="wmode" value="opaque">
    <param name="swfversion" value="7.0.70.0">
    
    
    <object type="application/x-shockwave-flash" data="lunaire_banner.swf" width="1024" height="133">
      
      <param name="quality" value="high">
      <param name="wmode" value="opaque">
      <param name="swfversion" value="7.0.70.0">
      <param name="expressinstall" value="Scripts/expressInstall.swf">
      
    </object>
    
</object>
</div>
<div class="nav">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="about_us.html">ABOUT US</a></li>
<li><a href="concerts.html">CONCERTS</a></li>
<li><a href="news.html">GALLERY</a></li>
<li><a href="composers.html">COMPOSERS</a></li>
<li><a href="contact_us.html">CONTACT US</a></li>
</ul>
</div>

<div class="sidebar1">
</div>

<div class="content" id="SWAP">
   <img src="slideshow/slide00.jpg" width="600" height="338" alt="The Lunaire Collective members"/>
   <img src="slideshow/slide01.jpg" width="600" height="338" alt="Lunaire in the recording studio"/>
   <img src="slideshow/slide02.jpg" width="600" height="338" alt="Lunaire in quartet form"/>
   <img src="slideshow/slide03.jpg" width="600" height="338" alt="Lunaire in duo form"/>
   <img src="slideshow/slide04.jpg" width="600" height="338" alt="Lunaire in quartet form"/>
   <img src="slideshow/slide05.jpg" width="600" height="338" alt="Lunaire at Tyalgum festival 2014"/>
   <img src="slideshow/slide06.jpg" width="600" height="338" alt="Lunaire with Hartley Newman"/>   
</div>

<div class="sidebar2">
    <h2>UPCOMING CONCERTS</h2>
    <p><a href="concerts.html">Wed 25 Mar 1:05pm<br>
      Classic Wind<br>
      Quintets<br>
      at QCGU</a></p>
    <p><a href="concerts.html">Wed 3 Jun 6:00pm<br>
      Romantic<br>
      Revue<br>
      at QCGU</a></p>
    <p><a href="concerts.html">Wed 10 June 6:00pm<br>
    Winds at<br>
    Twilight<br>
    Toowoomba</a></p>
    <p><a href="concerts.html">Sat 11-13 Sept <br>
Tyalgum Music<br>
Festival</a></p>
    <p><a href="concerts.html">Wed 14 Oct 6:00pm<br>Carter<br>at QCGU</a></p>
</div>
<div class="footer">
<div class="footer2">
<p><a href="index.html"><img src="graphics/lunaire_logo_transparent_no_outline.jpg" alt="Lunaire Collective Logo" width="171" height="97" class="fltlft"></a><a href="http://www.griffith.edu.au/music/queensland-conservatorium" target="_blank"><img src="graphics/Griffith-logo-colour.png" alt="Griffith University Logo" width="236" height="63" class="fltrt"></a></p>
</div>
<div class="footer3"><p class="italics">© 2013 Lunaire Collective. All rights reserved.</p>
<p class="italics"><a href="http://www.web.prohasky.com.au" target="_blank">Web design by Glenn Prohasky</a></p>
</div>
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>

Change this -
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
jQuery(document).ready(function($) {
$('#SWAP').cycle({ fx: 'fadeZoom'});
To this -
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script>
jQuery(document).ready(function($) {
$('#SWAP').cycle({ fx: 'fadeZoom'});
</script>
Assuming everything else is in the right place, that should do the trick. But here's a suggestion - put the two external links ABOVE the editable region in the template. That way, all files will link to those two jquery files (it won't matter since they are cached locally) and then all you'd need to put into the editable region would be the embedded script -
<script>
jQuery(document).ready(function($) {
$('#SWAP').cycle({ fx: 'fadeZoom'});
</script>

How to uncheck "Add as a new version to existing files" inside the "Add a document" dialog

I am working on a publishing site collection using the enterprise wiki template. Currently when users want to insert an image inside the rich text editor, they will be prompted with the following:-
And if the user insert a picture that already exists then it will replace the existing one, which might cause the picture to be displayed inside a Wiki page which it does not belong to !!
So is there a way to do any of the following:-
Give the new picture a unique auto generated name?
To un-check the   “Add as a new version to existing files” by default?
Or to always prevent replacing images, as this can cause many conflicts !!
Can anyone advice ?please?

You can do it using below script
http://webcache.googleusercontent.com/search?q=cache:51tmEQHanZoJ:vegardstromsoy.blogspot.com/2011/05/jquery-to-override-sharepoint-ootb.html+&cd=4&hl=en&ct=clnk&gl=in
$(document).ready(function() {
    if (document.title ==
"Upload Document") {
        $("input[id$='OverwriteSingle']").attr("checked",false);
        $("input[id$='OverwriteMultiple']").attr("checked",false);
http://hansiandy.wordpress.com/2010/10/19/sharepoint-20072010-tips-uncheck-add-as-a-new-version-to-existing-files-checkbox-on-upload-aspx-in-moss-2007sharepoint-2010/
If this helped you resolve your issue, please mark it Answered
but where i should add the following jQuery :-
$(document).ready(function() {
if (document.title == "Upload Document") {
$("input[id$='OverwriteSingle']").attr("checked",false);
$("input[id$='OverwriteMultiple']").attr("checked",false);
inside the master page or insdie the upload.aspx page ?

Jquery .load not loading

I'm learning how to build a web app, and I'm having a problem with jquery .load()
this is what I got for Jquery
$(document).ready( function(){
          setOrientationListener ();
          changePage('test.html?v=1');
function changePage(filename){
          $('.Content_Container').animate({opacity:0}, 500, function(){
                    $('.Content_Loading_Container'.load('/Content/'+filename), function(){
                              alert('loaded');
It fades out but dosen't seem to load the requested page. I have the alert just to tell me if it loaded in.
I have the index.html file in the parent folder, and the test.html in a folder called Content.
(the page is just <p>loaded</p>)
I tried different path versions to see if it was the path loaction, but still didn't work
Can anybody see whats wrong?
(and a brief explanation of what I did wrong)
*incase you want need the CSS
/* Global */
body {margin:0px; padding: 0px; font-family: Helvetica; font-size: 16px; background-color: #ddd;}
/*Global Layout*/
header{
          display: block; position:absolute; top:0px; left:0px; height: 70px; background:url(../Images/banner.png?v=1) no-repeat 0px 0px;
/*-webkit-box-shadow: 0px 5px 4px 4px rgba(28,84,0,0.15); box-shadow: 0px 5px 4px rgba(28,84,0,0.15);*/
article{
          display: block; position: absolute; top: 70px; left: 0px; background:url(../Images/content.png?V=1) repeat-x 0px 0px;
article .Content_Container{
position: absolute; top: 0px; left: 0px; background: none;
article .Content_Container .Content_Loading_Container{
position:absolute; top:0px; padding: 40px 20px 0px 40px;
footer{
display: block; position:absolute; bottom: 0px;left: 0px; height:60px;
background-color: #fff;
nav{
position: absolute;bottom: 18px; left: 25px;
.banner_logo{position: absolute; top:10px; right:30px;}
.page.home article .Content_Container{
          background:url(../Images/background.png?v=1) no-repeat 0px 0px;
.page.landscape {position: relative; width: 1024px; height: 748px; overflow: hidden;}
.page.landscape header{width: 1024px;}
.page.landscape article{width: 1024px; height: 618px;}
.page.landscape footer{width: 1024px;}
.page.landscape article .Content_Container{width: 1024px; height: 618px;}
.page.portrait {position: relative; width: 768px; height: 1004px; overflow: hidden;}
.page.portrait header{width: 768px;}
.page.portrait article{width: 768px; height: 874px;}
.page.portrait footer{width: 768px;}
.page.portrait article .Content_Container{width: 768px; height: 874px;}
*incase you want need the html
<!DOCTYPE html>
<html lang="en">
          <head>
                    <meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
                    <title>my web app</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scaled=0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link type="text/css" rel="apple-touch-icon-precomposed" href="Images/Go_Icon.png?v=1"/>
<link type="text/css" rel="apple-touch-startup-image" href="Images/GraphicOne-Hor.png?v=1"
media="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape)"/>
<link type="text/css" rel="apple-touch-startup-image" href="Images/GraphicOne-vert.png?v=1"
media="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait)"/>
<link rel="stylesheet" type="text/css" href="Assets/Go.css?v=1"/>
<script type="text/javascript" src="Assets/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Assets/iscroll/src/iscroll.js"></script>
<script type="text/javascript" src="Assets/Go_Parent.js?v=1"></script>
          </head>
          <body>
                    <div class="page home">
                              <footer></footer>
                              <article>
<div class="Content_Container">
<div class="Content_Loading_Container"></div>
                                        </div>
                              </article>
                              <header></header>
<img class="banner_logo" src="Images/Logo.png"/>
                              <nav></nav>
                    </div>
          </body>
</html>

Hi,
According to your post, my understanding is that you had an issue about the JQuery loading image.
I think the issue is related to the browser. Did you use the IE 8?
The hide() and show() method not work in IE 8.
http://social.technet.microsoft.com/Forums/en-US/a8e17024-bea3-4cb7-8283-bcbcf8955e18/jquery-loading-image-issue?forum=sharepointgeneralprevious
http://stackoverflow.com/questions/21876416/show-hide-not-working-in-ie8-jquery
Thanks & Regards,
Jason
Jason Guo
TechNet Community Support

Lightbox and jquery.js conflict

Hi I have a query.js and a lightbox.js javascripts running on the same page and they are conflicting. They both work great seperately but when combined the scripts stop working.
I found a forum that is closed that reference's this solution:
   <script>
     jQuery.noConflict();
     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
However, I am unsure of what to do with it. The forum referenced changing the name of the 'someid' but I don't know what to change it to.
Here is my conflicting codes:
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/lightbox.js"></script>
   <script>
     jQuery.noConflict();
     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
<script type="text/javascript">
            jQuery(document).ready(function(){
                //To switch directions up/down and left/right just place a "-" in front of the top/left attribute
                //Caption Sliding (Partially Hidden to Visible)
                jQuery('.boxgrid.caption').hover(function(){
                    jQuery(".cover", this).stop().animate({top:'50px'},{queue:false,duration:160});
                }, function() {
                    jQuery(".cover", this).stop().animate({top:'300px'},{queue:false,duration:160});
        </script>




<script type="text/javascript" src="scripts/mootools.js"></script>
<script type="text/javascript" src="scripts/swfobject.js"></script>
<script type="text/javascript" src="scripts/videobox.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="scripts/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="scripts/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
    jQuery.noConflict();
</script>
<script type="text/javascript">
            jQuery(document).ready(function(){
                jQuery('.boxgrid.caption').each(function (){
                    jQuery(this).mouseenter (function(){
                        jQuery(this).find(".cover").animate({top:'50px'},{queue:false,duration:160});
                    jQuery(this).mouseleave (function(){
                        jQuery(this).find(".cover").animate({top:'150px'},{queue:false,duration:160});
                jQuery("a.external").fancybox();
</script>

Adjustments to a jQuery file

Hi,
I have a jQuery image slide show gallery I placed onto a website. I changed the overall dimensions of the image space & container as I'd like the photos to appear at a specific dimension.
However, the controls that actually activate the before and next are now missing or hidden somewhere. How can I manipulate so everything rescales in one go accordingly?
Thank you!

OK,
The developer encourages end-users to manipulate as needed.
He recommends modifying the function call to include whatever dimensions are required, by citing this example:
jQuery(document).ready(function(){
    jQuery('#slideshow').fadeSlideShow({
        width: 800,
        height: 600
So, I only wanted to change the width to 1100, but I see no change whatsoever onscreen, when I edit that function.
To take it a step farther, I went into the class ID style called 'slideshow', and also tried editing the width in there to 1100; still no luck.
Any advice?
ul#slideshow{list-style:none;border:1px solid #999;padding:2px;margin:auto;margin-top:5%;width:640px;height:480px;overflow:hidden;}

Jquery not loading in apps

Hi Team,
we are developing apps for share point 2013 which is provider hosted.
In web application we have start page where we are using jquery document.ready function and updating label value which works fine if i browse the web app separately.
when its been referenced in app part jquery does not work.
please let me know how to resolve this.
Navy

You would have to load in jQuery also in your app part, by using a <script type="text/javascript" src="PATH TO jQuery"></script> style of tag in the app part itself (for example in between <head></head>)
[custom.development]

Integrating Flash as a HTML5 Componant (with JQuery)

Hello,
i am strugling to make the flash componant fit as a html5 valid componant inside JQuery. Here is what i have so far:
<script>
jQuery(document).ready(function(){
jQuery('body').data('videoCriteria', {'dom':'domVideoResults', 'q':'', 'username':'remi2611', 'category':'', 'feed':'most_viewed', 'time':'today',
'type':'2', 'pageNumber':'1', 'nb_display':'10', 'safeSearch':'none'});
jQuery('body').data('social_buttons', 0);
youtube_wpress_displayVideosList();
</script><noscript>
Visitez notre blog voyage!
</noscript>
Any clue on how this could be done ?

Hello,
i am strugling to make the flash componant fit as a html5 valid componant inside JQuery. Here is what i have so far:
<script>
jQuery(document).ready(function(){
jQuery('body').data('videoCriteria', {'dom':'domVideoResults', 'q':'', 'username':'remi2611', 'category':'', 'feed':'most_viewed', 'time':'today',
'type':'2', 'pageNumber':'1', 'nb_display':'10', 'safeSearch':'none'});
jQuery('body').data('social_buttons', 0);
youtube_wpress_displayVideosList();
</script><noscript>
Visitez notre blog voyage!
</noscript>
Any clue on how this could be done ?

Problem: Jstl update query with Jquery script

Hi all,
i'm writing a jsp page with this 3 star rating Jquery script to show and vote some <div> (results) .
        <script type="text/javascript">
                                    jQuery(document).ready(function($) {
                                        $("#${Rss.pages_id}").stars({
                                            cancelShow: false,
                                            captionEl: $("#<%=i%>"),
                                            callback: function(ui, type, value){
                                                alert("Callback! ID = ${Rss.pages_id} Clicked: " + type + ", value: " + value );
                                        $("#${Rss.pages_id}").stars("select", ${Rss.trust_value})
                                </script>Now i want update the value in my DB(MySql) everytime that i will click on my "star rating"..i want do this with an jstl update query.
Someone can help me?? Thanks

Just so as you remember that jquery/javascript is completely client side.
JSP/JSTL is completely server side.
The only way to invoke java/JSP from javascript code is to make an http request - normally via ajax.
Given that, it doesn't make sense to put jquery code and a JSTL update query within the same JSP page.
The code to update the database should be a seperate resource called by ajax from the main page.
In that case, it doesn't have to be (and probably shouldn't be) done with JSTL. It is better done with java code within servlet/beans.
cheers,
evnafets

JQuery conflicting with spry

Hi,
I'm trying to use jquery with spry generated content. In the
code below, I attempt to add a click event listener to fire an
alert box. It seems as though the code does not work with the spry
generated regions. Any ideas?
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript"
src="includes/xpath.js"></script>
<script language="JavaScript" type="text/javascript"
src="includes/SpryData.js"></script>
<script language="javascript"
src="js/jquery.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
var xmlStr = "<?xml version=\"1.0\"
encoding=\"iso-8859-1\"?> \
<employees xmlns=\"
http://www.foo.com/employees\">
<employee> \
<id>55555</id> \
<lastname>Smith</lastname> \
<firstname>Edward</firstname> \
<phone>(415) 333-0235 </phone> \
<username>esmith</username> \
</employee> \
<employee> \
<id>44444</id> \
<lastname>Johnson</lastname> \
<firstname>Neil</firstname> \
<phone>(415) 333-9475 </phone> \
<username>njohnson</username> \
</employee> \
<employee> \
<id>33333</id> \
<lastname>Williams</lastname> \
<firstname>Steve</firstname> \
<phone>(415) 333-4573 </phone> \
<username>swilliams</username> \
</employee> \
<employee> \
<id>22222</id> \
<lastname>Jones</lastname> \
<firstname>John</firstname> \
<phone>(415) 333-9345 </phone> \
<username>jjones</username> \
</employee> \
<employee> \
<id>54125</id> \
<lastname>Brown</lastname> \
<firstname>Joe</firstname> \
<phone>(415) 333-5938 </phone> \
<username>jbrown</username> \
</employee> \
</employees>";
var dsEmployees = new Spry.Data.XMLDataSet(null,
"/employees/employee");
var xmlDOMDocument = Spry.Utils.stringToXMLDoc(xmlStr);
dsEmployees.setDataFromDoc(xmlDOMDocument);
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".elements").click(function() {
alert("hello");
//jQuery(this).addClass("selected");
</script>
<style type="text/css">
.selected {
border:1px solid;
</style>
</head>
<body>
<div class="elements">hello</div>
<div id="container" spry:region="dsEmployees">
<div class="elements"
spry:repeat="dsEmployees">{firstname}</div>
</div>
</body>
</html>

Try puting the jquery in a seperated <script> tag.
jquery and spry doesnt play nice together when they are in
the same tag. (alteast thats how i fixed my jquery problem)
If this doesnt help, try using a older version of jquery (as
test ofcourse)
I remember i had some problems with jquery and Spry when i
updated jquery to its latest function.

Coldfusion with jquery

I have facing one proble in jquery and coldfusion.
I have one select box on toggleing of tht select i populated some feils and hide some another feid.The problem is tht whn i submit it asking to fill tht hidden feilds.I tried to change the required attrbute of tht feilds to false and true for new visbile feilds in jquery but not succedded in my way..i can change other attribute like disable and all but "required " is not getting..
any one please help?
<cftextarea name="comments"
                                                id="rationale"
                                                rows="5"
                                                cols="60"
                                                message="Please enter a response for comments">
                                                #comments#
                                    </cftextarea>
<script type="text/javascript">
jQuery(document).ready(function(){
            $("#comments").rules("add", {
             required: true,
            minlength: 2,
            messages: {
             required: "Required input",
             minlength: jQuery.format("Please, at least {0} characters are necessary")
</script>
Any workaround for this?

below is the code i used
<cftextarea name="comments"
                                                id="comments"
                                                rows="5"
                                                cols="60"
                                                message="Please enter a response for comments">
                                                #comments#
                                    </cftextarea>
<script type="text/javascript">
jQuery(document).ready(function(){
            $("#comments").rules("add", {
             required: true,
            minlength: 2,
            messages: {
             required: "Required input",
             minlength: jQuery.format("Please, at least {0} characters are necessary")
</script>

Autocomplete search not working in a visual webpart

I have a webservice that gives me some data from a sharePoint list.
I am trying to use that webservice for an autosuggest textbox in a application using jquery.
i can browse the webservice and invoke the operations directly.
But i am getting error in the jquery all the time saying 500 internal server error.
i can browse the web service without any issue if i go to the url.
here is my code
**jQUERY**
$(document).ready(function () {
$('#<%=txt_search.ClientID%>').autocomplete({
source: function (request, response) {
$.ajax({
url: "/_layouts/service/getdata.asmx/Returndata",
data: request.term,
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
minLength:2
**here is my webservice method code which returns array of strings**
public string [] Returndata()
List<String> _data = new List<string>();
String title = string.Empty;
String keycontent = string.Empty;
SPList list = SPContext.Current.Web.Lists.TryGetList("Data");
foreach (SPListItem _item in list.Items)
title = (string)_item["Title"];
_data.Add(title);
return _data.ToArray();
if i browse to the method directly like this i can see the array of strings
http://sharepointsite/_layouts/service/getdata.asmx/Returndata like below
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<ArrayOfString xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/">
<string>Child Care Assistance</string>
<string>TANF</string>
<string>Child Care Subsidies</string>
<string>Child Care Settings</string>
<string>Regulation Status</string>
<string>Family Copayments</string>
<string>Reasons For Care</string>
<string>Child Care Development Fund</string>
<string>ACF-801 Child Care Monthly Case Record Form</string>
<string>Air Pollutants</string>
<string>Clean Air Act</string>
I am struggling why i am having an error any help
kukdai

Hi,
If you only want to get data from list and achieve the
Autocomplete search function in SharePoint 2013, we can use SharePoint REST API and jQuery to achieve it.
Here are two blog for your reference:
Working with SharePoint list data - OData, REST and JavaScript
http://www.plusconsulting.com/blog/2013/05/crud-on-list-items-using-rest-services-jquery/
Using jQuery UI autocomplete with the REST API to get search results in the search box
http://blogs.msdn.com/b/murads/archive/2013/02/20/using-jquery-ui-autocomplete-with-the-rest-api-to-get-search-results-in-the-search-box.aspx
Best Regards
Dennis Guo
TechNet Community Support

Open a SharePoint List item in Modal Pop up in SP 2013 fails after you filter or sort the list

Sorry for the long post. This has been killing me. I had this script working perfectly fine in SharePoint 2010 (online) and basically i have a source custom list (list A) with a hyperlink column and a Destination List with say title and my name.
Source List (list A) looks like this with these 2 columns
Title Test Link
A Link 1
B Link 2
C Link 3
Each of these links link to the actual list item in the destination list, so for example, link 1 is/sites/2013DevSite/Lists/Destination%20List/EditForm.aspx?ID=1
So basically i want anytime the Link are clicked that point to another list's item to open in a modal dialog and the script below worked perfectly fine in SharePoint 2010 (online)
<script language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script language ="javascript" type="text/javascript">
jQuery(document).ready(function() {
jQuery('a[href*="EditForm.aspx"]').each(function (i, e) {
// Store the A tag's current href in a variable
var currentHref = jQuery(e).attr('href');
jQuery(e).attr({
'href': 'javascript:void(0);',
// Use the stored href as argument for the ShowInModal functions parameter.
'onclick': 'ShowInModal("' + currentHref + '");'
function ShowInModal(href) {
SP.UI.ModalDialog.showModalDialog({title: "Edit Item", url: href});
</script>
All it does is find the href tags for that particular value Editform.aspx and the pop modal works in SP 2010 online. So the site page is designed in such a way there is a content editor web part with the reference to this javascript file and the sharepoint
list is right beneath it and this worked perfectly opening in modal windows in SP 2010.
Since migration to 2013, this is what exactly happens
1.) when you come to the site page, the modal works,
2.) If you filter or sort on say the Title or Test Link column in Source list (lets say you select the Value A), the script does not fire at all, if i hover over the hyperlink, the who hyperlink is shown and does not open the hyperlink in the modal pop up.
- This is important because i want to be able to sort on a particular item...
Could someone please let me know what am i doing wrong and why is this not working when i sort the list. Thanks for all the help.
Once again i am trying to open a sharepoint list item in Sharepoint 2013 from another list using Jquery

A ListItem has its own unique row id so in all likelihood, an insert with the same data will result in a new list entry. The Lists Web Service however, has an UpdateListItem method which will take an update request. [refer
http://msdn.microsoft.com/en-us/library/office/websvclists.lists.updatelistitems(v=office.15).aspx ]
There is another note in the conference (marked answered) to your List Item Update problem. Probably worth a try too. [refer
http://social.msdn.microsoft.com/Forums/en-US/bee8f6c6-3259-4764-bafa-6689f5fd6ec9/how-to-update-an-existing-item-in-a-sharepoint-list-using-the-wss-adapter-for-biztalk?forum=biztalkgeneral ]
Regards.

JQuery $(document).ready

Similar Messages

Maybe you are looking for