14 Replies - 474 Views - Last Post: 26 August 2013 - 10:39 AM

#1 Sylvain_  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 13
  • Joined: 04-August 13

Generate divs dynamically

Posted 26 August 2013 - 08:41 AM

I'm trying to generate div's dynamically using javascript/jquery, based on the rows returned from a JSON webservice I created. The webservice works (the alerts in the code below work), but i get no rendered divs. Here is the code:

function getNotPickedUp(){

		var url = 'http://student.howest.be/sylvain.vansteelandt/fedex/server/getnotpickedup.php';

		$.getJSON(url,function(data) {
		if(data){
		alert(data[0].id);
		
		for(i=0;i<data.length;i++){
			$("<div />", {
				"class":"packages",
				id: "package" + data[i].id,
				style: "background-color:#4d148c;width:100%;height:80px"
			}).appendTo("#divcontent");
		}				
		
		} else{
		alert("error");
		}
		});

}

getNotPickedUp();



this function is called when clicking on a button. the div with id "divcontent" is already there when calling the script.

Is This A Good Question/Topic? 0
  • +

Replies To: Generate divs dynamically

#2 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2877
  • View blog
  • Posts: 9,548
  • Joined: 12-December 12

Re: Generate divs dynamically

Posted 26 August 2013 - 09:05 AM

Your code works for me, although there is no content in the new divs.

Are there errors in your browser's console? There are links for various consoles in my signature.
Was This Post Helpful? 0
  • +
  • -

#3 Sylvain_  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 13
  • Joined: 04-August 13

Re: Generate divs dynamically

Posted 26 August 2013 - 09:46 AM

View Postandrewsw, on 26 August 2013 - 05:05 PM, said:

Your code works for me, although there is no content in the new divs.

Are there errors in your browser's console? There are links for various consoles in my signature.


So you get a purple div ? i know there is no content in it yet. Is this the reason the div doesn't render?

The console says 'error while parsing the value for 'background'. Decleration ignored.

This post has been edited by andrewsw: 26 August 2013 - 09:50 AM

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2877
  • View blog
  • Posts: 9,548
  • Joined: 12-December 12

Re: Generate divs dynamically

Posted 26 August 2013 - 09:53 AM

Yes I get (empty) purple divs.

Try inserting some dummy text:

 $("<div />", {
    text: "dummy",

and/or set their widths temporarily to a pixel-value, rather than 100%. It is possible that this width is collapsing, depending on other html and css in your page. That is, the elements may be appended, but you cannot see them.

Please use the Reply button rather than Quote + Reply each time - it is a large button a little further down, unless there is something specific you wish to quote.

View PostSylvain_, on 26 August 2013 - 04:46 PM, said:

The console says 'error while parsing the value for 'background'. Declaration ignored.

You could delete, or reduce, the style information temporarily. I would delete the style attribute entirely and use a css-stylesheet to style the class "packages".

This post has been edited by andrewsw: 26 August 2013 - 09:49 AM

Was This Post Helpful? 1
  • +
  • -

#5 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 403
  • View blog
  • Posts: 1,720
  • Joined: 30-April 10

Re: Generate divs dynamically

Posted 26 August 2013 - 09:59 AM

Quote

I would delete the style attribute entirely and use a css-stylesheet to style the class "packages".


Just a note, This is important when styling dynamic or static code so you keep the styles separate from your html and javascript. It is, IMO, just good practice.
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2877
  • View blog
  • Posts: 9,548
  • Joined: 12-December 12

Re: Generate divs dynamically

Posted 26 August 2013 - 10:06 AM

Quote

The console says 'error while parsing the value for 'background'.

What version of jQuery are you using? Passing of attributes to a self-closed element was introduced in jQuery 1.4.

I suspect you should also supply the style rules individually, like the following example. (I know my version worked, but this is how the rules are intended to be supplied.)

jQuery('<div/>', {
    id: 'foo',
    css: {
        fontWeight: 700,
        color: 'green'
    },
    click: function(){
        alert('Foo has been clicked!');
    }
});

but using a stylesheet is much better :bigsmile:

This post has been edited by andrewsw: 26 August 2013 - 10:08 AM

Was This Post Helpful? 0
  • +
  • -

#7 Sylvain_  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 13
  • Joined: 04-August 13

Re: Generate divs dynamically

Posted 26 August 2013 - 10:14 AM

Are you familiar with Adobe Edge Animate? Because that's the program I have to use. I don't know if it has something to do with the program. It uses jQuery 1.7.1
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2877
  • View blog
  • Posts: 9,548
  • Joined: 12-December 12

Re: Generate divs dynamically

Posted 26 August 2013 - 10:19 AM

There is a useful article here from nettuts describing the more useful and interesting features that were added to jQuery 1.4.

(I know jQuery is now at 1.10, but 1.4 was an important release that introduced a selection of new methods/approaches.)

View PostSylvain_, on 26 August 2013 - 05:14 PM, said:

Are you familiar with Adobe Edge Animate? Because that's the program I have to use. I don't know if it has something to do with the program. It uses jQuery 1.7.1

Sorry, never heard of it :whatsthat: It still produces HTML pages though(?) that you could open in a browser.

This post has been edited by andrewsw: 26 August 2013 - 10:26 AM

Was This Post Helpful? 0
  • +
  • -

#9 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 403
  • View blog
  • Posts: 1,720
  • Joined: 30-April 10

Re: Generate divs dynamically

Posted 26 August 2013 - 10:22 AM

If you are writing your own code, not letting the editor write it, the editor should have nothing to do with your codes outcome.
Was This Post Helpful? 0
  • +
  • -

#10 Sylvain_  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 13
  • Joined: 04-August 13

Re: Generate divs dynamically

Posted 26 August 2013 - 10:26 AM

It produces a html page, but the only div you can see in the source is the "stage". Everything else is hidden.
Was This Post Helpful? 0
  • +
  • -

#11 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 403
  • View blog
  • Posts: 1,720
  • Joined: 30-April 10

Re: Generate divs dynamically

Posted 26 August 2013 - 10:28 AM

By hidden do you mean it is generated after the page has loaded?
Was This Post Helpful? 0
  • +
  • -

#12 Sylvain_  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 13
  • Joined: 04-August 13

Re: Generate divs dynamically

Posted 26 August 2013 - 10:36 AM

Problem solved, the id of the div "divcontent" was in fact "Stage_divcontent", the editor gives the div a different id from the name in the editor.
Was This Post Helpful? 1
  • +
  • -

#13 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 403
  • View blog
  • Posts: 1,720
  • Joined: 30-April 10

Re: Generate divs dynamically

Posted 26 August 2013 - 10:37 AM

Glad you were able to find the issue. Thanks for the update.
Was This Post Helpful? 0
  • +
  • -

#14 Sylvain_  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 13
  • Joined: 04-August 13

Re: Generate divs dynamically

Posted 26 August 2013 - 10:37 AM

View Postlaytonsdad, on 26 August 2013 - 06:28 PM, said:

By hidden do you mean it is generated after the page has loaded?

I think so, I couldn't see the elements trough page source, I found the problem with the id using 'inspect element' from Chrome.
Was This Post Helpful? 0
  • +
  • -

#15 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 403
  • View blog
  • Posts: 1,720
  • Joined: 30-April 10

Re: Generate divs dynamically

Posted 26 August 2013 - 10:39 AM

Yes, this means the only elements that are sent from the server are the main elements and the "stage" div, the rest is dynamically generated via javascript once the page is loaded to the browser.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1