I have a Project using MVC, in file chocanh.php , I want to get the id when clicking the button and return the id to the file muahang.php in the model.
Display in website code in chocanh.php code in muahang.php (model/muhang.php)
chocanh.php
<a id="11" onclick="getId(this)">OK</a>
<script>
function getId(input) {
$.ajax({
type: "POST",
url: "/model/muhang.php",
data: { id: input.id },
dataType: "json",
success: function(response) {
if(data === true) {
console.log("success")
}
}
});
}
</script>
Related
I am trying to add some Javascript functionality to my symfony project, but have little Javascript experience.
I have a form at /login and after the submit it redirects to /account but the header page is the same.
I want to change the header after the submit of my form.
This is what I have right now:
$(document).ready(function() {
$(".form-login").submit(function() {
$.ajax({
type: "POST",
url: "http://localhost:8000/account",
data: $(this).serialize(),
success: function() {
$(".account:first").text("My account");
$(".account:first").text("Disconnect");
}
})
It works during the load of the page but when I'm at /account it is still the same header.
can used this code :
$(document).ready(function() {
$(".form-login").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "http://localhost:8000/account",
data: $(this).serialize(),
success: function() {
$(".account:first").text("My account");
$(".account:first").text("Disconnect");
}
})
})
})
or
$(document).ready(function() {
$(".form-login").submit(function(e) {
$.ajax({
type: "POST",
url: "http://localhost:8000/account",
data: $(this).serialize(),
success: function() {
$(".account:first").text("My account");
$(".account:first").text("Disconnect");
}
});
return false;
});
})
after deleting some data using ajax, i want to refresh my div. I am using Laravel 5.4 . I am a beginner in laravel. Please help me about this.
This is my code in refreshing a div :
var url = window.location.href;
function RefreshDiv() {
$(".uploaded-images").fadeOut();
$(".uploaded-images").load(url+" .uploaded-images", function() {
$(".uploaded-images").fadeIn();
});
}
When i execute the RefreshDiv function , it only makes my div empty, but when i press f5 to refresh my page, it successfully deleted my data. My only problem is my RefreshDiv where i wan't it to refresh my div but it gives me empty div.
Here is my delete function that executes well:
function deleteImage(product_img_id) {
$.ajax({
url: "{{ url('admin/del-img') }}/" +product_img_id,
type: "GET",
dataType: "JSON",
success: function(data) {
RefreshDiv();
}
});
}
here is my div that i want to refresh:
<div class="row" style="margin-top: 20px;">
<h5>Uploaded Images</h5>
<div class="uploaded-images">
</div>
</div>
inside of my uploaded-images div , is a delegate function from my other ajax.
Here is my delegate function :
function getProductDetails(product_id) {
$( ".uploaded-images" ).empty();
$.ajax({
url: "{{ url('admin/get-product') }}/" +product_id,
type: "GET",
dataType: "JSON",
success: function(data) {
for(var i=1;i<data.product_images.length;i++) {
$(".uploaded-images").append('<div class="img-wrap">'+'<span class="close">×</span>'+'<img src="'+"{{ asset('image_files') }}/"+data.product_images[i].product_image+'" data-id="'+data.product_images[i].product_img_id+'" style="max-height:50px; max-width:90px;">'+'</div>');
};
}
});
}
Why you want to refresh the div...If you're removing the image why not just remove the element on success from DOM?
Try this:
function RefreshDiv(product_img_id) {
$("img[data-id="+product_img_id+"]").closest('.img-wrap').remove();
}
Try this:
function deleteImage(product_img_id) {
$.ajax({
url: "{{ url('admin/del-img') }}/" +product_img_id,
type: "GET",
dataType: "JSON",
success: function(data) {
RefreshDiv(product_img_id);
}
});
}
var url = window.location.href;
function RefreshDiv(product_img_id) {
$(".uploaded-images img[data-id="+product_img_id+"]").parent().remove();
$(".uploaded-images").load(url+" .uploaded-images", function() {
$(".uploaded-images").fadeIn();
});
}
I'm using the following code to submit multiple forms via AJAX:
var formData = $(this).closest('.bookroom1, .bookroom2, .bookroom3, .bookroom4, .bookroom5').serializeArray();
formData.push({ name: this.name, value: this.value });
$.ajax({
type: 'POST',
url: AJAX_URL,
data: formData,
dataType: 'json',
success: function(response) {
if (response.status == 'success') {
$('.bookroom1, .bookroom2, .bookroom3, .bookroom4, .bookroom5')[0].reset();
}
$('.booking-main').html(response.content);
$('.booking-side-response').html(response.sidebar);
}
});
I want to add some JavaScript in the success/response function but only for a particular form e.g.
if ( .bookroom5 ) {
// do stuff
}
Does anyone know the best approach to doing this other than creating separate $.ajax functions for each form?
Any help much appreciated!
var $form = $(this).closest('.bookroom1, .bookroom2, .bookroom3, .bookroom4, .bookroom5');
var formData = $form.serializeArray();
formData.push({
name: this.name,
value: this.value
});
$.ajax({
type: 'POST',
url: AJAX_URL,
data: formData,
dataType: 'json',
success: function (response) {
if ($form.hasClass('bookroom5')) {
alert('you have used form bookroom5')
}
}
});
Save the form before then use it later to check the class
I am trying to post via link. But I think there is a problem. I am not good at Javascript.
I want to send attribute and show with div.
Here is my Code :
<script type="text/javascript">
$(document).ready(function() {
$("#slidingProduct").click(function() {
var aa = $(this).attr('urun_id');
$.ajax({
url: "data.php",
dataType: "POST",
data: {
"number1": aa
},
success: function(json) {
$("#result").html(json.number1);
}
});
});
});
</script>
A
B
O
<div id="result"></div>
You can do something like this:
$(".slpd").on('click',function(){
var aa = $(this).data('urun_id');
var json={"number1":aa};
$.ajax({
url: "data.php",
type: "POST",
dataType:'JSON',
data: JSON.stringify(json),
success: function(result){
$("#result").html(result.number1);
}
});
});
As ids in DOM should be unique, you can specify similar class name to capture click event in a single go and
some modifications in html - It's good to use data-* property of html5:
A
B
O
$(document).ready(function() {
$("a").on('click', function(e) {
e.preventDefault(); // Stop redirection
var aa = $(this).attr('urun_id');
$.ajax({
url: "data.php",
type: "POST"
dataType: "JSON",
data: {
"number1": aa
},
success: function(response) {
$("#result").html(response.number1); // This depends on how you've sent response from server
}
});
});
});
I wrote a Python script that inserts data into a PostgreSQL database. I have a simple HTML page with a couple of buttons, and I am having a hard time posting the data from the button click on the client to Python CGI on the server side.
Here is what the HTML, ajax and javascript look like:
''<div class="note" id="(Untitled)">
<script type="text/javascript" src="./jquery-2.1.1.js">
$(function () {
$('#1').on('click', function () {
$.ajax({
type: "POST",
url: "~/pythonscript.py",
datatype: "json",
data: JSON.stringify({
'param': {
"1"
}
}),
success: function (response) {
alert(response);
}
})
}
$('#2').on('click', function () {
$.ajax({
type: "POST",
url: "~/pythonscript.py",
datatype: "json",
data: JSON.stringify({
'param': {
"2"
}
}),
success: function (response) {
alert(response);
}
})
}
)
<body>
<a href="index2.html">
<button id="1">one</button><br>
<button id="2">two</button><br>
</a>
</body>
Here is what some of the Python looks like:
def cgi_get_from_ajax(self):
import json
import cgi
data = cgi.FieldStorage()
chosen = data.value
return chosen
def set_choice(self):
process = Name_of_class()
choice = process.cgi_get_from_ajax()
entry = []
if choice == '1':
entry = [1,0,0,0]
else:
entry = [0,0,0,1]
return entry
What am I doing wrong?
Try changing you code to:
data: {param: '2'} --- in the jQuery
data["param"].value ---- in the Python script
This usually works for me. Maybe it does for you too ;)