In my PHP application, I have a web page that says "New Leads: 0" The "0" is the result of a SQL statement.
My goal is to add Ajax code so the "0" updates dynamically, without having to refresh the page. When the number of rows increases in the database, I want the "New Leads: 0" to automatically increase.
My question is can you point me in the right direction of how I can code this?
Make a page that outputs the number, put the number into a <span id="the_number"> then call the load() function of jQuery on that span to fetch that page. Use the window.setInterval() function to make it periodically.
Related
I'm hard stuck with this one so any advice welcome!
Ive been trying to create a flow that goes to this website https://dlv.tnl-uk-uni-guide.gcpp.io/ and scrapes the data from each table in the Subject Areas drop down list. My knowledge of HTML is sketchy at best but from what I understand it's a dynamic html table that just refreshes with new data rather than going to a new url. I can extract the subject list as a variable and in my head i think i just need to add this to a UI selector action but despite numerous attempts i've got absolutely nowhere. Anyone got any ideas as to how i could fix this or work around?
Because it is not a conventional drop-down using the "Set drop-down list value on web page" doesn't work all that well.
You can use a bit of javascript and variables for this.
Hit F12 to show developer tools, you will see there is a list of hidden items with the class class="gug-select-items gug-select-hide" you will use this in the javascript.
Then add a 'Press button on web page' function and add the 'drop-down' element, which is a <div>
Then edit the element selector and change it to text editor.
then change the selector to make use of the nth-child(0) selector but use a variable for the index.
so it looks something like #gug-overall-ranking-select > div.gug-select-items > div:nth-child(%ddIdx%)
Use the "Run JavaScript function on web page" function to get the number of options available to the drop-down. (child elements)
The returned result is text, so convert it to a number that can be used in the loop.
function ExecuteScript() { /*your code here, return something (optionally); */
var firstDDlist = document.querySelector("#gug-overall-ranking-select > div.gug-select-items.gug-select-hide");
return firstDDlist.children.length;
}
In the loop each element will be pressed and cause the table to reload.
The table data extraction can then also be done in the loop, but that this code only shows the looping through the options.
The full flow 'code' (copy this and paste it in power automate).
WebAutomation.LaunchEdge.LaunchEdge Url: $'''https://dlv.tnl-uk-uni-guide.gcpp.io/?taxonomyId=36&/#gug-university-table''' WindowState: WebAutomation.BrowserWindowState.Normal ClearCache: False ClearCookies: False WaitForPageToLoadTimeout: 60 Timeout: 60 BrowserInstance=> Browser
WebAutomation.ExecuteJavascript BrowserInstance: Browser Javascript: $'''function ExecuteScript() { /*your code here, return something (optionally); */
var firstDDlist = document.querySelector(\"#gug-overall-ranking-select > div.gug-select-items.gug-select-hide\");
return firstDDlist.children.length;
}''' Result=> numberOfItems
Text.ToNumber Text: numberOfItems Number=> itemCount
LOOP ddIdx FROM 1 TO itemCount STEP 1
WebAutomation.PressButton.PressButton BrowserInstance: Browser Control: appmask['Web Page \'h ... sity-table\'']['Div \'gug-select-selected\''] WaitForPageToLoadTimeout: 60
END
It should end up looking like this:
Flow running:
With using Power Automate Desktop (PAD), the goal is to be a low-code solution. Of course knowing HTML is a bonus and will help you on tricky webpages or problems, but not knowing much is alright usually. I'm not really comfortable going to that web page you shared but you could try the below option.
PAD has a built in function in the action pane:
'Browser automation' > 'Web data extraction' > 'Extract data from web page'
Try using that and when asked to add UI Element select the table/dropdown list to see what information you get back. If that doesn't work you might need to try out JavaScript or another method.
How to remember the currently opened page in the pagination of the membersloop in Buddypress, so when visiting a profile and coming back to the membersloop, it gets opened on that page?
I saw that in buddypress-nouveau.min.js?ver=1.7.8:formatted the ajax call is done via the JS function objectRequest() but it gets called with the "page: 1" parameter as a fixed value.
Is there a way to override this?
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.
For a website, which doesn't use AJAX I'm using OnDocumentComplete event to know when the page loading is complete.
My question is, how can I detect when website, which uses AJAX requests is ready (e.g. when a website which is fetching some search results by using AJAX finished its work) ?
Ok here is a trick i developed my self.
1-in your html page make a div and set its text to "false".
2-in you server side put a javascript at the end of your returning code. for example your site returns following text upon an ajax call.
a
b
c
d
e
so after this text put a javascript code that will change the text of div from "false" to "true"
so what will happen is that once you receive all the data from ajax call you will also receive the javascript code and that code will run and set the value of div.
so in your page once all data is received you will see the indicator div. and you will know that you have received all data. you can also run functions in similar way upon completion of data.
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", ...));
}
?>