With Client Object Model API and a bit of javascript, I want to retrieve the items of a sharepoint list and display them into the web page, when the web page loads.
I've successfully implemented examples working with button or link click event handler. But when I try to use the code with onload I get an error.
Assuming I've my ViewItem() function defined in the head.
If I use this code in the body:
<a onclick="javascript:ViewItem()">View</a>
all is fine.
If I try with classic onlaod, the call fails:
<script type="text/javascript">
window.onload = ViewItem ;
</script>
The line of code in ViewItem function which generates the error is as follows:
var myContext = new SP.ClientContext.get_current();
This code works fine with the onclick event handler, but fails with the onload event handler with error:
SP.ClientContext is null or not an object
How can I solve this issue? Why it happens only when the function is called with onload?
You have to wait for all SharePoint script to be ready:
ExecuteOrDelayUntilScriptLoaded(ViewItem, "sp.js");
If you also use jQuery, I use to do:
$(function(){
ExecuteOrDelayUntilScriptLoaded(ViewItem, "sp.js");
});
Related
I have the following JS code:
<script type="text/javascript">
$(document).ready(function () {
var items = "<option value='0'>Select</option>";
$('#DistrictID').html(items);
});
</script>
This populate a dropdownlist with the value Select, the thing is, this dropdownlist appears in a form that it's called once the user clicks a button and then a modal windows opens, with the form in it.
But since it is mark as
$(document).ready
This JS won't execute with the modal, since the document is already 'ready'. How can I achieve this?
Thanks in advance!
Regards,
You can easily achieve this using bootstrap modal events. You can use following code snippet to achieve your objective:
$(document).ready(function () {
$('#myModal').on('shown.bs.modal', function (e) {
var items = "<option value='0'>Select</option>";
$('#DistrictID').html(items);
});
});
For reference Please check bootstrap modal events.
A useful way to load and execute javascript after the page is loaded, like modal window show ups, is to use ajax getScript function, which Loads (and executes) a JavaScript from a server using an AJAX HTTP GET request through a pre-defined function in main page.
function loadJS(lnk){
$.getScript(lnk);
}
it can be a general way to load any script in a fully loaded page.
One solution is to use jQuery event.on
from this blog post https://simpleisbetterthancomplex.com/tutorial/2016/11/15/how-to-implement-a-crud-using-ajax-and-json.html
I will quote the author, because I think it's a very neat explanation.
We can’t register a listener to an element that doesn’t exists.
A work around is to register the listener to an element that will
always exist in the page context. The #modal-book is the closest
element. It is a little bit more complex what happen, but long story
short, the HTML events propagate to the parents elements until it
reaches the end of the document.
More here: https://api.jquery.com/on/
Try something like this:
$('#idofselectelement').change(function() {
//grab the selected option and then do what you want with it.
});
I would like to track if a toast (or any "popup element") gets displayed using Google Analytics Event Tracking via GTM.
Whether or not the toast gets displayed is defined by jQuery code and based on cookie information like so
function ShowToast(Msg){
$('#toast-msg').html(Msg);
$('#toast').animate({ left: '-10px' });
}
called by
<script type="text/javascript">
$(function() {
ShowToast("SOME HTML");
});
</script>
This is what I got in GTM so far using a custom variable
function(){
if(document.querySelector("#toast #toast-msg").length > 0){
return true;
}
}
with a trigger listening for this variable to be true and the usual Universal Analytics Event Tag. The idea is to simply check if the toast-msg is shown or not, which works fine in preview mode.
Now to the problem: The tag is listening to gtm.js (pageview), but the jQuery code from the toast might load only after gtm.js is ready. Hence, sometimes the toast is not yet displayed when the tracking code is ready to fire and the event is not recorded.
Is there a way to use GTM and Javascript / JQuery to make sure all JQuery is loaded before GTM variables/triggers/tags are resolved? Or a completly different approach?
Make Sure you have the dataLayer initialized in the <head> of your document by including this line of code: <script>window.dataLayer = window.dataLayer || [];</script>
Add this code to your jQuery toasts (or whatever else you want to track) dataLayer.push({'event': 'event_name'});
Create a Custom Event trigger in GTM with the event_name you chose above.
Create a GA Tag of type event with the above trigger
One method is to push an event to dataLayer when the popup is loaded.
the other method is you can fire your code and gtm.dom or gtm.load(when the page is completely loaded)
Check the related article for more details http://marketlytics.com/analytics-faq/control-gtm-tags-to-wait
While using the dataLayer works, as suggested by others, I also found that my code works using two alterations:
Change errenous code: document.querySelector("#toast #toast-msg").innerHTML.length > 0 I forgot the innerHTML attribute
In order to ensure that jQuery has loaded I changed the trigger type to gtm.dom, which triggered the event reliably thus far.
I recently added a feature to our ASP.NET MVC web application. There's a page that is displayed when the user clicks on an item in a table. The page uses AJAX to display a partial view in a single div in the page's HTML. The partial view uses the Telerik Kendo UI to define and display dialogs and DropDownList controls. This is complicated in that the JavaScript imports are all on the View for the page, while the PartialView just builds the HTML to be displayed in the div.
The JavaScript I wrote on the page includes a jQuery document.ready event handler:
$(document).ready(
function () {
if ( $('#details-map').val() != '' )
$('#details-map').remove();
var urlTail = '?t=' + (new Date().getTime());
// Make the AJAX call and load the result into the details box.
$('#detailsbox').load('<%= Url.Action("Details") %>' + '/' + '<%: Model.Id %>' + urlTail, displayDetails);
}
)
This works fine when I run the application on my localhost. The problem appears when I deploy the page to our development server. In this case, there's an additional document.ready event handler that's emitted to very end of the page by the Telerik Kendo / ASP.net MVC extensions:
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
if(!jQuery.telerik) jQuery.telerik = {};
jQuery.telerik.cultureInfo=...;
});
//]]>
</script>
On this page, the $(document).ready event handler I wrote runs before the Telerik handler, and my code clearly depends on the Telerik handler running first. When mine runs first, I get a JavaScript error that says "jQuery.telerik.load is not a function'.
Since this does not happen on my localhost, how do I make sure that the second document ready event handler is run first?
Edit:
After more research, I've found that the problem is that the two scripts mentioned in my answer, which are supposed to be written to the page via the following line in the Master Page used by my page:
<%= Html.Telerik().ScriptRegistrar().Globalization(true).jQuery(false).DefaultGroup(group => group.Combined(false).Compress(false)) %>
Are not being loaded. In other words, the above line does nothing. It works on another page that uses the same Master Page, though. I've placed a breakpoint on the line and it is executing. Does anyone have any ideas?
You're either going to have to make it show up after the second one on the page OR do something I hate to suggest:
$(document).ready(function() {
function init {
/* all your code that needs to be run after telerik is loaded */
}
if ( $.telerik ) {
init();
} else {
setTimeout(function check4telerik() {
if ( $.telerik ) {
return init();
}
setTimeout(check4telerik, 0);
}, 0);
}
});
So, if $.telerik is loaded, it runs, otherwise it polls until it's set, and when it is set, it runs the code. It's not pretty, but if you don't have more control, it's probably your only option, unless $.telerik emits some kind of event that you can hook into.
After spending a few hours working on this, I finally got it to work. The problem turned out to be that two JavaScript files that are used by the Telerik DropdownList control and Window control were not being loaded.
In spelunking through the JavaScript on the page, I came across this script that was generated by Telerik:
if(!jQuery.telerik){
jQuery.ajax({
url:"/Scripts/2011.3.1306/telerik.common.min.js",
dataType:"script",
cache:false,
success:function(){
jQuery.telerik.load(["/Scripts/2011.3.1306/jquery-1.6.4.min.js","/Scripts/2011.3.1306/telerik.common.min.js","/Scripts/2011.3.1306/telerik.list.min.js"],function(){ ... });
}});}else{
jQuery.telerik.load(["/Scripts/2011.3.1306/jquery-1.6.4.min.js","/Scripts/2011.3.1306/telerik.common.min.js","/Scripts/2011.3.1306/telerik.list.min.js"],function(){ ... });
}
This script was emitted by a call to Html.Telerik.DropdownListFor() in my partial view. I'm guessing that the code to include for the two JavaScript files mentioned in the code, telerik.common.min.js and telerik.list.min.js, was not emitted since the call was on a partial view. Or I was supposed to include them all along & didn't know it (I'm very new to these controls). Oddly, everything worked when I ran it locally, so I don't get it.
In any case, I added two <script> tags to my View to include these files and everything started working. That is, I added the following tags to my page:
<script type="text/javascript" src="../../Scripts/2011.3.1306/telerik.common.min.js"></script>
<script type="text/javascript" src="../../Scripts/2011.3.1306/telerik.list.min.js"></script>
Live and learn.
I have used a user control to get data from database and render it as MegaMenu anchors.
In code-behind file I have got data and rendered it by using a literal.
The megamenu.js file (containging myMega.Init method) has been inserted into header element
I have added following script tag into .ascx file.
<script type="text/javascript">
myMega.Init("mer_id", "anchor_id", "click");
</script>
I have several .aspx files which have same master page. The master page registers the User Control and contains following tag exact before .
<uc:MegaMenu id="anchors" runat="server"></uc:MegaMenu>
the problem is the myMega.Init only invokes when I go to firstpage.aspx. I have debugged by hitting f12 and choosing debugg Script. the init file invokes only first time (firstpage) not other pages. thank you for your help.
are mer_id and anchor_id elements' ids and what .Init does?
If you use jquery library you could put your code in ready event
<script type="text/javascript">
$(function() {
myMega.Init("mer_id", "anchor_id", "click");
});
</script>
How to add onload event to a div element?
I've read this, despite this I have a problem..
I know there's no onLoad for divs, but I should be able to execute a snippet like so:
...
<div id="content">
<div class="text">
</div>
</div>
<script type="text/javascript">
navigate('main.php', 'content');
</script>
....
This doesn't work, if I start a new browser session and navigate to index.php, it shows me a login window. After logging in it redirects me to index.php but with some session variables and cookies set. Now index.php contains the code above, prior to this content didn't exist.
Now to my issue: it appears as if most browsers refuses to accept that content exists,
in the navigate function I've got:
function navigate(str, what) {
if(what == null) {
what = document.documentElement;
} else {
what = document.getElementById(what);
}
what will become null because it's a not a valid Element at the moment of execution.
I've tried:
window.onLoad = naviate('main.php', 'content');
Which does nothing, same issue there..
Also tried putting the <script> block at the end without luck.
I can't use jQuery or anything so please keep it to standard Javascript, HTML and CSS.
Browsers in use: IE8, Chrome, FireFox.
Load index.php
Login to loginwindow
Load index.php
Upon completed load of index.php, read all elements including content
Update content with some AJAX data.
It works if
I login, load the page once with unsuccessful result and then refresh the page again.
And here's the reason why:
I use AJAX on the login window as well, it uses navigate() just as all my buttons and what not does. So the issue is that index.php gets loaded, with a login window, that login window updates the entire page with AJAX (javascript) which in turn, tries to call navigate() again from within the return data from the AJAX call...
The "inline" navigate() gets called!!!, it's just that it doesn't know all the elements because it's load via AJAX.
Try this :
window.onload = function(){
navigate('main.php', 'content');
}
According to my tests you can get div element by .getElementById even before the page is loaded.
Do not forget that the navigate function must be defined before it is called. So if you have your scripts at the end of document (which is correct), you must call the function after execution of theese scripts.
But anyway, you've assigned the .onload function wrongly. Do it like this:
window.onload = function(event) {
/*any script here*/
}
Or like this:
function load(event) {
/*any script here*/
}
window.onload =load;