In my application I have a slide out menu coded as such...
echo "<nav>
<h3>Menu</h3>";
if ($_SESSION['true']==1) {
if ($_GET['page']=="eventdetails") {
echo "<a href='index.php?page=removeevent&EventID=".$_GET['EventID']
."'>Remove Event</a>";
echo "<a href='index.php?page=editevent&EventID="
.$_GET['EventID']."'>Edit Event</a>";
}
// Admin. tasks button
echo "<a href='index.php?page=admintasks'>Admin. Tasks</a>";
}
echo "</nav>";
and I want to post fields in a form based on the click of the 'Edit Event' link; is there anyway to do this? I have used POST but only in the traditional method of having a submit button within the form tags but I don't know how I would do this when the button is outside the form tags.
On element click event, you could do something like this and submit the form
$("#myAnchor").click(function(event)
{
$('form#form_id').submit();
event.preventDefault();
});
Include the preventDefault if you don't want the normal anchor behavior
First give your form a name:
<form name="mystuff">...
Then inside the link define an onclick handler that looks up the form in the DOM via the name and submits it:
Edit event
Related
I want to get the value of id so that I can delete the data from mysql based on the id number
This is a project for events, the main idea here is I want to get the id number of the event based on the clicked button, so that I can update/delete the event based on the id number.
Code for displaying details
<?php $sql= "SELECT event_name, event_date, event_id FROM events WHERE event_status=0";
$result= mysqli_query($conn, $sql);?>
while($row = mysqli_fetch_assoc($result))
{
echo '
<div class="pending-card">
<div class="pending-image">
</div>';
echo " <div class='pending-title'>
<h1>{$row["event_name"]}</h1>
</div>";
echo " <div class='pending-des'>
<p>{$row["event_date"]}</p>
<button class='choice-pending'><a href='detail.php'>Read More...</a></button>
<input style='display: none;' type='text' id='test-pend' value='{$row["event_id"]}'>
</div>
</div>
";
}
Jquery code
Here I tried to check if this works by making an alert, but after i press the button, the id number that came out is not correspond with the button i click
$(document).ready(function(){
$('.choice-pending').click(function(){
alert("Value: " + $('#test-pend').val());
});
});
Can anyone tell me where did I go wrong
Example, the event i pressed is suppose to be 34, but the alert shows 26 which is the first event id in the code for displaying details
You can use data-* attribute in your element.
Based on https://www.w3schools.com/tags/att_global_data.asp
The data-* attributes is used to store custom data private to the page
or application.
The data-* attributes gives us the ability to embed custom data
attributes on all HTML elements.
The stored (custom) data can then be used in the page's JavaScript to
create a more engaging user experience (without any Ajax calls or
server-side database queries).
The data-* attributes consist of two parts:
The attribute name should not contain any uppercase letters, and must
be at least one character long after the prefix "data-" The attribute
value can be any string Note: Custom attributes prefixed with "data-"
will be completely ignored by the user agent.
<button class="choice-pending" data-event-id="<?= $row['event_id']; ?>">Read More...</button>
Then in your script you can access the clicked button:
$(".choice-pending").click(function() {
if($(this).attr('data-event-id') !== undefined) {
// You can do ajax call here to your detail.php
// Or you can simply create a hidden field inside your form, assigned the data-event-id value to it, then $("form").submit();
} else {
/** Error message here, maybe? */
}
});
First remove your anchor tag inside button and use only anchor or button and print your html with assign some dynamic class or id into each to make them unique like this.
<div class='pending-des'>
<p>{$row["event_date"]}</p>
<a class='choice-pending-{$row["event_id"]}' href='detail.php'>Read More...</a>
<input style='display: none;' type='text' id='test-pend-{$row["event_id"]}' value='{$row["event_id"]}'>
</div>
Now bind click event on it-
$(document).ready(function(){
$('.pending-des').each(function(){
$(this).on('click', 'a[class^=choice-pending-]', function(){
alert($(this).find('input[id^=test-pend-]').val());
});
});
});
Hopefully someone will know how to do this...
I would like the show/hide to work dependent on the the image/icon clicked.
For example if Request Icon is clicked, the colorbox popup will be displaying the Request and Offered divs.
Whereas if the Accepted Icon is clicked, the colorbox popup will display Accepted and Offered Divs but hides the Request div.
Here's a few in the PHP:
<div <?php if($_GET['status']=="Requested"){ echo "class=iconActive";}else {echo "class=iconInactive";}?>>
<a href="/index.php/agent-appointment-request-list/?status=Requested">
<img src="components/com_agent/images/requestedIcon_s1.png" id="requestedIcon" alt="" /></a>
<div class="iconTitle">Requested</div>
</div>
Here's the jquery for show/hide that I have:
$(".slidingDivReq").show();
$("#show_hideReq").show();
$('#show_hideReq').click(function(){
$(".slidingDivReq").slideToggle();
});
Update: Here's the section for the content that'll be show/hidden. :
<div class="AppointmentTitleFirst">
<img src="components/com_agent/images/req_appt_title_s1.png" class="ApptIcon"></img>
<h1>Requested Appointment # <?php echo $this->appointment->id;?> Status:<?php echo $this->appointment->status_name;?></h1>
<img src="components/com_agent/images/dropdown_arrow_s1.png" class="ApptDropDownArrow1" id="show_hideReq"></img>
</div>
<div class="clearFloat"></div>
<div id="requestedAppointmentContent" class="slidingDivReq">
Content here....
</div>
Pretty much, I'm not sure how to use the GET['status'] and use it with the show/hide. So if the GET['status'] == Requested, then the show_hideReq will be .show(), but my other divs in the colorbox will use .hide(); (unless it's a page that needs a few other divs to .show())
Hopefully someone will know.
I'm not sure how to use the GET['status'] and use it with the
show/hide
You can use a hidden element as a variable, sothat you can test your GET['status'] in jquery. Add this element in your php page:
<input type="hidden" id="StatusId" value="<?php echo GET['status']; ?>"/>
Then you can do this:
$('#div').click(function(){
var statusId = $("#StatusId").val();
If( statusId === 0){
//Do something
}else{
// Do something elese
}
});
You should send the status value in the url that redirect to this php page, for example from js file it would look like:
var url = "http://localhost/yourcurrentphpfile.php?Status=" + somevalue;
window.location.href = url;
or the clicked <a> tag in your php page that redirect to this page should has the href property looks like http://localhost/yourcurrentphpfile.php?Status=somevalue.
yourcurrentphpfile.php is the php page that containst the hidden input.
You'd better use $(element).css("dissplay","none"); to hide an element and $(element).css("dissplay","inherit"); to show it.
Also in your PHP you better use if (isset($_GET['status']) && !empty($_GET['status'])) to ensure you have a value. Also, you need to edit your ECHO instructions to:
echo 'class = "iconActive"';
and
echo 'class = "iconInactive"';
Following your code's logic,
$(function(){ //on page load
$("div.classActive").load(function(){
//Do whatever you want when the div is active such as show/hide elements
})
$("div.classInactive").load(function(){
//Do whatever you want when the div is inactive such as show/hide elements
})
})
Only of the 2 will be executed since when a page renders only one of them will exist.
I have php code on a page which generates a series of buttons, like so: (in a loop)
echo "<input type=\"button\" event='$eventID' id=\"sendsomeone\" value=\"Send a family member\"/>";
echo "<span id='$eventID'></span>";
Then I have jquery which catches those clicks, and also creates a button:
$('input:button').click(function() {
$(this).next("span").append('You clicked this button!');
$(this).next("span").append('<input type=\"button\" event=' + eventID + ' id=\"submitbutton\" value=\"Send\"/>');
$('#submitbutton').click(function() {
}
}
My objective is to correctly catch all button clicks on the page. (no matter the order they are clicked in, the PHP generated buttons should all behave in one way, the secondary buttons should all behave a different way)
In the code I have above, it works correctly at first, letting you click buttons and creating the secondary button for each. But once you click one of the secondary buttons, it all starts behaving strangely. After clicking a second button, then /any/ click executes code for #submitbutton.
Do I need to use a class in here somewhere? If so, an example would be great. What will make this work?
You don't need to append the button an then select it. You can create the input element in a jQuery object and then just bind to that objects click event like so:
$('input:button').click(function() {
var span = $(this).next("span");
span.append('You clicked this button!');
$('<input type=\"button\" event=' + eventID + ' value=\"Send\"/>')
.appendTo( span )
.click(function() {
//do stuff here
});
});
I want to send a post from HTML that contains info about a certain form to a controller in code igniter. The I want the controller to process the info and loads a certain page inside a div. Here is my code. I think I'm supposed to use something like .html or something? I'm not quite sure, I dont understand it
The controller
function search_friend(){
//this function gets text from text field and searches for a user and returns all users similar to this dude
// $this->input->post($searchFriendForm);
// $this->input->post($searchFriendText);
$this->load->model('userProfile_m');
$people = $this->userProfile_m->get_user_by_name($this->input->post($searchFriendText));
$this->load->view('addFriendSearchResult',$people);
}
the form in html
<form method="post" action="" name="searchFriendForm" id="add-friend-search">
<input type="text"/ name="searchFriendText">
<input type="button" class="small green button" id="add-friend-button" />
</form>
the jquery function
$("#add-friend-button").click(function(){ //start click
$.post("<?php echo site_url('userProfile/search_friend'); ?>", $("#add-friend-search").serialize());
$("#insert-activity").load("<?php echo base_url().''?>system/application/views/addFriendSearchResult.php");
$("#add-friend-search").slideUp("slow",function(){});
}); //end click
Firstly, in your controller change this line like this (u need to pass the string name of the field here):
$people = $this->userProfile_m->get_user_by_name($this->input->post('searchFriendText'));
Next, change your jQuery to be like this:
$("#add-friend-button").click(function(){ //start click
$.post("<?php echo site_url('userProfile/search_friend'); ?>",
$("#add-friend-search").serialize(),
function(data){
$("#insert-activity").html(data);
});
$("#add-friend-search").slideUp("slow",function(){});
}); //end click
You cant call your view directly, and you don't need to. The post should return the data, which you can write out to your #insert-activity element.
Hi again :)
I'm using jQuery script to show/hide some content:
<script type="text/javascript">
$('.toggleButton').click(function() {
var id = this.id.replace('toggleButton', '');
$('#content' + id).toggle();
});
</script>
Since I'm using PHP, I am iterating through few items and each of them has a button to show/hide its content. My content is actually a form with few input fields. In each item, first field of my form has a same name (let's say 'line1').
What I would like to do is when I click on an item and open its content, to take a focus on input field 'line1'. When I click on other item to take a focus on its 'line1' field, and so on...
Preferably with jQuery because I suppose it would be simpler, but javascript solution would be also great :)
Thanks for any help!
EDIT: I will attach a part of code which is that I need to show and hide... Maybe it will be of some help... I am using codeigniter, so not to be confused by some functions :)
echo "<div class=\"toggleButton\" id=\"toggleButton".$item['id']."\">CLICK TO OPEN</div>";
echo "<div class=\"content\" id=\"content".$item['id']."\" style=\"display:none;\">";
echo form_open('title/add'); // codeigniter's open form
for ($i = 1; $i <= $item['rows']; $i++) {
echo "<input type=\"text\" class=\"line\" id=\"line".($i)."\">".br();
}
echo form_submit('submit', 'submit'); // codeigniter's submit for button
echo "</form>";
echo "</div>";
Change your last line to:
$('#content' + id).toggle().find('input').first().focus()
did you try giving common class name and call function based on class name