Response title
This is preview!
Move this topic
jQuery templates
in Using jQuery
•
9 years ago
Hey..
I just want to know one thing..
I just want to know one thing..
How can I call any div that is included in a jQuery template on another js file.
For example:
- if I have this code in my php file:
<script id="template-upload" type="text/x-tmpl">
<div class="test"></div>
</script>
- and I want to call this div in a new js file:
$(document).ready(function () {
$(".test").click(function () {
alert("done");
});
});
WHY IT DID NOT EFFECT ????
Thanks.
1
Replies(9)
Re: jQuery templates
9 years ago
Was the php loaded via ajax? Or you call .tmpl after your click code?
JΛ̊KE
If the test nodes don’t exist when you set up the click code, you need to use a deferred bind.
Now is where is gets funky. The template plugin is deprecated and may not work with current jQuery versions.
A solution would be based on which version of jQuery you are using. Which version?
JΛ̊KE
Leave a comment on jakecigar's reply
Leave a comment on efoula's reply
Re: jQuery templates
9 years ago
- $(document).on('click','.test',function(){
- alert("done");
- })
Uses the deferred version of on.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: jQuery templates
9 years ago
Perfect.
But now I have another issue.
That I use a contact form with this template "as I put the <form></form> inside the template" and this form is calling 3 js files
(script.js, jquery.jqtransform.js and jquery.validationEngine.js) ,ok...
The form is using ajax, jquery and php. when submit the form, it must call submit.ajax "load javascript"
and if the javascript didn't load, it will load directly the php instead of the js.
So, when I submit the form it call directly php which is not good for me, I need to validate the form before submit and submit the form without refresh the page "as it did when it happen by using php".
Referring to my question above, how to make the three js files call the submit form that has included in the jquery template? "The files are loaded but the script is not working"
................
Example for the script.js file:
$(document).ready(function(){
$('#contact-form').jqTransform();
$("button").click(function(){
$(".formError").hide();
});
var use_ajax=true;
$.validationEngine.settings={};
$("#contact-form").validationEngine({
inlineValidation: false,
promptPosition: "centerRight",
success : function(){use_ajax=true},
failure : function(){use_ajax=false;}
})
$("#contact-form").submit(function(e){
if(!$('#subject').val().length)
{
$.validationEngine.buildPrompt(".jqTransformSelectWrapper","* This field is required","error")
return false;
}
if(use_ajax)
{
$('#loading').css('visibility','visible');
$.post('submit.php',$(this).serialize()+'&ajax=1',
function(data){
if(parseInt(data)==-1)
$.validationEngine.buildPrompt("#captcha","* Wrong verification number!","error");
else
{
$("#contact-form").hide('slow').after('<h1>Thank you!</h1>');
}
$('#loading').css('visibility','hidden');
}
);
}
e.preventDefault();
})
});
..........
Really I appreciate your help.
Thanks.
Leave a comment on efoula's reply
Re: jQuery templates
9 years ago
In the first response I mentioned that the template plugin is deprecated. That means it is no longer supported. I’ve never used it.
Are you generating 3 forms with the same ID? That’s against the rules of HTML.
If you generate 3 forms with a class, you can loop through them setting up the validationEngine and the submit handler.
JΛ̊KE
JΛ̊KE
Re: Re: jQuery templates
9 years ago
No, Jake.
I just use one form in my project.
Am using the blueimp project to help users to upload their files.
And blueimp is using 2 jquery templates (one for upload and the another one for download).
So, I just put my <form></from> inside the download-template
Here is my code:
<script id="template-download" type="text/x-tmpl">
/* blueimp plugin */
<td class="name"><span>{%=file.name%}</span></td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
<td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>
............... etc.
/* form plugin */
<form id="contact-form" name="contact-form" method="post" action="submit.php">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="15%"><label for="name">name</label></td>
<td width="70%"><input type="text" class="validate[required,custom[onlyLetter]]" name="name" id="name" value="<?=$_SESSION['post']['name']?>" /></td>
<td width="15%" id="errOffset"> </td>
</tr>
............... etc.
</form>
</script>
///////////////////////////////////////////////
I have tested the form already when I put it outside the template and it works fine.
But now the script of the js validation for the form didn't effect because the form is inside the template.
Did you got it?
Leave a comment on jakecigar's reply
Re: jQuery templates
9 years ago
Good!
JΛ̊KE
Leave a comment on jakecigar's reply
Re: jQuery templates
9 years ago
Google would be your friend here!Quick Tip: Working with the Official jQuery Templating Plugin | Nettuts+
Leave a comment on jakecigar's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to efoula's question