this is my code for delete particular row in table on form in angular.
its working but not properly. Problem is when i click on delete button
only pop ups comes.after that nothing happens. when i refresh my page
on refresh that particular row deletes.
So everytime i have to refresh
page to see delete works or not? How to solve this issue so i dont
have to refresh my page evertytime after delete something.
<a ng-click="deleteInfo(detail)" onclick="return confirm('Are you sure
you wish to delete this Record?');">
You can write your confirm alert inside the ng-click function.
scope.deleteInfo = function(detail){
$ngBootbox.confirm('Are you sure you wish to delete this Record?')
.then(function() {
//either you can reload window or delete the particular ng-model or whatever
},
function() {
});
return false;
}
it's because only your onclick triggered in this scenario, you should use a custom directive to achieve this, like :
module.directive( "mwConfirmClick", [
function( ) {
return {
priority: -1,
restrict: 'A',
scope: { confirmFunction: "&mwConfirmClick" },
link: function( scope, element, attrs ){
element.bind( 'click', function( e ){
// message defaults to "Are you sure?"
var message = attrs.mwConfirmClickMessage ? attrs.mwConfirmClickMessage : "Are you sure?";
// confirm() requires jQuery
if( confirm( message ) ) {
scope.confirmFunction();
}
});
}
}
}
]);
please refere to this old post
Use sweet-alert for confirmation except "onclick" method
http://t4t5.github.io/sweetalert/
Related
Im trying to make a 'Follow' button but the returned data, which is the 'Unfollow' button, is not working.
$('.follow_button').click(function() {
//event.preventDefault();
var visitor_user_id = $('.follow_button').attr('id');
$('#link_visitor_follow').empty().append('<div id = "follow_jquery_btn"><img src = "css/images/ajax_follow.gif" width = "12" height = "12" /> Follow</div>');
$.post('/unime/user_follow.php', {'type':'follow_me', visitor_user_id:visitor_user_id}, function(data){
if(data){
$('#link_visitor_follow').empty().html(data);
}
});
return false;
});
$('.unfollow_button').click(function() {
//event.preventDefault();
var visitor_user_id = $('.unfollow_button').attr('id');
$('#link_visitor_unfollow').empty().append('<div id = "follow_jquery_btn"><img src = "css/images/ajax_follow.gif" width = "12" height = "12" /> Following</div>');
$.post('/unime/user_follow.php', {'type':'unfollow_me', visitor_user_id:visitor_user_id}, function(data){
if(data){
$('#link_visitor_unfollow').empty().html(data);
}
});
return false;
});
PHP returned data:
echo "<a class = 'unfollow_button' id = 'visitor_".$visitor_user_id."'><span id = 'check_mark'></span> Unfollow</a>";
When I click the Unfollow button, it is not working, although I have the code setup for it. There is nothing wrong with the PHP itself. Its not even calling Ajax when I click Unfollow.
You can only bind to elements that currently exist. If they do not, you need to delegate to the element that WILL exist.
Change:
$('.unfollow_button').click(function() {
To:
$('#link_visitor_follow').on('click', '.unfollow_button', function() {
And it will delegate clicks to the not yet existent element, the event will bubble up from unfollow button until it hits link_visitor_follow, which has an event bound, and since it came from unfollow button it will now call the event (if that makes sense).
Also, you will need to do the same thing for the follow button in case they follow, unfollow, then follow again.
Dave answer should be enough for your question but if you are using jQuery below version 1.7, you can try these;
$('.unfollow_button').live('click', function() {
//your code here
})
I have a small problem, I made a delete button with a PHP while loop which looks like this:
while($something = mysql_fetch_array($sql_something)){
$id = $something['id']
echo '<button onclick="delconfirm()">Delete</button>
}
this echo's a few delete buttons for some content. However I need user confirmation for deleting first, this is where onclick="delconfirm()" comes in.
my confirm looks like this:
function delconfirm()
{
var r=confirm("Are you sure you want to delete this content?");
if (r==true){
// ...do nothing i guess? it needs to redirect using the PHP echo'd link...
}
else{
window.location = "edit.php";
}
}
However, whether you press cancel or ok, it'll delete it anyway. How can I fix this?
Change it to this:
while($something = mysql_fetch_array($sql_something)){
$id = $something['id']
echo '<button onclick="return delconfirm();">Delete</button>
}
And then your function:
function delconfirm()
{
return confirm("Are you sure you want to delete this content?");
}
EDIT: If you want a more unobtrusive solution:
while($something = mysql_fetch_array($sql_something)){
$id = $something['id']
echo '<input type="button" value="Delete" data-id="$id" />';
}
And then some javascript to bind the event:
function bindButtons() {
var buttons = document.getElementsByTagName("input");
for (var i = 0; i < buttons.length; i++) {
if (buttons[i].type == "button") {
buttons[i].onclick = function () {
location.href='somewhere.php?id=' + this.getAttribute("data-id");
}
}
}
}
and bind it to the window.onload, as per Ian suggestion:
window.onload = bindButtons;
Note: If you were using jQuery this solution would be easier and more elegant.
Working jsFiddle
If the user presses cancel then you need to stop the event from doing what it would normally do. Try this, for example:
function delconfirm(e) {
e = e || window.event;
if (!confirm("Are you sure you want to delete this content?")) {
e.preventDefault();
// This will prevent the event from bubbling up to the <a>.
e.stopPropagation();
return false; // For the ancient/crappy browsers still out there.
}
return true;
}
You need to stop/delete the current click event. After your code is executed the event sinks to the anchor and triggers a click. With MooTools just add 'new Event().stop();'. I think jQuery has also something like this.
EDIT: Hanlet Escaño is right. You can return true (the browser will redirect to the URL in the href, or false to let the browser do nothing)
In order to prevent to the HTML link to work, you have to return false in your js function or event.preventDefault() where event is an argument which is passed to the click event function
I did thin when putting a click event on the a element and not on an element inside the a tag. But it might work.
In my website authors (users) can mark posts as favorite.
It works this way:
if ($favinfo == NULL || $favinfo == "") {
$favicon = "ADD"; .
}
else {
$favicon = "REMOVE";
}
Its suposed to look dynamic, it works, when user click ADD, it adds the post to his favorites and reload the page with the REMOVE link.
The problem is its not really dynamic it reloads all the page.
How can i only reload that link (wich is inside a div)?
I know i have to use ajax, jquery, etc, but i tried some examples found here in S.O. but no success.
$('a').on('click', function(e){
// the default for a link is to post a page..
// So you can stop the propagation
e.stopPropagation();
});
Including this stop you page from reloading your entire page
If you want it to be dynamic, you will need to use AJAX. jQuery has ajax support which makes this really easy. If you are not familiar with ajax or javascript you should read up on it first.
PHP
if ($favinfo == NULL || $favinfo == "") {
$favicon = "<a class=\"fav-btn\" data-id=\"".$articleinfo['id']."\" data-action=\"add\" href=\"".$siteurl."/author/favorites.php"\">ADD</a>"; .
}
else {
$favicon = "<a class=\"fav-btn\" data-id=\"".$articleinfo['id']."\" data-action=\"remove\" href=\"".$siteurl."/author/favorites.php"\">REMOVE</a>";
}
JavaScript
$('a.fav-btn').on('click', function(e){
var $this = $(this), // equates to the clicked $('a.fav-btn')
url = $this.attr('href'), // get the url to submit via ajax
id = $this.attr('data-id'), // id of post
action = $this.attr('data-action'); // action to take on server
$.ajax({
url: url+'?'+action+'='+id
}).done(function(){ // once favorites.php?[action]= is done...
// because this is in .done(), the button will update once the server has finished
// if you want the link to change instantly and not wait for server, move this outside of the done function
if(action === 'add'){
$this.attr('data-action', 'remove').html('REMOVE'); // update the button/link
}else{
$this.attr('data-action', 'add').html('ADD');
}
})
return false; // prevent link from working so the page doesn't reload
}
If you are okay with using JQuery, you have some tools to accomplish this.
Have a structure / method of identifying your links.
You can have a click() listener on your add button that will call a JQuery $.post(url, callback) function.
In that callback function, you can have it update the corresponding DIV (that you defined in #1) with a 'remove' link. i.e if you identify the DIV by ID, you can retrieve it via $('#id') and then update that object.
The same idea can apply with the 'remove' link that you add.
So, generally...
<button id="add">Add</button>
<div id="links"> ...</div>
<script>
$('#add').click(function() {
$.post('your url',
function(data) {
var links = $('#links');
// update your links with 'remove' button, etc
}
);
});
</script>
I have a form that submits through Ajax, which works perfectly at the moment. I tried to add a confirm option to allow / prevent the Ajax submission through adding the following lines:
var answer = confirm('Submit now?');
return answer // answer is a boolean
if(answer) { ... }
Below is my full function, which, as you can see, fires on clicking the submit button. The error occurs when the user selects okay in the dialog. The entire page is refreshed and any single Ajax warnings are returned at the top of a blank screen. In a normal case, without this confirm code, the error messages appear in the div#result tag at the bottom of the form.
$("#submitbtn").click(function() {
var answer = confirm('Submit now?');
return answer // answer is a boolean
if(answer) {
$('#result').html('<img id="loading" src="images/loading.gif" />').fadeIn();
var input_data = $('#create_po').serialize();
$.ajax({
type: "POST",
url: "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",
data: input_data,
success: function(msg){
$('#loading').remove();
$('<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');
}
});
return false;
}
});
How should I implement a confirm dialog that doesn't refresh the screen? Any suggestions would be greatly appreciated. Thanks!
You are doing return answer. Which doesn't make any sense here.
It will stop the JavaScript function, and will return the boolean. Remove this line, and you're set
Also, add this to make your submit not fireing if the confirm box is false ;)
if (answer){
// your ajax call
}
else {
return false;
}
Do not use this:
<input type="submit">
Use this:
<input type="button">
A submit button automatically submits a form. A regular button does nothing. You can use that to listen for clicks and THEN submit your form, or not.
I have form with Tinymce. I am saving text writen in tinyMce using ajax call.
when I press the save button it does not save the latest value which i entered in tinymce.
i.e. when i load the page, default value in the field is "aaaa". I update it to "bbb" and press the save button. but it saved the value "aaaa". Now I change the value from "bbb" to "ccc" and press the save button now it save the previous value "bbb" not "ccc". so it is keep saving the one step old value. I don't know why?
Here is the saveAction which I am calling on Save button using ajax
public function saveAction()
{
$this->_helper->layout->disableLayout();
$this->_helper->viewRenderer->setNoRender(true);
var_dump ($_REQUEST);
if($this->getRequest()->isPost())
{
$data=$this->_getParam('content');
var_dump($_REQUEST); // var dump shows the old value each time i press the save button
}
here is my form
here is ajax script
$('#frm').submit(function() {
var options = {
target: '#response',
beforeSubmit: showRequest,
success: showResponse,
url: '/admin/index/save'
};
$(this).ajaxSubmit(options);
return false;
});
function showRequest(formData, jqForm, options) {
var queryString = $.param(formData);
}
function showResponse(responseText, statusText, xhr, $form) {
}
Try to do the following on button click before you anything else:
tinymce.activeEditor.save();
This will set the actual editor content to the textarea in the background.
Hi i searched alot about this then from tiny mce site i found this onkeyup event that can be added in the script code in head.
// Adds an observer to the onKeyUp event using tinyMCE.init
tinyMCE.init({
...
setup : function(ed) {
ed.onKeyUp.add(function(ed, e) {
console.debug('Key up event: ' + e.keyCode);
});
}
});
I replaced some parts like below
tinyMCE.init({
...
setup : function(ed) {
ed.onKeyUp.add(function(ed) {
tinymce.activeEditor.save();
});
}
});
so now whenever i change something in any tinymce textarea on my page the current text is saved and ajax get the current value.
I got my problem solved.
I am just a starter in ajax and JavaScript having a desire to achieve perfection.
I hope this helps others as well :)
Just remember me in your prayers.
Happy coding :)
tinyMCE.activeEditor.save();
(caps letters for MCE)