Hallo,
How to create a check mark (V) if status is enable and a cross mark (x) if status is disable.
I basically trying to create a CMS for an article. Therefore, if the article is not viewable by others (disable x) or viewable (enable V).
Lol. I don't know whether this is suppose to be php or javascript. I basically want a check mark picture to appears if enable and a cross mark picture to appears if disable.
How to create such thing?
Thanks before.
This can be done either server side or client side. That is up to you. If its done server side, you simply need some logic that takes a look at the article, depending on the condition, show an image next to the article of a checkmark or a cross if the article cannot be viewed by others.
If you do it client side, you would store the value in a hidden element and then with javascript, change the image to a check or cross depending on the value stored in the hidden element.
Looks like, I prefer the server side.
The logic is something like this:
If (mouse click on image - checked)
{
show the article
}
else (another click)
{
hide the article
}
Hmm.. I'm trying to think if I place that logic in the backend, then how do the frontend part knows if I choose to hide the article.
Any other better logic that make more sense? I also, do not know how to turn the logic above into code. Using css like a navigation button?
You mentioned in your first post that you were going to show a check or a cross if the article was enabled or not. I assumed that you had that "status" stored somewhere like a DB table.
If you mean enable or disable by a user's mouse click, that will be better to handle client side so you don't have to post back the page to figure out what the user action was. Client side you can use javascript or jQuery to figure out mouse click events. jQuery has a toggle() method that can be useful here.
Do you have an example of HTML that you want to mimic? Something simple to start working from?
Yes, it's an article CMS like this: Article CMS
If you click the green check mark (V) with a mouse it will disable the article (unviewable) and turn the check mark into a red cross mark.
Something like that.
Ok, I think i understand what you are trying to do. It sounds to me like if the user clicks on the green checkmark, you want the article to be disabled and then change the green check mark into a red cross.
So, one way to accomplish this easily is using jQuery. You set up a click event handler for that image file. When the image is clicked, you send a request back to your server (via ajax) with a request to change the status. You have the server respond to this ajax request with true or false. True meaning its enabled, false meaning its disabled. Then, your jQuery function takes that result and updates the icon accordingly by updating the source of the image to green checkmark if it received true, or red cross if it received false.
Here is some untested pseudo-code/code that you can work with. If you are not familiar with jQuery and AJAX, this may not be worth your time right now.
$('.imgStatus).click(function ()
{
var imgId = $(this).attr('id');
var greenCheck = "images/greenCheck.png";
var redCross = "images/redCross.png";
$.ajax({
type: 'POST',
url: 'someServerSidePage.xxx',
data: "{'imgId':'" + imgId + "'}",
dataType: 'json',
contentType: 'application/json; charset=utf-8',
success: function (response) {
if (response != null && response.d != null)
{
if (response.d) // if true
{
$(this).attr("src", greenCheck);
}
else
{
$(this).attr("src", redCross);
}
}
}
});
});
Please note that I wrote this up by hand right now. It would have to be tested. Also, you also have to come up with the server side code/logic.
For example, what you code will depend on whether your server side is php, asp.net, or java, etc...
Say its php, which I'm not the best at, what you need to do is first check to see if there was a post and if there was, is there a value for "imgId". If there is, you need to determine what the value is so you can perform a DB lookup to get the current status of that article. So, you need to make sure that the value that is being passed to this server side code is something to do with that article ID. Once you get the result from the DB with regard to the article status, you apply some logic. If the article is currently active, then write back to the DB record to make it inactive. If its inactive, write back to make it active. Once that is done, return the value of the new status back "true" for active or "false" for inactive. Then you can see in the jQuery example i provided above, if its active, update the source attribute of the image to that of a greenCheckMark image or redCross based on True/False.
For all of this to work as I'm describing, you have to ensure that when you build the page you referenced in your example, all of the images have a unique attribute for ID that somehow connects it to the article for that line.
If you get this to work, it will be a nice solution because as you click on the images, all of these changes will occur without you having to refresh the page.
If you are unable to do this via javascript or jQuery, you can still do this wihtout client side code, but it will require a post back every time the image is clicked. Using only server side code, rather than using images, you will be using "submit" buttons that look like images. Then your server side code would have to figure out which submit button was clicked and the rest of the process is about the same.
I hope this helps you develop something.
Hello,
I still don't quite understand the logic behind this code:
<?php
$("imgStatus").click(
function ()
{
var imgId = $(this).attr('id');
var greenCheck = "images/greenCheck.png";
var redCross = "images/redCross.png";
$.ajax({
type: 'POST',
url: 'someServerSidePage.xxx',
data: "{'imgId':'" + imgId + "'}",
dataType: 'json',
contentType: 'application/json; charset=utf-8',
success: function (response) {
if (response != null && response.d != null)
{
if (response.d) // if true
{
$(this).attr("src", greenCheck);
}
else
{
$(this).attr("src", redCross);
}
}
}
});
});
?>
especially this part:
if (response != null && response.d != null)
{
if (response.d) // if true
{
$(this).attr("src", greenCheck);
}
else
{
$(this).attr("src", redCross);
}
}
}
});
I basically trying to explain that if article check (green checkmark) then it suppose to be shown, else if cross (red cross) then it suppose to be hidden from the front page.
How to make it like so in actual code?
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.