I'm trying to use this for my class homework, I am still learning.
This is a simple script that check if a site down or not.
What I'm trying to achieve is to use this same script and get statuses for every website on the table without using script all over again. Any solution for this? Any input would be appreciated.
<table>
<thead>
<tr>
<th style="width:250px">Website</th>
<th style="width:250px">Is it live</th>
</tr>
</thead>
<tbody>
<tr>
<td>Google</td> <!-- This is already working. -->
<td id="website"></td>
</tr>
<tr>
<td>Twitter</td>
<td id="website" mywebsite="https://Twitter.com"></td> <!-- This is what I'm trying to achive. -->
</tr>
<tr>
<td>Facebook</td>
<td></td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
var site = 'https://google.com';
// var site = 'https://google.com';
$.ajax
({
url: site,
dataType: "jsonp",
statusCode: {
200: function (response) {
$('#website').html('yes');
console.log(response);
},
404: function (response) {
$('#website').html('no');
console.log(response);
}
}
});
</script>
Instead of using id="website" because an id is an unique value, use class="website" in your html.
<td class="website"></td>
IN your jQuery the change is simple instead of using # use . is used for references to classes (ie. website), like so:
$(".website").html("yes");
Don't forget to modify all locations. This will execute for all places where class="website" is defined.
Put your url on data attribute and loop to get value from td like this.
$('table > tbody > tr').find('td').each(function() {
var site = $(this).data('url');
$.ajax({
url: site,
dataType: "jsonp",
statusCode: {
200: function(response) {
$('#website').html('yes');
console.log(response);
},
404: function(response) {
$('#website').html('no');
console.log(response);
}
}
});
});
<table>
<thead>
<tr>
<th style="width:250px">Website</th>
<th style="width:250px">Is it live</th>
</tr>
</thead>
<tbody>
<tr>
<td data-url='https://google.com'>Google</td>
<!-- This is already working. -->
</tr>
<tr>
<td data-url="https://twitter.com/">Twitter</td>
<!-- This is what I'm trying to achive. -->
</tr>
<tr>
<td data-url="https://www.facebook.com/">Facebook</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
Related
I have a table which generated by PHP and MySql. One of the column will have buttons which will have values which will be used for sending a data to another PHP file using AJAX. But I am now facing a problem that id(s) can have only unique value.
Will it be possible to use same ID for buttons with different values.
Here is a dummy data of HTML (Output given by PHP).
<table>
<tr>
<th>Serial No.</th><th>File Name</th><th>Action</th>
</tr>
<tr>
<td>1</td><td>Physics Notes</td><td><button id="request" value="1">Download</button></td>
<tr>
<tr>
<td>2</td><td>Chemistry Notes</td><td><button id="request" value="2">Download</button></td>
<tr>
<tr>
<td>3</td><td>Mathematics Notes</td><td><button id="request" value="3">Download</button></td>
<tr>
</table>
Now I want when any of the buttons in the 3rd columns are clicked, their values to be receive in the jQuery variable "file".
And then the values will be sent to a PHP file via AJAX.
Here is my jQuery and AJAX code.
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#request").on("click",function(e){
e.preventDefault();
var file = $(this).val();
$.ajax({
url : "downloadfile.php",
type : "POST",
data : {file:file},
success : function(data){
alert("Thank you for using our service");
}
});
})
});
</script>
As said in Comment, an ID shall always be unique. So use class in your case.
<td><button class="request" value="2">Download</button></td>
and
$(".request").on("click", function(e) {
Note Please note that you haven't closed your tr they are missing /
Demo
$(document).ready(function() {
$(".request").on("click", function(e) {
e.preventDefault();
var file = $(this).val();
$.ajax({
url: "downloadfile.php",
type: "POST",
data: {
file: file
},
success: function(data) {
alert("Thank you for using our service");
}
});
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Serial No.</th>
<th>File Name</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Physics Notes</td>
<td><button class="request" value="1">Download</button></td>
</tr>
<tr>
<td>2</td>
<td>Chemistry Notes</td>
<td><button class="request" value="2">Download</button></td>
</tr>
<tr>
<td>3</td>
<td>Mathematics Notes</td>
<td><button class="request" value="3">Download</button></td>
</tr>
</table>
I'm trying to use this for my class homework, I am still learning.
This script is made to check if a site down or not.
What I'm trying to achieve is to use this same script and get statuses for every website on the table without using script all over again all 3 websites.
I added classes but I do not know how to get them to script. I commented on script so it will be easier for you to understand. Any solution for this? Any input would be appreciated.
<table>
<thead>
<tr>
<th style="width:250px">Website</th>
<th style="width:250px">Is it live</th>
</tr>
</thead>
<tbody>
<tr>
<td>Google</td>
<td id="website"></td> <!-- This is already working. -->
</tr>
<tr>
<td>Twitter</td>
<td id="website" mywebsite="https://Twitter.com"></td> <!-- This is what I'm trying to achive. -->
</tr>
<tr>
<td>Facebook</td>
<td id="website" mywebsite="https://Facebook.com"> <!-- This is what I'm trying to achive. -->
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
var site = 'https://google.com';
// var site = 'https://google.com';
$.ajax
({
url: site,
dataType: "jsonp",
statusCode: {
200: function (response) {
$('#website').html('yes');
console.log(response);
},
404: function (response) {
$('#website').html('no');
console.log(response);
}
}
});
</script>
<table>
<thead>
<tr>
<th style="width:250px">Website</th>
<th style="width:250px">Is it live</th>
</tr>
</thead>
<tbody>
<tr>
<td>Google</td>
<td class="website" data-mywebsite="https://google.com"></td> <!-- This is already working. -->
</tr>
<tr>
<td>Twitter</td>
<td class="website" data-mywebsite="https://twitter.com"></td> <!-- This is what I'm trying to achive. -->
</tr>
<tr>
<td>Facebook</td>
<td class="website" data-mywebsite="https://facebook.com"> </td>
</tr>
</tbody>
</table>
$(document).ready(function(){
$(".website").each(function(){
var site = $(this).attr("data-mywebsite");
var thissr = $(this);
$.ajax
({
url: site,
dataType: "jsonp",
statusCode: {
200: function (response) {
thissr.html('yes');
},
404: function (response) {
thissr.html('no');
}
}
});
});
});
Try this code. Here is a fiddle
You need to use class and loop through each of them to send AJAX request.
As you know Ajax is an asynchronous call to server,
So if you want to execute ajax call in loop and want to update something based on your ajax call, then you must need a context for which you are calling ajax,
Try something like below,
<table>
<thead>
<tr>
<th style="width:250px">Website</th>
<th style="width:250px">Is it live</th>
</tr>
</thead>
<tbody>
<tr>
<td>Google</td>
<td class="website" data-mywebsite="https://google.com"></td> <!-- This is already working. -->
</tr>
<tr>
<td>JQuery</td>
<td class="website" data-mywebsite="http://jquery.com/"></td> <!-- This is what I'm trying to achive. -->
</tr>
<tr>
<td>Stackoverflow</td>
<td class="website" data-mywebsite="https://stackoverflow.com/"> <!-- This is what I'm trying to achive. -->
</tr>
</tbody>
</table>
$(document).ready(function(){
$(".website").each(function(){
var site = $(this).attr("data-mywebsite");
var thissr = $(this);
$.ajax
({
url: site,
dataType: "jsonp",
context : thissr,
statusCode: {
200: function (response) {
$(this.context).html('yes');
},
404: function (response) {
$(this.context).html('no');
}
}
});
});
});
https://jsfiddle.net/cdL997a6/1/
I am building a table dynamically on the page, and I need to be able to update the information, and also provide a link to the updated information.
Currently, if I try wrapping a function around the code that has been run once, I get an error on the inner function that the open parenthesis is unexpected (the function under update table).
The way it works, the initial rows are populated with the results from the buildCal function, to my knowledge, since it is using .innerHTML it should be no issue in replacing that data in the table, by just running that function again. If I could understand why the inner function will not run again in the displayDate function that would help a lot. I considered it may have been because this is all in the success function instead of adding the rebuilding to the complete function, but I didn't know how to call that if I couldn't even add the outer function to the main (success) code block.
$(document).ready(function() {
url = "../_vti_bin/listdata.svc/Events";
var listname = "Events";
var events = [];
$.ajax({
url: url, //THE ENDPOINT
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
success:
//want to use this function as a named function to re-call everything
function updateTable(data) {
//this is the main function which builds everything
function(data) {
})
});
<div id="calNavPanel">
<a id="prevYearGo">
<< </a>
<div id="currentYear"></div><a id="nextYearGo"> >></a>
</div>
<table id="calendar">
<tr>
<td id="cal" class="calendarDateSectionClass"></td>
</tr>
<tr>
<td id="cal1" class="calendarDateSectionClass"></td>
</tr>
<tr>
<td id="cal2" class="calendarDateSectionClass"></td>
</tr>
<tr>
<td id="cal3" class="calendarDateSectionClass"></td>
</tr>
<tr>
<td id="cal4" class="calendarDateSectionClass"></td>
</tr>
<tr>
<td id="cal5" class="calendarDateSectionClass"></td>
</tr>
<tr>
<td id="cal6" class="calendarDateSectionClass"></td>
</tr>
<tr>
<td id="cal7" class="calendarDateSectionClass"></td>
</tr>
<tr>
<td id="cal8" class="calendarDateSectionClass"></td>
</tr>
<tr>
<td id="cal9" class="calendarDateSectionClass"></td>
</tr>
<tr>
<td id="cal10" class="calendarDateSectionClass"></td>
</tr>
<tr>
<td id="cal11" class="calendarDateSectionClass"></td>
</tr>
<tr>
<td id="cal12" class="calendarDateSectionClass"></td>
</tr>
</table>
I'm trying show user details in user list using AJAX JQuery, but it does not work as I need.
It works for my first details in the same tr, but doesn't work in the second detail in td in the second row. How should I do it properly?
Here is the code:
My view:
<table class="table">
<thead>
<th>#</th>
<th>name</th>
<th>password</th>
<th></th>
</thead>
<tbody>
#foreach($users as $user)
<tr>
<table class="table">
<tr>
<td>{{$user->id}}</td>
<td>{{$user->name}}</td>
<td>{{$user->password}}</td>
<td class="extend-user" data-details="0" data-url="{{route("user", ["id" => $user->id])}}">Details</td>
<td id="details">a</td>
</tr>
<tr>
<td colspan="5" id="details">a</td>
</tr>
</table>
</tr>
#endforeach
</tbody>
</table>
and my script:
$(".extend-user").click(function() {
var self = this;
if($(self).data("details")===0)
$.ajax({
method: "POST",
url: $(self).data("url"),
data: {
_token: $("#_token").val()
},
success: function(data) {
$(self).parents().find("#details").append(data["name"]);
//$(self).parent().parent().find("#details").append(data["name"]);
//$(self).closest('table').find("#details").append(data["name"]);;
$(self).data("details", "1");
}
});
if($(self).data("details")===1) {
$(self).data("details", "0");
$(self).parent().find("p.details").html("");
}
});
try to use $(self).closest("table").find("#details").append(data["name"]);
closest finds the closest parent element that you want to find.
replace $(self).parents().find("#details").append(data["name"]);
with
$(self).parents('tr').find("#details").append(data["name"]);
I have a table and one search fields, based on what is entered in the search fields the contents of the table are refreshed and if nothing is entered in the search fields the full table is loaded. Here when the user clicks on Go button the ajax call is made.
Currently, I have two jsp as below:
MAIN JSP
<script type="text/javascript">
$(document).ready(function() {
$( "#go-user" ).click(function() {
var userId = $('#usrId').val();
alert(userId);
$.ajax({
url: 'popUserSelect', // action to be perform
type: 'POST', //type of posting the data
data: { userId: userId }, // data to set to Action Class
dataType: 'html',
success: function (html) {
alert(html);
$('#load-user').html(html);
//document.getElementById("leftDiv").innerHTML=html; //set result.jsp output to leftDiv
},
error: function(xhr, ajaxOptions, thrownError){
alert('An error occurred! ' + thrownError);
}
});
return false;
});
});
</script>
<s:form theme="simple">
User Id : <s:textfield name="userId" id="usrId" theme="simple"/>
<s:submit action="popUserSelect" key="Go"></s:submit>
</s:form>
<div id="load-user">
<table width="100%">
<thead>
<tr>
<th>Select</th>
<th>ID</th>
<th>Name</th>
<th>Role</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<s:iterator value="userSupList" >
<tr>
<td><input type="radio" class="RadioButton" name="userRadio" value='<s:property value="USR_AMLUSERNAME"/>' /></td>
<td><s:property value="USR_AMLUSRID"/></td>
<td><s:property value="USR_AMLUSERNAME"/></td>
<td><s:property value="USR_ROLEID"/></td>
<td><s:property value="USR_LOCATIONID"/></td>
</tr>
</s:iterator>
</tbody>
</table>
</div>
<input type="button" value="Submit" onclick="buttonClick('SubmitUser')"/>
<input type="button" value="Cancel" onclick="buttonClick('Close')"/>
Refresh Jsp:
<table width="100%">
<thead>
<tr>
<th>Select</th>
<th>ID</th>
<th>Name</th>
<th>Role</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<s:iterator value="userSupList" >
<tr>
<td><input type="radio" class="RadioButton" name="userRadio" value='<s:property value="USR_AMLUSERNAME"/>' /></td>
<td><s:property value="USR_AMLUSRID"/></td>
<td><s:property value="USR_AMLUSERNAME"/></td>
<td><s:property value="USR_ROLEID"/></td>
<td><s:property value="USR_LOCATIONID"/></td>
</tr>
</s:iterator>
</tbody>
</table>
Is there any way that I can avoid using two jsp for refreshing and refresh the jsp on the same main jsp itself?
You have to give your table an ID:
<table width="100%" id="myTable">
...
</table>
And adapt your AJAX call:
$.ajax({
url: 'originalPage', // use original page here
type: 'POST',
data: { userId: userId },
dataType: 'html',
success: function (html) {
// get the content of #myTable from the AJAX result
var tableContent = $("#myTable", html).html();
// set the content of #myTable to the result of the AJAX call
$('#myTable').html(tableContent);
},
error: function(xhr, ajaxOptions, thrownError){
alert('An error occurred! ' + thrownError);
}
});
jQuery can take the target to use as second parameter, which is used in $("#myTable", html). This way, it does not search the current document for #myTable, but the document returned from the AJAX call.
The disadvantage of this that the whole original page needs to be loaded through AJAX, although only one minor part of it is used.