wordpress gravity form auto fill/select with current page title - php

I was wondering if it was possible to make a select dropdown inside a gravity form that can auto select a dropdown item according to the current page that it was loaded in.
For example:
I have 2 pages:
page A
page B
On every page I have the same form (form is made once).
And in that form I have a dropdown with 2 items (page A and page B)
But when I load page A I would like to make sure that the dropdown auto selects page A so that i can use conditional logic.
Ditto for page B.
How can i make sure that this will be possible in a short amount of time?
This is what i did so far:
app.js
e('.button[href^="#"]').on("click", e.proxy(this.openModal, this)),
this.prefillPopup();
prefillPopup: function () {
var i = parseInt(e("body").attr("class").split(" ")[2].replace("page-id-", ""));
e("#input_5_8").val(
{
427: "Personeelsfeest",
429: "Bedrijfsfeest",
431: "Walking en seated diners",
433: "Seminaries & Presentaties",
435: "Productlancering",
437: "Modeshows",
439: "Event op maat",
440: "Activiteiten",
}[i]
);
},
What i did is creating function that when the popup modal is opened/loaded the dropdown will be automatically filled with the data that I want it to be filled with.
The only thing is that it doesn't fill up with the content that I specify.
The dropdown needs to be filled with the desired titled related to the page ID that is being viewed in the browser at that time.

Related

Dynamic route based on the selected page in codeigniter

I have a page with a list of all the items. Which is http://localhost/myproject/items
Now I have item details pages which fetch the data from the database based on the item clicked
The url of the item details page is http://localhost/myproject/items/item_detail/3
I want to change the route from http://localhost/myproject/items/item_detail/3
to http://localhost/myproject/items/{item title}
routes.php
$route['items/{item title}'] = "items/item_detail/$1";
How can i get the item title(from database) in place of {item title} in the above code
Please help

How to define when you should hide "Show More" button?

I have a mysql table of products.
I have a product listing page where User has a button "Show more" to load more products on the page.
After clicking on this button jQuery calculates how many displayed products are on the page (N) and makes an AJAX request to the table for getting 20 more products (N+20).
Now I should create a trigger when I should hide the button.
Which trigger I should choose? What is the best way to define that there are no products.
Please, help.
I have no idea how have you reached that functionality since you are not sharing the code and thus I cannot give you the most accurate help, only this one:
when loading the page and retrieving the first X rows from DB, retrieve the amount of all rows (matching the search criteria) as well
make this count visible to the template
in jQuery, count how many rows have you already loaded
this means, that on page start you are displaying X rows, the amount of total rows is Y, and the number of currently displayed rows is Z
immediately after the page is loaded you need to compare if Z <= Y then do not display button else display the button
if the button was displayed I guess you are listening to click event on this button and then performing your AJAX request, here after the AJAX is successfully completed, you need to do Z += X and again compare if Z > Y then hide the button
That should be your logic, now turn it into your code.
There are 2 ways I guess,
The simple way would be counting number of response rows that's returned by your AJAX function. If it's smaller than 20 then hide the button.. However, if your records number is a multiple of 20 then there will be a glitch in the last response, because it won't hide the button.
The perfect way is to calculate number of records in your table, then save that data in your js variable. Then compare that variable value with the number of times you ask for another record.. If they have same value then hide the button, if not then show the button.
It depends on the frequency of product list updating.
If the amount of products changes often (say, more than once a day or so), I would execute a query on each AJAX request, checking if I have more items (for example, checking if N+20 >= count(id) of products), and on the callback hide the button.
Otherwise, I would just inject the amount of products as a JS parameter into the page, validate against it on each click (N+20 <= count_products), and save myself some AJAX \ SQL loading time.
you can get the count of all lines using PHP and save it in an hidden field or in a variable after that you can test (using jquery) to see the current number of records in the page (you are already doing that ) then test it with the number in the hidden field/variable and show/hide your button
Finally I choose next variant:
I want to load more 20 products.
In backend code I switch this number to 21.
So then in jQuery I show just 20 BUT I check if there one more product I should NOT hide the button.
That's it.
Thanks guys anyway!

Remember selected option after redirect

Basicly, I have a <select> with a few options, when selected, it loads a jQuery dataTables table with content, in that table are options to edit/delete that content.
When a user deletes this content, or edits, it's redirected back to the first page, having to select the category again.
How would I set it so, that the <select> is auto selected, and the dataTable also loaded after an redirect?
My project is in PHP, so I can track what category it 'came from'
To auto select the category from your categories:
$(document).ready(function () {
$("#categories").val('<?php echo $selected_category;?>');
});
Assuming you have the $selected_category value (what category it came from).

How to change an html paragraph text based on selected radio button?

I have been developing a course management system with PHP and MySQL. I recently ran into a problem. I created a basic webpage (EditCompletion.php). Basically, what I want to do, is have a link on that page that opens a jQuery Modal Window and within that modal window should be 3 radio buttons, a small description paragraph (which changes when a new radio button is clicked), and a submit button. This is how I want it to work:
I want to be able to select a student (CERTAIN SELECTED STUDENT) and a lesson (CERTAIN SELECTED LESSON) then I want to be able to click the link on EditCompletion.php that then opens the jQuery Modal Window. I want to then be able to choose from the following options:
Unlock - (Description Paragraph - Are you sure your want to unlock (CERTAIN SELECTED LESSON) for (CERTAIN SELECTED STUDENT))?
Exempt - (Description Paragraph - Are you sure you want to exempt (CERTAIN SELECTED STUDENT) from (CERTAIN SELECTED LESSON))?
Master - (Description Paragraph - Are you sure you want to master (CERTAIN SELECTED STUDENT) out of (CERTAIN SELECTED LESSON))?
THE CERTAIN SELECTED will show up as the CURRENT SELECTED [WHATEVER]. For example, SELECT STUDENT JOHN DOE and LESSON 1 on EditCompletion.php and then click the link to open the modal. I want to select an option using radio buttons, and upon clicking "save", the MySQL database would be updated.
something like this?
<?php
for($samples as $sample){
echo '<a onclick="return (confirm(\'..message here.. for '.$sample['name']. 'about'.$sample['lesson'].'\'))? true: false;">Action</a>';
}
?>

Jquery : Setting selected state on select option items populated via ajax

I have 6 select boxes (sbs), 3 to a row so two rows. The top three sbs contain a list of options that gets populated via php, data is pulled back from mysql. When an option from each box is selected I'm using jquery (via ajax) to pull back option items for the sb immediately below it and populate said sb with corresponding data. I click 'create' and the data is sent via ajax to a php script which then stores the data in a table and returns the submited dropdown data (albeit formatted) in a table below the form. So you might have something that looks like this after creating a 'combination'. Eveyrthying to the left of the colon was an option on the top row of select boxes and then you have selected options from the corresponding box below displayed to the right.
Color: Red | Capacity : 4GB | Model : ABC | EDIT
Color: Blue | Speed: 2GHZ | Capacity : 2GB | EDIT
etc.
If I want to edit the record I click edit and jquery finds the id of the edit button clicked, passes it via ajax to another php script which then returns a json object with the relevant data and this is then used to repopulate the dropdown boxes with the selected options. Everything so far works fine.
My problem is this, only the top row of sbs get one of the options selected when edit is clicked. The child options don't get selected and I can't figure out why. I can get the right options to display but can't set the selected state for whatever matching value is returned in my json object. I've been 8 hours trying to figure it out and tried various things on SOverflow and other sites, none of worked - i'm not that experienced with javascript/ajax to be honest.
Upon a successful ajax process i.e success: I am doing the following:
var jObj = $.parseJSON(html);
//parentVariations# is the select boxes in the top row where
//Color, capacity, model options are displayed.
//The trigger fires off my ajax function which is responsible for
//populating the corresponding child select box with relevant data.
$('#parentVariations1').val(jObj.groupAttr1).trigger('change');
$('#parentVariations2').val(jObj.groupAttr2).trigger('change');
$('#parentVariations3').val(jObj.groupAttr3).trigger('change');
//childVariations# is the child option box, i have the same code for each child
//box but am only showing the first one here for simplicitys sake.
//What I thought I was doing here is getting each option then if the value
//matches that held in my corresponding json object set that option to selected...
//Doesn't work :'(
$("#childVariations1 option").each(function()
{
if($(this).val() == jObj.childAttr1)
{
$("#childVariations1 option").attr('selected','selected');
}
});
Any help would be very welcome as it's driven me over the edge.
$("#childVariations1 option") is an array of all the options. You need to specify which one:
$("#childVariations1 option").eq(1).attr('selected','selected');
If your case, use a for loop and use the index for get the current position, instead of using .each. (or set up a counter)

Categories