I have a table populated with data from the database, where each row has a cell with an anchor element inside. This anchor would lead to the same page but with a query string telling php which row contains the data it should delete.
I need a jQuery dialog box to be opened when the user clicks an anchor asking him to confirm his intentions BEFORE loading the url. The 'cancel' button should close the dialog and do nothing. The 'OK' button should then let the url open.
Any help is highly appreciated.
// edit with 'what I have tried'. It's my first time messing with jQuery and time for studying is running out... =(
jQuery(document).ready(function(){
var $dialog = jQuery('<div class='msg_dialog'></div>')
.html('Are you sure you want to do this?')
.dialog({
autoOpen: false,
title: 'Confirm action',
buttons: [{
text: "Cancel",
click: function(){
jQuery(this).dialog("close");
}
}] // didn't even try the OK button since I couldn't even get the dialog opened
});
jQuery('#confirm_del').click(function(){
$dialog.dialog('open');
return false;
});
});
$("a").on("click", function(e) {
var link = this;
e.preventDefault();
$("<div>Are you sure you want to continue?</div>").dialog({
buttons: {
"Ok": function() {
window.location = link.href;
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
Example: http://jsfiddle.net/uRGJD/
(Redirecting to Google won't work on JSFiddle but should work on a normal page)
how about using:
<a href="<?php echo 'your_url'.'?query_string='.$query_string ?>" onclick="return confirm('Are your sure?')">
Go
</a>
You can create a dialog that creates the buttons for you, but I like the approach where you create the buttons yourself so that you can use real links instead of using javascript to navigate.
Working demo: http://jsfiddle.net/gilly3/sdzbB/
<div id="dialog-confirm">
<div class="message">Are you sure?</div>
<div class="buttons">
<a class="cancel" href="#">Cancel</a>
<a class="ok" href="#">Ok</a>
</div>
</div>
$("#dialog-confirm").dialog({ autoOpen: false }).find("a.cancel").click(function(e){
e.preventDefault();
$("#dialog-confirm").dialog("close");
});
$("a[href]:not(#dialog-confirm a)").click(function(e) {
e.preventDefault();
$("#dialog-confirm")
.dialog("option", "title", $(this).text())
.dialog("open")
.find("a.ok").attr({
href: this.href,
target: this.target
});
});
The benefit to using a real link instead of location.href = link, is that you get all kinds of built in goodies, like mouse shortcuts to open the link in a new tab, the ability to drag the link to the bookmarks bar or desktop, the ability to copy the link to the clipboard, keyboard access via tab, etc.
You should prevent default behavior of the link which can be done like this code.
$('.tableId tr td a').click(function(event){
//code to display confirmation dialog
event.preventDefault();
}
You can use this JQuery plugin for confirmation dialog.http://jqueryui.com/demos/dialog/#modal-confirmation
Related
<a href='#' onClick ='backcolor();' class='pagecolor' id='firstpage-right-pagecolor' >
<img src='". Yii::app()->baseURL.'/images/color.png'."'></a>
here i call backcolor function (important-Its in controller) and its definition is in view as follows..
function backcolor() {
$('.pagecolor').colpick({
onSubmit:function(hsb,hex,rgb,el){
var divid = $(el).closest('div').attr('id');
$('#'+divid).css('background-color', '#'+hex);
$(el).colpickHide();
$.ajax({
url:baseURL+'/index.php/MyPhotoBooks/addbackground',
type:'POST',
data:{color:hex,divid:divid},
success:function(){
//$("#"+divid).css('height', '80%');
},
});
}
});
};
It works on second click only..for first click color pick not displaying..
This is entirely expected behaviour.
You seem to be binding the colorpick to the element on click of the same element. You need to do that on page load instead.
Recommended Solution:
Change onClick to onload. This will make sure that when your element is loaded, the colorpicker is binded to it. Next when the colorpicker element is clicked, it should work.
<a href='#' onClick ='backcolor();' class='pagecolor' id='firstpage-right-pagecolor' >
to
<a href='#' onload ='backcolor();' class='pagecolor' id='firstpage-right-pagecolor' >
-----Alternative Approach---------
Showing the colorpick on click of the element is automatically handled by the plugin. So simply change your function code to
$(function(){
$('.pagecolor').colpick({
onSubmit:function(hsb,hex,rgb,el){
var divid = $(el).closest('div').attr('id');
$('#'+divid).css('background-color', '#'+hex);
$(el).colpickHide();
$.ajax({
url:baseURL+'/index.php/MyPhotoBooks/addbackground',
type:'POST',
data:{color:hex,divid:divid},
success:function(){
//$("#"+divid).css('height', '80%');
},
});
}
});
});
This will ensure binding on page load. Also make sure to remove onclick handler from your .pagecolor element.
I have a four menu tabs. in One tab is a submit form (default), the second tab contain list of entries, each entry has a button called change status. When i click "change status" I called windows.reload using ajax to update the page with out refresh but the tab will go back to the default one which is the first one. Now my problem is how can i update the menutab class to the current selected menu to become an active one. below is my ajax codes:
<input type="button" value="change status"> // a button to click to change status
<a class="active">tab1</a> // need to change classname when the button clicked
<a class="nonactive">tab2</a> // need to change classname when the button clicked
<script>
$(document).ready(function() {
$(".closeBTN").click(function() {
var data = $(this).attr('id');
//alert (data);
$.ajax( {
type: "POST",
url: "../deals_status_update.php",
data: { 'id': data }
}).done(function(msg) {
$("#notification").html(msg);
window.setTimeout(function(){
location.reload()
$('#itrade .active').removeClass().addClass('nonactive');
$('#iopendeals .nonactive').removeClass().addClass('active');
},100)
});
});
});
</script>
location.reload() reloads the website, so you cant use jQuery methods after that.
maybe window.location.hash can help you.
Add a hash and parse this hash after the website reload to trigger your classes?
try using location.hash, cuz as explained location.reload() will actually refresh the page, and i still don't get why you need to refresh the page to update data !
<input type="button" value="change status"> // a button to click to change status
<a class="active">tab1</a> // need to change classname when the button clicked
<a class="nonactive">tab2</a> // need to change classname when the button clicked
<script>
$(document).ready(function() {
$(".closeBTN").click(function() {
var data = $(this).attr('id');
$.ajax( {
type: "POST",
url: "../deals_status_update.php",
data: { 'id': data }
}).done(function(msg) {
$("#notification").html(msg);
window.setTimeout(function(){
location.hash = 'iopendeals';
location.reload();
},100)
});
});
if(location.hash != '') {
$('.active').removeClass().addClass('nonactive');
$(location.hash + ' .nonactive').removeClass().addClass('active');
}
});
</script>
You're reloading the page, so any JavaScript that happened later will lose its state. DOM modifications are only good for the current page session. Once it is navigated away or reloaded, they lose progress.
Have you considered not reloading? Why are you reloading for anyway?
or,
Can you maybe do those changes client-side, and instead of reload, redirect to the same page with different GET parameters?
<li class="menuitem<?=$_GET['page'] == 'homepage' ? ' active' : ''?>">
Homepage
</li>
Right now I have a table with a few items, each of which has an Edit icon. When the edit icon is clicked, the corresponding database ID of the item (its name) is sent via a $.get() AJAX method to process.php, which generates a JQuery UI dialog consisting of a few of that database item's attributes.
The first item that I click on brings up the proper dialog box with all of the attributes filled in the text boxes. However, when I click a different item, the same dialog box appears with the first item's information. Any other ones I click on still have that first item's information in the dialog box.
What I'm guessing is happening is that the data sent back to index.php, the new div and the jquery dialog call, has already been echo'd through and appended to the page--thus I get the same first box over and over. I just can't figure out how to fix it.
portion of index.php:
$('#edit_link').live('click', function(e){
var ID = $(this).attr('name');
console.log(ID);
$.get('process.php', {taskID: ID}, function(data){
$('body').append(data);
});
e.preventDefault();
})
...the console successfully logs each item's taskID, so that's not the problem.
process.php:
if(isset($_GET['taskID'])){
$taskID = $_GET['taskID'];
$task = TaskDB::getTask($taskID);
$duration = $task->getDuration();
$description = $task->getDescription();
$deadline = $task->getDeadline();
echo '<script>$("#dialog").dialog({
height: 150,
width: 300,
modal: true,
buttons: {
"Save Task": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});</script><div id="dialog" title="Edit Task" style="display:none;">
<p>Deadline: <input type="text" style="margin-right:10px;" value="'.$deadline.'"/> Duration (hours): <input type="text" style="width:20px;" value="'.$duration.'"/></p>
<p>Description: <input type="text" style="width: 200px;" value="'.$description.'"/></p>
</div>';
}
The echo portion is where I think the problem is, as the previous echoed data is not cleared out if another Edit was clicked.
Any help would be greatly appreciated. Also, I'm not entirely sure if what I'm doing is the best means for carrying out this goal (having PHP generate so much html/javascript), so any suggestions regarding that would also be very much appreciated. Thanks!
I think you should first remove the previous dialog from body. Try this:
$('#edit_link').live('click', function(e){
var ID = $(this).attr('name');
console.log(ID);
$("#dialog").remove(); // Delete the previous dialog
$.get('process.php', {taskID: ID}, function(data){
$('body').append(data);
});
e.preventDefault();
})
That sounds like you have to use .destroy() function when close the dialog. This function will reset your dialog
$('.dialog').dialog({
// your options
close : function() {
$('.dialog').dialog("destroy");
}
});
i am trying to put a pagination page into jquery. example.html?id=foo&get=23
i would like to pass the get= into the jquery script so that i can change the page within the div instead of sending the link to the having the user see example.html?id=foo&get=23, they should only see example.html?id=foo. the rest is done in jquery.
<script >
$(document).ready(function()
{
$("#data").load("page.php?ht=<?php print $id; ?>&p=1" );
$("#next").click(function(){
var pageNum = this.id;
$("#content").load("page.php?ht=<?php print $id; ?>&p=" + pageNum, Hide_Load());
});
});
<div id="data">
page1
</div>
Why not modify the anchor
$('#next').attr("href","example.html?id=45");
After every click on the page?
you need something like this:
$(document).ready(function(){
$("#next").click(function(){
$.post('your_script_to_get_values.php',
{ page: "1" },
function(data) {
$('#content').html(data);
});
});
});
Make sure you use a live click handler, and not just a click handler, because you are creating the #next element after the page loads.
$("#next").live('click', function(){ //etc.
Documentation for .live()
It matches the current selector now and in the future (i.e. if the elements are created dynamically).
The simplest way would be with a session variable.
I have a main page with lots of content, one piece of content is a small calendar.
For the Calendar I have a Previous month and next month link. What I want to do is switch between months without having to refresh the page.
<div id='cal_wrapper'>
<a href='main.php?month=$m&year=$y' class='selector'>Previous month</a>
<a href='main.php?month=$m&year=$y' class='selector'>Next month</a>
<?PHP
echo $calendar;
?>
</div>
Javascript is as follows:
<script type="text/javascript">
$(document).ready(function() {
$('#cal_wrapper a.selector').click(function(e){
$('#cal_wrapper').load( $(this).attr('href') );
e.preventDefault();
});
});
</script>
What is happening is when I click on either prev/next link the entire page is reloaded into the cal_wrapper div..??? I'm stuck.
Maybe try putting e.preventDefault() first, i.e.:
$('#cal_wrapper a.selector').click(function(e){
e.preventDefault();
$('#cal_wrapper').load( $(this).attr('href') );
});
If I understand your question right, I think you want $(this).attr('href') to refer to the href attribute of $('#cal_wrapper a.selector'). Instead what is happening, is that $(this), at that point, actually is referring to the $('#cal_wrapper') element, not the $("#cal_wrapper a.selector') element.
If this is correct, what you may want to do is store $('#cal_wrapper') in a temporary variable, i.e,
$('#cal_wrapper a.selector').click(function(e) {
var o = $(this);
$('#cal_wrapper').load($(o).attr('href'));
e.preventDefault();
});