I'm using JQuery tabs. Every tab loads a different file.
In one of the tabs, there's a form that is ajax - submitted. After the form is successfully submitted, a message appears in that tab: "successful!!" and I have a link for reloading the original form, in case you want to make another form submission.
I need to re-load that tab, not just "relocate", because on the load method some things are initialized, like a JS date-picker.
This is how the tabs are created:
<div id="tabs" style="border:0px;">
<ul>
<li>title 1</li>
<li>title 2</li>
<li>title 3</li>
</ul>
</div>
This is the code for the tabs loading. If "theCalendar()" function is not invoked, then the date-picker that uses this form is not available, so it has to be there:
$('#tabs').tabs({
cache: true,
load: function(event, ui) {
var active = $('#tabs').tabs( "option", "active" );
if (active == 2){
$('#amstart').addClass('selectedRadio');
$( "input[type=submit]" ).button();
theCalendar();
}
}
});
The form I'm talking about is in the 3rd tab (createMeeting.jsp) and then the submit code is:
$('#ui-tabs-3').on('click', '#submitBtn', function(event) {
event.preventDefault();
... //many validations...
myData = $("#formMeeting").serialize();
$.ajax({
url: './meeting_details.jsp',
type: 'POST',
data: myData,
success: function(data){
$('#ui-tabs-3').html(data);
},
error: function (request, status, error) {
alert(request.responseText);
}
});
});
So far, everything works fine, the form is submitted and the resulting html is shown on that very same tab.
Finally, in that resulting html there's a link for loading the form again in case you want to add another record:
<a id="createAnotherMeeting" class="vacanteItem" href="createMeeting.jsp">Add another one</a>
And is handled like this from the main file:
$("#ui-tabs-3").on("click", "#createAnotherMeeting", function(e){
e.preventDefault();
$("#tabs").tabs("load",2); // option 1
$("#tabs").tabs("load",$(this).attr('href')); // option 2
$(this).parent().tabs("load",2); // option 3
});
There's an "option 1,2 and 3" comments because I've tried all of those (one at the time), however I keep getting this error:
Uncaught Error: Method load does not exist on jQuery.tabs
at Function.error (jquery-3.2.1.min.js?_=1675464032676:2:1979)
at jQuery.fn.<computed> [as tabs] (materialize.min.js?_=1675464032678:6:13237)
at HTMLAnchorElement.<anonymous> (videoConferencias.jsp:242:20)
at HTMLDivElement.dispatch (jquery-1.8.3.js:3058:9)
at HTMLDivElement.eventHandle (jquery-1.8.3.js:2676:28)
...
...
I was able to change the location of the tab so the createMeeting.jsp file is shown, however, that didn't solve my problem since the date-picker function wasn't loaded, and the submit button wasn't recognized by JQuery (these things are done when the tab is loaded)
All I need is to reload that tab when the link is clicked.
Any help will be really appreciated.
it turns out that I had a reference to another version of jQuery and materialize at the bottom of 'hidden' in another page (createMeeting.jsp):
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
I deleted them and the error disappeared ;)
In order to re-load the tab using that link, I did another ajax submit, so I could invoke the date-picker and the other stuff:
$("#ui-tabs-3").on("click", "#createAnotherMeeting", function(e){
e.preventDefault();
$.ajax({
url: './crearMeeting.jsp',
type: 'POST',
data: '',
success: function(data){
$('#ui-tabs-3').html(data);
$('#amstart').addClass('selectedRadio');
$( "input[type=submit]" ).button();
theCalendar();
},
error: function (request, status, error) {
alert(request.responseText);
}
});
});
Maybe it's not the cleanest solution, but it works.
Related
I have a problem when trying to update my dropdown (<select> element) based on Django model triggered by another dropdown (let's call it A) change.
I followed this tutorial:
https://simpleisbetterthancomplex.com/tutorial/2018/01/29/how-to-implement-dependent-or-chained-dropdown-list-with-django.html
When I change the dropdown A, I get the following error:
Uncaught TypeError: $.ajax is not a function
Based on similar questions I made sure that I include this line before my script:
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
and I'm not using the slim version of jquery.
Here is the part of my HTML code of my dropdown A and JS that is responsible for updating the second dropdown.
<select id="my-selection" dropdown-data-url="{% url 'ajax_get_data' %}">
<option value="1">First Option</option>
<option value="2">Second Option</option>
</select>
<script>
$(document).ready(function() {
$("#my-selection").change(function () {
var url = $("#my-selection").attr("dropdown-data-url"); // get the url of the proper view
var my_selection = $(this).val(); // get the selected input from dropdown
$.ajax({
url: url,
data: {
'selection': my_selection // add selected option to the GET parameters
},
success: function (data) {
$("#second-dropdown-selection").html(data);
}
});
});
});
</script>
I will be grateful for any suggestions.
It turned out that I had another jQuery version in my project (3.2.1 slim), however I didn't import it anywhere, probably some Django libraries had reference to it but I couldn't find it.
To solve this I used to point to my jQuery 3.6.0 (normal version).
<script type="text/javascript"> $360 = jQuery.noConflict();</script>
Then I use $360 in ajax instead of $ to point use this specific jQuery version.
May be you missed the type (GET/POST) in the ajax call
$.ajax({
url: url,
type:'get', //add this
data: {
'selection': my_selection
},
success: function (data) {
$("#second-dropdown-selection").html(data);
}
});
Here is my blog_post_inner.js :\
$(document).ready(function () {
// when the load more link is clicked
$('a.load-more').click(function (e) {
// prevent the default click action
e.preventDefault();
// hide load more link
$('.load-more').hide();
// show loading gif
$('.loading-gif').show();
// get the last id and save it in a variable 'last-id'
var last_id = $('.record').last().attr('data-id');
// make an ajax call passing along our last user id
$.ajax({
// make a get request to the server
type: "GET",
// get the url from the href attribute of our link
url: $(this).attr('href'),
// send the last id to our rails app
data: {
id: last_id
},
// the response will be a script
dataType: "script",
// upon success
success: function () {
// hide the loading gif
$('.loading-gif').hide();
// show our load more link
$('.load-more').show();
}
});
});
});
Inside blog_post_inner my main ajax is defined.
I am calling it here inside blog_post_inner.html.erb:
<div class="load-more-container">
<!-- hide our loading gif image so that we show it when making ajax call via jquery -->
<%= image_tag "ajax-loader.gif", style: "display:none;", class: "loading-gif" %>
<%= link_to_next_page articles,"Load More" ,class: "load-more" %>
</div>
But the main problem is my ajax is not loading the page in the same webpage istead its reloading/refreshing/redirecting to second page.
What to do?
I have tried changing link_to_next_page to link_to but it's giving an error:
undefined method `to_model' for #
Did you mean? to_xml
Please help my ajax is not working i have tried so many different methods but none of them prove to be useful.
I followed this article to implement this:
http://josephndungu.com/tutorials/rails-load-more-results-using-jquery-ajax
I can't find a solution for this plugin since I cannot find any working demo or documentation for external content via Ajax.
Basically I have a simple div with a mouse hover JS function:
<div onmouseover="myFunct(this,'.$comment['id'].');" >Hover Me</div>
And this is my JS function:
function myFunct(element, id){
$(element).tooltipster({
contentCloning: true,
interactive:true,
maxWidth:250,
contentAsHTML:true,
content: 'Loading...',
// 'instance' is basically the tooltip. More details in the "Object-oriented Tooltipster" section.
functionBefore: function(instance, helper) {
var $origin = $(helper.origin);
// we set a variable so the data is only loaded once via Ajax, not every time the tooltip opens
if ($origin.data('loaded') !== true) {
$.ajax({
type: "POST",
url: baseUrl+"/requests/load_profilecard.php",
data: 'id='+id+"&token_id="+token_id,
cache: false,
success: function(html) {
// call the 'content' method to update the content of our tooltip with the returned data
instance.content(html);
// to remember that the data has been loaded
$origin.html('loaded', true);
}
});
}
}
});
}
Why the tooltip is shown only at the 2nd mouse hover?
Here is a similar Eg. JSFiddle
UPDATE
Thanks to the support this has solved my issue:
<div class="tooltip" data-id="'.$comment['id'].'">Hover me!</div>
<script type="text/javascript">
$(document).ready(function() {
$('.tooltip').tooltipster({
content: 'Loading...',
functionBefore: function(instance, helper){
var $origin = $(helper.origin);
$.ajax({
type: "POST",
url: baseUrl+"/requests/load_profilecard.php",
data: 'id='+ $origin.attr('data-id')+"&token_id="+token_id,
cache: false,
success: function(html) {
// call the 'content' method to update the content of our tooltip with the returned data
instance.content(html);
}
});
},
interactive:true,
contentAsHTML:true,
maxWidth:250
});
});
</script>
Anyway this doesn't work on Ajax dynamic content, and I don't know why (I tried to insert it on Ajax page, no way)
I'd recommend a few things: first, separate your JS from your HTML (this is considered best practice), second, initialize Tooltipster on page load, and last, remove the wrapper function. Once the tooltip is initialized your code will trigger by default on hover.
Separate JS from HTML
<div class="hover-me tool-tip" data-commentId="12345">Hover Me</div>
Initalize Tooltipster on Document Ready
$(document).ready(function() {
$('.tooltip').tooltipster();
});
Trigger Tooltipster with Hover
$('.hover-me').tooltipster({
// all of your code from above
functionBefore: function(){
var commentId = $(this).attr('data-commentId');
}
});
Note:
The default trigger for Tooltipster is hover (as seen in the documentation), however, you could explicitly set it by passing in trigger: hover, which would make your code slightly more readable and as such maintainable.
Tooltipster Support Recommendation (as seen in the comments)
I add this because it reinforces my solution above and adds context for future devs...that, and it might be overlooked in the comments section.
You initialize your tooltip when the mouseover event has already been fired, so Tooltipster cannot "hear" this first event and open the tooltip. You'd better initialize your tooltips at page load and put your comment id in a data-id attribute that you'll retrieve in functionBefore when you prepare your ajax call.
I am using jquery ui tab to load a html, in that html i have a method.
$("#tabs").tabs({
beforeLoad: function (event, ui) {
ui.jqXHR.error(function () {
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo.");
});
ui.jqXHR.success(function () {
alertMe()
});
}
});
<div id="tabs" style="height: 100%">
<ul>
<li>Tab 1</li>
</ul>
</div>
Inside the map.html i have the alertMe method. here it show alertMe is undifined.
The jqXHR 'success' is called when the server returns the response successfully, but before any tab rendering logic happens (like adding the html/js to the page). So a better solution would be to use the load method of the tabs control to handle the call:
$('tab's).tabs({
beforeLoad: ...
load: function() {
alertMe(); // Global JS on loaded fragment will be available on page now
}
});
API Docs: http://api.jqueryui.com/tabs/#event-load
I have a form with drop-down hierarchical fields with functionality derived from a JavaScript plugin called mcDropdown jQuery Plug-in.
The actual form is on a secondary page (Test.php) and set up to display on the main page through a Colorbox popup with the results also displayed in the Colorbox upon form submission.
The form submits and displays correctly in the Colorbox in its native HTML format when the JavaScript is removed (i.e. just using plain drop-down boxes).
However, when the Javascript is implemented in the form allowing the hierarchial drop-down structure of the fields there is no JS functionality when rendered through Colorbox.
Since the actual page that the form is on (Test.php) works fine by itself with the Javascript, there appears to be some issue rendering the JS through the Colorbox.
My research has indicated that this may be due to trying to access an element before it has been loaded into the document.
The Colorbox website states that this can be resolved by moving the JavaScript into ColorBox's onComplete callback; however, even with the example given, I cannot figure out how to do this correctly as I am a complete novice when it comes to JS.
Here is the drop-down script on the secondary page that has the form and ties into the external plugin (note that there are three fields in this form that use this JS hierarchical configuration):
<script type="text/javascript">
$(document).ready(function (){
$("#category").mcDropdown("#categorymenu",
{
targetColumnSize: 3,
}
);
$("#category1").mcDropdown("#categorymenu1",
{
targetColumnSize: 3,
}
);
$("#category2").mcDropdown("#categorymenu2",
{
targetColumnSize: 3,
}
);
});
</script>
Here is the Colorbox script on the main page that opens the secondary page in the Colorbox window:
<script type="text/javascript"> <!--<Check-Out Colorbox Script>-->
jQuery(function(){
jQuery('#link_content').colorbox({opacity:0.3, height:"100%", scrolling: false, onComplete: function(){
link_content_submit();
}});
});
function link_content_submit()
{
jQuery("#pre-process").submit(function(){
jQuery.post(
jQuery(this).attr('action'),
jQuery(this).serialize(),
function(data){
jQuery().colorbox({html: data, onComplete: function(){
link_content_submit();
}});
}
);
return false;
});
}
</script>
The three external files are: jquery.mcdropdown.js, jquery-1.2.6.min.js and jquery.bgiframe.js.
How can this Colorbox script on the main page be modified so the JS functionality of the form is preserved when displayed through Colorbox?
Thank you in advance for any detailed answers for this beginner.
Here is the answer:
<script type="text/javascript"> <!--<Check-Out Colorbox Script>-->
jQuery(function(){
jQuery('#link_content').colorbox({opacity:0.3, height:"100%", scrolling: false, onComplete: function(){
link_content_submit(), $('#category').mcDropdown('#categorymenu'),$('#category1').mcDropdown('#categorymenu1'),$('#category2').mcDropdown('#categorymenu2');
}});
});
function link_content_submit()
{
jQuery("#pre-process").submit(function(){
jQuery.post(
jQuery(this).attr('action'),
jQuery(this).serialize(),
function(data){
jQuery().colorbox({html: data, onComplete: function(){
link_content_submit();
}});
}
);
return false;
});
}
</script>
The respective JavaScript functions for each drop-down box in the JS form are integrated into the Colorbox onComplete: function() so each of these form elements is loaded before it is accessed through Colorbox.