After upgrading JQuery 1 to JQuery 3 in our application, some JQuery code stopped working.
I tried looking at https://api.jquery.com/visible-selector/ but could not get help
Previous Code
$("#top_data_label").css("visibility", "visible");
$("#"+element).attr("class", "disable-link").attr("disabled", "disabled");
What changes I need to make in the above code to make it working as per JQuery 3 syntax.
Can you try this :
$( document ).ready(function() {
$("#top_data_label").css("visibility", "visible");
$("#"+element).addClass("disable-link");
$("#"+element).prop("disabled", true);
});
Do not forget to put the js in on document ready because it will not work if you don't.
(See jsfiddle which include a document ready)
Related
I am using NavigationHandler.handleNavigation as suggested here (ExternalContext.dispatch() not working) since I am using an ajax request.
It works but I see the next page in the middle of the page (more or less) instead of seeing it in the top of the page.
I tried using an anchor as suggested here (http://www.computerhope.com/issues/ch001475.htm) but it also doesn't work.
Any idea of what is happening?
Here is my code:
context.getApplication().getNavigationHandler().handleNavigation(context, null, "/user-registration.xhtml#top");
I have added the following in the beginning of the body of the next page:
<a name="top"></a>
The correct approach to scroll the window to top is window.scrollTo() with x and y of 0:
window.scrollTo(0, 0);
This keeps your URL free of hash fragment clutter.
In order to invoke it on success of every JSF ajax event, include the following script in the document.
jsf.ajax.addOnEvent(function(data) {
if (data.status == "success") {
window.scrollTo(0, 0);
}
});
See also:
Execute JavaScript after every JSF ajax postback
Finally I solved it with the following script:
<script type="text/javascript">
$(document).ready(function() {
location.hash = "#top";
});
</script>
I am new in using jquery. I am trying add in the simplemodal.js (Eirc Martin's simple modal) a function called 'jBox' that will take the data (ie link) and options and using ajax will load the content into the modal container. This way I want on my pages in several places easy call this function
jBox = function(address, options){
$.get(address, function(data) {
$.modal(data);
});
};
});
The code is working fine, but i would like to add a loading image before the content is fully loaded. There is a lots of similar posts about loader/ spinner in simplebox but none of the works for me.
I was trying following code
$('#test').load('<img src="loader.gif">').html(data);
$('#test').modal();
But, some way, it doesnt work for me. Any ideas what I am doing wrong? Thanks
I use the ajaxStart and ajaxStop events.
$("body").on({
ajaxStart: function() {
$(this).addClass("loading"); // so page knows it's in loading state
// .. your modal code
},
ajaxStop: function() {
$(this).removeClass("loading"); // not it loading state anymore
// .. What you should do if loading is done. (eg. hide modal)
}
});
In this case I set the body class to 'loading'. So you can do some magic in css if you like.
I tend to use it to disable forms as well.
body.loading div.some-class {
// your special style for during loading
}
I am having some issues with a jquery on function that works in all browsers except IE.
jquery code is as follows:
$('#FormIndustryId, #FormIndustries').on("change", function () {
if ($(this).val()) {
$.getJSON('/categories/list_categories/industry_id:' + $(this).val(),
function (cats) {
if (cats !== null) {
populateCategorySelect(cats);
}
});
}
});
From a front end point of view this can be tested here: http://www.beanclaim.com/ - there is a field with the label of industry selection which is the dropdown with #FormIndustries assigned to it, it should when an industry is selected update the second dropdown with the ajax content. Chrome, Firefox and Safari it works but it seems to do nothing in IE.
Any ideas what I am doing wrong? Thanks
It's because only in IE do you have this code execute:
// IF IE (BROWSER) USE jQUERY TO SET THE PLACEHOLDER
// -------------------------------------------------->
if ( $.browser.msie ) {
$("#TemplateName").placeholder();
$("#FormIndustries").placeholder();
}
But, that returns this JS error:
SCRIPT438: Object doesn't support property or method 'placeholder'
and stops your JS from executing properly. I don't know what placeholder is (and neither does IE :) ), but if you fix that, the page works just fine in IE.
Write the same exact function, but make a copy using:
$('#FormIndustryId, #FormIndustries').on("click", ...
So i I have a page that contains links that call an httpRequest. The request calls a php file that grabs data from mysql and pre populates a form which is then returned to the browser/webpage. My problem is that when the page is returned to the browser via the httpRequest/ajax the text area does not display the tinymce editor, it just displays a normal text area. It looks like my request and ajax is working fine the text area just doesn't have the tinycme editor on it.
When i don't use ajax it works fine but when i put it in a separate file and call it via ajax it doesn't bring in the tinymce editor.
Does anyone know how to fix this problem so that my ajax generated page displays the text area with the tinymce editor. Thank you.
Lets presume that your thinyMCE instance is initialized with code below
// initialize tinyMCE in page
tinyMCE.init({
mode: "textareas",
theme: "advanced"
});
and you have some kind of button somewhere in the page. For purpose of this tip, i will not give it any ID but you may. Now, using jQuery you can easily attach event handler to that button which will call through AJAX your server and take content which you want to put tinyMCE editor. Code which will do such job would look somehow like below.
$(function() {
$("button").bind("click", function() {
var ed = tinyMCE.get('content');
ed.setProgressState(1); // Show progress
$.getJSON('/page/12.json', { /* your data */
}, function(data) {
ed.setProgressState(0); // Hide progress
ed.setContent(data["body"]);
}
});
});
});
You can see that on button.click ajax will call url /page/12.json which will return JSON as response. bare minimum of that response could be:
{
title: "Page title",
body: "<html><head><title>Page title</title>......</html>"
}
I attached anonymous function as callback which will handle response from server. and hide progress indicator which is shown before ajax call.
About JSON
JSON is shorten of JavaScript Object Notation. It is JavaScript code!!! So don't be confused about it. Using JSON you can make javascript object which can have attributes you can use later in your code to access particular peace of data which that object "holds". You can look at it as some kind of data structure if it is easier to you.
Anyway, to show you how this JSON can be created by hand look at examples below
var data = new Object();
data.title = "Page title";
data.body = "<html....";
or
var data = {
title: "page title",
body: "<html...."
};
it is very same thing.
If you want to learn more about JSON point your browser to http://json.org.
===== alternative =====
Alternative to json solution could be just plane ajax call to server and response can be plain HTML (from your question I can assume that you have something like this already). So instad of calling $.getJSON you can use $.get(url, callback); to do same thing. The code at the top of my answer will not dramatically change. Instead of geting JSON in response you will get string which is HTML.
----------- BOTTOM LINE -------
I prefer JSON since it can be easily extended later with other attributes, so there is no painful code changes later ;)
Problem here will be that when you return the full page and render it using the ajax response, your tinymce instance has not been shut down before.
In order to do this you can call this small piece of code before you render the ajax response:
tinymce.execCommand('mceRemoveControl',true,'editor_id');
In this case the editor should initialize correctly. You are not allowed to initialize a tinymce editor with the same id before shutting the first one down.
Strangely i ran into this problem yesterday. Following code should work, but YMMV. Trick is to use the correct steps in ajax events. I used the Regular TinyMCE and made use of the jQuery library already included.
Following goes into your tinyMCE initialization tinyMCE.init() . All of the below block should be outside the document.ready.
myTinyInit = {
//.......All essential keys/values ...........
setup : function(ed) {
ed.onChange.add(function( ed ) {
tinyMCE.triggerSave();
}) }
//.....................
};
// Init the tinyMCE
tinyMCE.init(myTinyInit);
This ensures the content is being saved regularly onto the textarea that holds the value. Next step is setting up the request events.
Normally tinyMCE mceAddControl before the ajax post and mceRemoveControl after the ajax success should do the trick. But I found that often does not work.
I used the form as the jQuery selector in my case.
jQuery( '.myForm' )
.find( 'textarea#myTextArea' )
.ajaxStart(function() {
// If you need to copy over the values, you can do it here.
// If you are using jQuery form plugin you can bind to form-pre-serialize event instead.
// jQuery( this ).val( tinyMCE.get( jQuery( this ).attr( 'id' )).getContent() );
}).ajaxSend( function() {
// ! - step 2
// My case was multiple editors.
myEds = tinyMCE.editors;
for( edd in myEds ) {
myEds[ eds ].remove();
}
// tinyMCE.get( 'myTextarea' ).remove();
// strangely mceRemoveControl didnt work for me.
// tinyMCE.execCommand( 'mceRemoveControl', false, jQuery( this ).attr('id'));
}).ajaxSuccess(function() {
// Now we got the form again, Let's put up tinyMCE again.
txtID = jQuery( this ).attr( 'id' );
// ! - step 3
tinyMCE.execCommand( 'mceAddControl', false, txtID );
// Restore the contents into TinyMCE.
tinyMCE.get( txtID ).setContent( jQuery( this ).val());
});
Problems i came across :
Using mceRemoveControl always gave me r is undefined error persistently.
If you get a blank tinyMCE editor, check the DOM whether the ID of the textarea is replaced with something like mce_02, this means that TinyMCE is being initialized again or something is wrong with the order. If so, the tinyMCE is duplicated with each save.
if you are new to JS, I recommend using jQuery with the form plugin, it might be easier for you. But do use the regular non-jquery tinyMCE, as it is well documented.
I fixed this problem by recalling the function after the ajax call. In this part of my ajax:
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("Content").innerHTML=xmlhttp.responseText;
tinymce();
Now it works fine.
I have this issue. I'm working on a jquery ajaxed site. I have the main content div in the middle and on top the navigation. I need to AJAX the content, because I have flash backgound so that the flash video won't start from beginning after every page load. The only way I was able to do this was with this sort of code:
$(document).ready(function(){
$.ajaxSetup ({
cache: false
});
//For loading
var ajax_load = "<img src='img/load.gif' alt='loading...' /><p>";
// Var
var loadPage1 = "page1.html";
// Load page
$("#page1").click(function(){
$("#content").hide(2000);
$("#content").html(ajax_load).load(loadPage1);
$("#content").show(2000);
});
All other ways to get the div didn't work because there was issues on getting plugins etc. working in the ajaxed div (content).
So... everythig is working fine - but, the div loads it's content from page1.html and shows it and only after this does it hide it and show it. So it loads the page and then does the effects I want to.
Do I need to queue this some how or what's the proper jquery way? I tried delay, stop etc.. but can't seem to solve this out. It's propably very simple.
Thanks.
Show the element in the load callback handler.
i.e:
$("#page1").click(function(){
$("#content").hide();
$("#content").html(ajax_load).load(loadPage1, function(){
$("#content").show(2000)
});
});
.load() takes 2 arguments, the URI and a callback to fire after load.
API is found here: http://api.jquery.com/load/
function() {
$("#content").hide(2000);
$("#content").html(ajax_load).load(loadPage1, function() {
$("#content").show(2000);
});
}