Combine strings and text, to create url for load function

[bcintegrity1]

I currently use the click function to load our member’s reviews, but each member’s listing has to have a separate script in order for it to work. Imagine hundreds of listings, with hundreds of scripts!

Here’s what I have currently*: *Click blue button, choose filter from left menu, hover over listing, click review.

This works well, but I want the respective review pages to load on click using the SAME script! Something that works like this:

$('.proviewtab') .click(function(e){
  e.preventDefault();
  var folder = "'reviews-pest-control-va/";
  var lastname = $(this).closest('.lastname').contents();
  var comma = ",";
  var firstname = $(this).closest('.firstname').contents();
  var extension = ".php'";
  var filename = folder + lastname + comma + firstname + extension;

  $('#insert').load(filename); // filename = reviews-pest-control-va/lastname,firstname.php

});

The simplified html:

<li>
<div>
<p2>
<span class="firstname">firstname</span>
<span class="lastname">lastname</span><br />
phone<br />
company
</p2>
<div class="proviewtab">Reviews</div></div></li>

Any suggestions?

[bcintegrity1]

I’m looking for suggestions for jquery to construct a url (to be loaded on click) based on the respective list item’s first and last name.

The actual html with included script for just one member listing:

<li class="services amelia chesterfield powhatan richmond sussex nottoway greensville bugs bedbugs rodents bees reptiles">
<script type="text/javascript">
if ('p2:contains("Kim Medina")'){
$('#kimmedina').click(function(e){
e.preventDefault();
$('#insert').empty();
$('#insert').load('reviews-pest-control-va/medina,kim.php');
$('.lbox').removeClass('hbox');
$('.lbox').addClass('tempbox');
$('.mainflipper').addClass('top');});}
</script>
<div class="lpic">
<div class="lbox hbox">
<div class="prolight"></div>
<div class="pro"><img src="//integritycontractingofva.com/images/KimMedina.jpg" />
<p2>Kim Medina<br />
(804) 381-8026<br />
Dodson Pest Control</p2>
<div id="kimmedina" class="proviewtab"><p3>Reviews</p3></div></div></div></div></li>

I need a single script that will concatenate a string (firstname, lastname) and text (folder, comma, extension) in a certain order to create a url based on the member’s information.

[vindicateme]

First, I’m not sure what a p2 is. I’m going to assume you meant h2

Second, how are the folder names constructed? Will you add classes to each li according to the folders?

$("li").each(function(){ 
 var name = $(this).find("h2").text(); 
 name = name.split(" "); 
 var firstName = name[0]; 
 var lastName = name[1]; 
 var folder = "reviews-pest-control-va"; 
 var button = $(this).find(". proviewtab"); 
 var lbox = $(this).find(".lbox");

 var reviewsPath = folder + '/' + lastName + ',' + firstName + '.php';

 $(button).click(function(e){
     e.preventDefault();
     $('#insert').empty();
     $('#insert').load(reviewsPath);
     $(lbox).removeClass('hbox');
     $(.lbox).addClass('tempbox');
 });
});

[bcintegrity1]

@vindicateme

<p2>
 //I use to "tag" an element for css manipulation. It would be similar to...
<div class="p2">

The folder names are constructed as “reviews-pest-control-va/” The file names are the member’s name, such as “doe, john.php”

So, on the site, each member’s listing (list item) contains their first and last name. When the “Review” button (.proviewtab) is clicked by the user, I want the script to piece together the url to load.

I will work with your code and see what I can do! Thank you soooo much!!!

[bcintegrity1]

@Mottie

Sorry for any confusion. I can’t type as clearly as I can talk:)

The first code is just a guess as to what the script would look like. I wrote it to help others on this forum understand the function I was looking for. I’m positive it wouldn’t run, as it is written. Binding to('.proviewtab') , and using lastname and firstname to create the url seemed like what would be needed in order to generalize the script.

The code bound to ('#kimmedina') is what I’m currently using, which allows me to load her reviews page.

On document ready, the get function retrieves the listings who’s class matches the heading (county) of the page. Each list item contains a copy of the same code, with the exception that the (‘#name’), and url to load, correspond to the particular member.

If you haven’t done so already, you can see the working example from the above link.
Click “Find a Professional” and then click an orange button on the left menu. Then click a member’s “Review” button. I’m hoping that seeing it in action will help to understand exactly what I’m trying to accomplish.

As you suggested…I need to generalize it. I need one code that can be added to the page’s current script that will “construct” the url according to the first and last name of the member, rather than a code loaded with each member’s listing (list item) .

I hope I made more sense this go around. Thank you too for your time! I will try vindicateme’s approach. If you have a different suggestion, I’m happy to try it!

[bcintegrity1]

@vindicateme

Okay. I tried working with the code and I don’t know what to think. If there are errors in the code, it usually won’t work at all. But everything works except loading the file:/

Here’s the code as it is now on my test page. I added the toLowerCase and replace as an attempt to find the problem.

$('li.services').each(function(){

   $('.proviewtab').click(function(e){ 

      var name = $(this).find("p2").text(); 
      name = name.split(" ", 2); 
      var firstName = name[0]; 
      var lastName = name[1]; 
      var folder = "reviews-pest-control-va"; 
      var reviewsPath = folder + '/' + lastName + ',' + firstName + '.php'; 
      reviewsFile = reviewsPath.replace(/ /g, '').toLowerCase(); 

      e.preventDefault(); 
      $('#insert').empty(); 
      $('#insert').load(reviewsFile); 
      $('.lbox').removeClass('hbox'); 
      $('.lbox').addClass('tempbox'); 
      $('.mainflipper').addClass('top'); 

   }); 

});

And I’ve simplified the html, thanks to your “split” suggestion:)

<li class="services amelia chesterfield powhatan richmond sussex nottoway greensville bugs bedbugs rodents bees reptiles">
<div class="lpic">
<div class="lbox hbox">
<div class="prolight"></div>
<div class="pro"><img src="//integritycontractingofva.com/images/KimMedina.jpg" />
<p2>Kim Medina<br/>
(804) 381-8026<br />
Dodson Pest Control</p2>
<div class="proviewtab"><p3>Reviews</p3></div></div></div></div></li>

Any idea why the file doesn’t load?

Here’s the test page

[vindicateme]

Whoops, I didn’t look at the html closely enough – Mottie is correct in saying that it would not split correctly. For some reason I glanced at it and assumed the only thing that element contained was the name.

[bcintegrity1]

First and foremost, thank you both Mottie and vindicateme for your time and effort!!! I finally got it to work with your help:) Here is the working code:

$('.proviewtab').click(function(e){  
     var name = $(this).closest(".pro").find("p").text();
     name = name.split(/^(\w+)\s+(\w+)/);
     var firstName = name[1]; 
     var lastName = name[2];
     var folder = "reviews-pest-control-va";  
     var reviewsPath = folder + '/' + lastName + ',' + firstName + '.php';
     reviewsFile = reviewsPath.toLowerCase();
        e.preventDefault();
        $('#insert').empty();
        $('#insert').load(reviewsFile);
        $('.lbox').removeClass('hbox');
        $('.lbox').addClass('tempbox');
        $('.mainflipper').addClass('top');
   });

For some reason, match didn’t work…but the regex did. I eliminated the each function by using the closest method. And I changed the p2 to p, styling it using li.services p{} instead of p2.

Again, THANK YOU!

[Author]

Posts