Fire events when the button is ajax loaded - javascript

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');
});

Related

Pop-up a message after redirect to another page

So basically i have everything ready, but i'd like a pop-up message appear after the user redirect to another page.
so i am currently use jquery
$('#btn_save').click(function (){
$('#message-box').slideDown('slow').delay(3500).slideUp('slow');
});
I do not know if i should use ajax instead, i know i may use route and if(session) to do it but i am new to ajax and will happy to got an example as reference.
Many thanks
UPDATE 1:
This the part of my submit button which redirect the user after submit:
var $btn_save = $("#btn_save");
$btn_save.click(function () {
//todo form validation
if(!$(".sa-alert-name-existed").hasClass('hidden')){
return
}
$.post(api_submit, postData).done(function (data) {
location.href = "/buzz#tab_pane_fbpage";
});
Then we should come to the js part, which popup a message when onclick the submit button
$('#btn_save').click(function (){
$('#message-box').slideDown('slow').delay(3500).slideUp('slow');
});
enter code here

Ajax-loaded form always send first value entered even if reloaded

I have to admit that I don't really know how to explain this "problem" that I have nor was I able to find a good title for this thread. Anyway, I will try to be clear because I'm not sure if I could add a JSFiddle or code snippet.
Let's start with the project. I'm working on some kind of DVD Library to be used on a local network only. There's a page that allow a user to add new films to the database. To do this, I use the Allocine API (A French equivalent to IMDB) to gather films informations. The user can enter a film title (Or part of it) and perform a search. All the corresponding films from Allocine will then appear.
If the user click on one of them, a modal window opens embedding a form that will allow the user to add the needed informations before sending the form. The form is then sent using AJAX and the result appear in the same modal window.
The problem come when I want to add a second film. If I don't reload the page before trying to submit the form another time, the value from the first film will be sent instead of them from the second one and that is driving me crazy.
Here's the javascript code used to send the form.
$("body").on( "click", "#AddFilmButton", function() {
var formDatas = $('#FormAjoutFilm').serialize();
$.ajax({
url : 'Functions.php',
type : 'POST',
data : 'Action=AddFilm&' + formDatas,
cache: false,
dataType : 'html',
success : function(result, statut){
$(result).modal();
},
});
});
You may notice that I'm watching a button click event instead of a form submit event. That's because when I used the form submit event, the page was refreshed all the time, no matter if I was using preventDefault or not.
I'm starting to wonder if the sent value are not reset exactly because I have used this workaround. Could it be just that ?
What other piece of code would be useful to help you understand my problem ?
EDIT : just like #intale suggested, I have multiple form in the DOM because of this modal system. I made some progress with it. First, I can now use a proper event handler and I'm watching the form submit event as preventDefault now works.
In the success function, I have added this line : $('#FormAjoutFilm').remove();
It works almost as intended in that the datas are submitted only every other time. :p
Still, it's better than the previous behavior and I need to fix it now.
Thanks for anyone who contributed so far. If you know why I need to send the form two times to get it work, let me know. This is what I have now. :)
$("body").on( "submit", "#FormAjoutFilm", function(e) {
e.preventDefault();
var formDatas = $('#FormAjoutFilm').serialize();
alert(formDatas);
$.ajax({
url : 'Functions.php',
type : 'POST',
data : 'Action=AddFilm&' + formDatas,
cache: false,
dataType : 'html',
success : function(result, statut){
$('#FormAjoutFilm').remove();
$(result).modal();
},
});
});
Second Edit : It looks like it's finally solved after a cache clearing. Thanks for everyone who contributed. :)
Try reseting the form after the data is sent:
success : function(result, statut){
$('#FormAjoutFilm')[0].reset();
$(result).modal();
}
This will prevent your serialize function from getting the first submit data

AngularJS when user presses back button

I've search all round and it seems I can't get a clear simple answer on this.
Basically I'm having problems with a search/filter field, user enters text and it filters that page. The filter works on every page.
Now when they press any navigation item it clears the search text / model value. I had to manually fire onclick events for this and create a function.
My problem is, is that when the user pressed the browser 'back button' the input text is not getting cleared.
Are there any simple events like:
if(usersPressedBackButton){
//Do stuff
}
Add this code into your controller:
$scope.$on('$locationChangeStart', function(event, next, current) {
if ($scope.yourinputfield.$dirty) {
$scope.yourinputfield = "";
$scope.yourinputfield.$setPristine();
}
});
No one could provide a clear answer on this, so I created my own.
I had a create a boolean that detected when the user searched form another page.
Parent Controller:
$scope.searchFilterText = '';
$scope.fromSearchClick = false;
$scope.$on('$locationChangeStart', function()
{
if(!$scope.fromSearchClick){
$scope.clearFilterSearchText();
}
$scope.fromSearchClick = false;
});
Child Controller - Or page you don't/do want the search to be cleared.
//In any function
$scope.$parent.fromSearchClick = true;

Using jquery / javascript to create a popup confirm box

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
});
});
});

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