Using jquery / javascript to create a popup confirm box - javascript

Here is the extract code of how to make a confim box when delete,
For html part:
A link is to trigger JS code , but it will trigger the php code at same time
For JS part:
popupbox is triggered
For php part:
Process the sql query, it should be ok
The problem are:
I should use js to trigger the php page?But how can i let the php page know that which ListID i want to delete?
What should i put in the html link?
Thank you
html
<a id="delete" href='delete.php?id=$set[ListID]'>Delete</a>
Js
$(function(){
$("#delete").click(function() {
$.messager.alert('Warning','The warning message');
$.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){
if (r){
alert('ok');
}
});
});
});
php
//connection db
INSERT INTO delete_list SELECT * FROM list WHERE ListID=?;
INSERT INTO delete_user_list SELECT * FROM user_list WHERE ListID=?;
INSERT INTO delete_require_attributes SELECT * FROM require_attributes WHERE ListID='2';
INSERT INTO delete_subscriber SELECT * FROM subscriber WHERE ListID=?;
INSERT INTO delete_subscriber SELECT * FROM subscriber WHERE ListID=?;
DELETE FROM list WHERE ListID = '1'
What if i want to include the list name in the popup box e.g. do you want to delete list A ,where list A is a variable already. The only thing is how can i append it to the popup box
"<tr><td>".$set['ListName']."</td><td>"

I don't know what $.messager does, but I suppose this should work
$(function(){
$("#delete").click(function(evt) {
evt.preventDefault();
var urlscript = this.href; /* read link url (e.g. delete.php?id=314159) */
$.messager.alert('Warning','The warning message');
$.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){
if (r) {
$.ajax(urlscript); /* make ajax call to that url with the right id */
}
});
});
});
and I supposing that your source code is actually showing smthg like
<a id="delete" href='delete.php?id=314159'>Delete</a>
so on the ajax call you're sending that id.

Try this:
if (confirm("Question?")) {
// IF OK CLICKED
$.get('delete.php?id=MyID', function(data) {
alert('List DELETED');
});
}

$("#delete").click(function(e) {
e.preventDefault();
var url = this.href;
$.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){
if (r){
location.href = url;
}
});

Let the link trigger the javascript code to show the popup window for delete confirmation. at the same time, you can update value of a hidden field in your page with the selected item id. When you user confirms the deleting by clicking on the "Yes" button in the confirm box. Read the value of the hidden input and then post that to the server (php) page to do the actual deletion from the database.

I wouldnt send the ID as a GET, else people can increment the value and delete your records?
<a class="delete" id="someId" >Delete</a>
$('.delete').click(function() {
var id = $(this).attr('id');
$.messager.alert('Warning','The warning message');
$.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){
if (r) {
$.post('delete.php', {id:id}, function(response) {
//check the status of the reponse
});
});
});

Related

How to click a link that will execute but not redirect.

I have a few products in a mySQL database whose links are being retrieved in my script with $producturl. These url's actually add the product to the cart (http://www.example.com/cart/?add-to-cart=1127). I am trying to create a script that will allow the user to add products to the cart but NOT redirect them, just execute the link so the user stays on the same page.
I am using preventDefault and stopPropgation but it is not working. The alert shows up but the link itself is not executing when I view my cart later the product is not there. Any help?
<?php $producturl = ProductURL::find(array('Product'=>$tube1->Tube1));
if($producturl[0]->URL!=NULL){
echo '<span id="shop">Add Cart NoRedirect</span>';
}
?>
<script type="text/javascript">
$(document).on('click', '#shop', function (event) {
$.post( '<?php echo $producturl[0]->URL; ?>' );
event.preventDefault();
event.stopPropagation();
alert('Product has been added to cart');
});
</script>
Your HTML anchor link:
<a id='link1' href="http://www.google.com">Link</a>
The jQuery JS required (don't forget to put this inside a DOM ready function):
// Act on clicks to a elements
$("#link1").on('click', function(e) {
// prevent the default action, in this case the following of a link
e.preventDefault();
// capture the href attribute of the a element
var url = $(this).attr('href');
// perform a get request using ajax to the captured href value
$.get(url, function() {
// success
});
});
This demonstrates all the principles required to implement your function.
The page in question and the URL POSTed to must be on the same subdomain, or cross origin resource sharing must be appropriately enabled on the server otherwise the request will fail due to cross domain restrictions.
Try:
'Add Cart NoRedirect'
or
'Add Cart NoRedirect'
You can use an image, a button, a div or a text decorated as link instead of a link.
'Add Cart NoRedirect'

Yii2: Auto save form on navigate to another tab in a form

I'd say I want to submit each tabs content (form values) when another tab is selected. That way the user navigate between tabs without having to reload the whole form. And the values are saved even if partially filled to the database
I think this can done using jquery or javascript like clicking on the tab will imitate the clicking on save button simultaneously.
I have also tried this code but it's not working? The id of the tab is #ui-id-3 and id of save button is #save1.
<script>
$('#ui-id-3').click(function(){
$('#save1').click();
return false;
});
</script>
What I am doing wrong here?
With suggest modification:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
$("#ui-id-3").click(function(){
autoSave();
return false;
});
});
function autoSave(){
var formData = $("#w0").serialize();
$.ajax({
type:"POST",
url:"/hospitalerp/web/index.php?r=daily-ward-entry%2Fcreate",
data:formData,//only input
success: function(response){
$( "#recordID" ).val( response);
}
});
}
</script>
Here is a simple solution but you have have to modify according to you needs
Step one :
Create a hidden field with for ID field we will store database record Id in it you can name/id input as recordID so we can reference it in our jQuery Code
<input type="hidden" name="recordID" id="recordID" value="0" />
Step two :
Create a server page which will server for Database Insertion/Updation you can called it autoSave.php this page will receive complete form and if recordID <=0 then it will insert into db and return the newly inserted ID else it will update table where Id = recordID
Step 3 :
Jquery Code which will call autoSavePage upon Tab Click.
$(function() {
$(".tabs").click(function(){
autoSave();
return false;
});
});
function autoSave(){
var formData = $("#formID").serialize();
$.ajax({
type:"POST",
url:"autoSave.php",
data:formData,//only input
success: function(response){
$( "#recordID" ).val( response);
}
});
}
Html Form ID should be formID
<form id="formID" method="POST" action="autoSave.php">..
This is the idea when ever anyone click on any tab a ajax call will be generate to save the form rest you have to modify according to your code as you have not submitted any code thats why i have make a generic example
Hope this will Help!

Fire events when the button is ajax loaded

I have a form to send someone a message, and I need to create a list of people to the user pick one and send him the message.
So I've created a search field that shows that list:
$('#name').keyup(function(){
var name, goURL;
goURL = site_url + 'events/search';
name = $(this).val();
$.post(goURL, {name : name}).done(function(data){
$('.results').html(data);
});
});
Then I get a list from users, that comes from a method of codeigniter and in each user I have a button that allows me to pick this user.
$('.results').on('on', '.select-btn', function(){
alert('Test');
});
But when I click, nothing happens. How to proceed?
Thank you and sorry for my bad English.
you need to use click event as event while binding using on:
$('.results').on('click', '.select-btn', function(){
alert('Test');
});

Creating a confirmation box jquery php

I have a website where i have comments . now people can delete comments using .del button
$('.del').click(function(){
var id = $(this).attr('cmnt-id');
$.post(url,{
//data sent
},function(data){
//remove the comment div
})
});
Now what i want is a confirmation box to be appear on screen which has simply 2 options delete and cancel. When someone presses delete it deletes but when pressed cancel it returns false.
But i dont know how do i do it.
UPDATE
I have my own confirmation box and dont wanna use any PLUGINS
But how do i take em into action ??
updated fiddle
Try this:
if (confirm('Are you sure you want to delete this?')) {
//delete code, OK was pressed (confirmed), execute delete code
} else {
//cancel was pressed return false
return false;
}
No jquery needed nor fancy box.
If you need something fancy I would suggest using JQuery UI where you can use Dialog widget to have a confirm box.
UPDATE
var confirmed = false;
$('.del').click(function(){
//show your confirm dialog
});
$('.confirm .yes').on('click', function() {
//execute delete code
});
$('.confirm .no').on('click', function() {
//code to close your confirm dialog
});

javascript onclick even handler reveals form

I am wanting to pass a variable through to another form that will reveal itself when a certain radio button is clicked. However not sure the best way to do this as do not want to refresh the page.
the javascript for the form opening is:
$(document).ready(function(){
$(".col3flex").css("display","none");
$(".category").click(function(){
if ($('input[name=category]:checked')) {
$(".col3flex").slideDown("fast");
} else {
$(".col3flex").slideUp("fast"); //Slide Up Effect
}
});
});
what i need to do now, is pass the radio button value to be picked up by my php select statement in order to display the correct values.
How would i implement this please
thanks
I believe that you're having trouble with the event handler and then checking for the value of the radio button. I think this is what you need (I assume that ".category" is the radio button?)
$('.category').change(function() {
if ($(this).val('checked') === 'checked') {
// do whatever...
}
});
If you need to load some backend-informations via PHP you won't come around AJAX - especially if you need such informations while not reloading the page.
You need to send the AJAX-request and fill the needed elements which its information before sliding the .col3flex-element down.
If thats not quite what you wanted, you need to go further into details regarding your problem.
hi you can send an ajax request to any other page that will render you other select. At on click event just send an ajax request to some other page
$(document).ready(function(){
$(".col3flex").css("display","none");
$(".category").click(function(){
if ($('input[name=category]:checked')) {
var url='somepage.php';
var data=$(".category").val();
$.ajax({url:url,data:data,type:'POST',success:function(data){
//here you will just populate the html response sent by `somepage.php` say your select has id='select' then
$('#select').html(data));
}});
$(".col3flex").slideDown("fast");
} else {
$(".col3flex").slideUp("fast"); //Slide Up Effect
}
});
});
And your somepage.php file will get the post data and generate the dropdown
if(isset($_POST))
{
?>
//Your html for generating a select statement
<?
}

Categories