I am using jQuery BlockUI for opening a new webpage that takes some time due to a lot of database querying with the following javascript:
function productSheet(url2) {
$.blockUI.defaults.overlayCSS = {};
$.blockUI({ });
$.ajax({
url: url2,
success: function (respones) {
var win = window.open();
with (win.document) {
open();
write(respones);
close();
}
}
});
};
At the new page i got some jQuery JavaScript and a reference to the external jQuery script. However when i render the page after the JavaScript above all my script throws error for: "$ undefined".
I can refresh the page and everything starts working and I am not getting any script errors.
This problem only occur when I am debugging in IE 9, on Firefox everything works (no JavaScript errors and the script works).
Does anyone have any idea on whats the problem can be?
EDIT:
The page iam rendering is a MVC 3 view. So the script above goes to an MVC action that returns a this view:
#model WebApplication.Controllers.ProductSheetModel
<!DOCTYPE html>
<html>
<head>
<title>Sheet - #Model.ArticleMain.ArticleMain.T0018_BENAM</title>
<script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<link href="../../css/ProductSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
#if (Model.IsPDFExport == false)
{
#Html.DisplayFor(model => model.ArticleMain, "ProductSheetHeader")
}
... some more partical views...
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
var tabelheight1 = $("#divNutritiveValues").height();
var tabelheight2 = $("#divMarking").height();
if (tabelheight1 > tabelheight2) {
$("#divMarking").css("height", tabelheight1 + "px");
$("#divNutritiveValues").css("height", tabelheight1 + "px");
}
if (tabelheight2 > tabelheight1) {
$("#divNutritiveValues").css("height", tabelheight2 + "px");
$("#divMarking").css("height", tabelheight2 + "px");
}
var tableheightStore = $("#divStore").height();
var tableheightCooking = $("#divCooking").height();
if (tableheightCooking > tableheightStore) {
$("#divCooking").css("height", tableheightCooking + "px");
$("#divStore").css("height", tableheightCooking + "px");
}
if (tableheightStore > tableheightCooking) {
$("#divCooking").css("height", tableheightStore + "px");
$("#divStore").css("height", tableheightStore + "px");
}
var tableInfoProvid = $("#divInformationProvider").height();
var tableManufac = $("#divManufacturer").height()
if (tableInfoProvid > tableManufac) {
$("#divManufacturer").css("height", tableInfoProvid + "px");
$("#divInformationProvider").css("height", tableInfoProvid + "px");
}
if (tableManufac > tableInfoProvid) {
$("#divInformationProvider").css("height", tableManufac + "px");
$("#divManufacturer").css("height", tableManufac + "px");
}
});
The problem is that $ is undefined on your page on IE.
Normally, jQuery sets $ as a reference to the jQuery object. See docs.
For some reason, either the $ reference is being removed or is not happening on IE. Can you post more of your code?
One work-around would be to use jQuery instead of $
But it would be good to better understand what is actually happening on IE.
I believe this is caused as your JavaScript registrations are not occurring with your AJAX posts, meaning that they get lost and don't get re-registered.
This is a common issue when working with AJAX, and this article explains it perfectly and provides what you need.
i came up with a solution and want to share it with you. In my site i created a script checking if jquery was undefined.
if (typeof jQuery == 'undefined') {
window.location.reload();
}
after i have reloaded the page again all my scripts work, maybe not the best of solutions but it works so i am happy.
Related
ORIGINAL QUESTION:
I am trying to create some javascript to add to a form in Microsoft Dynamics CRM.
I have the following script which I have assigned to the forms onLoad event:
$(document).ready(function () {
if ($('#CheckBox1').is(':checked')) {
$('<div id="div2">Some Data Here</div>').insertAfter("#Div1");
$('#divHeader').height('+=25px');
var newtop = $('#divMain').position().top + 25;
$('#divMain').css('top', newtop + 'px');
}
});
The following is a stripped down version of the forms HTML
<div id="divHeader">
<div id="Div1"></div>
</div>
<div id="divMain"></div>
When the form loads, what should happen is this:
<div id="divHeader">
<div id="Div1"></div>
<div id="Div2">Some Data Here</div>
</div>
<div id="divMain"></div>
That does happen. However, the problem is that the divHeader and divMain do not resize, so the newly added Div2 can't be seen unless the user scrolls down within the divHeader.
If I add an alert:
$(document).ready(function () {
if ($('#CheckBox1').is(':checked')) {
alert("Random alert");
$('<div id="div2">Some Data Here</div>').insertAfter("#Div1");
$('#divHeader').height('+=25px');
var newtop = $('#divMain').position().top + 25;
$('#divMain').css('top', newtop + 'px');
}
});
The whole thing works perfectly. How do I get this to work without the alert?
UPDATE 1:
setTimeout also works instead of using an alert.
$(document).ready(function () {
setTimeout(function () {
if ($('#CheckBox1').is(':checked')) {
$('<div id="div2">Some Data Here</div>').insertAfter("#Div1");
$('#divHeader').height('+=25px');
var newtop = $('#divMain').position().top + 25;
$('#divMain').css('top', newtop + 'px');
}
}, 5000);
});
So it seems $(document).ready doesn't seem to do it's job properly. In both cases alert or setTimeout, the form gets extra time to finish loading before the div tags are resized.
It is entirely unsupported to do DOM manipulations in Dynamics CRM. See Do Not Access the DOM.
You will instead need to use supported methods of manipulating the form (i.e. Xrm.Page). While it is not possible to dynamically add/remove content on a CRM-form, you can show and hide elements. As I understand it, you are trying to show some content if a boolean field (presented as a checkbox) on the form is true.
This can be done by adding the control that you want to show/hide to your form (that control can either be one of the standard CRM-fields or a custom web resource, depending on your requirements). You would then write a bit of JavaScript to show/hide the control in question when your boolean attribute changes its value:
function onload() {
Xrm.Page.getAttribute("booleanField").addOnChange(showMoreStuffInHeader);
showMoreStuffInHeader();
}
function showMoreStuffInHeader() {
var visible = Xrm.Page.getAttribute("booleanField").getValue();
Xrm.Page.getControl("someDataHereControl").setVisible(visible);
}
Use Jquery Plugin Wait until element exists Pluging will wait for element to appear in DOM and then fire given handler function.
$(document).ready(function () {
$('#CheckBox1').waitUntilExists(function () { // OR $('#Div1').waitUntilExists(function ()
if ($('#CheckBox1').is(':checked')) {
$('<div id="div2">Some Data Here</div>').insertAfter("#Div1");
$('#divHeader').height('+=25px');
var newtop = $('#divMain').position().top + 25;
$('#divMain').css('top', newtop + 'px');
}
});
});
i found this code on stackoverflow for a website translation but when i use it, the website flickers like it is going to the same/or other page every millisecond.
I am using this script :
<head>
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/jquery.cookie.js"></script>
<script>
$(function () {
var url = 'http://www.gester.nl';
var english_page = 'index-eng';
var dutch_page = 'index';
if ($.cookie('default_page') != null) {
if (window.location.href != url + '/' + $.cookie('default_page')) {
window.location.href = url + '/' + $.cookie('default_page');
}
}
$('#english').click(function () {
$.cookie('default_page', dutch_page, { expires: 999 });
alert('Dutch was set as the default language');
});
$('#dutch').click(function () {
$.cookie('default_page', dutch_page, { expires: 999 });
alert('Dutch was set as the default language');
});
});</script> </head>
i am using this code for my image button:
<img id="dutch" src="images/dutch.png">
and
<img id="english" src="images/english.png">
I left the website like this so you can test it on my friends website www.gester.nl.
Click back on forth on english button and then again on the dutch button.
Sometimes it works when you click on english and sometimes it doesnt when you click on the english and dutch button.
I really appreciate the help. Cause i was happy when it worked like for seconds and then i saw this problem that i couldn't fix now. Been looking and changing (default_page) and deleting some lines to look where the problem starts but i don't know how to work with this jquery code.
Thanks for your time.
$('#english').click(function () {
$.cookie('default_page', dutch_page, { expires: 999 });
alert('Dutch was set as the default language');
});
You're making it so no matter what that whenever you click Dutch or English, it'll set it to the dutch page still. Therefore, your default page cookie is trying to update to a new variable and it's continuously calling the old one. Try setting the English function to this:
$('#english').click(function () {
$.cookie('default_page', english_page, { expires: 999 });
alert('English was set as the default language');
});
Could be wrong, but I'm just curious as to what that does. Pretty sure that could be causing something though.
With my answer above, also do this.
In your script.js file, change this:
document.getElementById("mybtn").addEventListener("click", function(){
document.getElementById("my_form").className="submitted";
});
To this:
document.getElementById("mybtn").addEventListener("click", function()){
document.getElementById("my_form").className="submitted";
});
I have a single page (index.html) document for phonegap that displays different "pages" when each new "div" is referenced. For example:
<div class="upage ui-page-theme-a" id="view_history" data-role="page" >
I am wanting to have a javascript function automatically execute via Jquery when the "div" is displayed. My code is below.
However I can't get anything to cause it to execute on div load. I can put an "onclick" call in the HTML, ie:
<a onclick="listMeasurements()" class="button" style="" data-role="button">List
Current Measurements</a>
and that works fine, but for some reason I can't get it to execute just from loading. Any insights would be greatly appreciated.
Sorry in advance if I'm overlooking something obvious.
$('#view_history').on('pagecontainershow', listMeasurements()) ;
// I've also tried bind() etc.
function listMeasurements() {
"use strict" ;
var fName = "listMeasurements():" ;
var measurements_recorded = window.localStorage.length;
$("#Measurements").html("<strong>" + measurements_recorded + "</strong>
measurement(s) recorded");
// Empty the list of recorded tracks
$("#measurement_list").empty();
// Iterate over all of the recorded tracks, populating the list
for(var i=0; i<measurements_recorded; i++){
$("#measurement_list").append("<li data-uib=\"jquery_mobile/listitem\" data-ver=\"0\"><span>" + window.localStorage.key(i) + "</span></li>");
}
$('#measurement_list').listview().listview('refresh');
}
From jQuery Mobile 1.4.2 the events have changed & don't work with a binding to a specific page like you have done i.e this -
$('#view_history').on('pagecontainershow', listMeasurements()) ;
won't work anymore.
You need to put a binding something like this on document -
function showSomeLove() {
alert("What is love, baby don't hurt me, no more!");
}
$(document).on( "pagecontainershow", function( event, ui ) {
var currentPageId = $( ":mobile-pagecontainer" ).pagecontainer( "getActivePage" ).attr('id');
if(currentPageId == 'page-a') {
/*Execute or Call your function here*/
showSomeLove();
} else if(currentPageId == 'page-b') {
/*do something else*/
}
});
Here's a WORKING DEMO - http://codepen.io/nitishdhar/pen/gnqFH
For more details read the pagecontainer widget - http://api.jquerymobile.com/pagecontainer/
I have this tabs that are working perfect in any browser apart from IE 9. Have been trying to solve this problem for days now, and I think I'm going completely mad.
<div class="product-collateral">
<div class="tab"><h3 class="product_tabs_additional">Additional Information</h3></div>
<div class="product-tabs-content" id="product_tabs_additional_contents">
Additional Information Content
</div>
<div class="tab"><h3 class="product_tabs_agenda">Agenda</h3></div>
<div class="product-tabs-content" id="product_tabs_agenda_contents">
Agenda Content
</div>
<div class="tab"><h3 class="product_tabs_terms">Terms and Conditions</h3></div>
<div class="product-tabs-content" id="product_tabs_terms_contents">
Terms and Conditions Content
</div>
<div class="tab"><h3 class="product_tabs_locations">Locations</h3></div>
<div class="product-tabs-content" id="product_tabs_locations_contents">
Locations Content
</div></div>
<script type = "text/javascript" > $jQ = jQuery.noConflict();
$jQ('.product-collateral .tab h3').wrapAll('<ul class="product-tabs"></ul>').wrap('<li></li>');
$jQ('.product-collateral .product-tabs li').each(function(index) {
$jQ(this).attr('id', $jQ(this).find('h3').attr('class'));
if (index === 0) {
$jQ(this).addClass('active');
}
});
//<![CDATA[
Varien.Tabs = Class.create();
Varien.Tabs.prototype = {
initialize: function(selector) {
var self = this;
$$(selector + ' h3').each(this.initTab.bind(this));
},
initTab: function(el) {
el.href = 'javascript:void(0)';
if ($(el.parentNode).hasClassName('active')) {
this.showContent(el);
}
el.observe('click', this.showContent.bind(this, el));
},
showContent: function(a) {
var li = $(a.parentNode),
ul = $(li.parentNode);
ul.select('li', 'ol').each(function(el) {
var contents = $(el.id + '_contents');
if (el == li) {
el.addClassName('active');
contents.show();
} else {
el.removeClassName('active');
contents.hide();
}
});
}
}
new Varien.Tabs('.product-tabs');
//]]>
< /script>
I know that one of the lines $$(selector + ' h3').each(this.initTab.bind(this)); there is a 2x$ but without it script stops working.
Im not a JavaScript specialist at all, hence my problem. Strangest for me is that this script is running in IE7 and 8 mode without any trouble. Only IE9 is breaking.
Any help much appreciated.
Thank you in advance
Dom
Please Check you code, and avoid declaring multiple versions of jQuery on the page. I think its the problem of jQuery conflict.
Looking at your page, you are using an old version of prototype (1.6.0.3), which was released in 2008 which is pre-IE9. In this version when you run the line: ul.select('li', 'ol') it's returning the empty list instead of the 4 element list you expect.
Quick fix: try changing the line to: ul.select('li'), which should select all the elements you want here.
Better fix: Upgrade to the latest version of prototype (1.7).
I've looked around a lot, and can't seem to find anything that's simple enough for me to do...
I've set up a web page that detects which browser is currently running, and if it's something other than Firefox 4.0, it displays a hidden div that gives a warning stating that the page is best viewed in Firefox 4.0 or greater. Within that div is a button that hides the div onclick.
I'm looking for a way to remember that this button has been clicked during a session, so that when a user clicks on my "home" page, they don't get the same message every time.
Current code:
<head>
<script src="js/browsercheck.js"></script>
<script type="text/javascript">
// external script "browsercheck.js" checks
// which browser/version is being used
// check browser and display message if != Firefox 4.0 or >
function checkBrowser() {
var browser = BrowserDetect.browser;
var version = BrowserDetect.version;
if (browser == "Firefox") {
if (version >= 4) {
// do nothing
}
} else {
document.getElementById("coverall").style.visibility="visible";
document.getElementById("browser").innerHTML = browser + " " + version;
}
}
// remove overlay if user commands
function removeCoverall() {
document.getElementById("coverall").style.visibility="hidden";
}
</script>
</head>
<body>
<div id="coverall" style="visibility:hidden;">
<p>I see you're using <span id="browser"></span>. Please use Firefox.</p>
<button type="button" onclick="removeCoverall()">I understand</button>
</div>
</body>
Using jQuery and the cookie plugin, you can do:
function removeCoverall() {
$.cookie("user_clicked_ok", "true");
document.getElementById("coverall").style.visibility="hidden";
}
$(window).ready(function() {
if ($.cookie("user_clicked_ok")=="true") {removeCoverall();}
});
More details at: http://www.electrictoolbox.com/jquery-cookies/
In the removeCoverall function you could set a cookie which indicates that the user closed the div and in checkBrowser function verify if the cookie is present before showing the div.
You seem to have the right idea, you need cookies! YUM!
JS
function removeCoverall() {
var date = new Date();
date.setTime(date.getTime()+(7*24*60*60*1000));// expires in one week
document.cookie = 'skipNotify=1;expires='+date.toGMTString()+'; path=/';
document.getElementById("coverall").style.visibility="hidden";
}
Now retrieving the cookie can be difficult in javascript, but you can use PHP!
PHP
function checkBrowser() {
<?php if(isset($_COOKIE['skipNotify']))echo'return;';?>
var browser = BrowserDetect.browser;
var version = BrowserDetect.version;
if (browser == "Firefox") {
if (version >= 4) {
// do nothing
}
} else {
document.getElementById("coverall").style.visibility="visible";
document.getElementById("browser").innerHTML = browser + " " + version;
}
}
The above code injects a return statement if the user has the cookie, so the call to the function won't do anything.
As mentioned in the other posts, I highly recommend you use jQuery for all your javascript needs. It's very popular, stable and useful! I only gave my answer as it does not use any third party solution.