Several posts on stackoverflow say to use live to select dynamically generated html. However you need an event like click to use live. What do you do if you just want to use .val or .html and change the element instead of adding an event handler?
(Solution with live: Jquery not working with dynamically created table)
I am generating code through:
$.ajax({
url: "/JobFeed/JobFeed.php",
type: "POST",
dataType: "html",
success: function(html) {
$("#jobFeed").html(html);
}
});
The html once generated looks like this (with the form repeated several times):
<div id="jobFeed" class="contentContainer">
<div id="jobs">
<div class="job">
<form class="subscription">
</form>
</div>
</div>
</div>
I then add inputs with:
$("form .subscription").html("<input ... />");
You can use a plugin called "livequery" and do something like this:
$(selector).livequery(function(){
});
As you can see, there is no click or other event that you must use.
Plugin link: http://docs.jquery.com/Plugins/livequery
On github: https://github.com/brandonaaron/livequery
Hope this helps :-)
Related
I have an html form ( ) , I want that it is displayed when I click on a button.
the declaration of the form is the following :
<div id = "formulaire" class="gl" >
and the button is :
Edit
I use angularjs in my code . Please help me.
It better to use a simple variable than a function in this case. I would also recommend using controller scope when setting variables instead of the application scope so you don't run into issues with the variables when your application becomes large.
I also picked data-ng-click over ng-click because it will allow the html to validate correctly (which can be checked using the W3's validator).
Try this...
"use strict";
angular.module('myApp', [])
.controller("myController", function() {
this.edit = false;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div data-ng-app="myApp" data-ng-controller="myController as ctrl">
Edit
<div id="formulaire" class="gl" data-ng-show="ctrl.edit">
<form>
<fieldset>
<label>Field:</label>
<input type="text" />
</fieldset>
</form>
</div>
</div>
Have you looked into the ngShow directive? It ables you to show or hide a DOM element depending on whether the attribute expression resolves to a truthey or falsey value.
Add model change on click
Edit
And then display the form if model is true
<div id = "formulaire" class="gl" ng-if="show">
I am requesting some HTML content via an API using jQuery ajax. The data I get back console logs as an object, even when I parse it with jQuery.
Here is what I am doing
$.ajax({
url: ajaxUrl,
success: function(data){
var html = data
var parseData = $(html);
console.log(parseData);
}
});
I have tried dataType it made no difference. I have tried to find elements within the data return, but that returns the same.
The data I am returning does not have a doctype, html or body tag.
<div class="item">
<h2>Title</h2>
<p>...</p>
</div>
<div class="item">
<h2>Title</h2>
<p>...</p>
</div>
<div class="item">
<h2>Title</h2>
<p>...</p>
</div>
Am I doing something wrong, or is the data being returned wrong?
EDIT
Here is the console log
This is absolutely correct that you get an object in your console.
By default jQuery tries to guess the type of the content (what they call an "intelligent guess") and in your case it probably thinks this is HTML. Probably - because you did not provide us with an example of the thing you are asking.
After jQuery thinks this is HTML, it wraps it into a jQuery object, which I guess you see in your console.
Try to call console.log(data.find(".item").length) - I have a feeling the result will be 3.
To get the pure HTML you must use a dataType: "text". This will stop jQuery from attempts of parsing the data and will give you the raw string result.
Try the below
$.ajax({
url: ajaxUrl,
dataType: "html"
})
.done(function( html ) {
console.log( html );
});
Stage
Suppose an HTML page in some URL (i.e. http://mysite.com/registry.html) and this HTML file contains a HTML form, like this:
<form action="/">
<input name="firstname">
<input name="lastname">
<textarea name="message"></textarea>
</form>
If I want to prefill this form how can I do this?
Maybe I thought that I can prefill this form on URL request. But I do not know if it is possible.
Restriction
I do not have access to mysite.com server nor registry.html.
Maybe with some JavaScript sorcery, load the page (http://example.com/registry.html) via AJAX:
function loadPage()
{
jQuery.ajax({
type: "GET",
url: "http://example.com/registry.html",
success: successFn
});
}
function successFn(data)
{
var result=jQuery(data).find("#idOfTheInput").html()
//modify the default value
//re attach the input into the html
//render the html
}
The rest is up to you; dig into the dom and put the values you want.
You can try to pass parameters by the url.
Something like this:
http://test.com?param1
This url is passing a parameter (param1), so you can set up the members of this form to be able to receive these parameters.
Regards,
Otacon.
i have a form having two submit buttons.
one for creating a user and other for logging in an existing user.
how can i fire two different servlets from these two buttons keeping them in one single form??
like if create button is clicked then create.java is executed
and if login button is fired then login.java is executed
If you want to go with JavaScript, this is an example using jQuery ajax:
$(document).ready(function() {
$('#id_of_your_button').click(function() {
// do some stuff here, e.g.
var str = $("#your_html_form").serialize();
$.ajax({
type: "POST",
url: "url_to_your_file",
data: str,
success: function(msg) {
//...
}
});
}
// prevent the default action, e.g., following a link
return false;
});
});
EDIT:
if you want to do it without JavaScript, you can do it like <input type="button" value="register">
Otherwise, if you want the form submitted right away, you could only take two forms, or use JavaScript (also in other ways, as you could e.g. change the action-url with JavaScript depending on which button the user clicks, etc)...
... but there is only one "Submit" button allowed per HTML-form.
Check this tutorial about the onclick event for HTML buttons: Here
Example:
<script type="text/javascript">
function copyText()
{
document.getElementById("field2").value=document.getElementById("field1").value;
}
</script>
<button onclick="copyText()">Copy Text</button>
Source
Morning/Afternoon guys.
Writing some JQuery AJAX shizz and getting a bit stuck. I've got the actual proccess of calling the php file done perfectly, its just trying to get the html on the page to change in a way I want it to. I want to get rid of the a with the id of the one used in the ajax call etc, and replace it with the html passed from the PHP file. Code is as follows...
$(".save_places").click(function() {
$.ajax({
url: "{/literal}{$sRootPath}{literal}system/ajax/fan_bus.php",
type: "POST",
data: ({id : this.getAttribute('id')}),
dataType: "html",
success: function(msg){
$(this).before(msg);
$(this).empty();
alert(msg);
}
});
return false;
});
And the HTML is pretty simple;
<p class="links">
<img src="{$sThemePath}images/save_places.png" alt="Save to My Places" />
<img src="{$sThemePath}images/send_friend.png" alt="Send to a Friend" />
</p>
All the stuff in the success function is experimental mashing of code, any help please?
Thanks as always.
I think what you're after is .replaceWith(), like this:
$(this).replaceWith(msg);
This replaces the <a></a> with the content coming back in msg.
Also, if you're sure the elements have IDs, you can just do this:
data: {id : this.id},
linksPara.replaceChild(newElements, oldAtag);