i want to know how add two events in the same ajax
<script type="text/javascript">
$(document).ready(function(){
$('#department').on('change',function(){
var deptID = $(this).val(); console.log(deptID);
if(deptID){
$.ajax({
type:'POST',
url: BASE_URL+'User/listHospital',
data:'id='+deptID,
success:function(html){
$('#hospital').html(html);
$('#specialisation').html('<option value="">Select hospital</option>');
$('#special').html('<option value="">Select hospital</option>');
}
});
</script>
here i had used on change event i want to add one more event on focus what should i do for it please help
I don't completely understand your question but, is this how you want it?
$("#department").on({
'change': function(){
//ajax here
}
'focus': function(){
//ajax here
}
});
Related
here is my code for ajax. I am using laravel 5.4 and I don't know the problem why the append doesn't work.
$(document).ready(function(){
$(document).on('change','#product_category',function(){
var cat_id = $(this).val();
$.ajax({
type:'get',
url:'{!!URL::to('findProductName')!!}',
data:{'id':cat_id},
success:function(data){
console.log('success');
console.log(data);
//console.log(data.length);
var op = "";
op+='<option value="0" selected disabled>Choose Product</option>';
for(var i=0; i<data.length; i++){
op+='<option value="'+data[i].id+'">'+data[i].name+'</option>';
}
var div = $(this).parent();
div.find('.choice').html(" ");
div.find('.choice').html(op);
},
error:function(){
}
});
});
});
Mistake in a first look found here
url:"{!!URL::to('findProductName')!!}",
Quotes mistake
To pass variables to a JavaScript script you should assign the value to a global variable before you load the actual ajax script.
Into the blade template:
<script>
var toUrl = "{!! URL::to('findProductName') !!}";
</script>
<script type="text/javascript" src="path/to/ajax/script.js"></script>
then in your script you can do the following:
{
...
url: toUrl,
...
}
or you could use a laravel library to bind JavaScript values to a view like Transform PHP Vars to JavaScript
put
$ajax({
...
async : false
..})
I ask you for help. Namely, struggling with the tooltip in ajax. Everything works beautifully when the page is load or after such as F5. However, in the part web I use refresh div every 60 seconds by ajax
<script type="text/javascript" >
$.ajaxSetup({ cache: false });
var auto_refresh = setInterval(
function()
{
$('#loaddiv').load('refresh_clusterdx_2.php');
}, 60000);
</script>
The code of my tooltip
<script type="text/javascript">
$(document).ready(function(){
function showProfileTooltip(e, id){
var top = e.clientY -45;
var left = e.clientX + 25;
$('.p-tooltip').css({
'top':top,
'left':left
}).show();
//send id & get info from get_prefix.php
$.ajax({
url: '/Info/get_prefix.php?id='+id,
beforeSend: function(){
$('.p-tooltip').html('Loading..');
},
success: function(html){
$('.p-tooltip').html(html);
}
});
}
function hideProfileTooltip(){
$('.p-tooltip').hide();
}
$('.profile').mouseover(function(e){
var id = $(this).attr('data-id');
showProfileTooltip(e, id);
});
$('.p-tooltip').mouseleave(function(){
hideProfileTooltip();
});
});
</script>
All beautifully and looks ok until the div is not refreshed. When a div to be refreshed, the tooltip no work :( I can not find a solution to the problem, whether it is at all possible to solve.
Thank you for any help.
Regards
tjakob
To ensure that your functions work after ajax loaded content, you'll have to modify them a little:
$(document).on('mouseover', '.profile', function() {
var id = $('.profile').attr('data-id');
showProfileTooltip(e, id);
});
$(document).on('mouseleave', '.p-tooltip', function() {
hideProfileTooltip();
});
You should always use .on with dynamically loaded content - I'm in the habit of doing this for all my functions now.
I am currently building on a CMS. I want to send a page-id or site-id to the next page on redirect. I tried doing it using the jQuery POST function:
$(document).ready(function(){
$('.sender').on('click','a',function(){
var url = $(this).attr('href');
var n = url.indexOf('#')+1;
var siteid = url.substr(n,url.length);
$.ajax({
url: 'pages.php',
type: 'POST',
data: { siteid:siteid },
success: function(response){
console.log('check');
},
error: function(){
console.log('error');
}
});
});
});
But because the request is sent at the same time as the redirect, it does not seems to work.
Because I am using the apache rewrite_engine to redirect stuff, I cannot use GET.
Apart from session_variables, what are my options?
I want to keep it safe, so I don't want much info to be visible/available!
To achieve this you need to wait for the AJAX request to complete before the page is redirected. Try this:
$(document).ready(function(){
$('.sender').on('click', 'a', function(e){
e.preventDefault(); // stop the default redirect
var url = $(this).attr('href');
var n = url.indexOf('#') + 1;
var siteid = url.substr(n, url.length);
$.ajax({
url: 'pages.php',
type: 'POST',
data: {
siteid: siteid
},
success: function(response){
console.log('check');
window.location.assign(url); // redirect once the AJAX has successfully completed
},
error: function(){
console.log('error');
}
});
});
});
I'm not sure to clearly understand why you need but I think this can answer your problem.
If what you need is to transfert informations using a real POST method, just create an hidden form with method="POST" and fill it on click event.
<script type="text/javascript">
$(document).ready(function(){
$('.sender').on('click','a',function(event){
event.preventDefault();
var url = $(this).attr('href');
var n = url.indexOf('#')+1;
var siteid = url.substr(n,url.length);
$('input[name="siteid"]').val(siteid);
$('#redirectForm').submit();
});
});
</script>
<form id="redirectForm" action="pages.php" method="POST">
<input type="hidden" name="siteid" value=""/>
</form>
Well im working on a small php script and i have a problem.
ive made an edits that allows me to post infos in ajax but after the post i want to clear the fields of the form.
<script type="text/javascript">
$(document).ready(function(){
$("#form").submit(function(){
$.get("response.php", $(this).serialize(), function(a){
$("#info").html(a)
});
return false
})
});
</script>
In the submit handler you can call reset() on the form to set it back to the state it was in on load:
$("#form").submit(function(){
$.get("response.php", $(this).serialize(), function(a){
$("#info").html(a)
$('#form')[0].reset();
});
return false
})
Use
$("#form")[0].reset();
or
document.getElementById("form").reset();
Try Giving blank value to all fields
$("#form").find("input[type=text], input[type=password], textarea").val("");
If you have checkbox and selectbox also
$(':input','#form')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
Use the reset() to reset the form:
<script type="text/javascript">
$(document).ready(function(){
$("#form").submit(function(){
$.get("response.php",
$(this).serialize(),
function(a){
$("#info").html(a);
$('#form')[0].reset();
})
;return false})});
</script>
I'm looking to auto submit when a specific checkbox is checked.
I need it to pass to ajax.
Here is what I have so far:
$(document).ready(function () {
$("input[name=<?php echo("$newseo"); ?>]").click(function(){
var id=$(this).attr('id');
var favorite=$(this).val();
$.ajax({
type:'POST',
url:'check_favorite.php',
data:'id= ' + id + '&favorite='+favorite
});
}
});
});
But I just can't seem to get it to work,
Any help would be great, Thanks!
Here you go, this should do it. Your AJAX looks fine. I put together a JSFiddle to demonstrate.
$("input[name=TestCheck]:checked").live('click', function(e) {
var id=$(this).attr('id');
var favorite=$(this).val();
alert(id + " - " + favorite);
// Post here ...
$.ajax({
type:'POST',
url:'check_favorite.php',
data: {id: id, favorite: favorite}
});
});
JSFiddle : http://jsfiddle.net/4GQ6K/1/
I don't really like using obtrusive JavaScript and inputting PHP into JavaScript like that but there is no reason it shouldn't work.
$('#my_checkbox').change(function(){
if($(this).is(':checked'))
{
$('#my_form').submit();
}
});
Use your server side code[php] to set a id or a class to your specific checkbox. Then bind a click event to the given class name, e.g.
php code sets a class named .sCheckBx.
then on document.ready bind your event :
$(document).ready(function () {
$(".sCheckBx").click(function(){
var id=$(this).attr('id');
var favorite=$(this).val();
$.ajax({
type:'POST',
url:'check_favorite.php',
data:'id= ' + id + '&favorite='+favorite
});
}
});
});
Try this
$(document).ready(function () {
$("checkboxId").click(function(){
var $this = $(this);
if($this.is(":checked")){
var id=$this.attr('id');
var favorite=$this.val();
$.ajax({
type:'POST',
url:'check_favorite.php',
data:'id= ' + id + '&favorite='+favorite
});
}
}
});
});