Uncaught SyntaxError: Unexpected token } when trying pass data to jquery variable - javascript

I'm trying pass data to jquery via onclick
There is jquery function:
function handleit(cId, anotherId) {
var campaingID = cId;
var another = anotherId;
var post = "action=remove&campaign_id=" + campaingID + "&anotherid=" + another;
$.ajax({
type: "post",
url: "ajax/phphandler.php",
data: post,
cache: false,
success: function(html) {
$('#ready').html(html);
}
});
return false;
}
and there is onclick code
<td><input class="btn btn-default" type="submit" data='.$row2['campaign_id'].' value="submit" onclick="return handleit("'.$row2['campaign_id'].'","test")"></td>
rendered html
<td><input class="btn btn-default" type="submit" data=43 value="submit" onclick="return handleit(" 43","test")"></td>

The issue is that your HTML winds up looking like:
<input class="btn btn-default" type="submit" data=foo value="submit"
onclick="return handleit("campaign_id","test")">
^ ^ ^ ^
When defining an attribute, you can't nest " inside ". The HTML would need to look like:
<input class="btn btn-default" type="submit" data=foo value="submit"
onclick="return handleit('campaign_id','test')">
^ ^ ^ ^
How you accomplish that depends on whatever server-side language you're using, but probably involves escaping quotation marks:
<td>
<input class="btn btn-default" type="submit"
data="'.$row2['campaign_id'].'" value="submit"
onclick="return handleit(\''.$row2['campaign_id'].'\',\'test\')"
</td>

Related

How to get multiple values using JSTL tags?

I have this button:
<button type="button" class="btn btn-danger" id="deleteuserbtn" value="${usr.idUser}" onclick="deleteUser(this.value)">Delete</button>
That calls the function deleteUser once the button is clicked.
I would like to know how to send more than one value at the same time.
For example, if I want to send the idUser and the userName, how can I do it?.
I tried this but it's not working:
<button type="button" class="btn btn-danger" id="deleteuserbtn" value="${usr.idUser, usr.userName}" onclick="deleteUser(this.value)">Delete</button>
I expect to receive the values in the same jsp page:
function deleteUser(val1, val2) {
alert(val1);
alert(val2);
}
You can simply pass your values under your function under '' quotes else it will give you error not defined.So your button code will look like below :
<button type="button" class="btn btn-danger" value="something" id="deleteuserbtn" onclick="deleteUser(this.value ,'${usr.idUser}','${usr.userName}')">
Delete</button>
Demo Code :
function deleteUser(val1,val2,val3){
alert("val :"+val1 +" "+val2+" "+val3);
}
<button type="button" class="btn btn-danger" id="deleteuserbtn" value="something" onclick="deleteUser(this.value,'${usr.idUser}','${usr.userName}')">
Delete</button>

html inside php inside html parsing issue

I'm having this problem
Uncaught SyntaxError: Unexpected end of input
in this line
<?php ... foreach($res as $row) {echo '<input onclick="selectall('.$j.',"flow'.$row['uid'].'","hi'.$row['uid'].'")" type="submit" class="btn btn-primary btn-user btn-block" value="Update" />';} ?>
Output of that line
<input onclick="selectall(5,"flow9C2748C40A24","hi9C2748C40A24")" type="submit" class="btn btn-primary btn-user btn-block" value="Update" />
The problem is here i think
,"flow'.$row['uid'].'","hi'.$row['uid'].'"
because when i remove it, the problem disappear
Appreciate any help !
There are a couple of functions which should possibly help when it comes to formatting strings - namely printf and sprintf (others in this family also exist) - and these allow you to specify placeholders in the string which are substituted with the arguments provided. Using these helps simplify how the strings are escaped
printf(
'<input type="submit" onclick="selectall( \'%1$s\', \'flow%2$s\', \'hi%2$s\' )" value="Update" class="btn btn-primary btn-user btn-block" />',
$j,
$row['uid']
);

Ajax refreshes the whole page instead of a particular part

Net web services. The following code is attached to my master page using a JS. When I run the ajax call, it seems like at the end of success function, it refreshes the whole page. Rather than some particular part. I have tried using both ways, form + input submit, and normal button with click function.
$.ajax({
url: 'service url',
data: { LookupParameter: somevariable },
method: 'POST',
dataType: 'xml',
asynch: false,
cache: false,
success: function (data) {
var xmldata = $(data);
//dom manipulation code
},
error: function (e) {
}
});
Master Page
following code is embedded inside body tag. but not in content placeholder.
<form itemscope itemtype="http://schema.org/LocalBusiness" id="form1" runat="server">
<span class="input-group-addon borderRadiusZero" id="basic-addon1">
<span class="glyphicon glyphicon-question-sign"></span>
</span>
<Input ID="txt_lookup_pincode" type="number" class="form-control" min="111111" max="999999" placeholder="Enter Your Pincode" />
<span class="input-group-btn ">
<button id="LookupServicesa" class="btn btn-primary borderRadiusZero" onClick="HomeCheckDeliverableAreas();" style="height:100%;">Submit</button>
<input id="LookupServices" class="btn btn-primary borderRadiusZero" style="height:100%;" type="submit" value="submitM" />
</span>
The issue may be because of this line
<button id="LookupServicesa" class="btn btn-primary borderRadiusZero" onClick="HomeCheckDeliverableAreas();" style="height:100%;">Submit</button>
The button type is not defined here. In this case the default type that is submit will be applied.
Define the button type as button
<button type = "button" id="LookupServicesa" class="btn btn-primary borderRadiusZero" onClick="HomeCheckDeliverableAreas();" style="height:100%;">Submit</button>
If your JavaScript function with the Ajax call is included in the onclick handler of your button, it should return false to prevent the default action of the button:
<button id="LookupServicesa" class="btn btn-primary borderRadiusZero" onClick="HomeCheckDeliverableAreas(); return false;" style="height:100%;">Submit</button>
You can add to the button the type "button" to suppress the default behavior
<button type="button" id="LookupServicesa" class="btn btn-primary borderRadiusZero" onClick="HomeCheckDeliverableAreas();" style="height:100%;">Submit</button
put the dom elements which you want to refresh after the ajax success in another div which is outside the form and do the manipulations to that div. Hope this helps!

put multiple submit buttons in form..after click on submit that should go to particular URL in ajax

i have two submit buttons in my form one is SUBMIT and another one is SCHEDULE NEXT ROUND..when user click on submit the form values should store in database and redirect to view page..and when user click on schedule next round the values should stored in database and again form will be stay there and user can add details in form..
here is my Submit buttons:
<button type="submit" name="submit" value="submit" class="btn btn-primary" value="submit">Submit</button>
here is my another button:
<button type="submit" name="submit" class="btn btn-primary" value="schedule">Schedule Next Round</button><br></br>
Can anyone help me..
Thanks in advance..
Get the button click by its button name and post value to required page using following method:
$(document).ready(function(){
$("input[name=Button1]").click(function(){
alert("Button1 clicked");
$.post('ajax/test.html', function(data) {
});
});
$("input[name=Button2]").click(function(){
alert("Button2 Clicked");
$.post('ajax/test.html', function(data) {
});
});
})
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<body>
<form method="post">
<input type="submit" name="Button1" value="Button1">
<input type="submit" name="Button2" value="Button2">
</form
</body>
</html>
Use different function for submit and Schedule Next Round.For Sumbit use from submit and for Schedule Next Round use different function.
<button type="submit" name="submit" value="submit" class="btn btn-primary" value="submit">Submit</button>
<button type="button" name="submit" class="btn btn-primary" value="schedule" onclick="ScheduleNextRound();">Schedule Next Round</button><br></br>
function ScheduleNextRound() {
$.ajax({
type: 'POST',
data: YourDataYouWantToSendAsObject,
url: YoutServerSideUrl,
async: false,
success: function (value) {
returnData = value //as you don't want to refresh
},
error: function (jqXHR, textStatus, errorThrown) {
genericError(jqXHR, textStatus, errorThrown);
},
});
}

Javascript functions isn't acting intuitively

My Javascript functions isn't acting the way I would expect it to.
function submitDetailsForm() {
if (this.Attr("value") == "Add") {
alert("Add");
}
alert("Not");
}
<button type="button" name="submit" id="remove" value="Remove" onclick="submitDetailsForm()">Remove</button>
<button type="button" name="submit" id="add" value="Add" onclick="submitDetailsForm()">Add</button>
<button type="button" name="submit" id="edit" value="Edit" onclick="submitDetailsForm()">Edit</button>
if I run this page (there is more code but it's irrelevant to the question), then I use the add button the "add" alert doesn't go of but neither does the "not" alert. I'm not to bothered about the add alert because it could just be failed syntax but in any case surely the not alert should always fire if the function is run. I am certain the function is running because if i move the not alert to above the if statement it will run.
Any help would be much Appreciated.
[Resolved]
I resolved the problem by using the idea of passing the object into the function. i also had forgotten to actually declare that i was using JQuery in the script tag.
Resolved code:
<button type="button" name="submit" id="remove" value="Remove" onclick="submitDetailsForm(this)">Remove</button>
<button type="button" name="submit" id="add" value="Add" onclick="submitDetailsForm(this)">Add</button>
<button type="button" name="submit" id="edit" value="Edit" onclick="submitDetailsForm(this)">Edit</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function submitDetailsForm(obj) {
if ($(obj).attr("value") == "Add") {
alert("Add");
} else {
alert("Not");
}
}
</script>
*
Pass this object in the function
<button type="button" name="submit" id="remove" value="Remove" onclick="submitDetailsForm(this)">Remove</button>
<button type="button" name="submit" id="add" value="Add" onclick="submitDetailsForm(this)">Add</button>
<button type="button" name="submit" id="edit" value="Edit" onclick="submitDetailsForm(this)">Edit</button>
<script>
function submitDetailsForm(obj) {
if (obj.value == "Add") {
alert("Add");
} else {
alert("Not");
}
}
</script>

Categories

Resources