Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Css In Ajax Script, How?

CSS ajax

  • Please log in to reply
6 replies to this topic

#1 Thevenin

Thevenin

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 66 posts

Posted 14 April 2012 - 10:05 PM


Hi all,
I am a newbie of Ajax, I am studying it in the only good way I know, try to code something.

I am trying to recreate the following HTML form with Ajax:

<div class="table_test">
    <form name="f1" target="uploader" action="upload.php" method="POST" enctype="multipart/form-data" >
    <ul>
    <li class="title">Image Name</li>
    <li class="blank"><input type="text" name="name_of_image[]"></li>
    </ul>
    <ul>
    <li class="title">Category</li>
    <li class="blank">
			    <select name="category_of_image[]">
				    <option value=""></option>
				    <option value="Fight">Fight</option>
				    <option value="Racing">Racing</option>
				    <option value="Family Game">Family Game</option>
			    </select>
    </li>
    </ul>
    <ul>
    <li class="title">Choose the Image to upload</li>
    <li class="blank"><input type="file" name="image_filename[]"></li>
    </ul>	 
    <label for="submit">Add other file(s):&nbsp;</label> <br />
    <input type="button" name="addFile" value="Add more files" onClick="window.addFile(this);">
    <input type="submit" value="Upload" name="upload">
    </form>
</div>


So I created the form with Ajax, but now I don't know how to apply the CSS style I used in HTML:

<script>
function addFile(addFileButton) {	  
    var form = document.forms['f1'];
    var nameoftheImg = document.createElement("label");
    nameoftheImg.appendChild(document.createTextNode("Image Name"));
    var catoftheImg = document.createElement("label");
    catoftheImg.appendChild(document.createTextNode("Category"));
    var upooftheImg = document.createElement("label");
    upooftheImg.appendChild(document.createTextNode("Choose the Image to upload"));
    var imgname = document.createElement("input");
    imgname.type = "file";
    imgname.name = "image_filename[]"; 
    var nameofimage = document.createElement("input");
    nameofimage.type = "text";
    nameofimage.name = "name_of_image[]";
    var catoftheImg = document.createElement("select");
    catoftheImg.name = "category_of_image[]";
    catoftheImg.options[0] = new Option("","");
    catoftheImg.options[1] = new Option("Fight","Fight");
    catoftheImg.options[2] = new Option("Racing","Racing");
    catoftheImg.options[3] = new Option("Family Game","Family Game");  
    form.insertBefore(nameoftheImg, addFileButton);
    form.insertBefore(name_of_image, addFileButton);
    form.insertBefore(catoftheImg, addFileButton);
    form.insertBefore(category_of_image, addFileButton);
    form.insertBefore(upooftheImg, addFileButton);
    form.insertBefore(image_filename, addFileButton);
}
</script>


The CSS:

.table {
    background:#333;
}
.table ul {
    float:left;
    margin:0;
    padding:0;
    border:1px solid #C9C9C9;
}
.table ul li {
    list-style:none;
    padding:5px 10px;
}
.table ul li.title {
    font-weight:bold;
    background:#333;
    color:#fff;
}
.table ul li.blank {
    background:#fff
}


I haven't found anything on the web to fix my problem, so I ask you if, without changing the entire script, it is possible to add the "div class=table_test", the "ul" and the "li" tags with their CSS style in the Ajax script.

Thank you in advance

  • 0

#2 BlackRabbit

BlackRabbit

    CodeCall Legend

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 3871 posts
  • Location:Argentina
  • Programming Language:C, C++, C#, PHP, JavaScript, Transact-SQL, Bash, Others
  • Learning:Java, Others

Posted 15 April 2012 - 12:31 AM

You just have to include the css file in the head section of the html document which you will apply that javascript to like this.

<LINK href="YOUR STYLE SHEET.css" rel="stylesheet" type="text/css">

of you can do something like this in the javascript also :


About how to set styles to an html element please take a look at this :

http://stackoverflow...ement-attribute

so you can set the style to the elements in both ways, but using the name in the .css , or by setting the specific style parameters
  • 0

#3 Thevenin

Thevenin

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 66 posts

Posted 15 April 2012 - 02:20 AM

I did something like this:

var div1 = document.createElement('div');
  div1.setAttribute('id','sites');
  div1.className='table_test';

  var ul1=document.createElement('ul');
  
  var li1=document.createElement('li');
  li1.setAttribute('class','blank');

then I added this code where I create the form:

form.insertBefore(div1, addFileButton);
form.insertBefore(ul1, addFileButton);
form.insertBefore(li1, addFileButton);
form.insertBefore(name_of_image, addFileButton);

It seems that the form use the UL and LI tags, but the style doesn't work.

Attached you can see the HTML form and the Ajax one differences/problem.

Attached Thumbnails

  • HTML_form.jpg
  • Ajax_form.jpg

  • 0

#4 John

John

    CC Mentor

  • Moderator
  • 4450 posts
  • Location:New York, NY

Posted 15 April 2012 - 05:53 AM

Have you inspected the DOM to make sure the elements are being created properly and the attributes are set as you expect them?
  • 0

#5 Thevenin

Thevenin

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 66 posts

Posted 15 April 2012 - 07:15 AM

Awesome John, thank you for the idea.
I checked with FireBug and here is the problem:

<label for="submit">Add other file(s):</label>
<br>
<div id="sites" class="table"></div>
<ul></ul>
<li class="even"></li>
<input type="text" name="name_of_image[]">
<li class="even"></li>
<select name="category_of_image[]">
<option value=""></option>
<option value="Fight">Fight</option>
<option value="Racing">Racing</option>
<option value="Family Game">Family Game</option>
</select>
<li class="even"></li>
<input type="file" name="image_filename[]">
<li class="even"></li>



<input type="button" value="Remove">
<input type="button" onclick="window.addFile(this);" value="Add more files" name="addFile">
<input type="submit" name="upload" value="Upload">

It seems that the code is created but the elements are out of the <ul></ul> and <li></li>
  • 0

#6 John

John

    CC Mentor

  • Moderator
  • 4450 posts
  • Location:New York, NY

Posted 15 April 2012 - 08:16 AM

In the following code, you are all the elements to the form.
form.insertBefore(div1, addFileButton);
form.insertBefore(ul1, addFileButton);
form.insertBefore(li1, addFileButton);
form.insertBefore(name_of_image, addFileButton);

Perhaps you want to do
ul1.insertBefore(li1, addFileButton);

  • 0

#7 Thevenin

Thevenin

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 66 posts

Posted 16 April 2012 - 03:52 AM

Yes I did....Recoded quite all the script :laugh:

I used .innerHTML ='<div></div>', and placed inside the HTML code I needed.
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download