I have an issue about ajax.
make an example: I have a menu list (ul li) and by default the first one has class 'current'.
if I click the second item assign class 'current' to him with jquery and remove it from the previous one.
Now, I need reload the menu list with ajax, so I call the ajax function that calls a php function that return an update html list.
But in this way I lose the 'current' class from the second list, that before I assigned with jquery.
Happens to me many times to have this type of problems.. What is the correct solution to solve it?
one way of doing it is to get the index of the li with the class current and in the ajax success callback assign the current class to the appropriate index
look at this fiddle to get the index of the li http://jsfiddle.net/3nigma/zyayj/
in your success callback
success:function(data){
var i = index -1; // index is zero based and eq() is 1 based
$("ul li:eq(i)").addClass("current");
}
I think your question indicates that you don't already know that web pages are "stateless", meaning that they do not "automatically" hold or store anything that you do with them.
Please see my answer ho a privious question which summarizes the ways to deal with retaining the state of things - the principles would remain the same for your menus.
Stateless HTML
Related
I've searched thru Corvid docs and Stack, not finding anything.
Is there a way to appendChild() in Wix Corvid(Code)?
EDIT: Wix does not allow DOM access directly. I assumed that people answering this would know i was looking for an alternative to appencChild and knew this method could not be used as is in Wix.
so to clarify: is there a way to add a child to a parent element using Wix's APIs?
It depends what you are trying to achieve,
the only thing off the top of my head is adding more items to a repeater
which you can do by first getting the initial data from the repeater, adding another item to array and reassign the data property of the repeater
const initialData = $w('#repeater').data
const newItem = {
_id: 'newItem1', // Must have an _id property
content: 'some content'
}
const newData = [...initialData, newItem]
$w('#repeater').data = newData
https://www.wix.com/corvid/reference/$w.Repeater.html#data
In Corvid, you cannot use any function which accesses the DOM.
Coming from one of the developers of Corvid:
Accessing document elements such as div, span, button, etc is off-limits. The way to access elements on the page is only through $w. One small exception is the $w.HtmlComponent (which is based on an iFrame). This element was designed to contain vanilla HTML and it works just fine. You just can't try to trick it by using parent, window, top, etc.
Javascript files can be added to your site's Public folder, but the same limitations apply - no access to the DOM.
Read more here: https://www.wix.com/corvid/forum/main/comment/5afd2dd4f89ea1001300319e
in my CGridView I have this simple function:
'afterAjaxUpdate' =>
'function(id, data) {
var checks2 = $("#checks").val().split(",").sort();
$("#rule-competitors-grid input:checkbox").each(function() {
console.log($.inArray($(this).attr("name").substr(11,$(this).attr("name").length - 12), checks2));
if ($.inArray($(this).attr("name").substr(11,$(this).attr("name").length - 12), checks2) !== -1)
$(this).attr("checked", "checked");
});
}',
On a list that shows 2 items at a time (for debugging).
See the console.log()s over there? They happen 13 times each call.
How can I fix this?
Problem:
Your CSS selector is valid for 13 checkboxes which you then iterate in your "each" statement. You'll need a new approach if you are looking to update one specific row at a time.
Yii's documentation (http://www.yiiframework.com/doc/api/1.1/CGridView#afterAjaxUpdate-detail) says it all:
A javascript function that will be invoked after a successful AJAX response is received. The function signature is function(id, data) where 'id' refers to the ID of the grid view, 'data' the received ajax response data.
Suggestion:
Change your selector to find the exact checkbox you need to update based on a classname and ID value. Work from the grid's 'id' variable down to the specific row you want to make changes to.
The solution was dumb and unrelated, but I'm sure someone in this world might encounter the same.
My problem was that the JavaScript was loaded through AJAX in the loaded page in a dialog/tab and not in the main page. What happens is that the "click" trigger was re-assigned, and added to the elements every time I reloaded the tab/dialog. After reloading it 13 times to check on small changes (since it's an AJAX dialog I was able to avoid having to update the whole page), it was loaded inside.
To avoid this, either unbind the events as soon as the dialog/tab is reloaded, or use .on() to lively load it on the main page and not the tab/dialog so the code isn't re-added to the event every time you load it.
I'm confused as to how to accomplish this. I have a page which, has a popup filter, which has some input elements and an "Apply" button (not a submit). When the button is clicked, two jquery .get() calls are made, which load a graph, a DataTables grid, photos, and miscellaneous info into four separate tabs. Inside the graph, if one clicks on a particular element, the user is taken to another page where the data is drilled down to a finer level. All this works well.
The problem is if the user decides to go back to the original page, but with the ajax generated graph/grid/photos etc. Originally I thought that I would store a session variable with the filter variables used to form the original query, and on returning to the page, if the session var was found, the original ajax call would be made again, re-populating the tabs.
The problem that I find with this method is that Coldfusion doesn't recognize that the session variable has been set when returning to the page using the browser's back button. If I dump out the session var at both the original and the second page, I can see the newly set var at the second page, and I can see it if I go to the original page through the navigation menu, but NOT if I use the back button.
SO.... from reading posts on here about ajax browser history plugins, it seems that there are various jquery plugins which help with this, including BBQ. The problem that I see with this approach is that it requires the use of anchor elements to trigger it, and then modifies the query string using the anchors' href attributes. I suppose that I could modify the page to include a hidden anchor.
My question, at long last is: is an ajax history plugin like BBQ the best way to accomplish this, or is there a way to make Coldfusion see the newly created session var when returning to the page via the back button? Or, should I consider re-architecting the page so that the ajax calls are replaced by a form submission back to the page instead?
Thanks in advance, as always.
EDIT: some code to help clarify things:
Here's the button that makes the original ajax calls:
<button id="applyFilter">APPLY</button>
and part of the js called on #applyFilter, wrapped in $(document).ready():
$('#applyFilter').click(function(){
// fill in the Photos tab
$.get('tracking/listPhotos.cfm',
{
id: id,
randParam: Math.random()
},
function(response){
$('#tabs-photos').html(response);
}
);
});
Finally, when the user calls the drill-down on the ajax generated graph, it uses the MaintAction form which has been populated with the needed variables:
function DrillDown() {
//get the necessary variables and populate the form inputs
document.MaintAction.action = "index.cfm?file=somepage.cfm&Config=someConfig";
document.MaintAction.submit();
}
and that takes us to the new page, from which we'd like to return to the first page but with the ajax-loaded photos.
The best bet is to use the BBQ method. For this, you don't have to actually include the anchor tags in your page; in fact, doing so would cause problems. This page: http://ajaxpatterns.org/Unique_URLs explains how the underlying process works. I'm sure a jQuery plugin would make the actual implementation much easier.
Regarding your other question, about how this could be done with session variables - I've actually done something similar to that, prior to learning about the BBQ method. This was specifically to save the state of a jqGrid component, but it could be easily changed to support any particular Ajax state. Basically, what I did was keep a session variable around for each instance of each component that stored the last parameters passed to the server via AJAX requests. Then, on the client side, the first thing I did was run a synchronous XHR request back to the server to fetch the state from that session variable. Using the callback method for that synchronous request, I then set up the components on my page using those saved parameters. This worked for me, but if I had to do it again I would definitely go with the BBQ method because it is much simpler to deal with and also allows more than one level of history.
Some example code based on your update:
$('#applyFilter').click(function(){
var id = $("#filterid").val(); // assumes the below id value is stored in some input on the page with the id "filterid"
// fill in the Photos tab
$.get('tracking/listPhotos.cfm',
{
id: id // I'm assuming this is what you need to remember when the page is returned to via a back-button...
//randParam: Math.random() - I assume this is to prevent caching? See below
},
function(response){
$('#tabs-photos').html(response);
}
);
});
/* fixes stupid caching behavior, primarily in IE */
$.ajaxSetup({ cache: false });
$.ajax({
async: false,
url: 'tracking/listPhotosSessionKeeper.cfm',
success: function (data, textStatus, XMLHttpRequest)
{
if (data.length)
{
$("#filterid").val(data);
$('#applyFilter').trigger('click');
}
}
});
This is what you need on the client-side to fetch the state of the photo list. On the server side, you'll need to add this modification to tracking/listPhotos.cfm:
<cfset session.lastUsedPhotoFilterID = URL.id>
And add this new one-line file, tracking/listPhotosSessionKeeper.cfm:
<cfif IsDefined("session.lastUsedPhotoFilterID")><cfoutput>#session.lastUsedPhotoFilterID#</cfoutput></cfif>
Together these changes will keep track of the last ID used by the user, and will load it up each time the page is rendered (whether via a back button, or simply by the user revisiting the page).
Recently im working on a project and im trying to generate form elements with the help of ajax technology (implementing a form with codes). the situation is that the user should be able to select from a list of options and then due to his select another list of options should be appeared, then due to his/her select from the second sets of options he/she should see the third series of options. now the problem is that when the user tries to change the first option in the first set, the second option will be regenerate but the third one still sticks on the page. I was trying to use the form_sate['rebuild'] = TRUE
but it did not work and all form elements disappeared. can any one help me to see which code should be implemented and where it should be used?
Without any code it's almost impossible to help, except to say check out the examples modules, specifically the ajax_example module.
The basic principle is that you need a <div> container surrounding your 2nd and 3rd select elements, which will be replaced by the #ajax set on the first element. Then you need another container inside that one surrounding only the 3rd select element, which will be replaced by the #ajax set on the 2nd select element.
Hope that helps.
well.. the form page may contains previous values because of $_POST fields variables..
for example if I want to display clear "add" form on POST submit,
I do this tric to clear drupal previous form values via ajax:
<?php
// AJAX POST handler...
....
$my_form = drupal_render(drupal_get_form("the_form", ...));
$errors = form_get_errors();
if (!$errors) {
// re-render clean form, unset your POST fields....
unset($_POST['link_path']);
unset($_POST['link_title']);
unset($_POST['parent']);
unset($_POST['weight']);
$my_form = drupal_render(drupal_get_form("the_form", ...));
}
?>
This is a followup question to the one I posted last week "Ajax.ActionLink not Posting". I did finally get it to Post, and it properly calls my Delete action and deletes the record. The Delete method returns a RedirectToAction("List") so that the new data set minus the deleted record is re-listed. Except that what actually happens is - NOTHING. The listing doesn't change. And I'm pretty sure I know why: calling Ajax.ActionLink returns an Ajax result which is only supposed to replace a designated element (the UpdateTargetId option parameter) in the document. And since I haven't designated any, it doesn't replace anything, even though it's a whole fresh page.
My question is, what do I pass to the AjaxOption.UpdateTargetId to get it to wipe the whole page and reload with the new result, just as though Html.ActionLink had been called (recalling that the only reason for using Ajax.ActionLink was that I wanted the method invoked with a POST instead of a GET)? (And since this page uses a Master Page, I don't have the option of just putting an ID on the body element.)
You can do a POST without Ajax. You would need to use a Form and change your ActionLink to a Submit button. That might be the simplest way.
Otherwise, you need to change your List action to return a PartialView. This is what renders to your UpdateTargetId, which you can just set as an outer div on your page.
Do you really need to reload your list at all? You can do your Ajax POST to delete the row in the database, and use the OnSuccess property of the AjaxOptions to call a JavaScript function which then removes the row from the html on the page.