Develop Reference

Using ajax to dynamically load modal details

I currently have a foreach in one of my blades. I want to create a button on each entry that will prompt a modal to show with some further details. I have the modal working correctly using many different methods (I had to try multiple due to the ensuing problem) but couldn't get a small feature I wanted to work.
// this is inside the foreach. isStaff is a custom attribute.
#if(auth::check() && auth::user()->isstaff)
<span style="position: absolute;top: 0;left: 0;" class="quickview btn btn-sm btn-primary ml-3" data-toggle="modal" data-target="#modal" value="{{ $loop->index }}"> // loop used to get index of foreach
<i class="fas fa-search"></i>
</span>
#endif
I basically want to have two arrows on the top of the modal (pictured) that would either go to the previous or next entry in the foreach.
image (sorry can't embed yet)
I'm wondering how i can handle this logic? at first, I passed in the id through my controller for the specified entry the incremented and decremented it, though i cannot pass the collection through.
$(document).ready(function(e) {
$('.quickview').on('click', function(e) {
e.preventDefault();
$('#modal').find(".modal-body").load("admin/preview/" + $(this).attr('value'));
});
});
Basically, is there a way to pass either the collection through, or dynamically change the ids in the modal then showing it? I had tried a var collection = "<?php json_encode($collection); ?>"; but i could no longer use relationships.
I had also tried an ajax request where I passed in the collection but a similar problem of not having relationships occurred.
I had thought about simply making the new URLs ex. admin/preview/n +1 and n - 1, though realistically I still need the collection in order to do $collection[n] to display
Sorry for the noob-ish question, thank you for reading and for any help in advance!

When clicking on an anchor tag, how to save that elements ID so I can use it later?

I have a bunch of listings on my website like this:
<a class="listing" id=""></a>
<a class="listing" id=""></a>
<a class="listing" id=""></a>
Each having unique data and ID's loaded from my database.
When I click on one of hem, it opens a panel that has information about it. I dont want to display all information, just parts. On the other panel, I have a button:
<div class="info-panel>
<button class="load-other-info"></button>
</div>
I want to load some of the data initially, which is easy with an onclick=function(). But how can I store the onclick ID attribute so if I click on the panel button it knows to load the data specific to the listings ID that I clicked previous?
I am thinking I need to store it as some variable, then when the button is clicked do an AJAX request with that variable to my PHP file to query the rest of the data row columns based on that ID.
I am new to javascript so I dont really understand how to store variables like other languages. thanks!

You mean something like this:
let listings = [];
$(function() { // when page loads
$(".listing").on("click",function() {
listings.push(this.id); // save each ID clicked
$(this).addClass("clicked"); // show it is chosen
});
$("load-other-info").on("click",function(e) {
e.preventDefault(); // or use type=button on the button
$.get("info.php",{data:JSON.stringify(listings)},function(data){
$("#someInfoContainer").html(data);
})
});
})

How to show divs dynamically after each button click based on number of items fetched from database?

I have some data in my database. I will fetch the data and will use the count. Now I have to display this data one by one in a div. So there will be first data and a next button. When I click on 'next' button,the second data fetched shows and so on until the end.
At the end the next button disappears and another button appears.
PLS Note: I am using python flask as back end
How to do this???
<button type="button" class="btn btn-primary m-b-10 m-l-5" onclick="nextpart()" style="display:inline">Next ></button>
<div class="form-left-w3l" id="welcomeDiv1">
<h6>Data : {{ id }}</h6>
</div>
<div id="welcomeDiv2">
</div>
JS:
function nextpart() {
document.getElementById('welcomeDiv1').style.display = "none";
document.getElementById('welcomeDiv2').style.display = "block";
}

Save the data in an array. Create all the divs with a for-loop. Make them all style="display:none".
Then .show() the first one and add a class like active to it.
Hook the Next-Button to a function: .hide() the active div and remove the active class form it. .show() the next sibling of that div and add the active class.
Use the same logic for the Prev-Button.

make button disapear when clicked even when visited next time

I have a problem i am making a website with a button on it.
The problem is that i only want this pressed once by the user who visits the site.
So when ever the user refreshes or comes back it isn't possible to press it again.
I think i should use a combination of PHP with AJAX but unfortunally i am not good enough to get it together. In the hope somebody here can push me in the right direction :)
the html code:
<form action="" method="POST">
<input id="banana_button" type="submit" name="button_press" value="Add banana's!">
</form>
the javascript:
$('input[name="button_press"').click(function(){
$('#banana_counter_text').append($banana+1);
$(this).attr('disabled',true).css('width','180px').attr('value','thanks for adding a banana');
});
What i want to get is that when they pressed the button next time they visit they won't see the button.
Is it possible and how could i best do this. I hope you guys can help me
Update:
Well i was trying the last few days to resolve this problem and i got it working.
I am using a session_cookie with a custom name. Everytime the site is loaded it checks if that cookie is available if not than it wil show the button. Else it will delete the whole button.
the code looks like this:
PHP
//this is what checks everytime if the cookie is set
if (isset($_COOKIE['banana_added'])) {
//code for disabling the button
}
//this is what makes the cookie and checks if the submit button is pressed.
//because people where wondering how the data is stored. It is just a simple XML file
if(isset($_POST['buttonsubmit'])){
/*when submit is pressed */
session_name("banana_added");
session_start();
$xml = simplexml_load_file('../banana.xml');
$prev_count = $xml->banana_count;
$new_count = $prev_count +$_POST['buttonsubmit'];
echo $prev_count;
echo $new_count;
$xml->banana_count = $new_count;
file_put_contents('../banana.xml', $xml->asXML());
header("location:../landing.php");
Thank you all for your help. I don't know how i can close this thread ?
This is the solution for this particular problem

In order to remember that change you should either put that value in COOKIE/SESSION or in DATABASE. The second variant ofcourse is preferd.
So lets say in example you have table called buttons and in it you have a column 'checked' with type tinyint (accepting values 0 and 1) and default value of 0.
In your html you should do this:
<button <?php ($thisButtonQuery->checked == 'checked')? 'disabled' : '';?>>button text </button>
Regards and i hope i resolved your roblem! :)

Well i was trying the last few days to resolve this problem and i got it working. I am using a session_cookie with a custom name. Everytime the site is loaded it checks if that cookie is available if not than it wil show the button. Else it will delete the whole button.
the code looks like this:
PHP
//this is what checks everytime if the cookie is set
if (isset($_COOKIE['banana_added'])) {
//code for disabling the button
}
//this is what makes the cookie and checks if the submit button is pressed.
//because people where wondering how the data is stored. It is just a simple XML file
if(isset($_POST['buttonsubmit'])){
/*when submit is pressed */
session_name("banana_added");
session_start();
$xml = simplexml_load_file('../banana.xml');
$prev_count = $xml->banana_count;
$new_count = $prev_count +$_POST['buttonsubmit'];
echo $prev_count;
echo $new_count;
$xml->banana_count = $new_count;
file_put_contents('../banana.xml', $xml->asXML());
header("location:../landing.php");
Thank you all for your help.
This is the solution for this particular problem

Questions about cookies and sessions in ASP.net application

I am writing an ASP.Net application that allows anonymous people to post prayers and others to comment on/confirm to pray for these objects. Prayers are stored in a SQL Server 2008 database with a unique identifier.
They are displayed using a repeater control and a hidden field to store the ID of the row. Each item in the repeater contains a button that allows anonymous people to pray and this is incremented as a counter inside the database.
Basically, once a user has confirmed that he/she is praying for this item, I want to disable the button and display the total count for that row.
It is my understanding that I can store data in cookies/sessions so the only solution I could come up with so far would be to store the ID of the row into one of these objects and then use custom logic inside of my repeater control to check to see which are present.
Can anyone offer some insight as to what the most efficient way to accomplish something like this might be? If there are options other than cookie or session I'd be glad to hear that too.
EDIT:
I am trying to implement this solution using the following logic.
Codebehind:
protected bool IsPrayerInCookie(string prayerId)
{
if(Request.Cookies["prayers"][prayerId] != null)
{
return false;
}
else
{
return true;
}
}
ASPX:
<span class="confirmed_prayers"><span class="trans">
<asp:Label runat="server" ID="lblConfirmedPrayers" Text='<%# Eval("ConfirmedPrayers") %>' />
people have prayed for this.</span></span>
<% if(!IsPrayerInCookie(Eval("PrayerId").ToString()))
{
%>
<asp:LinkButton ID="btnPray" CssClass="but_styled" runat="server" TabIndex="8" CommandName="IncrementPrayer">
<span><span class="check">
Pray for This</span></span></asp:LinkButton>
<%
}
%>
This isn't working however. Can anyone help me figure out how to make the if statement work inside of the aspx file to properly call the code behind method with the correct ID?

Session will only last as long as the user is on the site. Therefore, if they close their browser and come back, it will be gone.
Cookies would be the better choice, and only if they clear their cookies will this data be gone.
If you don't require the user to log in, I'm thinking this is all you could do.
Heres the MSDN page on cookies:
http://msdn.microsoft.com/en-us/library/ms178194.aspx
For the actual cookie storage, I would do something like:
Response.Cookies["prayerlist"][CurrentPrayerItemID].Value = "something"; //All that matters is that they have the cookie with this ID.
Response.Cookies["prayerlist"].Expires = DateTime.MaxValue;
So when someone clicks to add that item, you will first want to check to see if they already have that id in their cookie, like so:
if(Response.Cookies["prayerlist"][CurrentPrayerItemID] != null)
{
Response.Cookies["prayerlist"][CurrentPrayerItemID].value = "something";
// Add prayer to Database
}
And likewise, you would check the cookie whenever you bind the repeater. If they have that cookie, you would disable the corresponding pray button.
I'm not sure how to approach this, since idk how your binding, but it will look something like this:
foreach(Item item in YourListOfItemsThatYouAreBindingToTheRepeater)
{
if(Response.Cookies["prayerlist"][CurrentPrayerItemID] != null)
{
//Disable Button - Set "HasPrayed" = true
}
}
To actually disable the button, what i would do is set a value in your list to false, and then in the aspx page, do something like this:
<asp:Button ID="button1" runat="server" Enabled='<%# !(bool)Eval("HasPrayed") %>' />
Using !(bool)Eval("HasPrayed") since you want to set enabled to false if HasPrayed is true.

You can use sessions to store the prayer items that the user has clicked on, but when they come back to your site it will forget all the previous items because the session has been lost.
In this case you can use a cookie to store all the prayer item ids that the user has clicked the "I'll pray for this" button. I'd go this route if you don't want to require user logins.
For the code you're describing, I think you could use an ASP.NET UpdatePanel which will allow you to update/show the number of people praying for the item and to disable the button.