Build with IDX Broker › Forums › IDX Broker Control Panel › Javascript in Control Panel › Changing Results Page Labels on Platinum Grid Layout
Tagged: change text with jquery, custom jquery, jquery
-
AuthorPosts
-
-
I have been tasked with making some changes to the Search Results page such as this one http://listings.pastermackrealestate.com/idx/results/listings?idxID=b076&pt=1&lp=200000&hp=800000&ccz=city&a_propStatus%5B%5D=Active&per=100&srt=newest
I’m not great at Javascript/jQuery, but I can program in other languages like PHP enough ot get the job done. I’ve spent a bunch of time trying to do this one that that seems simple and I cannot get it to work. Details…
1. PLACING & TESTING CODE: I’m adding my code to my wrapper at Designs > Wrappers > Global where I’ve got the header and footer include files. Each time I make a change I am careful to Clear Wrapper Cache then Save Changes before checking the results page.
2. PURPOSE: I am trying to change the labels (the ones I haven’t hidden) on the Platinum Grid layout for each property so that BD is changed to Beds, TB is changed to Baths and SQ is changed to Sq Ft. So far my test code is only trying to change BD to Beds (I realize CSS will transform that to BEDS, which is fine). However I’ve tried several different times and I cannot get this seemingly simple code running.
3. CODE: Here is the most recent code I’ve tried, which I’m using to try and change bd in this code block: <span class=”IDX-resultsLabel”>bd</span>
// Is this the right page to make changes on? Test it to find out.
if ($(".IDX-page-listings").length)
{
// After all content is on the page, do the work
$( window ).load(function()
{
// The work is done here
$(".IDX-resultsLabel").text().replace(/bd/g,'Beds');
})
}
Does anyone have insight into why this isn’t working?
(0 rating, 0 votes, rated)
You need to be a registered member to rate this post.Loading... -
Following up here… any thoughts guys?
(0 rating, 0 votes, rated)
You need to be a registered member to rate this post.Loading... -
It looks like you can do this using CSS and the after selector
.IDX-resultsField-bedrooms span::after {
content: ” Beds”;}.IDX-resultsLabel {display: none;}
http://www.w3schools.com/cssref/sel_after.asp
(0 rating, 0 votes, rated)
You need to be a registered member to rate this post.Loading...-
Ah, I’ve re-written this below. All code needed to make this change complete for us, not including hiding the .IDX-resultsField-acres field altogether.
(0 rating, 0 votes, rated)
You need to be a registered member to rate this post.Loading...
-
-
SOLVED: BACKGROUND & DESIRED CHANGES
Our client requested that the text labels BD, TB and SQ on the Platinum Grid Search Results pages to be changed to Beds, Baths and Sq Ft. as in the edited screenshot below:
Here is an example URL where I made these change:
http://listings.pastermackrealestate.com/idx/results/listings?idxID=b076&pt=1&lp=200000&hp=800000&ccz=city&a_propStatus%5B%5D=Active&per=100&srt=newestI went back to Google to show 2 or 3 attempts and found working code today! Hopefully the [code] tags will display this correctly:
$( window ).load(function() { // Change bd to Beds $("div.IDX-resultsField-bedrooms span.IDX-resultsLabel").text('BEDS'); // Change tb to Baths $("div.IDX-resultsField-totalBaths span.IDX-resultsLabel").text('BATHS'); // Change sq to Sq Ft $("div.IDX-resultsField-sqFt span.IDX-resultsLabel").text('SQ FT'); } )
NOTE: BD, TB and SQ are uppercased by CSS and the code actually is lowercase.
(0 rating, 0 votes, rated)
You need to be a registered member to rate this post.Loading... -
I saw Nick’s reply above after I got the jQuery/JS working, so I’ve switched to CSS now. Thanks, Nick!
/* Add new content for Beds, Baths, Sq Ft */
.IDX-resultsField-bedrooms span::after {content: " Beds";}
.IDX-resultsField-totalBaths span::after {content: " Baths";}
.IDX-resultsField-sqFt span::after {content: " Sq Ft";}
/* Hide Actual Content for these fields */
.IDX-resultsLabel {display: none;}(0 rating, 0 votes, rated)
You need to be a registered member to rate this post.Loading...
-
-
AuthorPosts
- You must be logged in to reply to this topic.