Viewing 15 Topics - 16 through 30 (of 30 total)
Author Posts
November 19, 2013 at 11:52 pm 10274
hatchmedia hatchmedia

Ok, so I tried like you asked with varying results as follows:

1. I tried the first idea of pointing to the forms in external HTML files.

<select id="petselector">
<option value="empty">Select a Pet</option>
<option value="dog">Submit a Dog</option>
<option value="cat">Submit a Cat</option>
<option value="farm">Submit a Farm Animal</option>
<option value="other">Submit an Other Type</option>
</select>
<div class="wpuf-form-add">
   <div id="properform"></div>
</div>
<script type="text/javascript">// <![CDATA[
	jQuery(function() 
	{
		jQuery('#petselector').change(function()
		{
jQuery('#properform').empty();
			form = jQuery(this).val();
			if (form == 'dog' || form == 'cat' || form == 'farm' || form == 'other')
{
jQuery("#properform").load("http://www.adoptapet.ie/forms/"+form+".html");
}
		});
	});
// ]]>
</script>

This would show the loading gif, but as I uploaded, I received an alert simply saying ‘Undefined’. When I clicked ok, nothing happened except the message disappearing.

2. I then tried the code by pulling the form from within a WordPress page. I have a template set up to pull only the_content(), called Only_Content. It also has wp_head and wp_footer on it.

<select id="petselector">
<option value="empty">Select a Pet</option>
<option value="dog">Submit a Dog</option>
<option value="cat">Submit a Cat</option>
<option value="farm">Submit a Farm Animal</option>
<option value="other">Submit an Other Type</option>
</select>
<div class="wpuf-form-add">
   <div id="properform"></div>
</div>
<script type="text/javascript">// <![CDATA[
	jQuery(function() 
	{
		jQuery('#petselector').change(function()
		{
jQuery('#properform').empty();
			form = jQuery(this).val();
if (form == 'dog') jQuery("#properform").load("http://www.adoptapet.ie/submit/submit-dogs");
if (form == 'cat') jQuery("#properform").load("http://www.adoptapet.ie/submit/submit-cats");
if (form == 'farm') jQuery("#properform").load("http://www.adoptapet.ie/submit/submit-farms");
if (form == 'other') jQuery("#properform").load("http://www.adoptapet.ie/submit/submit-others");
		});
	});
// ]]>
</script>

If I pull a form using the Only_Content template, I get the same undefined message and nothing happens. If I pull a form using the default template, the whole page appears (ie, header, nav bar, logo, form, sidebar, footer, etc), the form gives the undefined message but DOES upload.

3. The final test was to add a unique ID to each of the forms and try pull those divs individually from the pages.

<select id="petselector">
<option value="empty">Select a Pet</option>
<option value="dog">Submit a Dog</option>
<option value="cat">Submit a Cat</option>
<option value="farm">Submit a Farm Animal</option>
<option value="other">Submit an Other Type</option>
</select>
<div class="wpuf-form-add">
   <div id="properform"></div>
</div>
<script type="text/javascript">// <![CDATA[
	jQuery(function() 
	{
		jQuery('#petselector').change(function()
		{
jQuery('#properform').empty();
			form = jQuery(this).val();
if (form == 'dog') jQuery("#properform").load("http://www.adoptapet.ie/submit/submit-dogs #dog_form");
if (form == 'cat') jQuery("#properform").load("http://www.adoptapet.ie/submit/submit-cats #cat_form");
if (form == 'farm') jQuery("#properform").load("http://www.adoptapet.ie/submit/submit-farms #farm_form");
if (form == 'other') jQuery("#properform").load("http://www.adoptapet.ie/submit/submit-others #other_form");
		});
	});
// ]]>
</script>

This pulled just the form in, but when I clicked on Select Image, the browse window would not open and a # symbol would be added to the end of the URL, ie http://www.adoptapet.ie/rescues/adminhatch/submit/#

It just looks like the jquery I add to the submit page is conflicting somewhere against the plugin. The closest option at the moment seems to be option two as it does upload, it just causes the Undefined error message and brings in the whole page template!

Anything else you can think of?

By the way, I must say I really do appreciate your help and I really hope we can get to the bottom of this!!

Damien

November 21, 2013 at 5:05 pm 12632
hatchmedia hatchmedia

Hi Tareq,

I am still really struggling with this. Is there anything else that can be done to allow for multiple forms on one page?

Cheers

Damien

November 21, 2013 at 11:34 pm 12644
Tareq Hasan Tareq Hasan

As I haven’t tried this for real, can’t surely say what is missing here. Sorry!

Can you give me access to your site?

November 23, 2013 at 12:50 am 12692
hatchmedia hatchmedia This reply has been marked as private.
November 23, 2013 at 3:18 pm 12704
Tareq Hasan Tareq Hasan

I’ve updated your form page and the form works, although the image upload is not working!

November 23, 2013 at 3:53 pm 12705
hatchmedia hatchmedia

Thanks for taking a look tareq.

Is there a way to get the image upload working? This would be one of the most important fields, haha!

Is there anything I could look at that might help?

Thanks again
Damien

November 24, 2013 at 10:44 am 12730
Tareq Hasan Tareq Hasan

The image uploader is already loaded, but as the buttons aren’t yet and load via ajax, the event binding is not working. You’ve to bind the buttons with image uploader again.

See how the new WPUF_Uploader() js is called at /class/render-form.php and try to mimic that.

November 25, 2013 at 8:29 pm 12817
hatchmedia hatchmedia

Thanks, however, I’m not sure how to do that myself. Its a bit outside my scope! 🙂

I did come up with another idea however. Would removing the Featured Image field from the form and only using the Extra Image field work? I would then replace code on the side to pull the first image from the Images field, rather than using the Featured Image.

Would this work and if so, what would be the best way to implement it?

November 25, 2013 at 10:00 pm 12821
hatchmedia hatchmedia

Ok, I might be getting somewhere. I have removed all the Featured Image fields and am now using this code in the submit form:

<Select id="petselector">
   <option value="empty">Select a Pet</option>
   <option value="dog">Submit a Dog</option>
   <option value="cat">Submit a Cat</option>
   <option value="farm">Submit a Farm Animal</option>
   <option value="other">Submit an Other Type</option>
</Select>
<div id="dog" class="forms" style="display:none"><h2>Submit a Dog</h2> [wpuf_form id="1258"]</div>
<div id="cat" class="forms" style="display:none"><h2>Submit a Cat</h2> [wpuf_form id="1267"]</div>
<div id="farm" class="forms" style="display:none"><h2>Submit a Farm Animal</h2>[wpuf_form id="1274"]</div>
<div id="other" class="forms" style="display:none"><h2>Submit another Type of pet</h2>[wpuf_form id="1275"]</div>

<script type="text/javascript">
jQuery(function() {
       jQuery('#petselector').change(function(){
            jQuery('.forms').hide();
            jQuery('#' + jQuery(this).val()).show();
        });
    });
</script>

This is changing between my forms as I need it and it is also submitting the posts which is a huge step forward.

Now, the next thing is to just get the image to display in my results/posts. I have added the following to my single.php as a start:

<div id="featured">
<?php 
    $images_dogs = get_post_meta( $post->ID, 'images_dogs');
    $images_cats = get_post_meta( $post->ID, 'images_cats');
    $images_farms = get_post_meta( $post->ID, 'images_farms');
    $images_others = get_post_meta( $post->ID, 'images_others');

    // Image selection and display:

    //display first image
    if (count($images_dogs) > 0) { // make sure at least one image exists
        $img_d = $images_dogs[0]; // first image
        echo "<img src='$img_d' height='400' width='400' /> ";
    } elseif (count($images_cats) > 0) {
        $img_c = $images_cats[0]; // first image
        echo "<img src='$img_c' height='400' width='400' /> ";
    } elseif (count($images_farms) > 0) {
        $img_f = $images_farms[0]; // first image
        echo "<img src='$img_f' height='400' width='400' /> ";
    } elseif (count($images_others) > 0) {
        $img_o = $images_others[0]; // first image
        echo "<img src='$img_o' height='400' width='400' /> ";
    } else {
        placeholder; // to add a placeholder image
    } 

?></div>

At the moment, this is simply pulling in the image id into the img src= section. How can I get the actual source of the image?

Nearly there! 🙂

November 25, 2013 at 11:43 pm 12828
Tareq Hasan Tareq Hasan

Those are the attachment id’s. Use these functions:
[php]
$thumb = wp_get_attachment_image( $attachment_id, ‘thumbnail’ ); // returns image with html tag
$full_size = wp_get_attachment_url( $attachment_id ); // the full image url
[/php]

November 26, 2013 at 4:21 pm 12878
hatchmedia hatchmedia

Hey Tareq,

I just wanted to know what would be the best way to add that to the code below. I have:

<div id="featured">
<?php 
    $images_dogs = get_post_meta( $post->ID, 'images_dogs');
	$images_cats = get_post_meta( $post->ID, 'images_cats');
	$images_farms = get_post_meta( $post->ID, 'images_farms');
	$images_others = get_post_meta( $post->ID, 'images_others');
	$thumb = wp_get_attachment_image( $attachment_id, 'thumbnail' ); // returns image with html tag
	$full_size = wp_get_attachment_url( $attachment_id ); // the full image url

    // Image selection and display:
	
    //display first image
    if (count($images_dogs ) > 0) { // make sure at least one image exists
        $img_d = $images_dogs[0]; // first image
        echo "<img src='$img_d' height='400' width='400' /> ";
    } elseif (count($images_cats) > 0) {
        $img_c = $images_cats[0]; // first image
        echo "<img src='$img_c' height='400' width='400' /> ";
    } elseif (count($images_farms) > 0) {
        $img_f = $images_farms[0]; // first image
       echo "<img src='$img_f' height='400' width='400' /> ";
    } elseif (count($images_others) > 0) {
        $img_o = $images_others[0]; // first image
        echo "<img src='$img_o' height='400' width='400' /> ";
    } else {
        echo ‘placeholder'; // possibly display a placeholder image?
    } 

?></div>

Where do I include the $thumb and $full_size in the Display First Image code?

Cheers

November 26, 2013 at 8:46 pm 12883
Tareq Hasan Tareq Hasan

[php]
<?php
$images_dogs = get_post_meta( $post->ID, ‘images_dogs’, true);
$images_cats = get_post_meta( $post->ID, ‘images_cats’, true);
$images_farms = get_post_meta( $post->ID, ‘images_farms’, true);
$images_others = get_post_meta( $post->ID, ‘images_others’, true);

//display first image
if ($images_dogs) { // make sure at least one image exists
$thumb = wp_get_attachment_image( $images_dogs, ‘thumbnail’ );
$full_size = wp_get_attachment_url( $images_dogs );

printf( ‘<a href="%s">%s</a>’, $full_size, $thumb );
} elseif ($images_cats) {
$thumb = wp_get_attachment_image( $images_cats, ‘thumbnail’ );
$full_size = wp_get_attachment_url( $images_cats );

printf( ‘<a href="%s">%s</a>’, $full_size, $thumb );
} elseif ($images_farms) {
$thumb = wp_get_attachment_image( $images_farms, ‘thumbnail’ );
$full_size = wp_get_attachment_url( $images_farms );

printf( ‘<a href="%s">%s</a>’, $full_size, $thumb );;
} elseif ($images_others) {
$thumb = wp_get_attachment_image( $images_others, ‘thumbnail’ );
$full_size = wp_get_attachment_url( $images_others );

printf( ‘<a href="%s">%s</a>’, $full_size, $thumb );
} else {
echo ‘placeholder’; // possibly display a placeholder image?
}
[/php]

November 26, 2013 at 8:56 pm 12885
hatchmedia hatchmedia

You know what? I think that has it!!

I just need to fill this in anywhere else the featured image appears, but should be good then! I will mark this as resolved once I have swapped everything

Thanks Tareq!!

🙂

November 29, 2013 at 6:58 pm 13033
hatchmedia hatchmedia

Hey Tareq!

By the looks of things, everything seems to be working now for me!! Using just the image uploaded instead of the featured image has done the trick for the multiple forms on one page.

I have also got the images displaying on all the other pages (so in the users’ account, single posts, results pages, etc). The only thing is that the pictures are not fitting as nicely as they had been when using the thumbnail from the featured image. They used to crop the image, now they are stretching them to fit. Any idea why this might be happening?

Cheers

Damien

– by the looks of things, I had left out the thumbnail image_size

November 30, 2013 at 11:52 pm 13079
Tareq Hasan Tareq Hasan

So your problem is solved may be?

Viewing 15 Topics - 16 through 30 (of 30 total)