html jquery question

Hi,

I have added update button along with existing Add, Read, Delete buttons which are working fine in my rest webservice web application.

Some reason update button is not displaying in the UI. CCcan you please advise how to fis it
restClient.html
<html>
    <head>
        <title>Patient Data</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="restClient.js"></script>
    </head>

    <body>
    	<h3>Patient Details:</h3>
        <div>
            Patient Id: <input  id="patientID"/><br/>
             Patient Name: <input id="patientName"/><br/>
             <input type="button" value="read "onClick="doGet()"/>
            <input type="button" value ="add" onClick="doPost()"/>
             <input type="button" value="delete "onClick="doDelete()"/>
             <input type="button" value="update "onClick="doPut()"/>          
        </div>
    </body>
</html>

Open in new window


restClient.js is
function doGet(){
	$.ajax({
    	type: "GET",
    	 contentType: "application/json; charset=utf-8",
         dataType: "json",
        url: "http://localhost:8080/restws/services/patientservice/patients/"+$('#patientID').val()
    }).then(function(data) {
       $('#patientID').val(data.id);
       $('#patientName').val(data.name);
    });
}
	
function doPost(){
$.ajax({
	type: "POST",
	 contentType: "application/json; charset=utf-8",
     dataType: "json",
     data: JSON.stringify({name:$('#patientName').val()}),
    url: "http://localhost:8080/restws/services/patientservice/patients"
    	
	}).then(function(data) {
		$('#patientID').val(data.id);
		$('#patientName').val(data.name);
	});
    
}
function doPut(){
	$.ajax({
		type: "PUT",
		 contentType: "application/json; charset=utf-8",
	     dataType: "json",
	     data: JSON.stringify({name:$('#patientName').val()}),
	    url: "http://localhost:8080/restws/services/patientservice/patients"
	    	
		}).then(function(data) {
			$('#patientID').val(data.id);
			$('#patientName').val(data.name);
		});
	    
	}
	
function doDelete(){
	$.ajax({
    	type: "DELETE",
    	 contentType: "application/json; charset=utf-8",
         dataType: "json",
        url: "http://localhost:8080/restws/services/patientservice/patients/"+$('#patientID').val()
    }).then(function(data) {
       alert('Patient Deleted');
    });
}

Open in new window


i am using my windows laptop with eclipse mars and tomcat8.
LVL 7
gudii9Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
The buttons are all there and the jsvascript you added has nothing to do with the display.

So either you have:
1. some CSS that is hiding or putting the button out of bounds
2. some other javascript that is hiding the button (this is unlikely as it's a new button and I guess you didn't add such code)

Can you send a link to the page that has that problem?
In case you can't, can you apply your CSS to this fiddle so we can see it in action?
CEHJCommented:
<input type="button" value="read "onClick="doGet()"/>

Open in new window


your spacing/quoting is wrong
Julian HansenCommented:
Following on from Alexandre's points above - here is an online sample using your code

http://www.marcorpsa.com/ee/t964.html

As you can see the update button is present.

Given the Javascript you posted contains function definitions only it is not playing a role. I am guessing the code you have posted is not the full picture.

To help you we would need to see all the code or preferably a link to the page.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Alexandre SimõesManager / Technology SpecialistCommented:
@CEHJ: I was initially tricked into that but looking at it closely everything is correct.

He might have the space inside the value instead of outside, but the quoting is still correct and is not that that is making the button not to display.
mccarlIT Business Systems Analyst / Software DeveloperCommented:
Also, you could try "View Source" on the browser to see if it indeed is seeing html with the new Update button in it. Perhaps you are only seeing a cached page or the changed html file hasn't deployed correctly to Tomcat.
gudii9Author Commented:
sure. I will try once i reach my home laptop.
gudii9Author Commented:
i did restart the server multiple times. May be i should have completely closed and reopened the eclipse as the browser itself opening inside eclipse IDE itself.

When i try my code in different laptop now it works
test.html
PaDetails.png
Alexandre SimõesManager / Technology SpecialistCommented:
So it was a cache problem.

Always make sure you hard refresh your browser when you change static content.

Ctrl + F5 is your friend :-)
gudii9Author Commented:
sure.

Above screenshot i posted is html running outside any IDE or anything. Just saved as test.html and double clicked to open in IE browser.
Alexandre SimõesManager / Technology SpecialistCommented:
Unless you have some caching strategy enabled on the server, restarting it wouldn't change anything.

By default, browsers try to optimise the loading of static content (GET HTTP verbs) by caching it client side.
On any browser dev tools you can see the HTTP result of the requests. If you get a 200 is because you got the resource from the server. If you got a 304 is because you got it from the browser cache.

Ctrl+F5 solves this issue most of the times, although I've already experienced some issues specially with IE that forced me to close the browser and reopen it to successfully clear the cache.

Be aware that most of the times this is a problem when deploying a new version of a website.
If you change a css file contents but keep it's request url, clients with the previous version cached won't get the latest version. Same with AJAX calls using the GET HTTP verb.
To overcome this you need to hash or timestamp your requests, but with this we're getting a bit out of topic.

 Cheers!

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
gudii9Author Commented:
it is working. thanks
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Java

From novice to tech pro — start learning today.