Changing my imag src using ajax getting the location from db - javascript

How can I change the img src of the img using the ajax. I have the location save in my database and I want to set the img src from the value of something data[0]['patient_photo'] I have the html of like this from my image :
<img id="checkup_pic" src="">
Here is my ajax code :
success: function(data) {
$('#valfname').text(data[0]['patient_fname']);
$('#valmname').text(data[0]['patient_mname']);
$('#vallname').text(data[0]['patient_lname']);
$('#valad').text(data[0]['patient_address']);
$('#valcont').text(data[0]['patient_contact_info']);
$('#valsex').text(data[0]['patient_sex']);
$('#valcvilstat').text(data[0]['patient_civil_status']);
$('#valbday').text(data[0]['patient_bday']);
$('#valage').text(data[0]['patient_age']);
$('#valheight').text(data[0]['patient_height']);
$('#valweight').text(data[0]['patient_weight']);
$('#checkup_pic').attr("src","");

You need to use attr property of jquery and pass your src in the value.
Try below code:
$('#checkup_pic').attr("src",data[0]['patient_photo']);

You could use jQuery functions prop() or attr() to set property to the DOM elements :
prop() : Set one or more properties for the set of matched elements.
attr() : Set one or more attributes for the set of matched elements.
So you need just to pass the source of your image data[0]['patient_photo'] to the src attribute of your img tag identified by #checkup_pic, like :
$('#checkup_pic').prop("src", data[0]['patient_photo']);
//Or
$('#checkup_pic').attr("src", data[0]['patient_photo']);
Hope this helps.

Try this:
$.ajax({
url: url, // url of your file from your data is being fetched like index.php
type: 'post',
success: function(data) {
$("#checkup_pic").attr('src', data[0]['patient_photo']);
}
})

Related

jQuery - How to get an element's class from ajax request

I'm loading my website's pages with ajax by replacing the content inside the main tag.
Problem is, using Wordpress, each page has its own body classes that are useful for styling purposes, so I want to replace the old page's body classes by the next page's classes.
I thought i'd run a new ajax request to get the whole html page, then check for the body element, then use .attr("class") to get the list of class and finally replace the old body classes by the new one...
But the classes always return undefined instead of a list of classes.
EDIT: I tried to use .cd-main-content instead of body and weirdly it works, I get the classes of this element. So I assume now that the problem doesn't come from my syntax but from the element itself.
How can I possibly get it to work on the body element ? (I already tried to replace .find by .filter but it doesn't work either.)
HTML stucture
<body id="body" class="home page-id-number other-classes">
<main>
<div class="cd-main-content">
<!-- inside is the dynamically loaded content-->
</div>
</main>
</body>
jQuery
$.ajax({url: url,
success: function(data){
var body = $(data).find("#body");
var classes = body.attr("class");
console.log(data); //returns the html as expected
console.log("body : "+body); //returns [object Object]
console.log("classes : "+classes); //returns undefined
}
});
"body" tag filtering by jQuery when getting from string.
So $(data)[0] will back all content, without body.
Also use filter, not "find"
So you can get classes like that:
$.ajax({url: url,
success: function(data){
//replace body tag
data = data.replace("<body", "<container").replace("body>", "container>");
var classes = $(data).filter("container").attr("class");
$("body").attr("class", classes);
}
});
Your jQuery code is wrong:
$.ajax({url: url,
success: function(data){
var body = $(data).find("body"); //not #body
var classes = body.attr("class");
console.log(data); //returns the html as expected
console.log("body : "+body); //returns [object Object]
console.log("classes : "+classes); //returns undefined
}
});
The right selector is body not #body, which is an id selector
So, to change your body classes use this code:
$.ajax({url: url,
success: function(data){
var classes = $(data).find("body").attr("class"); //get the classes
$("body").attr("class", classes); //set the classes
}
});
jQuery Selectors
I found a solution, it's not ideal but it fixed the problem.
First, I have to assume that it is not possible to get the attributes of the body element as it appears to be filtered by jQuery. However it is possible to get the child elements.
I ended up adding the body classes to both the body and main elements (in the header.php file of wordpress).
Here's my code now :
HTML
<body id="body" class="home page-id-number other-classes">
<main class="home page-id-number other-classes">
<!-- if I had the possibility, I'd have added "data-body-class" instead of "class" -->
<div class="cd-main-content">
<!-- inside is the dynamically loaded content-->
</div>
</main>
</body>
jQuery
$.ajax({url: url,
success: function(data){
var classes = $(data).filter("main").attr("class"); //get the classes
$("body, main").attr("class", classes); //set the classes
}
});

How to get source code of html page

This is a link for an example of Edit source Code:
http://neokoenig.github.io/jQuery-gridmanager/demo/tinymce.html
the button which value is </>.
He get the code HTML even if he changes the content of the grid.
How to get the source code HTML using JavaScript or jQuery?
Thanks.
Using JavaScript
document.documentElement.outerHTML
More info
or
document.documentElement.innerHTML
More info
you can use the html method with jquery, i.e for get the whole page html like this:
$( document ).ready(function() {
console.log($("html").html());
})
I'm not sure what you want to do exactly but if you want to get raw source code from jQuery you can use the following:
var html = $('element').html();
And with pure javascript from an id
var html = document.getElementById('id').innerHTML;
or from classname
var html = document.getElementsByClassName('class').innerHTML;
And to get the content of your example (which is an editor called tinymce) you can use the command tinymce.activeEditor.getContent(); or tinyMCE.get('myTextarea').getContent()
EDIT:
If you want to listen for changes with jQuery and display to html dynamically you'd want to do something like this:
$('yourTextArea').keyup(function() {
var html = $(this).val();
$('yourElementToDisplayTheHTML').html(html);
});
I've built a simple API, just use this:
<script src="https://cdn.jsdelivr.net/gh/Parking-Master/viewsource#latest/vs.js"></script>
In your JavaScript:
getSource('https://example.com/');
in http response header, you can find "content-type" header. that header indicates how contents of page should be rendered. so, if you want to render page as plain text("source code", as you mentioned), just change that header like this -> "content-type : text/plain; charset=UTF-8"
if you can use ajax in jquery or javascript
use like this
$("button").click(function(){
$.ajax({url: "page_you_want.html", success: function(result){
alert(result);
}});
});

Change image's src attribute based on JSON

Here is the div:
<div id="img-container">
<img id="upSlika" src="#"/>
</div>
And this is the JSON response:
{"pictureUrl":"url"}
How can I change image's source to URL received in response above?
Suppose that your json is stored in the following variable json:
var json = {"pictureUrl": "url"};
With the following code, what you do is to set the attribute src to the element img with id="upSlika":
$("#upSlika").attr("src", json.pictureUrl);
You can check the documentation jQuery ID Selector and jQuery .attr()
You can change the image's src in jQuery by using attr() function.
See the documentation.
Try the code bellow:
//get the json to data variable
var data = {"pictureUrl":"url"};
$("#upSlika").attr("src", data.pictureUrl);

Jquery replaceWith keep onclick

How can I keep onclick="" value with JQuery replaceWith ? I'm making a assets system that preload every image and put it on a Javascript image() object, and using a special data attribute for img urls
<img data-assets="images/test.png" onclick="alert('test')">
turn into : (using jquery replaceWith)
<img src="assets/images/test.png">
What I want:
<img src="assets/images/test.png" onclick="alert('test')">
My code:
$("[data-assets]").each(function() {
$(this).replaceWith(Game.Preloading.Assets.Images[$(this).data('assets')]);
});
How can I fix that ? Thanks
While iterating over each [data-assets] element, you could set the corresponding onclick attribute before replacing the element:
$("[data-assets]").each(function() {
var $newImg = $(Game.Preloading.Assets.Images[$(this).data('assets')]);
$newImg.attr('onclick', $(this).attr('onclick'));
$(this).replaceWith($newImg);
});
However, it would be better to just add a src attribute on the existing element rather than replacing it:
$("[data-assets]").each(function() {
this.src = $(Game.Preloading.Assets.Images[$(this).data('assets')]).attr('src');
});
Ideally, you should be using unobtrusive JavaScript and avoiding the inline JavaScript event listeners, but both of the above snippets should work.
I think you would be better off to simple query for your attribute, then use the each method to update the SRC attribute on each matched element.
Im on my phone so a more detailed answer is difficult...
But here goes
$("[data-assets]").each(function(){ $(this).attr("src", Game.Preloading.Assets.Images[$(this).data('assets')]); });

How to add html img to page from javascript but not hardcode it in javascript

I use ajaxForm to upload image. On success upload I add uploaded image to div on the page:
$("#ajaxUploadForm").ajaxForm({
iframe: true,
dataType: "json",
...
success: function (result) {
$("#imageList").prepend('<img src=' + result.message + '/>');
Now I was thinking that it is not smart to put this hardcoded <img/> tag in javascript code.
What is the best way to put image but not use img tag in prepend() function?
i would not have any problem with that... unless you are worried about invalid url that could break the tag...
you could use simple javascript
var img = new Image();
img.src = result.message;
$("#imageList").prepend(img);
IMHO that is the best way, there's no need to change anything. If you don't want to dynamically append/detach, you could have an existing img as a placeholder and just change its src attribute when you wanted to change it:
<img id="placeholder" src="initial/path" />
$("#placeholder").attr("src", result.message);
But since you're dealing with an image list, as your code suggested, I think your original solution is more appropriate for your case. If you ever decide to remove an image or sort the list or whatever, you can selected them using $("imageList img").
Edit: OTOH if you have a very complex structure, that you want to code in HTML but also need to make dynamic copies of it, you can use clone as an alternative:
<div id="model" style="display:none">complex markup goes here</div>
$("#model").clone().attr("id",anotherID).appendTo(target).show();
Use a template. For instance:
<div style="display:none">
<!-- This div contains all your templates -->
<img src="about:blank" class="classesYouNeed" id="uploadSuccess">
</div>
and then use javascript:
$("#ajaxUploadForm").ajaxForm({
iframe: true,
dataType: "json",
...
success: function (result) {
var img = $('#uploadSuccess')
.clone()
.attr('id', somethingElse)
.attr('src', result.message)
$("#imageList").prepend(img);
})
})
There are jQuery templating frameworks out there that will make this much easier.

Categories