Solved

I need the correct jQuery syntax to change an image

Posted on 2011-09-30
13
196 Views
Last Modified: 2012-05-12
I have images in a jqGrid and need to reset the image to empty when resetting the row. But I am having a hard time with the syntax for getting and setting the image's path.

I have the id of the image which is unique on the page. The jqGrid is called "samples".

Please look at the code below for an idea of what I am trying to do and suggest a better syntax, since this does not work at all.

Thanks,
newbieweb
var imageField = $('#samples img[id='+imageId+']');
if ( $(imageField).src.substr(imageField.src.lastIndexOf('/')+1) != "empty.gif" ) 
{ 
     $(imageField).src = "~/Content/images/empty.gif";
}

Open in new window

0
Comment
Question by:newbieweb
  • 9
  • 4
13 Comments
 
LVL 51

Expert Comment

by:HainKurt
ID: 36895563
just use

var imageField = $('#samples img[id='+imageId+']');
-->
var imageField = $('#'+imageId);
0
 

Author Comment

by:newbieweb
ID: 36895569
you mean the following?

var imageField = $('#'+imageId);

then...
if ( $(imageField).src.substr(imageField.src.lastIndexOf('/')+1) != "empty.gif" )
{
     $(imageField).src = "~/Content/images/empty.gif";
}

or...
if ( imageField.src.substr(imageField.src.lastIndexOf('/')+1) != "empty.gif" )
{
     imageField.src = "~/Content/images/empty.gif";
}
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 36895570
this is also fine!

var imageField = $('#samples [id='+imageId+']');
0
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
LVL 51

Expert Comment

by:HainKurt
ID: 36895572
also this is fine

var imageField = $('#samples img[id='+imageId+']');

I dont understand where is your problem :)
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 36895576
this should do

  alert(imageField.attr("src"));
  if ( imageField.attr("src").substr(imageField.attr("src").lastIndexOf('/')+1) != "empty.gif" ) {
     $(imageField).src = "~/Content/images/empty.gif";
  }
0
 

Author Comment

by:newbieweb
ID: 36895577
Oh, my syntax was okay?

Maybe it's in my use of the following?

 $(imageField).src

I also tried:

imageField.src

with no success
0
 

Author Comment

by:newbieweb
ID: 36895579
Ok, I will try that and let you know in a minute...
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 36895580
your issue is not to find the image, but to get the src attribute :) which I posted above...
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 36895581
or no jQuery, simple javascript will do the same


  alert(document.getElementById(imageId).src);
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 36895584
also you should use

$(imageField).src = "~/Content/images/empty.gif";
-->
imageField.attr("src", "~/Content/images/empty.gif");
0
 
LVL 51

Accepted Solution

by:
HainKurt earned 500 total points
ID: 36895590
so, final syntax

var imageField = $('#samples img[id='+imageId+']');
if ( imageField.attr("src").substr(imageField.attr("src").lastIndexOf('/')+1) != "empty.gif" ) {
 imageField.attr("src","~/Content/images/empty.gif");
}
0
 
LVL 51

Assisted Solution

by:HainKurt
HainKurt earned 500 total points
ID: 36895592
one more issue... ~ does not work on clientside (unless you really have a folder with name ~)

you should use

 imageField.attr("src","/Content/images/empty.gif");
0
 

Author Closing Comment

by:newbieweb
ID: 36895597
Thanks! Unfortunately the web service is down and I can not test this code. But it looks great. Thanks!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question